/* ==========================================================================
   PLATAFORMA COP — CONTABILIDADE FACILITADA
   Design System & Styling
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Sora:wght@400;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* --------------------------------------------------------------------------
   TEMA ESCURO (padrão) — os mesmos nomes de token são redefinidos no bloco
   [data-theme="light"] mais abaixo, então nenhum componente precisa saber
   qual tema está ativo.
   -------------------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* Brand Palette */
  --cf-navy-dark: #0a1428;
  --cf-navy: #102850;
  --cf-navy-mid: #183c77;
  --cf-navy-light: #234c91;
  --cf-orange: #ff9933;
  --cf-orange-hover: #e68524;
  --cf-orange-glow: rgba(255, 153, 51, 0.25);

  /* Laranja de TEXTO. O #ff9933 da marca rende só 2,1:1 sobre branco — abaixo
     do mínimo da WCAG. No claro ele é substituído por uma laranja fechada
     (mesma decisão documentada nos tokens do CRM-CF). */
  --orange-ink: #ffaa48;

  /* Neutral Dark Theme */
  --bg-dark: #070d19;
  --bg-surface: #0f1c36;
  --bg-card: #142447;
  --bg-card-hover: #1a2d57;
  --bg-input: #0b152b;
  --border-color: rgba(255, 255, 255, 0.08);
  --border-active: rgba(255, 153, 51, 0.5);

  /* Véus neutros: hover, chips e filetes. No claro eles invertem para azul
     translúcido — por isso nunca use rgba(255,255,255,...) direto. */
  --overlay-weak: rgba(255, 255, 255, 0.05);
  --overlay-soft: rgba(255, 255, 255, 0.08);
  --overlay-strong: rgba(255, 255, 255, 0.14);
  --hairline: rgba(255, 255, 255, 0.05);
  --row-hover: rgba(255, 255, 255, 0.02);
  --scroll-thumb: rgba(255, 255, 255, 0.15);

  /* Typography Colors */
  --text-primary: #f8fafc;
  --text-strong: #ffffff;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-orange: #ffaa48;

  /* Accent Colors */
  --accent-green: #10b981;
  --accent-green-bg: rgba(16, 185, 129, 0.12);
  --accent-blue: #3b82f6;
  --accent-blue-bg: rgba(59, 130, 246, 0.12);
  --accent-purple: #a855f7;
  --accent-purple-bg: rgba(168, 85, 247, 0.12);
  --accent-red: #ef4444;
  --accent-red-bg: rgba(239, 68, 68, 0.12);
  --accent-yellow: #eab308;
  --accent-yellow-bg: rgba(234, 179, 8, 0.12);

  /* Versões de TINTA dos acentos: usadas quando a cor vira texto ou ícone
     pequeno. As de cima são de preenchimento (barra, selo, fundo). */
  --accent-green-ink: #34d399;
  --accent-blue-ink: #60a5fa;
  --accent-purple-ink: #c084fc;

  /* WhatsApp Preview Colors */
  --wa-bg: #0b141a;
  --wa-header: #202c33;
  --wa-bubble-in: #202c33;
  --wa-bubble-out: #005c4b;
  --wa-text: #e9edef;
  --wa-time: #8696a0;
  --wa-check: #53bdeb;


  /* Tinta dos selos (responsável e status). O fundo é a mesma cor a 15%, então
     a tinta precisa de degrau próprio por tema — as claras somem no branco. */
  --badge-copy: #ffaa48;
  --badge-design: #a5b4fc;
  --badge-trafego: #34d399;
  --badge-crm: #f87171;
  --badge-comercial: #60a5fa;
  --badge-gabriel: #c084fc;
  --badge-cria: #cbd5e1;
  --badge-standby: #fcd34d;
  --badge-revisao: #fde047;
  --badge-aprovado: #93c5fd;
  --badge-agendado: #e9d5ff;
  --badge-enviado: #6ee7b7;
  --badge-cancelado: #fca5a5;
  --badge-a-escrever: #ffaa48;

  /* ==========================================================================
     OS TRÊS TIMES — CRM lilás, Copy rosa, Projeto bege

     Pedido do time em 01/09/2026. Cada um tem o PAR: `--time-*` é
     preenchimento (o selo, a barra lateral) e `--time-*-ink` é tinta (texto e
     ícone). Ver *Cor de preenchimento ≠ cor de tinta* — e aqui a armadilha era
     a esperada: bege é claro por natureza e some no tema claro, então a tinta
     dele é um marrom fechado, não o bege do preenchimento.

     Medido sobre a MESCLA do selo (a cor a 15%) com o cartão, nos dois temas.
     Pior caso: rosa 5,99:1 · lilás 6,48:1 · bege 5,05:1.
     ========================================================================== */
  --time-crm: #a78bfa;
  --time-crm-ink: #c4b5fd;
  --time-copy: #ec4899;
  --time-copy-ink: #f9a8d4;
  --time-projeto: #c8a882;
  --time-projeto-ink: #e8d5b7;

  /* Faixa do ciclo ativo */
  --banner-from: var(--cf-navy);
  --banner-to: var(--bg-card);

  /* Menu nativo de <select>. Tokens próprios de propósito: a lista suspensa é
     desenhada pelo sistema FORA do cabeçalho, então não pode herdar os tokens
     re-escopados nele (lá o texto é branco — sobre a lista branca, sumia). */
  --menu-bg: #16294a;
  --menu-fg: #f8fafc;
  --menu-borda: rgba(255, 255, 255, 0.14);
  --menu-hover: rgba(255, 255, 255, 0.09);
  --menu-line: rgba(255, 255, 255, 0.16);

  /* Sobre o azul da marca. Iguais nos dois temas porque o navy não clareia —
     mas continuam sendo token, para nenhuma cor ficar solta. Um controle sobre
     superfície escura precisa de traço, não só de preenchimento: com véu a 10%
     e sem borda ele vira um quadrado quase invisível. */
  --on-navy: #ffffff;
  --on-navy-control: rgba(255, 255, 255, 0.14);
  --on-navy-control-hover: rgba(255, 255, 255, 0.26);
  --on-navy-line: rgba(255, 255, 255, 0.34);
  --on-navy-line-hover: rgba(255, 255, 255, 0.5);

  /* Elevational Shadows & Glassmorphism */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45);
  --glass-bg: rgba(15, 28, 54, 0.75);
  --glass-border: rgba(255, 255, 255, 0.1);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  --transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);

  /* SUPERFÍCIE NEXA — a linguagem do NexaCF (cf-analytics), trazida para o
     Cronograma em 29/09/2026 a pedido do time de copy ("uma estética melhor,
     como o Nexa, iniciando no cronograma").

     É o `.surface-card` deles sem o vidro: canto de 14px, borda fina, brilho
     diagonal de cima, um halo laranja no canto superior direito e a sombra
     longa e baixa. O `backdrop-filter` NÃO veio, e de propósito: lá ele
     desfoca um fundo ambiente que aqui não existe — o desfoque de um fundo
     liso é custo sem desenho, e ele vira o "chão" de todo filho `fixed`
     (armadilha registrada no design.md deles). */
  --sup-raio: 14px;
  --sup-borda: rgba(255, 255, 255, 0.09);
  /* Reflexo em todo cartão; halo só no que merece destaque (oferta, checklist,
     dia de marco). Halo nos ~50 dias do cronograma viraria padrão de fundo, e
     destaque em tudo é destaque em nada. */
  --sup-reflexo: linear-gradient(132deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.015) 22%, transparent 46%);
  --sup-halo: radial-gradient(90% 60% at 102% -8%, rgba(255, 153, 51, 0.08), transparent 70%);
  --sup-sombra: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 22px 48px -28px rgba(0, 0, 0, 0.78);
  /* O chip de ícone (o `h-10 w-10 rounded-xl` tingido deles). */
  --chip-laranja-fundo: rgba(255, 153, 51, 0.14);
  --chip-laranja-borda: rgba(255, 153, 51, 0.28);
  --chip-laranja-tinta: #ffaa48;
}

/* --------------------------------------------------------------------------
   TEMA CLARO
   Base herdada dos tokens do CRM-CF: fundo levemente azulado para o branco
   dos cartões subir sozinho, traço com alvo de contraste (~1,9:1 no filete e
   ~3:1 nos campos, exigência da WCAG 1.4.11) e laranja de texto fechada.
   O cabeçalho NÃO clareia — ver bloco .app-header.
   -------------------------------------------------------------------------- */
:root[data-theme="light"] {
  color-scheme: light;

  --bg-dark: #f3f5f9;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f7f9fc;
  --bg-input: #f1f4f9;
  --border-color: rgba(16, 40, 80, 0.14);
  --border-active: rgba(255, 153, 51, 0.85);

  --orange-ink: #b05611;

  --overlay-weak: rgba(16, 40, 80, 0.045);
  --overlay-soft: rgba(16, 40, 80, 0.06);
  --overlay-strong: rgba(16, 40, 80, 0.11);
  --hairline: rgba(16, 40, 80, 0.09);
  --row-hover: rgba(16, 40, 80, 0.035);
  --scroll-thumb: rgba(16, 40, 80, 0.22);

  --text-primary: #16233d;
  --text-strong: #0d1832;
  --text-secondary: #5a6883;
  --text-muted: #78839a;
  --text-orange: #b05611;

  /* Sombras no claro são muito mais discretas: no escuro elas separam por
     ausência de luz, aqui separariam por sujeira se mantivessem o mesmo peso. */
  --shadow-sm: 0 1px 2px rgba(16, 40, 80, 0.06), 0 1px 3px rgba(16, 40, 80, 0.05);
  --shadow-md: 0 2px 4px -2px rgba(16, 40, 80, 0.08), 0 6px 16px -6px rgba(16, 40, 80, 0.12);
  --shadow-lg: 0 8px 24px -8px rgba(16, 40, 80, 0.16), 0 24px 56px -24px rgba(16, 40, 80, 0.2);

  /* A superfície Nexa no claro: o brilho vira branco sobre branco (some, e é
     o certo), e a sombra perde peso pelo mesmo motivo das de cima. */
  --sup-borda: rgba(16, 40, 80, 0.12);
  --sup-reflexo: linear-gradient(132deg, rgba(255, 255, 255, 0.7) 0%, transparent 40%);
  --sup-halo: radial-gradient(90% 60% at 102% -8%, rgba(255, 153, 51, 0.07), transparent 70%);
  --sup-sombra: 0 1px 2px rgba(16, 40, 80, 0.05), 0 18px 38px -26px rgba(16, 40, 80, 0.3);
  --chip-laranja-fundo: rgba(255, 153, 51, 0.1);
  --chip-laranja-borda: rgba(255, 153, 51, 0.35);
  /* A TINTA DO CHIP É PRÓPRIA no claro, e não o `--orange-ink`. Medido sobre a
     mescla do chip com o fundo da página: `#b05611` rende 4,29:1 a 10% e 4,18:1
     a 14% — clarear o chip não resolve, porque a tinta já está no limite sobre
     o fundo liso. `#9a4a0e` rende 5,35:1 (5,80:1 dentro de cartão), e o número
     da fase é texto de 16px, não "texto grande". */
  --chip-laranja-tinta: #9a4a0e;

  --glass-bg: rgba(255, 255, 255, 0.82);
  --glass-border: rgba(16, 40, 80, 0.1);


  --badge-copy: #a04e0e;
  --badge-design: #4338ca;
  --badge-trafego: #046c50;
  --badge-crm: #b32020;
  --badge-comercial: #1d4ed8;
  --badge-gabriel: #7c3aed;
  --badge-cria: #475569;
  --badge-standby: #8a5a06;
  --badge-revisao: #7a5c05;
  --badge-aprovado: #1d4ed8;
  --badge-agendado: #6d28d9;
  --badge-enviado: #046c50;
  --badge-cancelado: #b32020;
  --badge-a-escrever: #a04e0e;

  --menu-bg: #ffffff;
  --menu-fg: #16233d;
  --menu-borda: rgba(16, 40, 80, 0.14);
  --menu-hover: rgba(16, 40, 80, 0.07);
  --menu-line: rgba(16, 40, 80, 0.18);

  /* Azul suave -> branco: mantém a leitura escura do início ao fim da faixa.
     O tom de partida é o mais escuro em que a laranja de texto ainda rende
     4,5:1 (o nome do ciclo é escrito nela, e cai justamente aqui). */
  --banner-from: #f0f4fc;
  --banner-to: #ffffff;

  --accent-green-bg: rgba(16, 185, 129, 0.13);
  --accent-blue-bg: rgba(59, 130, 246, 0.13);
  --accent-purple-bg: rgba(168, 85, 247, 0.13);
  --accent-red-bg: rgba(239, 68, 68, 0.13);
  --accent-yellow-bg: rgba(234, 179, 8, 0.16);

  /* As tintas dos acentos fecham para render sobre superfície branca:
     as versões claras do tema escuro rendem ~1,7:1 aqui. */
  --accent-green-ink: #047857;
  --accent-blue-ink: #1d4ed8;

  /* As tintas dos times, no claro. O preenchimento não muda — ele entra a 15%
     e funciona nos dois. O bege vira marrom: #c8a882 sobre branco rende 1,9:1. */
  --time-crm-ink: #5b21b6;
  --time-copy-ink: #9d174d;
  --time-projeto-ink: #7c5c2e;
  --accent-purple-ink: #7c3aed;
}

/* O cabeçalho mantém o azul da marca nos dois temas — é o que sustenta o
   wordmark branco e espelha a barra lateral escura do CRM-CF. Redefinir os
   tokens aqui re-escopa toda a subárvore sem reescrever seletor nenhum. */
.app-header {
  --bg-surface: rgba(255, 255, 255, 0.1);
  --bg-input: rgba(255, 255, 255, 0.08);
  --text-primary: #f8fafc;
  --text-strong: #ffffff;
  --text-secondary: #a8b6cc;
  --text-muted: #8fa0ba;
  --orange-ink: #ffaa48;
  --border-color: rgba(255, 255, 255, 0.14);
  --overlay-weak: rgba(255, 255, 255, 0.06);
  --overlay-soft: rgba(255, 255, 255, 0.1);
  --overlay-strong: rgba(255, 255, 255, 0.18);
}

:root[data-theme="light"] .app-header {
  --glass-bg: rgba(14, 34, 68, 0.97);
  --glass-border: rgba(255, 255, 255, 0.12);
}

/* Base Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Montserrat', sans-serif;
  background-color: var(--bg-dark);
  color: var(--text-primary);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-dark);
}
::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 153, 51, 0.4);
}

/* Header & Navigation */
.app-header {
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 0 24px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand-section {
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

/* Wordmark oficial (logo-nexa-robocopy.png, 2609x200).
   Ao contrário do anterior, este arquivo não tem margem transparente: a altura
   daqui é a altura visível. E ele é bem mais largo — 13:1 contra 7,6:1 —,
   porque "ROBOCOPY" é uma palavra maior. Daí 24px de altura em vez de 31: a
   313px de largura ele ainda divide bem a barra com o seletor de ciclo.
   O max-width precisa ser MAIOR que a largura natural; com object-fit: contain,
   um limite menor encolheria o wordmark inteiro em vez de cortá-lo. */
.brand-logo-img {
  height: 24px;
  width: auto;
  max-width: 330px;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(255, 153, 51, 0.28));
  transition: var(--transition);
}

/* Abaixo disso a barra fica disputada entre wordmark, seletor de ciclo e os
   cinco controles da direita. O wordmark cede primeiro. */
@media (max-width: 1180px) {
  .brand-logo-img {
    height: 20px;
    max-width: 270px;
  }
}

.brand-logo:hover .brand-logo-img {
  transform: scale(1.04);
  filter: drop-shadow(0 0 16px rgba(255, 153, 51, 0.5));
}

.brand-tagline {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 500;
  padding-left: 12px;
  border-left: 1px solid var(--border-color);
  line-height: 1.3;
  max-width: 140px;
}

@media (max-width: 1400px) {
  .brand-tagline {
    display: none;
  }
}

/* A faixa de "dados fictícios do Analytics" foi removida em 01/09/2026, junto
   com o CSS dela. A aba Analytics não existe mais — virou "Desempenho", com
   registro manual —, e desde a integração com o BigQuery a ferramenta mostra
   número apurado. Manter a regra viva era pior que inútil: o próximo a ler o
   arquivo concluiria que ainda há tela com número inventado por aqui. */


.metric-empty {
  color: var(--text-muted);
  font-style: italic;
}

.btn-icon-only {
  padding: 8px;
  width: 34px;
  height: 34px;
  justify-content: center;
}

.btn-icon-only svg {
  width: 15px;
  height: 15px;
}

/* Prévia do cronograma dentro do modal de novo ciclo */
.schedule-preview {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.schedule-hint {
  font-size: 11.5px;
  color: var(--text-muted);
}

.schedule-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-secondary);
}

.schedule-row strong {
  color: var(--text-primary);
  font-weight: 700;
}

.schedule-row.total {
  border-top: 1px solid var(--border-color);
  padding-top: 7px;
  margin-top: 2px;
  color: var(--orange-ink);
}

.schedule-row.total span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.schedule-row.total svg {
  width: 13px;
  height: 13px;
}

.schedule-row.total strong {
  color: var(--orange-ink);
}

/* "Lançamentos ativos" em cima, o ciclo aberto embaixo, o foguete ocupando as
   duas linhas à esquerda. Retorno do time de copy, 29/09/2026. */
.cycle-selector-container {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
  align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  padding: 5px 12px;
  border-radius: var(--radius-md);
}

/* `--text-secondary`, não `--text-muted`: o rótulo é o nome da lista, e é a
   primeira coisa que diz o que o campo faz. */
.cycle-selector-container label {
  grid-column: 2;
  font-size: 9.5px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-secondary);
  font-weight: 700;
  cursor: pointer;
}

.cycle-select {
  background: transparent;
  border: none;
  color: var(--orange-ink);
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 13px;
  outline: none;
  cursor: pointer;
}

/* Vale para TODOS os <select> da aplicação: a lista suspensa é do sistema e
   não herda o contexto visual de onde o campo está. */
.cycle-select option,
.filter-select option,
.input-field option {
  background-color: var(--menu-bg);
  color: var(--menu-fg);
  font-weight: 600;
}

/* Nav Tabs */
.nav-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--transition);
}

.nav-tab:hover {
  color: var(--text-strong);
  background: var(--overlay-weak);
}

.nav-tab.active {
  color: var(--text-strong);
  background: var(--cf-navy-mid);
  border-color: rgba(255, 153, 51, 0.3);
  box-shadow: 0 4px 12px rgba(16, 40, 80, 0.4);
}

.nav-tab.active i,
.nav-tab.active svg {
  color: var(--orange-ink);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-primary {
  background: linear-gradient(135deg, var(--cf-orange), #f57c00);
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 4px 14px var(--cf-orange-glow);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255, 153, 51, 0.4);
}

.btn-secondary {
  background: var(--overlay-soft);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  padding: 9px 16px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: var(--transition);
}

.btn-secondary:hover {
  background: var(--overlay-strong);
  color: var(--text-strong);
}

/* Main Content Area */
.app-container {
  flex: 1;
  padding: 24px;
  max-width: 1720px;
  margin: 0 auto;
  width: 100%;
}

.tab-content {
  display: none;
  animation: fadeIn 0.25s ease-out;
}

.tab-content.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Cycle Banner Component */
/* O degradê precisa terminar do mesmo "lado" em que começa: no escuro ia de
   navy a navy-card (ok), mas no claro ia de navy a BRANCO — qualquer cor de
   texto ficava ilegível numa das pontas. Agora cada tema tem o seu par. */
.cycle-banner {
  background: linear-gradient(135deg, var(--banner-from), var(--banner-to));
  border-left: 3px solid var(--cf-orange);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}

.cycle-banner::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 300px; height: 100%;
  background: radial-gradient(circle at right center, rgba(255, 153, 51, 0.12), transparent 70%);
  pointer-events: none;
}

.banner-info h2 {
  font-family: 'Sora', sans-serif;
  font-size: 20px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 12px;
}

.banner-info p {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.banner-stats {
  display: flex;
  gap: 24px;
}

.stat-box {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 700;
}

.stat-value {
  font-family: 'Sora', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--orange-ink);
}

/* KANBAN BOARD STYLING */
.kanban-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 16px;
  flex-wrap: wrap;
}

.search-filter-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.search-input-wrapper {
  position: relative;
  flex: 1;
  max-width: 340px;
}

/* O Lucide troca o <i data-lucide> por um <svg>, então o seletor precisa
   cobrir os dois — só com `i` a lupa perdia o posicionamento e empurrava
   o campo de busca para fora da linha dos filtros. */
.search-input-wrapper i,
.search-input-wrapper svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  pointer-events: none;
}

/* Busca e filtros compartilham altura, fonte e caixa: `input` e `select`
   calculam altura de formas diferentes, e sem fixar isso os três campos
   ficavam com alturas distintas na mesma linha. */
.search-input,
.filter-select {
  height: 38px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.2;
}

.search-input {
  width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0 12px 0 36px;
  color: var(--text-strong);
  outline: none;
  transition: var(--transition);
}

.search-input:focus {
  border-color: var(--cf-orange);
  box-shadow: 0 0 0 3px var(--cf-orange-glow);
}

.filter-select {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0 10px;
  color: var(--text-primary);
  outline: none;
  cursor: pointer;
  transition: var(--transition);
}

.filter-select:hover {
  border-color: var(--border-active);
}

.filter-select:focus {
  border-color: var(--cf-orange);
  box-shadow: 0 0 0 3px var(--cf-orange-glow);
}

.filter-select option {
  background: var(--bg-surface);
}

.kanban-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(280px, 1fr));
  gap: 16px;
  align-items: start;
  overflow-x: auto;
  padding-bottom: 16px;
}

.kanban-col {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  max-height: 80vh;
}

.col-header {
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.col-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.col-icon-badge {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.fase-0 .col-icon-badge { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
.fase-1 .col-icon-badge { background: rgba(255, 153, 51, 0.15); color: #ffaa48; }
.fase-2 .col-icon-badge { background: rgba(239, 68, 68, 0.15); color: #f87171; }
.fase-3 .col-icon-badge { background: rgba(16, 185, 129, 0.15); color: #34d399; }
.fase-4 .col-icon-badge { background: rgba(168, 85, 247, 0.15); color: #c084fc; }

.col-title h3 {
  font-family: 'Sora', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-strong);
}

.col-title p {
  font-size: 11px;
  color: var(--text-muted);
}

.task-count {
  background: var(--overlay-soft);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.col-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  flex: 1;
}

.kanban-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
}

.kanban-card:hover {
  border-color: rgba(255, 153, 51, 0.4);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.card-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.card-stage-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--overlay-soft);
  color: var(--text-secondary);
}

.card-actions-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-star {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  transition: var(--transition);
}

.btn-star:hover, .btn-star.active {
  color: #f59e0b;
  transform: scale(1.15);
}

.card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
  margin-bottom: 8px;
  line-height: 1.4;
}

.card-desc {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Owner Badges */
.badge-owner-copy { background: rgba(255, 153, 51, 0.15); color: var(--badge-copy); }
.badge-owner-design { background: rgba(99, 102, 241, 0.15); color: var(--badge-design); }
.badge-owner-trafego { background: rgba(16, 185, 129, 0.15); color: var(--badge-trafego); }
.badge-owner-crm { background: rgba(239, 68, 68, 0.15); color: var(--badge-crm); }
.badge-owner-comercial { background: rgba(59, 130, 246, 0.15); color: var(--badge-comercial); }
.badge-owner-gabriel { background: rgba(168, 85, 247, 0.15); color: var(--badge-gabriel); }

/* Status Badges — a legenda do manual, incluindo o Stand by (⌛) */
.badge-status-cria { background: rgba(148, 163, 184, 0.15); color: var(--badge-cria); }
.badge-status-standby { background: rgba(234, 179, 8, 0.12); color: var(--badge-standby); }
.badge-status-revisao { background: rgba(234, 179, 8, 0.15); color: var(--badge-revisao); }
.badge-status-aprovado { background: rgba(59, 130, 246, 0.15); color: var(--badge-aprovado); }
.badge-status-agendado { background: rgba(168, 85, 247, 0.15); color: var(--badge-agendado); }
.badge-status-enviado { background: rgba(16, 185, 129, 0.2); color: var(--badge-enviado); }
.badge-status-cancelado { background: rgba(239, 68, 68, 0.14); color: var(--badge-cancelado); }

/* --------------------------------------------------------------------------
   ACERVO IMPORTADO
   -------------------------------------------------------------------------- */
.archive-import {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: var(--bg-surface);
  border: 1px dashed var(--border-active);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-bottom: 10px;
}

.archive-import-info {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  min-width: 280px;
}

.archive-import-info > svg {
  width: 22px;
  height: 22px;
  color: var(--orange-ink);
  flex-shrink: 0;
}

.archive-import-info div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.archive-import-info strong {
  font-family: 'Sora', sans-serif;
  font-size: 14px;
}

.archive-import-info span {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.archive-import-info code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  background: var(--bg-input);
  padding: 1px 4px;
  border-radius: 3px;
}

.archive-import-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.archive-summary {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.archive-stat {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.archive-stat span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 700;
}

.archive-stat strong {
  font-family: 'Sora', sans-serif;
  font-size: 17px;
  color: var(--orange-ink);
}

.archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 16px;
}

.archive-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.archive-card:hover {
  border-color: var(--border-active);
  box-shadow: var(--shadow-md);
}

.archive-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.archive-card-head h4 {
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.archive-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 10.5px;
  color: var(--text-muted);
  font-weight: 600;
}

.archive-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.archive-meta svg {
  width: 11px;
  height: 11px;
}

.archive-origem {
  color: var(--orange-ink);
}

.archive-body {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  white-space: pre-wrap;
  max-height: 150px;
  overflow-y: auto;
  word-break: break-word;
}

.archive-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
}

.archive-actions button {
  flex: 1;
  justify-content: center;
  font-size: 11px;
  padding: 7px 10px;
}

.archive-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 24px;
  color: var(--text-muted);
}

.archive-empty > svg {
  width: 40px;
  height: 40px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.archive-empty h3 {
  font-family: 'Sora', sans-serif;
  font-size: 15px;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.archive-empty p {
  font-size: 12.5px;
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.6;
}

.archive-more {
  grid-column: 1 / -1;
  text-align: center;
  padding: 16px;
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* --------------------------------------------------------------------------
   CHECKLIST DO DIA
   -------------------------------------------------------------------------- */
.today-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.today-group {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}

.today-group.late {
  border-color: rgba(239, 68, 68, 0.4);
  background: linear-gradient(var(--accent-red-bg), var(--accent-red-bg)), var(--bg-surface);
}

.today-group h4 {
  font-family: 'Sora', sans-serif;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
}

.today-group.late h4 {
  color: var(--badge-crm);
}

.today-group h4 svg {
  width: 14px;
  height: 14px;
}

.today-count {
  margin-left: auto;
  background: var(--overlay-soft);
  color: var(--text-primary);
  border-radius: var(--radius-full);
  padding: 1px 8px;
  font-size: 11px;
}

.today-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--cf-orange);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  margin-bottom: 7px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: var(--transition);
}

.today-item:hover {
  background: var(--bg-card-hover);
  transform: translateX(2px);
}

.today-item.status-enviado {
  border-left-color: var(--accent-green);
  opacity: 0.65;
}

.today-item.status-standby {
  border-left-color: var(--text-muted);
  opacity: 0.7;
}

.today-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--orange-ink);
  min-width: 38px;
}

.today-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}

.today-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-meta {
  font-size: 10px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-empty {
  font-size: 11.5px;
  color: var(--text-muted);
  padding: 8px 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.today-empty svg {
  width: 14px;
  height: 14px;
}

/* O atalho para o GPT externo do produto saiu em 31/08/2026, com a entrada dos
   copilotos: o `.banner-gpt-link` foi removido daqui e do app.js. */
.banner-warn svg {
  width: 13px;
  height: 13px;
}

.banner-warn {
  color: var(--orange-ink);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Marcação 📲 do manual: a peça também sai por SMS */
.chip-sms {
  background: var(--overlay-strong);
  color: var(--text-secondary);
  font-size: 9px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: var(--radius-full);
  margin-left: 4px;
  letter-spacing: 0.03em;
}

/* Aviso dentro do modal quando a Aula Magna não cai na segunda-feira */
.schedule-warn {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--border-color);
  font-size: 11px;
  line-height: 1.45;
  color: var(--orange-ink);
}

.schedule-warn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid var(--hairline);
  font-size: 11px;
}

.card-channel {
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.card-channel.wa { color: #25d366; }
.card-channel.email { color: #3b82f6; }
.card-channel.sms { color: #f59e0b; }

.btn-open-editor {
  background: rgba(255, 153, 51, 0.1);
  color: var(--orange-ink);
  border: 1px solid rgba(255, 153, 51, 0.2);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}

.btn-open-editor:hover {
  background: var(--cf-orange);
  color: var(--text-strong);
}

/* EDITOR & WHATSAPP SANDBOX TAB */
.sandbox-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
  align-items: start;
}

@media (max-width: 1024px) {
  .sandbox-layout {
    grid-template-columns: 1fr;
  }
}

.editor-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: var(--shadow-md);
}

.panel-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.panel-title {
  font-family: 'Sora', sans-serif;
  font-size: 16px;
  font-weight: 700;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.input-field {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  color: var(--text-strong);
  font-size: 13px;
  outline: none;
  font-family: inherit;
  transition: var(--transition);
}

.input-field:focus {
  border-color: var(--cf-orange);
  box-shadow: 0 0 0 3px var(--cf-orange-glow);
}

.editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  background: var(--bg-input);
  padding: 8px 12px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  border: 1px solid var(--border-color);
  border-bottom: none;
}

.tool-btn {
  background: var(--overlay-soft);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.tool-btn:hover {
  background: var(--cf-navy-mid);
  color: var(--text-strong);
  border-color: var(--cf-orange);
}

.editor-textarea {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: 14px;
  color: var(--text-strong);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.6;
  min-height: 280px;
  resize: vertical;
  outline: none;
  transition: var(--transition);
}

.editor-textarea:focus {
  border-color: var(--cf-orange);
}

.token-pills-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.token-pill {
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: #60a5fa;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
}

.token-pill:hover {
  background: #3b82f6;
  color: var(--text-strong);
}

/* --------------------------------------------------------------------------
   MOCKUP DO WHATSAPP
   Este bloco NÃO segue o tema da aplicação de propósito: ele imita o celular
   do lead, e o lead pode estar em qualquer um dos dois temas do WhatsApp.
   Trocar o tema do Nexa Copy não pode mudar como a mensagem "vai chegar" —
   por isso o mockup tem o seu próprio alternador (data-wa-theme).
   As cores abaixo são as do WhatsApp real, não da paleta Nexa.

   NÃO "corrija" o contraste daqui. O link (#53bdeb sobre o balão verde) rende
   3,7:1 e a hora rende 2,6:1 — abaixo da WCAG, mas é exatamente o que o lead
   enxerga no aparelho dele. Ajustar esses valores deixaria o preview mais
   bonito e mentiroso, que é o oposto do motivo pelo qual ele existe.
   -------------------------------------------------------------------------- */
.phone-frame {
  --wa-canvas: #0b141a;
  --wa-bezel: #1e293b;
  --wa-chrome: #202c33;
  --wa-chrome-fg: #e9edef;
  --wa-chrome-icon: #aebac1;
  --wa-chrome-line: rgba(255, 255, 255, 0.05);
  --wa-doodle: #64748b;
  --wa-doodle-opacity: 0.12;
  --wa-out: #005c4b;
  --wa-out-fg: #e9edef;
  --wa-meta-fg: #8696a0;
  --wa-check-fg: #53bdeb;
  --wa-link-fg: #53bdeb;
  --wa-mono-bg: rgba(0, 0, 0, 0.3);
  --wa-media-bg: #111b21;
  --wa-online-fg: #00a884;
  --wa-home-pill: #475569;
}

.phone-frame[data-wa-theme="light"] {
  --wa-canvas: #efeae2;
  --wa-bezel: #cbd5e1;
  --wa-chrome: #f0f2f5;
  --wa-chrome-fg: #111b21;
  --wa-chrome-icon: #54656f;
  --wa-chrome-line: rgba(0, 0, 0, 0.08);
  --wa-doodle: #0f2419;
  --wa-doodle-opacity: 0.07;
  --wa-out: #d9fdd3;
  --wa-out-fg: #111b21;
  --wa-meta-fg: #667781;
  --wa-check-fg: #53bdeb;
  --wa-link-fg: #027eb5;
  --wa-mono-bg: rgba(0, 0, 0, 0.07);
  --wa-media-bg: #e7e0d8;
  --wa-online-fg: #667781;
  --wa-home-pill: #94a3b8;
}

/* Alternador de tema do celular */
.phone-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 11px;
  color: var(--text-muted);
}

.wa-theme-switch {
  display: inline-flex;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  padding: 3px;
  gap: 2px;
}

.wa-theme-switch button {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: var(--transition);
}

.wa-theme-switch button svg {
  width: 12px;
  height: 12px;
}

.wa-theme-switch button:hover {
  color: var(--text-primary);
}

.wa-theme-switch button.active {
  background: var(--cf-orange);
  color: #1a1205;
}

/* WHATSAPP PHONE MOCKUP (MODERN SMARTPHONE FRAME — CRM-CF MODEL) */
.phone-mockup-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: sticky;
  top: 90px;
}

.phone-frame {
  width: 380px;
  background: var(--wa-canvas);
  border: 10px solid var(--wa-bezel);
  border-radius: 44px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.12);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 680px;
  position: relative;
}

/* Phone Status Bar (Time, Dynamic Island, Wifi, 5G, Battery) */
.phone-status-bar {
  background: var(--wa-chrome);
  height: 36px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  color: var(--wa-chrome-fg);
  position: relative;
  z-index: 20;
}

.dynamic-island {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 20px;
  background: #000;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  z-index: 15;
  box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.1);
}

.camera-lens {
  width: 9px;
  height: 9px;
  background: #0d1117;
  border-radius: 50%;
  border: 1px solid #334155;
}

.speaker-grille {
  width: 34px;
  height: 3px;
  background: #1e293b;
  border-radius: 2px;
}

.phone-status-icons {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  z-index: 20;
}

/* Phone Header (WhatsApp Official Bar) */
.phone-header {
  background: var(--wa-chrome);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--wa-chrome-line);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 9;
}

.wa-back-btn {
  color: var(--wa-chrome-icon);
  font-size: 14px;
  cursor: pointer;
}

.wa-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cf-orange), #ff6b00);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: white;
  font-size: 13px;
  position: relative;
}

.wa-avatar::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 10px; height: 10px;
  background: #00a884;
  border: 2px solid var(--wa-chrome);
  border-radius: 50%;
}

.wa-user-info {
  flex: 1;
}

.wa-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--wa-chrome-fg);
  line-height: 1.2;
}

.wa-status {
  font-size: 10px;
  color: var(--wa-online-fg);
  font-weight: 500;
}

.wa-header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--wa-chrome-icon);
  font-size: 14px;
}

/* WhatsApp Chat Body with Percent-Encoded Vector Doodle Texture (from CRM-CF) */
.wa-body {
  flex: 1;
  /* Flex item precisa poder encolher abaixo do conteúdo para o filho rolar */
  min-height: 0;
  background-color: var(--wa-canvas);
  display: flex;
  flex-direction: column;
  /* O papel de parede é desenhado aqui e não acompanha a conversa */
  overflow: hidden;
  position: relative;
}

/*
  A conversa rola aqui dentro.

  A bolha desce até o rodapé por `margin-top: auto` no primeiro filho, e NÃO
  por `justify-content: flex-end` no container. Era esse o defeito da copy
  longa: com justify-content, o que não cabe transborda para CIMA, e o que
  passa do início do fluxo é inalcançável pela rolagem. Medido no aparelho de
  680px com uma mensagem de 3054px: rolagem máxima 0 e o começo do texto
  2522px acima da área visível — "o celular não scrolla".
*/
.wa-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--wa-time) transparent;
}
.wa-scroll > *:first-child {
  margin-top: auto;
}

/* Barra de rolagem do aparelho, não da aplicação: token --wa-* para acompanhar
   o tema do WhatsApp escolhido no alternador, e não o tema da ferramenta. */
.wa-scroll::-webkit-scrollbar {
  width: 5px;
}
.wa-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.wa-scroll::-webkit-scrollbar-thumb {
  background: var(--wa-time);
  border-radius: 3px;
}

/* WhatsApp Doodle Overlay (CRM-CF Vector Pattern - Percent Encoded SVG) */
.wa-body::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-color: var(--wa-doodle);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(24 30) rotate(-12) scale(1.15)' opacity='.9'%3E%3Cpath d='M4 2h9l5 5v16H4z'/%3E%3Cpath d='M13 2v6h5'/%3E%3Cpath d='M7 13h9'/%3E%3Cpath d='M7 17h6'/%3E%3C/g%3E%3Cg transform='translate(140 18) rotate(9)' opacity='.75'%3E%3Cpath d='M4 2h16v20H4z'/%3E%3Cpath d='M7 6h10v4H7z'/%3E%3Cpath d='M8 14h1M12 14h1M16 14h1M8 18h1M12 18h1M16 18h1'/%3E%3C/g%3E%3Cg transform='translate(250 40) rotate(-6) scale(1.25)' opacity='.85'%3E%3Cpath d='M4 20h16'/%3E%3Cpath d='M7 20v-7'/%3E%3Cpath d='M12 20v-12'/%3E%3Cpath d='M17 20v-5'/%3E%3C/g%3E%3Cg transform='translate(338 26) rotate(14) scale(.95)' opacity='.7'%3E%3Cpath d='M3 5h18v16H3z'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M8 3v4'/%3E%3Cpath d='M16 3v4'/%3E%3Cpath d='M8 14h2'/%3E%3Cpath d='M14 14h2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  mask-size: 320px 320px;
  mask-repeat: repeat;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(24 30) rotate(-12) scale(1.15)' opacity='.9'%3E%3Cpath d='M4 2h9l5 5v16H4z'/%3E%3Cpath d='M13 2v6h5'/%3E%3Cpath d='M7 13h9'/%3E%3Cpath d='M7 17h6'/%3E%3C/g%3E%3Cg transform='translate(140 18) rotate(9)' opacity='.75'%3E%3Cpath d='M4 2h16v20H4z'/%3E%3Cpath d='M7 6h10v4H7z'/%3E%3Cpath d='M8 14h1M12 14h1M16 14h1M8 18h1M12 18h1M16 18h1'/%3E%3C/g%3E%3Cg transform='translate(250 40) rotate(-6) scale(1.25)' opacity='.85'%3E%3Cpath d='M4 20h16'/%3E%3Cpath d='M7 20v-7'/%3E%3Cpath d='M12 20v-12'/%3E%3Cpath d='M17 20v-5'/%3E%3C/g%3E%3Cg transform='translate(338 26) rotate(14) scale(.95)' opacity='.7'%3E%3Cpath d='M3 5h18v16H3z'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M8 3v4'/%3E%3Cpath d='M16 3v4'/%3E%3Cpath d='M8 14h2'/%3E%3Cpath d='M14 14h2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-size: 320px 320px;
  -webkit-mask-repeat: repeat;
  opacity: var(--wa-doodle-opacity);
}

/* WhatsApp Speech Bubble with Rabicho (Tail) */
.wa-bubble-out {
  align-self: flex-end;
  /*
     `flex: none` para o balão NUNCA ser comprimido. Ele é item de um flex
     column com `overflow-y: auto`: se algum dia encolher, o conteúdo é cortado
     em vez de transbordar, e sem transbordo não aparece rolagem — a mensagem
     longa some sem sinal nenhum.

     Hoje o encolhimento não acontece (`min-height: auto` já protege), então isto
     é garantia e não correção de defeito observado. Fica porque o custo é zero e
     o modo de falhar é silencioso.
  */
  flex: none;
  max-width: 88%;
  background: var(--wa-out);
  color: var(--wa-out-fg);
  border-radius: 8px 0px 8px 8px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.45;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  position: relative;
  word-break: break-word;
  z-index: 2;
}

/* As quebras de linha da copy são preservadas só no texto — se o pre-wrap
   ficasse no balão, a indentação do próprio HTML viraria linha em branco */
#waBubbleText {
  white-space: pre-wrap;
}

/* Speech Bubble Rabicho Tail (from CRM-CF tokens.css) */
.wa-bubble-out::after {
  content: "";
  position: absolute;
  top: 0;
  right: -8px;
  width: 9px;
  height: 14px;
  background-color: var(--wa-out);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* Link e monoespaçado dentro do balão (renderizados como no WhatsApp) */
.wa-link {
  color: var(--wa-link-fg);
  text-decoration: underline;
  word-break: break-all;
}

.wa-mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  background: var(--wa-mono-bg);
  padding: 2px 4px;
  border-radius: 3px;
  display: inline-block;
}

/* Faixa de validação de formatação do editor */
.wa-validator {
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  font-size: 11.5px;
  line-height: 1.45;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid transparent;
}

.wa-validator.ok {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.25);
  color: var(--accent-green-ink);
}

.wa-validator.alert {
  background: rgba(255, 153, 51, 0.09);
  border-color: rgba(255, 153, 51, 0.32);
  color: var(--orange-ink);
}

.wa-validator .validator-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wa-validator .validator-msg {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.wa-validator .validator-msg svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}

.wa-validator .validator-count {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.wa-validator .validator-count svg {
  width: 13px;
  height: 13px;
}

.wa-media-preview {
  margin-bottom: 8px;
  border-radius: 6px;
  overflow: hidden;
  max-height: 180px;
  background: var(--wa-media-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wa-media-preview img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   O LUGAR DA IMAGEM QUANDO ELA AINDA NÃO FOI ESCOLHIDA
   Reservado e nomeado, em vez de preenchido com foto emprestada: o mockup diz
   o que falta. Fica dentro do mockup, então usa os tokens --wa-*, que são do
   aparelho do lead e não seguem o tema da aplicação.

   ⚠️ A regra "não corrija o contraste de dentro do mockup" não vale para esta
   linha, e a diferença importa: ela não é copy que o lead recebe, é um aviso
   da ferramenta ocupando o lugar da imagem. Por isso a tinta é a do TEXTO do
   balão (--wa-out-fg), não a da hora (--wa-meta-fg, 2,6:1 de propósito).
   -------------------------------------------------------------------------- */
.wa-media-vazia {
  min-height: 92px;
  padding: 14px 12px;
  text-align: center;
  font-size: 11px;
  line-height: 1.45;
  color: var(--wa-out-fg);
  opacity: 0.82;
  border: 1px dashed var(--wa-meta-fg);
  border-radius: 6px;
}

.wa-bubble-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  font-size: 10px;
  color: var(--wa-meta-fg);
  margin-top: 4px;
}

.wa-bubble-meta i,
.wa-bubble-meta svg {
  color: var(--wa-check-fg);
  font-size: 12px;
}

/* Phone Home Indicator Bar */
.phone-home-bar {
  height: 16px;
  background: #0b141a;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-bar-pill {
  width: 120px;
  height: 4px;
  background: var(--wa-home-pill);
  border-radius: 2px;
}

/* GOLDEN CASES TAB */
.golden-cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

.golden-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.golden-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: var(--cf-orange);
}

.golden-card:hover {
  border-color: var(--cf-orange);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.golden-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.golden-badge {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  gap: 4px;
}

.golden-metrics-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  background: var(--bg-input);
  padding: 10px;
  border-radius: var(--radius-md);
  text-align: center;
}

.metric-pill h4 {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.metric-pill p {
  font-family: 'Sora', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-green);
}

.golden-copy-body {
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-card);
  padding: 12px;
  border-radius: var(--radius-md);
  white-space: pre-wrap;
  max-height: 140px;
  overflow-y: auto;
  font-family: 'JetBrains Mono', monospace;
}

/* METRICS ANALYTICS TAB */
.metrics-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

@media (max-width: 900px) {
  .metrics-overview-grid { grid-template-columns: repeat(2, 1fr); }
}

.kpi-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.kpi-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.kpi-data h3 {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.kpi-data p {
  font-family: 'Sora', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--text-strong);
}

.metrics-table-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-md);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
}

.data-table th, .data-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  font-size: 13px;
}

.data-table th {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
}

.data-table tr:hover td {
  background: var(--row-hover);
}

/* TOAST NOTIFICATIONS */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.toast {
  background: var(--bg-card);
  border: 1px solid var(--cf-orange);
  color: var(--text-strong);
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-lg);
  animation: slideIn 0.25s ease-out;
}

@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* MODAL DIALOG */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 13, 25, 0.85);
  backdrop-filter: blur(8px);
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: var(--transition);
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/*
  A altura máxima e o overflow são o conserto do que o Ícaro encontrou: "na tela
  de criar novo ciclo o scroll down não funcionou, teve que tirar o zoom".

  O .modal-overlay centraliza com flex e o cartão não tinha limite de altura:
  num modal mais alto que a janela, as pontas ficavam fora da tela e a rolagem
  da página não alcançava — o overlay é `position: fixed`. Quem rola agora é o
  cartão.
*/
.modal-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 540px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 28px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-header h3 {
  font-family: 'Sora', sans-serif;
  font-size: 18px;
  font-weight: 800;
}

.btn-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   ARRASTAR CARTÃO NO KANBAN
   -------------------------------------------------------------------------- */
.kanban-card[draggable="true"] {
  cursor: grab;
}

.kanban-card.dragging {
  opacity: 0.45;
  cursor: grabbing;
  transform: rotate(1.5deg);
}

.kanban-col.drop-target .col-body {
  background: var(--cf-orange-glow);
  outline: 2px dashed var(--cf-orange);
  outline-offset: -4px;
  border-radius: var(--radius-md);
}

/* --------------------------------------------------------------------------
   BARRAS DE PROGRESSO
   Empilhada por status: mostra quanto está pronto E onde o trabalho parou.
   As cores são as mesmas dos selos de status, para o olho ligar as duas
   leituras sem legenda extra.
   -------------------------------------------------------------------------- */
.progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}

.progress-track {
  display: flex;
  height: 8px;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--overlay-soft);
}

.progress-wrap.compacto .progress-track {
  height: 6px;
}

.progress-seg {
  height: 100%;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.seg-cria { background: var(--badge-cria); }
.seg-standby { background: var(--badge-standby); }
.seg-revisao { background: var(--badge-revisao); }
.seg-aprovado { background: var(--badge-aprovado); }
.seg-agendado { background: var(--badge-agendado); }
.seg-enviado { background: var(--accent-green); }

.progress-legend {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
}

.progress-legend strong {
  color: var(--text-primary);
}

.progress-pct {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  color: var(--orange-ink);
}

.progress-wrap.compacto .progress-legend {
  font-size: 10px;
}

.progress-empty {
  font-size: 10.5px;
  color: var(--text-muted);
  font-style: italic;
}

.col-progress {
  padding: 0 14px 12px;
}

.stat-box.stat-progress {
  align-items: stretch;
  min-width: 210px;
}

.stat-box.stat-progress .stat-label {
  margin-bottom: 6px;
}

/* --------------------------------------------------------------------------
   FAIXA DE AVISO NO TOPO DE UMA ABA

   A faixa de aviso e a nota de métricas saíram em 22/09/2026: as duas
   explicavam o estado da ferramenta em vez de apoiar uma decisão, e a regra
   que elas diziam já está no subtítulo da aba e no cartão do rascunho.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   DESEMPENHO — métricas digitadas pelo time
   -------------------------------------------------------------------------- */
.metric-input {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 6px 9px;
  color: var(--text-strong);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  outline: none;
  transition: var(--transition);
}

.metric-input:hover {
  border-color: var(--border-active);
}

.metric-input:focus {
  border-color: var(--cf-orange);
  box-shadow: 0 0 0 3px var(--cf-orange-glow);
}

.metric-input::placeholder {
  color: var(--text-muted);
}

.metrics-table-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.metrics-coverage {
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 600;
}

/* Comparativo entre ciclos */
.compare-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-md);
}

.compare-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.compare-head h3 {
  font-family: 'Sora', sans-serif;
  font-size: 16px;
  font-weight: 800;
}

.compare-head p {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 2px;
  max-width: 560px;
}

.compare-table td,
.compare-table th {
  white-space: nowrap;
}

.compare-active {
  background: var(--overlay-weak);
}

.compare-tag {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  background: rgba(255, 153, 51, 0.18);
  color: var(--orange-ink);
  margin-left: 6px;
}

.compare-note {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 10px;
  line-height: 1.5;
}

.compare-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-muted);
  padding: 16px 0;
}

.compare-empty svg {
  width: 16px;
  height: 16px;
}

.banner-sorteio {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--orange-ink);
  font-weight: 700;
}

.banner-sorteio svg {
  width: 13px;
  height: 13px;
}

/* --------------------------------------------------------------------------
   AGENDA — a visão de quem agenda os disparos
   -------------------------------------------------------------------------- */
.agenda-dia {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  margin-bottom: 14px;
  overflow: hidden;
}

.agenda-dia.hoje {
  border-color: var(--cf-orange);
  box-shadow: 0 0 0 3px var(--cf-orange-glow);
}

.agenda-dia.atrasado {
  border-color: rgba(239, 68, 68, 0.4);
}

.agenda-dia-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  background: var(--overlay-weak);
  border-bottom: 1px solid var(--border-color);
}

.agenda-data {
  font-family: 'Sora', sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  text-transform: capitalize;
}

.agenda-tag {
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: var(--radius-full);
}

.agenda-tag.hoje {
  background: rgba(255, 153, 51, 0.18);
  color: var(--orange-ink);
}

.agenda-tag.atraso {
  background: rgba(239, 68, 68, 0.14);
  color: var(--badge-crm);
}

.agenda-count {
  margin-left: auto;
  background: var(--overlay-soft);
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  padding: 1px 9px;
  font-size: 11px;
  font-weight: 700;
}

.agenda-item {
  display: grid;
  grid-template-columns: 52px 108px 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--hairline);
}

.agenda-item:last-child {
  border-bottom: none;
}

.agenda-item:hover {
  background: var(--row-hover);
}

.agenda-item.status-agendado,
.agenda-item.status-enviado {
  opacity: 0.6;
}

.agenda-hora {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--orange-ink);
}

.agenda-canal {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

.agenda-canal svg {
  width: 12px;
  height: 12px;
}

.agenda-corpo {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.agenda-titulo {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda-meta {
  font-size: 10px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda-acoes {
  display: flex;
  gap: 6px;
}

.agenda-acoes button {
  padding: 6px 9px;
}

.agenda-acoes svg {
  width: 14px;
  height: 14px;
}

.token-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  color: var(--text-muted);
  font-style: italic;
}

.token-hint svg {
  width: 12px;
  height: 12px;
}

@media (max-width: 900px) {
  .agenda-item {
    grid-template-columns: 46px 1fr auto;
    row-gap: 6px;
  }
  .agenda-canal { grid-column: 2; }
  .agenda-corpo { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   CRONOGRAMA
   Componentes no padrão do manual "Orientações Fluxo de Lançamento": bloco de
   dia com cabeçalho, e linhas com hora, tag de mídia e título. O time já lê o
   cronograma nesse desenho — a diferença é que aqui os dados são do ciclo.
   -------------------------------------------------------------------------- */
.marcos-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

/* O cartão de KPI do NexaCF: chip de ícone, rótulo em caixa alta, número
   grande. O filete laranja à esquerda saiu — lá o destaque é o chip tingido e a
   borda, não uma faixa. */
.marco {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: var(--bg-surface);
  background-image: var(--sup-reflexo);
  border: 1px solid var(--sup-borda);
  border-radius: var(--sup-raio);
  box-shadow: var(--sup-sombra);
  padding: 14px 16px;
}

.marco.forte {
  border-color: var(--chip-laranja-borda);
  background-image: var(--sup-reflexo), var(--sup-halo);
}

.marco.passou {
  opacity: 0.55;
}

.marco-icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--overlay-soft);
  border: 1px solid var(--sup-borda);
  color: var(--text-secondary);
}
.marco.forte .marco-icone {
  background: var(--chip-laranja-fundo);
  border-color: var(--chip-laranja-borda);
  color: var(--chip-laranja-tinta);
}
.marco-icone i,
.marco-icone svg {
  width: 17px;
  height: 17px;
}

.marco div {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

/* `--text-secondary`, não `--text-muted`: é o nome do marco, e o muted
   reprova de novo sobre o cartão escuro (medida no CLAUDE.md). */
.marco-rot {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-secondary);
  font-weight: 700;
}

.marco strong {
  font-family: 'Sora', sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.marco-dia {
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: capitalize;
}

/* Fase */
.crono-fase {
  margin-bottom: 28px;
}

.crono-fase-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border-color);
}

/* O número da fase é um chip tingido, como os ícones do NexaCF. O quadrado
   azul-marinho de antes sumia no fundo escuro (#102850 sobre #070d19). */
.crono-fase-num {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--chip-laranja-fundo);
  border: 1px solid var(--chip-laranja-borda);
  color: var(--chip-laranja-tinta);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 16px;
  flex-shrink: 0;
}

/* ==========================================================================
   MINIMIZAR ETAPA — pedido do Ícaro

   O cabeçalho vira um botão de verdade (Enter e espaço de graça, anunciado como
   botão). O que recolhe é o CONTEÚDO: o cabeçalho fica, com o título e o resumo
   de progresso. Recolher a etapa inteira esconderia a informação pela qual a
   pessoa recolheu o resto.
   ========================================================================== */

.etapa-dobra {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px 4px 0;
  margin: -4px 0;
  font: inherit;
  color: inherit;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
}
.etapa-dobra:hover { background: var(--overlay-weak); }
.etapa-dobra:focus-visible {
  outline: 2px solid var(--cf-orange);
  outline-offset: 2px;
}
.etapa-seta {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--text-muted);
}
.etapa-dobra:hover .etapa-seta { color: var(--orange-ink); }

/* O conteúdo some; o cabeçalho e o resumo de progresso ficam.

   ⚠️ O CHECKLIST DA FASE É CONTEÚDO DA FASE. Retorno do time de copy
   (29/09/2026): recolher a Captação deixava a "Captação paga —
   acompanhamento" aberta, porque o contêiner `#ckFase-*` não estava nesta
   lista. E a lista citava `.crono-add-linha`, uma classe que nunca existiu na
   marcação — o botão é `.crono-add` —, então o "+ Acrescentar dia" também
   ficava à vista. Seletor que não casa nada não dá erro: só deixa de esconder. */
.crono-fase.etapa-fechada > .crono-day,
.crono-fase.etapa-fechada > [id^="ckFase-"],
.crono-fase.etapa-fechada > .crono-add,
.checklist-prep.etapa-fechada > .ck-lista,
.checklist-prep.etapa-fechada > .ck-marco {
  display: none;
}
/* Etapa fechada não precisa do filete que separava do conteúdo. */
.crono-fase.etapa-fechada > .crono-fase-head {
  border-bottom-color: transparent;
  margin-bottom: 0;
  padding-bottom: 0;
}
.checklist-prep.etapa-fechada > .ck-head { margin-bottom: 0; }
/* Checklist sem item nenhum (a captação paga nasce assim): sem isto, o espaço
   reservado para a lista virava um vão embaixo do título. */
.checklist-prep:has(> .ck-lista:empty) > .ck-head { margin-bottom: 0; }
.checklist-prep.etapa-fechada > .ck-progresso { margin-top: 12px; }

.crono-fase-titulo {
  flex: 1;
  min-width: 0;
}

.crono-fase-titulo h3 {
  font-family: 'Sora', sans-serif;
  font-size: 16px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 7px;
}

.crono-fase-titulo h3 svg {
  width: 15px;
  height: 15px;
  color: var(--orange-ink);
}

.crono-fase-prog {
  width: 200px;
  flex-shrink: 0;
}

/* Dia */
.crono-day {
  border: 1px solid var(--sup-borda);
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
  background-color: var(--bg-surface);
  background-image: var(--sup-reflexo);
  box-shadow: var(--sup-sombra);
}

/* `dia-marco`, e não `marco`: `.marco` é o cartão da faixa "Marcos do ciclo",
   e o nome compartilhado fazia as regras dele desmontarem o dia (ver o
   comentário em `renderCronogramaTab`). */
.crono-day.dia-marco {
  border-color: var(--border-active);
  background-image: var(--sup-reflexo), var(--sup-halo);
}

/* O anel de hoje SOMA à sombra do cartão, não a substitui. */
.crono-day.hoje {
  box-shadow: 0 0 0 3px var(--cf-orange-glow), var(--sup-sombra);
}

.crono-day-header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  background: var(--overlay-weak);
  border-bottom: 1px solid var(--hairline);
}

/* A data do dia é o rótulo do grupo, no desenho dos cabeçalhos de tabela do
   NexaCF: caixa alta, espaçada, pequena. */
.crono-day-nome {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.crono-dlabel {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: var(--radius-full);
  background: var(--overlay-strong);
  color: var(--text-primary);
}

.crono-marco-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: rgba(255, 153, 51, 0.18);
  color: var(--orange-ink);
}

.crono-marco-tag svg {
  width: 11px;
  height: 11px;
}

.crono-day-body {
  display: flex;
  flex-direction: column;
}

/* Linha da peça */
/* A peça e o excluir são IRMÃOS: o cartão da peça já é um <button>, e botão
   dentro de botão é HTML inválido. O filete que separava as peças passou para a
   linha, senão ele apareceria só sob o cartão e não sob a lixeira. */
.crono-item-linha {
  display: flex;
  align-items: stretch;
  border-top: 1px solid var(--hairline);
}
.crono-item-linha:first-child { border-top: none; }
.crono-item-linha:hover { background: var(--row-hover); }

/* Discreta até o cursor chegar: fica ao lado de uma linha que se clica o dia
   inteiro para abrir o editor, e não pode disputar atenção com ela. */
.crono-excluir {
  flex: none;
  display: flex;
  align-items: center;
  padding: 0 12px;
  cursor: pointer;
  color: transparent;
  background: transparent;
  border: none;
  transition: var(--transition);
}
.crono-item-linha:hover .crono-excluir { color: var(--text-muted); }
.crono-excluir:hover { color: #fca5a5; background: rgba(220, 38, 38, 0.1); }
.crono-excluir:focus-visible {
  color: var(--text-muted);
  outline: 2px solid var(--cf-orange);
  outline-offset: -2px;
}
.crono-excluir i,
.crono-excluir svg { width: 14px; height: 14px; }

/*
   AS COLUNAS SÃO FIXAS, E CADA PEDAÇO TEM A SUA — retorno do time de copy,
   29/09/2026 ("ajustar esteticamente esse quadro").

   Cada linha é uma grade PRÓPRIA, então coluna `auto` não é compartilhada
   entre linhas: com `auto auto` no fim, o selo de time e o de status mudavam
   de lugar conforme o texto ("CRM" é mais curto que "Projeto"), e a lista
   não formava colunas.

   E a posição é EXPLÍCITA (`grid-column` em cada peça, abaixo), não pela
   ordem no HTML. O `desempenho.js` insere o selo de leads antes do primeiro
   `.badge` da linha — que é o do time —, e com posicionamento automático esse
   sexto elemento empurrava o status para uma segunda linha, só nas peças com
   leads. A coluna 4 é dele e fica com largura zero quando não há selo.
*/
.crono-item {
  display: grid;
  grid-template-columns: 52px 54px minmax(0, 1fr) auto 64px 84px;
  align-items: center;
  gap: 10px;
  /* flex:1 em vez de width:100%: agora ele divide a linha com o excluir. */
  flex: 1;
  min-width: 0;
  padding: 10px 16px;
  background: transparent;
  border: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: var(--transition);
}

/* O filete e o hover passaram para `.crono-item-linha`, que é quem agora
   representa a peça inteira — cartão mais lixeira. */

.crono-item.status-enviado,
.crono-item.status-cancelado {
  opacity: 0.55;
}

.crono-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--orange-ink);
  font-variant-numeric: tabular-nums;
}

.crono-tags {
  display: flex;
  gap: 3px;
  font-size: 12px;
}

.crono-titulo {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crono-owner {
  font-size: 9.5px;
}

/* Um lugar por peça. `justify-self: start` mantém o selo do tamanho do texto:
   esticado até a largura da coluna, ele pareceria botão. */
.crono-item > .crono-time    { grid-column: 1; }
.crono-item > .crono-tags    { grid-column: 2; }
.crono-item > .crono-titulo  { grid-column: 3; }
.crono-item > .crono-leads   { grid-column: 4; }
.crono-item > .crono-owner   { grid-column: 5; justify-self: start; }
.crono-item > .crono-status  { grid-column: 6; justify-self: start; }

@media (max-width: 900px) {
  .crono-fase-head { flex-wrap: wrap; }
  .crono-fase-prog { width: 100%; }
  .crono-item {
    grid-template-columns: 48px 46px minmax(0, 1fr);
    row-gap: 5px;
  }
  .crono-item > .crono-time   { grid-column: 1; grid-row: 1; }
  .crono-item > .crono-tags   { grid-column: 2; grid-row: 1; }
  .crono-item > .crono-leads  { grid-column: 3; grid-row: 1; justify-self: end; }
  .crono-item > .crono-titulo { grid-column: 1 / -1; grid-row: 2; }
  .crono-item > .crono-owner  { grid-column: 1 / 3; grid-row: 3; }
  .crono-item > .crono-status { grid-column: 3; grid-row: 3; }
}

/* --------------------------------------------------------------------------
   DESEMPENHO — uma tabela por canal
   Espelha o documento "Comunicação - Produtos", onde o time mantém tabelas
   separadas para WhatsApp e e-mail, com colunas diferentes em cada uma.
   -------------------------------------------------------------------------- */
.metrics-coverage-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.metrics-coverage-bar strong {
  color: var(--text-primary);
}

.cov-alerta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--orange-ink);
  font-weight: 700;
}

.cov-alerta svg {
  width: 13px;
  height: 13px;
}

.metrics-table-card + .metrics-table-card {
  margin-top: 20px;
}

.metrics-table-head h3 {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: 'Sora', sans-serif;
  font-size: 15px;
  font-weight: 700;
}

.metrics-table-head h3 svg {
  width: 15px;
  height: 15px;
  color: var(--orange-ink);
}

/* Tabela larga rola dentro do próprio cartão, nunca a página */
.scroll-x {
  overflow-x: auto;
  margin-top: 12px;
}

.linha-meta {
  font-size: 10px;
  color: var(--text-muted);
}

/* A chave de rastreio é código, não prosa */
.metric-input.term {
  font-size: 11px;
  letter-spacing: 0.02em;
}

.metric-input.term:placeholder-shown {
  border-style: dashed;
}

/* --------------------------------------------------------------------------
   BARRA LATERAL
   Oito seções com legenda não cabem na horizontal, mas sobram na vertical —
   e acrescentar uma nona passa a não custar espaço nenhum. A barra fica azul
   nos dois temas, como o cabeçalho e como a lateral do CRM-CF, re-escopando
   os tokens em vez de reescrever seletor filho.
   -------------------------------------------------------------------------- */
.app-shell {
  flex: 1;
  display: flex;
  align-items: flex-start;
  min-height: 0;
}

.app-sidebar {
  --bg-surface: rgba(255, 255, 255, 0.08);
  --text-primary: #f8fafc;
  --text-strong: #ffffff;
  --text-secondary: #a8b6cc;
  --text-muted: #8fa0ba;
  --orange-ink: #ffaa48;
  --border-color: rgba(255, 255, 255, 0.12);
  --overlay-weak: rgba(255, 255, 255, 0.06);
  --overlay-soft: rgba(255, 255, 255, 0.1);
  --overlay-strong: rgba(255, 255, 255, 0.18);

  position: sticky;
  top: 68px;
  flex-shrink: 0;
  width: 218px;
  height: calc(100vh - 68px);
  background: var(--cf-navy);
  border-right: 1px solid rgba(255, 255, 255, 0.09);
  padding: 16px 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

:root[data-theme="light"] .app-sidebar {
  background: #0e2244;
}

.side-nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* --------------------------------------------------------------------------
   GRUPOS POR TIME — CopyWrite · Marketing · Growth
   O grupo é sinalização, não filtro: não há separação de acesso. Ele existe
   para a pessoa achar a própria tela numa barra de onze itens.
   -------------------------------------------------------------------------- */
.side-grupo {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.side-grupo + .side-grupo {
  margin-top: 14px;
}

/*
  O rótulo em 10px e `--text-muted` lia como legenda de rodapé — o mesmo peso do
  texto que ninguém precisa ler. 11px no laranja da marca, escolha do João em
  22/09/2026 entre três propostas.

  ⚠️ O laranja deixou de ser exclusivo da aba aberta, e isso foi decidido de
  olhos abertos: antes ele significava só "você está aqui" (o filete e o ícone
  do item ativo). Se um dia a barra parecer laranja demais, a troca é aqui — a
  alternativa medida era `#e6ecf7`, que destaca por luminosidade e devolve a
  cor ao marcador de posição.

  7,70:1 sobre o `--cf-navy` do tema escuro e 8,34:1 sobre o `#0e2244` do claro.
*/
.side-grupo-titulo {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--orange-ink);
  padding: 0 12px 4px;
}

/* A aba volta a ser uma linha com legenda.

   O recuo de 10px à esquerda (22px contra os 12px do rótulo do time) põe o nome
   do grupo à ESQUERDA das abas dele. É esse degrau que se lê como hierarquia —
   mais do que a cor, que só chama atenção.

   ⚠️ Na barra estreita ele não vale: a media query abaixo devolve `padding:
   10px 0` e centraliza. Se alguém trocar isto por um `padding-left` solto
   DEPOIS daquela regra, o recuo volta a valer em 60px e descentraliza o ícone. */
.app-sidebar .nav-tab {
  width: 100%;
  height: auto;
  justify-content: flex-start;
  gap: 11px;
  padding: 10px 12px 10px 22px;
  text-align: left;
  position: relative;
}

.app-sidebar .nav-tab i,
.app-sidebar .nav-tab svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

/* Fora da barra estreita o rótulo é texto normal, não mais oculto */
.app-sidebar .nav-tab-label {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
}

.app-sidebar .nav-tab.active {
  background: var(--overlay-strong);
}

/* Filete que marca a seção aberta */
.app-sidebar .nav-tab.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--cf-orange);
}

/* Com a legenda visível a dica vira ruído */
.app-sidebar .nav-tab::after { content: none; }

.app-container {
  min-width: 0;
  max-width: 1600px;
}

/* Telas estreitas: a barra encolhe para só o ícone e a dica volta */
@media (max-width: 1040px) {
  .app-sidebar {
    width: 60px;
    padding: 16px 10px;
  }
  .app-sidebar .nav-tab {
    justify-content: center;
    padding: 10px 0;
  }
  .app-sidebar .nav-tab-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .app-sidebar .nav-tab::after {
    content: attr(data-label);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--menu-bg);
    color: var(--menu-fg);
    border: 1px solid var(--menu-line);
    box-shadow: var(--shadow-md);
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.14s ease;
    z-index: 30;
  }
  .app-sidebar .nav-tab:hover::after,
  .app-sidebar .nav-tab:focus-visible::after { opacity: 1; }

  /* Na barra de 60px não cabe "CopyWrite" ao lado de um ícone. O título vira
     um filete: a separação entre os times continua legível, o texto sai. Some
     no primeiro grupo, onde o filete seria uma linha solta no topo. */
  .app-sidebar .side-grupo-titulo {
    height: 1px;
    padding: 0;
    margin: 4px 8px;
    overflow: hidden;
    text-indent: -999em;
    background: var(--border-color);
  }
  .app-sidebar .side-grupo:first-child .side-grupo-titulo {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   BOTÕES DE ÍCONE NO CABEÇALHO
   O véu branco a 10% sobre o azul da marca dava um quadrado quase invisível.
   Sobre superfície escura o botão precisa de traço, não só de preenchimento.
   -------------------------------------------------------------------------- */
.app-header .btn-secondary {
  background: var(--on-navy-control);
  border-color: var(--on-navy-line);
  color: var(--on-navy);
}

.app-header .btn-secondary:hover {
  background: var(--on-navy-control-hover);
  border-color: var(--on-navy-line-hover);
}

/* Colisão de cascata: `.btn-secondary` vem depois de `.btn-icon-only` no
   arquivo, com a mesma especificidade, então o padding de 9px 16px dele vencia
   o de 8px. Num botão de 34px isso deixava 0px de espaço interno, e o ícone
   — item flex — encolhia a nada. Daí os dois quadrados vazios no cabeçalho.
   A regra combinada tem especificidade maior e encerra a disputa. */
.btn-secondary.btn-icon-only,
.btn-primary.btn-icon-only {
  padding: 8px;
  width: 34px;
  height: 34px;
  gap: 0;
  justify-content: center;
}

.btn-icon-only i,
.btn-icon-only svg {
  flex-shrink: 0;
}

.app-header .btn-icon-only i,
.app-header .btn-icon-only svg {
  width: 16px;
  height: 16px;
}

/* Cabeçalho sem as abas: sobra espaço para o seletor respirar */
.cycle-selector-container {
  max-width: 420px;
  min-width: 0;
}

.cycle-select {
  grid-column: 2;
  max-width: 360px;
  min-width: 0;
  text-overflow: ellipsis;
}

/* `i` E `svg`: o Lucide troca um pelo outro, e seletor só de `<i>` deixa de
   casar depois de `createIcons()`. */
.cycle-selector-container > i,
.cycle-selector-container > svg {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 16px;
  height: 16px;
  color: var(--orange-ink);
}

/* --------------------------------------------------------------------------
   EXPORTAR / IMPORTAR — rodapé da barra lateral
   Fica aqui, e não no cabeçalho, porque há espaço vertical para a legenda:
   são ações raras, e um ícone sem nome exigiria adivinhação.
   -------------------------------------------------------------------------- */
.side-tools {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.side-tools-titulo {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  padding: 0 12px 6px;
}

.side-tool {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: var(--transition);
}

.side-tool:hover {
  background: var(--overlay-soft);
  color: var(--text-strong);
}

.side-tool i,
.side-tool svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.side-tools-nota {
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--text-muted);
  padding: 8px 12px 0;
  margin: 0;
}

@media (max-width: 1040px) {
  .side-tools-titulo,
  .side-tools-nota { display: none; }
  .side-tool {
    justify-content: center;
    padding: 9px 0;
  }
  .side-tool span { display: none; }
}

/* --------------------------------------------------------------------------
   EDITAR DATAS DO CICLO
   -------------------------------------------------------------------------- */
.marcos-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.marcos-head > span {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.form-nota {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 5px 0 0;
}

.dt-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-top: 4px;
}

.dt-linha {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.dt-linha svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 2px;
}

.dt-linha.destaque {
  color: var(--text-primary);
}

.dt-linha.destaque svg {
  color: var(--orange-ink);
}

.dt-linha.aviso {
  color: var(--orange-ink);
}

/* --------------------------------------------------------------------------
   OFERTA DO CICLO
   O copy precisa do texto exato — preço, desconto, bônus — para escrever a
   mensagem, então ele fica visível no Cronograma e não escondido num modal.
   -------------------------------------------------------------------------- */
.oferta-card {
  background-color: var(--bg-surface);
  background-image: var(--sup-reflexo), var(--sup-halo);
  border: 1px solid var(--sup-borda);
  border-radius: var(--sup-raio);
  padding: 18px 20px;
  margin-bottom: 24px;
  box-shadow: var(--sup-sombra);
}

.oferta-card:empty { display: none; }

.of-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.of-head h3 {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: 'Sora', sans-serif;
  font-size: 15px;
  font-weight: 700;
}

.of-head h3 svg {
  width: 15px;
  height: 15px;
  color: var(--orange-ink);
}

.of-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px 20px;
}

.of-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.of-item.larga {
  grid-column: span 2;
}

.of-rot {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.of-item strong {
  font-family: 'Sora', sans-serif;
  font-size: 15px;
  color: var(--text-primary);
}

.of-de {
  font-size: 11.5px;
  color: var(--text-muted);
  text-decoration: line-through;
}

.of-item ul {
  margin: 2px 0 0;
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.of-item li {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.45;
}

/* Diz o que foi mexido neste ciclo, em vez de esconder a diferença */
.of-alterado {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  background: rgba(255, 153, 51, 0.18);
  color: var(--orange-ink);
  text-transform: none;
}

@media (max-width: 700px) {
  .of-item.larga { grid-column: span 1; }
}

/* --------------------------------------------------------------------------
   CHECKLIST DA PREPARAÇÃO
   Lista editável, com prazo por item e o marco que ela destrava.
   -------------------------------------------------------------------------- */
.checklist-prep {
  background-color: var(--bg-surface);
  background-image: var(--sup-reflexo), var(--sup-halo);
  border: 1px solid var(--sup-borda);
  border-radius: var(--sup-raio);
  padding: 18px 20px;
  margin-bottom: 24px;
  box-shadow: var(--sup-sombra);
}

.checklist-prep:empty { display: none; }

.ck-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.ck-head h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Sora', sans-serif;
  font-size: 15px;
  font-weight: 700;
}

.ck-head h3 svg {
  width: 15px;
  height: 15px;
  color: var(--orange-ink);
}

/* O mesmo chip do número da fase, um degrau menor: é título de bloco dentro
   da fase, não a fase. */
.ck-icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--chip-laranja-fundo);
  border: 1px solid var(--chip-laranja-borda);
}
.ck-head h3 .ck-icone svg { color: var(--chip-laranja-tinta); }

.ck-progresso {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 14px;
}

.ck-lista {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ck-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 6px;
  border-radius: var(--radius-md);
  transition: var(--transition);
}

.ck-item:hover { background: var(--row-hover); }

.ck-box {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-active);
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--on-navy);
  transition: var(--transition);
}

.ck-box svg { width: 13px; height: 13px; }

.ck-item.feito .ck-box {
  background: var(--accent-green);
  border-color: var(--accent-green);
}

.ck-texto {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  outline: none;
}

.ck-texto:hover { border-color: var(--border-color); }

.ck-texto:focus {
  border-color: var(--cf-orange);
  background: var(--bg-input);
}

.ck-item.feito .ck-texto {
  text-decoration: line-through;
  color: var(--text-muted);
}

.ck-prazo {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 4px 6px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  outline: none;
  color-scheme: inherit;
}

.ck-prazo:hover { border-color: var(--border-color); }
.ck-prazo:focus { border-color: var(--cf-orange); }

.ck-item.atrasado .ck-prazo { color: var(--badge-crm); }

/* ==========================================================================
   TERMÔMETRO DO PRAZO — regra do Ícaro (01/09/2026)

   mais de 5 dias → verde · até 5 → laranja · 1 ou 0 → vermelho · atrasado →
   vermelho com ⚠️.

   A cor vai no TEXTO e na borda, não no fundo: o campo é um input de data, e
   fundo colorido atrás do calendário nativo do navegador fica sujo em um dos
   dois temas. As tintas são as de texto (`--*-ink`), porque aqui a cor É texto.
   ========================================================================== */

.ck-prazo.termo-folga {
  color: var(--accent-green-ink);
  border-color: rgba(16, 185, 129, 0.35);
}
.ck-prazo.termo-atencao {
  color: var(--orange-ink);
  border-color: rgba(255, 153, 51, 0.45);
}
.ck-prazo.termo-alarme,
.ck-prazo.termo-atrasado {
  color: var(--badge-crm);
  border-color: rgba(239, 68, 68, 0.5);
  font-weight: 600;
}

/* O emoji é o único caso em que a cor sozinha não basta: quem não distingue
   vermelho de laranja precisa de um segundo sinal, e "atrasado" é o estado que
   exige ação. */
.ck-termo-emoji {
  flex-shrink: 0;
  font-size: 12px;
  line-height: 1;
}

.ck-prazo-bloco.termo-folga { border-color: rgba(16, 185, 129, 0.35); }
.ck-prazo-bloco.termo-folga > span { color: var(--accent-green-ink); }
.ck-prazo-bloco.termo-atencao { border-color: rgba(255, 153, 51, 0.45); }
.ck-prazo-bloco.termo-atencao > span { color: var(--orange-ink); }
.ck-prazo-bloco.termo-alarme,
.ck-prazo-bloco.termo-atrasado { border-color: rgba(239, 68, 68, 0.5); }
.ck-prazo-bloco.termo-alarme > span,
.ck-prazo-bloco.termo-atrasado > span { color: var(--badge-crm); }

.ck-tag {
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  background: rgba(239, 68, 68, 0.14);
  color: var(--badge-crm);
  flex-shrink: 0;
}

.ck-remover {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  opacity: 0;
  transition: var(--transition);
}

.ck-remover svg { width: 14px; height: 14px; }

.ck-item:hover .ck-remover,
.ck-remover:focus-visible { opacity: 1; }

.ck-remover:hover { color: var(--badge-crm); background: var(--overlay-soft); }

.ck-marco {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
}

.ck-marco svg { width: 16px; height: 16px; }

.ck-marco.liberado {
  color: var(--accent-green-ink);
}

/* Data limite do bloco — editável, como o time pediu */
.ck-head-acoes {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.ck-prazo-bloco {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 4px 10px;
}

.ck-prazo-bloco > span {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.ck-prazo-bloco input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  padding: 0;
}

.ck-prazo-bloco.vencido {
  border-color: rgba(239, 68, 68, 0.45);
}

.ck-prazo-bloco.vencido input,
.ck-prazo-bloco.vencido > span {
  color: var(--badge-crm);
}

/* Um bloco por fase */
.checklist-prep + .checklist-prep {
  margin-top: -8px;
}

@media (max-width: 760px) {
  .ck-head { flex-direction: column; }
  .ck-head-acoes { width: 100%; justify-content: space-between; }
}

/* Opção de trazer o padrão do produto ao criar o ciclo */
.ck-opcao {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 11px 13px;
  cursor: pointer;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.ck-opcao:hover { border-color: var(--border-active); }

.ck-opcao input {
  width: 15px;
  height: 15px;
  margin-top: 1px;
  flex-shrink: 0;
  accent-color: var(--cf-orange);
  cursor: pointer;
}

.ck-opcao strong { color: var(--text-primary); }


/* ==========================================================================
   ENTRADA E CONTA
   ========================================================================== */

/*
  A tela de entrada é escura nos DOIS temas, pelo mesmo motivo que o cabeçalho:
  o wordmark tem o "nexa" em branco. Com os tokens comuns, no tema claro o
  cartão seria #ffffff e metade da marca sumiria.

  As cores aqui são literais, não tokens, porque precisam ser as mesmas
  independentemente do tema — é o fundo que sustenta a arte.
*/
.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #070d19;
  background-image: radial-gradient(circle at 50% 0%, #102850 0%, #070d19 70%);
}

.login-overlay[hidden] { display: none; }

/*
  Re-escopa os tokens em vez de tocar em cada filho — mesma técnica do
  .app-header. Assim .input-field e .form-label, que não sabem onde estão,
  continuam legíveis sobre o azul.
*/
.login-card {
  --bg-input: rgba(255, 255, 255, 0.08);
  --border-color: rgba(255, 255, 255, 0.16);
  --text-primary: #f8fafc;
  --text-strong: #ffffff;
  --text-secondary: #a8b6cc;
  --text-muted: #8fa0ba;

  width: 100%;
  max-width: 380px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-lg);
}

/* 13:1 e sem margem transparente: em 22px ele ocupa 287px, e o cartão tem 380
   menos 64 de respiro — cabe sem encostar nas bordas. */
.login-logo {
  height: 22px;
  width: auto;
  display: block;
  margin: 0 auto 6px;
}

.login-sub {
  font-size: 13px;
  color: var(--text-secondary);
  text-align: center;
  margin: 0 0 22px;
}

.login-entrar {
  width: 100%;
  justify-content: center;
}

.login-erro {
  font-size: 13px;
  color: var(--accent-red);
  background: var(--accent-red-bg);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  margin: 0 0 12px;
}

.login-erro[hidden] { display: none; }

/* Um atalho, não uma alternativa: fica discreto e explica a consequência. */
.login-pular {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 0;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-muted);
  text-align: center;
  cursor: pointer;
}

.login-pular:hover { color: var(--text-secondary); text-decoration: underline; }

/* Desempate explícito: as duas classes andam juntas no HTML e definem
   max-width com a mesma especificidade. Hoje vence a que está mais abaixo no
   arquivo, o que é sorte, não regra. */
.modal-card.modal-estreito { max-width: 400px; }

/* --------------------------------------------------------------- conta --- */

.conta-wrap { position: relative; }

.conta-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px 0 4px;
  border-radius: 999px;
  border: 1px solid var(--on-navy-line);
  background: var(--on-navy-control);
  color: var(--on-navy);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.conta-chip:hover {
  background: var(--on-navy-control-hover);
  border-color: var(--on-navy-line-hover);
}

.conta-inicial {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--cf-orange);
  color: #1a1206;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}

.conta-nome { white-space: nowrap; }

/*
  O menu flutua fora do escopo de cor do cabeçalho — mesma situação da lista de
  um <select>. Por isso usa --menu-*, que o .app-header não redefine: com
  --bg-surface ele herdaria o branco translúcido da barra e ficaria ilegível.
*/
.conta-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  z-index: 1200;
  background: var(--menu-bg);
  color: var(--menu-fg);
  border: 1px solid var(--menu-borda);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 6px;
}

.conta-menu[hidden] { display: none; }

.conta-menu-email {
  margin: 0;
  padding: 8px 10px 2px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--menu-fg);
  word-break: break-all;
}

.conta-menu-papel {
  margin: 0 0 6px;
  padding: 0 10px 8px;
  font-size: 11px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--menu-fg);
  opacity: 0.6;
  border-bottom: 1px solid var(--menu-borda);
}

.conta-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--menu-fg);
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.conta-menu button:hover { background: var(--menu-hover); }

/* O Lucide troca o <i> por <svg>: um seletor só de <i> deixaria de casar. */
.conta-menu button i,
.conta-menu button svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: 0.75;
}


/* ==========================================================================
   RODAPÉ DO EDITOR
   ========================================================================== */

/* Os botões ficavam no topo, acima de uma tela de campos. Aqui eles esperam
   onde a escrita termina, e ficam colados no rodapé do painel. */
.editor-rodape {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

/* Diz para onde o Salvar leva, antes de a pessoa clicar. */
.editor-volta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-muted);
}

.editor-volta[hidden] { display: none; }

.editor-volta i,
.editor-volta svg {
  width: 13px;
  height: 13px;
}


/* ==========================================================================
   GOLDEN CASES POR FASE
   ========================================================================== */

.golden-grupo { margin-bottom: 28px; }

.golden-grupo-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Sora', sans-serif;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

.golden-grupo-titulo i,
.golden-grupo-titulo svg {
  width: 16px;
  height: 16px;
  color: var(--orange-ink);
}

.golden-grupo-contagem {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--overlay-soft);
  border-radius: 999px;
  padding: 2px 8px;
}

.golden-vazio {
  text-align: center;
  color: var(--text-muted);
  padding: 40px;
}


/* ==========================================================================
   BLOCO DE CAMPOS E MODELOS DE CAPTAÇÃO
   ========================================================================== */

/* Agrupa campos que descrevem a mesma coisa. Um <fieldset> em vez de uma div
   porque a legenda é o rótulo do grupo — leitor de tela anuncia junto. */
.bloco-campo {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px 16px 12px;
  background: var(--overlay-weak);
}

.bloco-campo legend {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--orange-ink);
}

.bloco-campo legend i,
.bloco-campo legend svg {
  width: 14px;
  height: 14px;
}

/* Dentro do bloco, o rótulo do campo não compete com a legenda. */
.form-label.sub {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-secondary);
}

/* Os estilos de .modelo-linha e .modelo-btn saíram com os dois modelos de
   captação (Ícaro, 01/09/2026): a captação passou a ser montada à mão. */


/* ==========================================================================
   ACRESCENTAR DIA NA FASE
   ========================================================================== */

/* Tracejado porque é um espaço a criar, não uma peça que existe — a mesma
   linguagem dos espaços vazios da captação. */
.crono-add {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
  padding: 11px 16px;
  border: 1px dashed var(--border-color);
  border-radius: 12px;
  background: none;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.crono-add:hover {
  border-color: var(--cf-orange);
  color: var(--orange-ink);
  background: var(--overlay-weak);
}

.crono-add i,
.crono-add svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.crono-add-dia {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted);
}


/* Ação secundária dentro de um formulário: não compete com o botão de enviar. */
.link-acao {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--orange-ink);
  cursor: pointer;
}

.link-acao:hover { text-decoration: underline; }

.link-acao i,
.link-acao svg {
  width: 13px;
  height: 13px;
}


/* ==========================================================================
   ESPAÇO A ESCREVER
   O dia está reservado e datado, mas ninguém escreveu ainda. Tracejado e sem
   status: pedir que o time leia "Em criação" para descobrir que a mensagem
   está em branco é trabalho que a tela pode fazer sozinha.
   ========================================================================== */

.crono-item.a-escrever {
  border-style: dashed;
  background: none;
}

.crono-item.a-escrever .crono-titulo {
  color: var(--text-secondary);
}

.crono-item.a-escrever:hover {
  border-style: solid;
  border-color: var(--cf-orange);
}

.badge-a-escrever {
  background: rgba(255, 153, 51, 0.15);
  color: var(--badge-a-escrever);
}

/* Quantas faltam na fase, ao lado da barra de progresso. */
.crono-faltam {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--orange-ink);
}

.crono-faltam i,
.crono-faltam svg {
  width: 13px;
  height: 13px;
}


/* ==========================================================================
   ESTADO DA SINCRONIA
   Fica na barra, ao lado da conta: é onde a pessoa olha para saber se o que
   ela escreveu chegou ao time. Silêncio aqui seria pior que uma falha visível.
   ========================================================================== */

.sync-estado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--on-navy-line);
  background: var(--on-navy-control);
  color: var(--on-navy);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.sync-estado:empty { display: none; }

.sync-estado i,
.sync-estado svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* As cores são literais e não tokens: a barra é azul nos dois temas, e um
   token de tema aqui inverteria junto com o resto da aplicação. */
.sync-pronta   { border-color: rgba(110, 231, 183, 0.5); color: #a7f3d0; }
.sync-erro     { border-color: rgba(252, 165, 165, 0.6); color: #fecaca; }
.sync-offline  { border-color: rgba(252, 211, 77, 0.5);  color: #fde68a; }
.sync-desligada { opacity: 0.75; }

/* Enviando e buscando pulsam de leve — sinal de que algo está em curso, sem
   roubar a atenção de quem está escrevendo. */
.sync-enviando,
.sync-lendo { animation: sync-pulso 1.4s ease-in-out infinite; }

@keyframes sync-pulso {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .sync-enviando,
  .sync-lendo { animation: none; }
}

/* O seletor nativo desenhava a lista fora da pagina e ignorava borda, raio e
   tokens do Nexa. Ele continua sendo a fonte de verdade; esta camada e apenas
   a interface visual e acessivel para abrir e escolher os mesmos ciclos. */
.cycle-selector-container {
  position: relative;
  overflow: visible;
}

.cycle-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.cycle-select-trigger {
  grid-column: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--orange-ink);
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.1;
  text-align: left;
  cursor: pointer;
}

.cycle-select-trigger > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cycle-select-trigger svg {
  width: 15px;
  height: 15px;
  color: var(--cf-orange);
  transition: transform 180ms ease;
}

.cycle-selector-container.is-open {
  border-color: color-mix(in oklab, var(--cf-orange) 58%, var(--border-color));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--cf-orange) 12%, transparent);
}

.cycle-selector-container.is-open .cycle-select-trigger svg {
  transform: rotate(180deg);
}

.cycle-select-menu {
  position: absolute;
  z-index: 1200;
  top: calc(100% + 8px);
  left: -1px;
  width: calc(100% + 2px);
  max-height: min(360px, calc(100vh - 130px));
  padding: 6px;
  overflow: auto;
  border: 1px solid oklch(0.48 0.055 258 / 0.62);
  border-radius: 12px;
  background:
    linear-gradient(135deg, oklch(1 0 0 / 0.055), transparent 42%),
    oklch(0.18 0.045 258 / 0.985);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.09),
    0 24px 54px -24px oklch(0 0 0 / 0.88);
  backdrop-filter: blur(18px) saturate(1.15);
  scrollbar-width: thin;
  scrollbar-color: oklch(0.74 0.18 55 / 0.34) transparent;
  transform-origin: top center;
}

.cycle-select-menu[hidden] { display: none; }

.cycle-select-menu.is-open {
  animation: cycle-menu-in 150ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes cycle-menu-in {
  from { opacity: 0; transform: translateY(-5px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.cycle-select-group + .cycle-select-group,
.cycle-select-group.has-divider {
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid oklch(1 0 0 / 0.07);
}

.cycle-select-group-label {
  padding: 5px 9px 4px;
  color: oklch(0.74 0.18 55);
  font-size: 9px;
  font-weight: 750;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cycle-select-option {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  width: 100%;
  min-height: 34px;
  padding: 6px 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: oklch(0.82 0.02 250);
  font: inherit;
  font-size: 11.5px;
  font-weight: 550;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.cycle-select-option:hover,
.cycle-select-option:focus-visible {
  border-color: oklch(1 0 0 / 0.08);
  outline: none;
  background: oklch(1 0 0 / 0.065);
  color: oklch(0.99 0.005 240);
}

.cycle-select-option[aria-selected="true"] {
  border-color: oklch(0.74 0.18 55 / 0.24);
  background: linear-gradient(90deg, oklch(0.74 0.18 55 / 0.15), oklch(0.74 0.18 55 / 0.055));
  color: oklch(0.99 0.005 240);
  font-weight: 650;
}

.cycle-select-option-mark {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  color: transparent;
}

.cycle-select-option-mark svg {
  width: 12px;
  height: 12px;
  stroke-width: 2.5;
}

.cycle-select-option[aria-selected="true"] .cycle-select-option-mark {
  background: oklch(0.74 0.18 55 / 0.16);
  color: oklch(0.78 0.18 60);
}

.cycle-select-option-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .cycle-select-menu.is-open { animation: none; }
  .cycle-select-trigger svg { transition: none; }
}

/* O menu da conta nasce na primeira faixa do cabeçalho. A faixa de contexto
   vem depois no DOM e cobria o começo do painel; estas camadas mantêm o menu
   preso ao avatar e inteiro acima dos controles da segunda faixa. */
.header-primary-row {
  position: relative;
  z-index: 3;
  overflow: visible;
}

.header-context-row {
  position: relative;
  z-index: 2;
}

.header-top-actions .conta-wrap {
  position: relative;
  z-index: 4;
  height: 36px;
}

.header-top-actions .conta-menu {
  top: calc(100% + 8px);
  right: 0;
  width: min(260px, calc(100vw - 24px));
  min-width: 0;
  max-width: 260px;
  padding: 7px;
  border-color: oklch(0.48 0.055 258 / 0.62);
  border-radius: 12px;
  background:
    linear-gradient(135deg, oklch(1 0 0 / 0.055), transparent 42%),
    oklch(0.18 0.045 258 / 0.985);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.09),
    0 24px 54px -24px oklch(0 0 0 / 0.88);
  backdrop-filter: blur(18px) saturate(1.15);
}

.header-top-actions .conta-menu-email {
  padding: 9px 10px 3px;
  color: oklch(0.99 0.005 240);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
}

.header-top-actions .conta-menu-papel {
  color: oklch(0.72 0.025 250);
  border-bottom-color: oklch(1 0 0 / 0.07);
}

.header-top-actions .conta-menu button {
  border-radius: 8px;
  color: oklch(0.82 0.02 250);
}

.header-top-actions .conta-menu button:hover,
.header-top-actions .conta-menu button:focus-visible {
  outline: none;
  background: oklch(1 0 0 / 0.065);
  color: oklch(0.99 0.005 240);
}

/* Abaixo disso a barra já está disputada; o rótulo sai e fica só o ícone. */
@media (max-width: 1180px) {
  .sync-estado span { display: none; }
  .sync-estado { padding: 0 9px; }
}


/* ==========================================================================
   DIAGNÓSTICO DA ENTRADA
   "Não consigo entrar" não diz em que passo parou, e são seis causas
   diferentes com a mesma cara. Isto mostra qual delas é.
   ========================================================================== */

.login-ajuda {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
  cursor: pointer;
}

.login-ajuda:hover { color: var(--text-primary); text-decoration: underline; }

.login-diag {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.05);
  font-size: 11.5px;
  line-height: 1.5;
}

.login-diag[hidden] { display: none; }

.login-diag p { margin: 0; color: var(--text-secondary); }

.diag-linha {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 5px 0;
}

.diag-linha + .diag-linha { border-top: 1px solid rgba(255, 255, 255, 0.08); }

.diag-linha strong { font-weight: 700; }
.diag-linha.ok strong { color: #a7f3d0; }
.diag-linha.falha strong { color: #fecaca; }

.diag-linha span {
  color: var(--text-secondary);
  word-break: break-word;
}


/* Marcador de versão: discreto, e é a primeira coisa a perguntar quando alguém
   diz que uma correção "não apareceu". */
.app-versao {
  margin: 14px 0 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  text-align: center;
  color: var(--text-muted);
}

.app-versao.divergente {
  color: #fde68a;
  font-weight: 600;
}

/* ==========================================================================
   DESTINOS NO WHATSAPP
   Cartão por campanha. O identificador (slug) ganha destaque porque é o que
   cola no SendFlow — o nome do grupo se repete em até 15 campanhas.
   ========================================================================== */

.wa-carimbo { font-size:12px; color:var(--text-secondary); margin-top:6px; }

/* Sincronia falhando não é detalhe de rodapé: é a diferença entre "o SendFlow
   não mudou" e "esta tela está mentindo há uma semana". */
.wa-alerta {
  display:block; margin-top:6px; padding:8px 10px; border-radius:8px;
  background:var(--overlay-soft); border-left:3px solid var(--cf-orange);
  color:var(--text-primary); font-size:12px;
}

.wa-caixa {
  background:var(--bg-surface); border:1px solid var(--border-color);
  border-radius:12px; padding:16px; margin-bottom:24px;
}
.wa-label { display:block; font-size:13px; font-weight:600; margin-bottom:6px; }
.wa-caixa textarea {
  width:100%; padding:12px; border:1px solid var(--border-color); border-radius:8px;
  font-family:inherit; font-size:14px; line-height:1.5; resize:vertical;
  background:var(--bg-input); color:var(--text-primary);
}
.wa-acoes { display:flex; gap:8px; margin-top:10px; }

.wa-resumo {
  margin:16px 0 8px; padding:10px 12px; border-radius:8px;
  background:var(--bg-input); border:1px solid var(--border-color); font-size:13px;
}
.wa-nota { color:var(--text-secondary); font-size:12px; }

.wa-h { font-size:13px; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; color:var(--text-secondary); margin:18px 0 8px; }
.wa-h-barrado { color:#b42318; }

.wa-card {
  border:1px solid var(--border-color); border-left:3px solid var(--border-color);
  border-radius:8px; padding:10px 12px; margin-bottom:8px; background:var(--bg-surface);
}
.wa-card.wa-alunos       { border-left-color:#b42318; }
.wa-card.wa-avisos       { border-left-color:#2e90fa; }
.wa-card.wa-lista_espera { border-left-color:#12b76a; }
.wa-card.wa-evento       { border-left-color:#f79009; }

.wa-card-top { display:flex; justify-content:space-between; gap:10px;
  align-items:flex-start; font-size:14px; }
.wa-badge { flex:none; font-size:11px; padding:2px 8px; border-radius:999px;
  background:var(--bg-input); border:1px solid var(--border-color); color:var(--text-secondary); }
/* O nome e o botão de copiar andam juntos: o `space-between` do `.wa-card-top`
   separaria os dois, e um "copiar" solto no meio da linha não diz o que copia.
   Pedido de 21/09 — ela busca a campanha no SendFlow pelo NOME. */
.wa-nome { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; min-width:0; }
.wa-card-top .wa-copy { flex:none; align-self:center; }
.wa-slug { display:flex; align-items:center; gap:8px; margin-top:6px; flex-wrap:wrap; }
.wa-slug code { font-size:12px; background:var(--bg-input); border:1px solid var(--border-color);
  padding:2px 6px; border-radius:4px; }
.wa-copy { font-size:11px; padding:2px 8px; border-radius:4px; cursor:pointer;
  border:1px solid var(--border-color); background:transparent; color:var(--text-secondary); }
.wa-copy:hover { color:var(--text-primary); }
.wa-flag { font-size:11px; color:var(--text-secondary); }
.wa-motivo { font-size:12px; color:var(--text-secondary); margin-top:6px; }
.wa-repetido { font-size:12px; color:#b54708; margin-top:6px; }
.wa-rodape { font-size:12px; color:var(--text-secondary); margin-top:16px; }

.wa-mapa-bloco { margin-top:8px; }
.wa-filtros { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.wa-select, .wa-input {
  padding:8px 10px; border:1px solid var(--border-color); border-radius:8px;
  font-family:inherit; font-size:13px; background:var(--bg-surface); color:var(--text-primary);
}
.wa-input { flex:1; min-width:220px; }
.wa-contagem { font-size:12px; color:var(--text-secondary); margin-bottom:10px; }
.wa-grupo { margin-bottom:10px; }
.wa-grupo > summary { cursor:pointer; font-weight:600; font-size:14px;
  padding:8px 0; display:flex; align-items:center; gap:8px; }
.wa-vazio { font-size:13px; color:var(--text-secondary); padding:12px 0; }

/* ==========================================================================
   ENVIO PARA OS GRUPOS

   A ferramenta passou a enviar em 31/08/2026. O modo teste tem que ser LIDO,
   não descoberto: enquanto ele está ligado, marcar um grupo fora da lista volta
   como barrado, e a pessoa precisa saber disso antes de clicar, não depois.
   ========================================================================== */

.wa-pick {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 2px 8px 2px 6px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--bg-input);
}
.wa-pick:hover { color: var(--text-primary); border-color: var(--border-active); }
.wa-pick input { accent-color: var(--cf-orange); cursor: pointer; }

.wa-envio {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid var(--border-active);
  border-radius: var(--radius-md);
  background: var(--overlay-weak);
}
.wa-envio-teste {
  font-size: 12.5px;
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--overlay-soft);
  border-left: 3px solid var(--accent-green);
  color: var(--text-primary);
}
/* Modo teste DESLIGADO é o estado perigoso, e é ele que fica em laranja. */
.wa-envio-teste.ligado { border-left-color: var(--cf-orange); }

/* O atalho do grupo de teste: sem ele não há destino marcável enquanto o modo
   teste está ligado, porque o grupo de teste não pertence a produto nenhum. */
.wa-envio-atalho {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
}

.wa-envio-acoes {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  font-size: 12.5px;
  color: var(--text-secondary);
}
.wa-envio-conta { font-size: 13px; font-weight: 600; margin: 10px 0 6px; }
.wa-envio-lista { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.wa-envio-lista li {
  padding: 6px 0 6px 10px;
  border-left: 3px solid var(--border-color);
  margin-bottom: 4px;
}
.wa-envio-lista li span { display: block; }
.wa-envio-lista .wa-nota { margin-top: 2px; }
li.wa-envio-enviado  { border-left-color: var(--accent-green); }
li.wa-envio-barrado  { border-left-color: #b42318; }
li.wa-envio-falhou   { border-left-color: #b42318; }
li.wa-envio-pendente { border-left-color: var(--cf-orange); }
li.wa-envio-repetido { border-left-color: var(--cf-orange); }

span.wa-envio-barrado {
  font-size: 11px;
  color: #b42318;
  font-weight: 600;
}

/* A confirmação: os grupos por nome, e o texto exatamente como vai sair. */
.envio-lista-confirma {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 180px;
  overflow-y: auto;
  font-size: 13px;
}
.envio-lista-confirma li {
  padding: 6px 0;
  border-bottom: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.envio-lista-confirma code {
  font-size: 11.5px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  padding: 1px 5px;
  border-radius: 4px;
}
.envio-texto {
  max-height: 180px;
  overflow-y: auto;
  margin: 0;
  padding: 10px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  color: var(--text-primary);
}

/* ==========================================================================
   O BLOCO DA IA

   Precisa ser VISUALMENTE distinto do resto. Não por enfeite: o que sai de
   regra é auditável e o que sai de modelo é sugestão, e misturar os dois numa
   lista só apaga essa diferença — que é justamente a informação que decide se a
   pessoa confere antes de disparar.
   ========================================================================== */

.wa-ia { margin-top: 4px; }
.wa-ia.tem-conteudo {
  margin-top: 20px; padding: 14px;
  border: 1px dashed var(--border-active);
  border-radius: var(--radius-md);
  background: var(--overlay-weak);
}
.wa-ia-topo {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; margin-bottom: 6px;
}
.wa-ia-selo {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: var(--bg-input); border: 1px solid var(--border-color);
  color: var(--text-secondary); font-family: 'JetBrains Mono', monospace;
}
.wa-ia-obs {
  font-size: 12.5px; color: var(--text-primary); margin: 8px 0;
  padding-left: 10px; border-left: 2px solid var(--border-active);
}
/* Erro do modelo aparece. Esconder é o que transforma erro em decisão errada. */
.wa-ia-alerta {
  font-size: 12.5px; margin: 8px 0; padding: 8px 10px; border-radius: 8px;
  background: var(--overlay-soft); border-left: 3px solid var(--cf-orange);
  color: var(--text-primary);
}

/* O bloco dentro do editor. Mesma linguagem dos cartões da aba Destinos WA —
   é a mesma informação, e vale a pessoa reconhecer de um lugar no outro. */
.wa-peca {
  background:var(--bg-input); border:1px solid var(--border-color);
  border-radius:var(--radius-md); padding:12px 14px;
}
.wa-peca[hidden] { display:none; }
.wa-peca-topo {
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--orange-ink); margin-bottom:8px;
}
.wa-peca-resumo { font-size:12.5px; color:var(--text-secondary); margin-bottom:10px; }
.wa-peca-det { margin-top:8px; }
.wa-peca-det > summary {
  cursor:pointer; font-size:12px; font-weight:600; color:var(--text-secondary);
  padding:4px 0;
}
.wa-peca .wa-rodape { margin-top:10px; }

@media (max-width:640px) {
  .wa-card-top { flex-direction:column; }
  .wa-input { min-width:0; }
}

/* ==========================================================================
   HOME — PRODUTOS E CICLOS
   A tela de escolher. Dois níveis: grade de produtos, depois a lista de
   ciclos do produto aberto.

   A faixa do ciclo ativo vive fora das abas, no topo do conteúdo. Aqui ela
   sai de cena — era ela que fazia "a home sempre ser um produto aberto".
   Esconder pela classe no <body> e não por um atributo `hidden` no elemento:
   `.cycle-banner` é display:flex, que vence o display:none do atributo.
   ========================================================================== */
/* `sem-faixa-ciclo` cobre na-home e na-robocopy também — as duas regras
   abaixo ficam por serem o caso que nomeou o padrão. */
body.sem-faixa-ciclo .cycle-banner,
body.na-home .cycle-banner,
body.na-robocopy .cycle-banner {
  display: none;
}

.home-head {
  margin-bottom: 20px;
}
.home-head h2 {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.home-head h2 i,
.home-head h2 svg {
  width: 20px;
  height: 20px;
  color: var(--orange-ink);
}
.home-head p {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ---------------------------------------------------------------- produtos */
.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 16px;
}

.home-card {
  font: inherit;
  color: inherit;
  text-align: left;
  /* O cartão inteiro deixou de ser um alvo só: agora o cabeçalho e o rodapé
     abrem o produto, e cada linha de ciclo abre o cronograma dela. Cursor de
     mão no cartão todo prometeria um clique que a maior parte dele não dá. */
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
/* São divs com role="button": sem o anel de foco, quem navega por teclado
   não sabe onde está. */
.home-card:focus-visible,
.home-ciclo:focus-visible {
  outline: 2px solid var(--cf-orange);
  outline-offset: 2px;
}
.home-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-active);
  transform: translateY(-2px);
}
.home-card.atual {
  border-color: var(--border-active);
}

.home-card-topo {
  display: flex;
  align-items: center;
  gap: 8px;
}
.home-card-icone {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: var(--radius-md);
  background: var(--overlay-soft);
  display: grid;
  place-items: center;
}
.home-card-icone i,
.home-card-icone svg {
  width: 18px;
  height: 18px;
  color: var(--orange-ink);
}

/* A sigla é o que o time vai ler no título do ciclo — aqui ela aparece junto
   do produto para as duas coisas se reconhecerem. */
.home-sigla {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  background: var(--cf-orange-glow);
  color: var(--orange-ink);
  white-space: nowrap;
}

.home-card h3 {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--text-primary);
  cursor: pointer;
}
.home-card-topo,
.home-card-rodape { cursor: pointer; }
.home-card h3:focus-visible,
.home-card-topo:focus-visible,
.home-card-rodape:focus-visible {
  outline: 2px solid var(--cf-orange);
  outline-offset: 2px;
}
.home-card-nome {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-secondary);
}
.home-card-rodape {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.home-card-ciclos {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
}
.home-card-ciclos i,
.home-card-ciclos svg {
  width: 13px;
  height: 13px;
  color: var(--text-muted);
}
.home-card-destaque {
  border-top: 1px solid var(--hairline);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.home-card-ciclo-nome {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
}

/* ------------------------------- ciclos ativos dentro do cartão do produto */
/* Um alvo por ciclo: a Reforma Tributária tem dois rodando ao mesmo tempo, e
   cada um leva a um cronograma diferente. */
.home-card-ciclos-ativos {
  border-top: 1px solid var(--hairline);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.home-card-ciclo {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--overlay-weak);
  transition: var(--transition);
}
.home-card-ciclo:hover {
  background: var(--overlay-soft);
  border-color: var(--border-active);
}
.home-card-ciclo:focus-visible {
  outline: 2px solid var(--cf-orange);
  outline-offset: 2px;
}
.home-card-ciclo.atual { border-left: 3px solid var(--cf-orange); }
.home-card-ciclo-linha {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12.5px;
}
.home-card-ciclo-linha strong { color: var(--text-primary); }

.home-sem-ativo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  padding: 6px 0;
}
.home-sem-ativo i,
.home-sem-ativo svg { width: 13px; height: 13px; }

.home-card-ver {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
}
.home-card-ver i,
.home-card-ver svg { width: 13px; height: 13px; }

/* ==========================================================================
   O QUE O CLICKUP TEM E A FERRAMENTA NÃO

   Aviso, não erro: o calendário é a fonte das datas, e ciclo que existe lá e não
   aqui é trabalho que ninguém está vendo. Azul e não laranja — laranja nesta
   ferramenta é "atenção, isto pode estar errado", e aqui não há nada errado.
   ========================================================================== */
.home-clickup {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--accent-blue-bg);
  border-left: 3px solid var(--accent-blue);
}
.home-clickup p {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-primary);
  margin: 0 0 10px;
}
.home-clickup p i,
.home-clickup p svg {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--accent-blue-ink);
}
.home-clickup-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.home-clickup-btn {
  font: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
.home-clickup-btn:hover {
  border-color: var(--accent-blue);
  background: var(--bg-card-hover);
}
.home-clickup-btn strong { font-size: 12.5px; color: var(--text-primary); }
.home-clickup-btn span { font-size: 11.5px; color: var(--text-secondary); }

/* O selo de divergência no marco do cronograma. */
.marco.divergente { border-color: var(--accent-blue); }
.marco-clickup {
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  padding: 3px 8px;
  cursor: pointer;
  color: var(--accent-blue-ink);
  background: var(--accent-blue-bg);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  transition: var(--transition);
}
.marco-clickup:hover { border-color: var(--accent-blue); }
.marco-clickup i,
.marco-clickup svg { width: 12px; height: 12px; }

/* A linha que diz quantos ciclos estão vivos, no topo da Home. */
.home-panorama {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--overlay-weak);
  border-left: 3px solid var(--cf-orange);
}
.home-panorama strong { color: var(--text-primary); font-size: 14px; }

/* Selos de situação. Fundo translúcido com tinta própria: o alvo de contraste
   é a mescla com a superfície, não a cor cheia. */
.home-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.home-tag i,
.home-tag svg {
  width: 12px;
  height: 12px;
}
/* As três situações de ciclo vivo, do retorno da Stefany. Cores diferentes
   porque a pergunta que o cartão responde é "em que pé está", e três tons de
   verde não respondem nada. */
.home-tag.vendas {
  background: var(--accent-green-bg);
  color: var(--accent-green-ink);
}
.home-tag.aquecimento {
  background: var(--cf-orange-glow);
  color: var(--orange-ink);
}
.home-tag.captacao {
  background: var(--accent-purple-bg);
  color: var(--accent-purple-ink);
}
.home-tag.andamento {
  background: var(--accent-green-bg);
  color: var(--accent-green-ink);
}
.home-tag.futuro {
  background: var(--accent-blue-bg);
  color: var(--accent-blue-ink);
}
.home-tag.encerrado {
  background: var(--overlay-soft);
  color: var(--text-secondary);
}
.home-tag.vazio {
  background: var(--overlay-weak);
  color: var(--text-secondary);
}
.home-tag.demo {
  background: var(--accent-purple-bg);
  color: var(--accent-purple-ink);
}
.home-tag.atual {
  background: var(--cf-orange-glow);
  color: var(--orange-ink);
}

/* ------------------------------------------------------------------ ciclos */
.home-prod-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.home-prod-titulo {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 200px;
}
.home-prod-titulo h3 {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 17px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.home-prod-titulo h3 i,
.home-prod-titulo h3 svg {
  width: 18px;
  height: 18px;
  color: var(--orange-ink);
}

.home-ciclos {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.home-ciclo {
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  transition: var(--transition);
}
.home-ciclo:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-active);
}
.home-ciclo.atual {
  border-left: 3px solid var(--cf-orange);
}
.home-ciclo-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.home-ciclo-nome {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.home-ciclo-datas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--text-secondary);
}
.home-ciclo-datas span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.home-ciclo-datas i,
.home-ciclo-datas svg {
  width: 13px;
  height: 13px;
  color: var(--text-muted);
}
.home-ciclo-prog {
  flex: none;
  width: 190px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
/* Replicar mora dentro de uma linha que é toda clicável, então ele precisa
   parecer um alvo próprio — não um enfeite ao lado da seta. */
.home-ciclo-acoes {
  flex: none;
  display: flex;
  align-items: center;
}
.home-ciclo-replicar {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  cursor: pointer;
  color: var(--text-secondary);
  background: var(--overlay-weak);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
.home-ciclo-replicar:hover {
  color: var(--text-primary);
  border-color: var(--border-active);
  background: var(--overlay-soft);
}
.home-ciclo-replicar i,
.home-ciclo-replicar svg {
  width: 13px;
  height: 13px;
}

/* EXCLUIR TEM NOME E BORDA. Era uma lixeira de 14px, sem borda, em
   `--text-muted`, e aparecia só depois de abrir o produto: pela ideia de que a
   ação destrutiva não podia competir com o Replicar. Competiu tão pouco que o
   time pediu, em 29/09/2026, uma exclusão que já existia.

   O vermelho continua só no hover — o `.btn-perigo`, que confirma, segue sendo
   o único botão vermelho da ferramenta. A tinta do hover é `--badge-crm`
   (#f87171 no escuro, #b32020 no claro): o #fca5a5 de antes rendia menos de
   2:1 sobre o cartão branco. */
.home-ciclo-excluir {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
  padding: 6px 10px;
  cursor: pointer;
  color: var(--text-secondary);
  background: var(--overlay-weak);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
.home-ciclo-excluir:hover {
  color: var(--badge-crm);
  border-color: rgba(220, 38, 38, 0.45);
  background: var(--accent-red-bg);
}
.home-ciclo-excluir:focus-visible {
  outline: 2px solid var(--cf-orange);
  outline-offset: 2px;
}
.home-ciclo-excluir i,
.home-ciclo-excluir svg { width: 13px; height: 13px; }

/* Na primeira tela ele mora na linha do ciclo, que é estreita: só o ícone,
   com a borda que o faz ler como botão, sempre no canto de cima à direita.
   No fluxo da linha ele quebrava conforme o tamanho do selo de situação
   ("Início Captação 09/10" não deixava espaço), e cada cartão ficava de um
   jeito; a linha reserva o lugar dele com `padding-right`. */
.home-card-ciclo { position: relative; }
.home-card-ciclo-linha { padding-right: 30px; }
.home-ciclo-excluir.so-icone {
  position: absolute;
  top: 6px;
  right: 8px;
  margin: 0;
  padding: 4px 6px;
}
.home-ciclo-excluir.so-icone i,
.home-ciclo-excluir.so-icone svg { width: 13px; height: 13px; }

/* ------------------------------------------------- confirmação de exclusão */
.excluir-perdas {
  list-style: none;
  margin: 0 0 12px;
  padding: 12px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 13px;
}
.excluir-perdas li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 3px 0;
  color: var(--text-primary);
}
.excluir-perdas i,
.excluir-perdas svg {
  width: 14px;
  height: 14px;
  flex: none;
  margin-top: 2px;
  color: var(--text-muted);
}
.excluir-aviso {
  font-size: 12.5px;
  line-height: 1.5;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(220, 38, 38, 0.1);
  border-left: 3px solid #dc2626;
  color: var(--text-primary);
}

/* O único botão vermelho da ferramenta. Se houver outro, ele deixa de significar
   "isto não tem volta". */
.btn-perigo {
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  cursor: pointer;
  color: #fff;
  background: #dc2626;
  border: 1px solid #dc2626;
  border-radius: var(--radius-md);
  transition: var(--transition);
}
.btn-perigo:hover:not(:disabled) { background: #b91c1c; border-color: #b91c1c; }
.btn-perigo:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-perigo i,
.btn-perigo svg { width: 15px; height: 15px; }

/* A prévia do deslocamento: de → para, uma linha por marco. */
.replica-previa {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px;
  margin-bottom: 14px;
}
.replica-linha {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 3px 0;
}
.replica-linha > span:first-child { color: var(--text-secondary); }
.replica-de { color: var(--text-muted); text-decoration: line-through; }
.replica-linha i,
.replica-linha svg {
  width: 13px;
  height: 13px;
  color: var(--text-muted);
}

.home-ciclo-abrir {
  flex: none;
  display: grid;
  place-items: center;
}
.home-ciclo-abrir i,
.home-ciclo-abrir svg {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
}

.home-sem-peca {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-secondary);
}

.home-vazio {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px;
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: 13px;
}
.home-vazio i,
.home-vazio svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 860px) {
  .home-ciclo {
    flex-wrap: wrap;
  }
  .home-ciclo-prog {
    width: 100%;
    align-items: stretch;
  }
}

/* ==========================================================================
   FILTROS NEXA — menu visual único para as abas

   O <select> nativo continua como fonte da verdade e é apenas escondido pela
   camada visual. O menu usa as mesmas superfícies translúcidas, bordas claras
   e cantos arredondados do seletor de ciclos/NexaBI.
   ========================================================================== */
.nexa-select {
  position: relative;
  z-index: 1;
  display: inline-flex;
  min-width: 0;
  vertical-align: middle;
}

.nexa-select.is-open { z-index: 1300; }

/* Algumas barras vêm antes de cards que criam a própria camada visual. Subir
   só o menu não basta nesses casos: o contexto inteiro precisa ficar acima
   enquanto a lista está aberta. */
:is(.gpt-barra, .search-filter-group, .cal-barra, .wa-filtros, .desemp-vista, .compare-head) {
  position: relative;
}
:is(.gpt-barra, .search-filter-group, .cal-barra, .wa-filtros, .desemp-vista, .compare-head):has(.nexa-select.is-open) {
  z-index: 1500;
}

.nexa-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  border: 0 !important;
  pointer-events: none !important;
}

.nexa-select-trigger {
  display: inline-flex;
  width: 100%;
  min-width: 150px;
  height: 38px;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 11px;
  color: var(--text-primary);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  line-height: 1;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid color-mix(in oklab, var(--text-primary) 13%, var(--border-color));
  border-radius: 10px;
  background:
    linear-gradient(135deg, color-mix(in oklab, white 5%, transparent), transparent 48%),
    color-mix(in oklab, var(--bg-surface) 97%, var(--text-primary) 3%);
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, white 10%, transparent),
    0 7px 20px -18px oklch(0 0 0 / 0.68);
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.nexa-select-trigger:hover {
  color: var(--text-strong);
  border-color: color-mix(in oklab, var(--cf-orange) 34%, var(--border-active));
  background:
    linear-gradient(135deg, color-mix(in oklab, white 7%, transparent), transparent 52%),
    color-mix(in oklab, var(--bg-surface) 94%, var(--cf-orange) 6%);
}

.nexa-select-trigger:focus-visible,
.nexa-select.is-open .nexa-select-trigger {
  outline: none;
  border-color: color-mix(in oklab, var(--cf-orange) 58%, var(--border-color));
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, white 11%, transparent),
    0 0 0 3px color-mix(in oklab, var(--cf-orange) 12%, transparent);
}

.nexa-select-leading,
.nexa-select-chevron {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}

.nexa-select-leading { color: var(--orange-ink); }
.nexa-select-chevron {
  margin-left: auto;
  color: var(--text-muted);
  transition: transform 170ms ease, color 170ms ease;
}
.nexa-select.is-open .nexa-select-chevron {
  color: var(--orange-ink);
  transform: rotate(180deg);
}

.nexa-select-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nexa-select-menu {
  position: absolute;
  z-index: 1400;
  top: calc(100% + 7px);
  left: 0;
  display: block;
  width: max-content;
  min-width: max(100%, 220px);
  max-width: min(360px, calc(100vw - 32px));
  max-height: min(320px, calc(100vh - 96px));
  padding: 6px;
  overflow: auto;
  color: var(--text-primary);
  border: 1px solid color-mix(in oklab, var(--text-primary) 18%, var(--border-color));
  border-radius: 13px;
  background:
    linear-gradient(135deg, color-mix(in oklab, white 7%, transparent), transparent 44%),
    color-mix(in oklab, var(--bg-surface) 96%, var(--bg-dark) 4%);
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, white 12%, transparent),
    0 26px 58px -25px oklch(0 0 0 / 0.82),
    0 8px 20px -13px color-mix(in oklab, var(--cf-orange) 18%, transparent);
  backdrop-filter: blur(20px) saturate(1.12);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, var(--cf-orange) 30%, transparent) transparent;
  transform-origin: top left;
}

.nexa-select-menu[hidden] { display: none; }
.nexa-select.is-open .nexa-select-menu {
  animation: nexa-filter-in 145ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.nexa-select.is-align-right .nexa-select-menu {
  right: 0;
  left: auto;
  transform-origin: top right;
}
.nexa-select.is-drop-up .nexa-select-menu {
  top: auto;
  bottom: calc(100% + 7px);
  transform-origin: bottom left;
}
.nexa-select.is-drop-up.is-align-right .nexa-select-menu { transform-origin: bottom right; }

@keyframes nexa-filter-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.nexa-select-group + .nexa-select-group,
.nexa-select-group.has-divider {
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid color-mix(in oklab, var(--text-primary) 8%, transparent);
}

.nexa-select-group-label {
  padding: 5px 9px 4px;
  color: var(--orange-ink);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.095em;
  text-transform: uppercase;
}

.nexa-select-option {
  display: grid;
  width: 100%;
  grid-template-columns: 25px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 5px 10px 5px 6px;
  color: var(--text-secondary);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  transition: color 130ms ease, border-color 130ms ease, background 130ms ease;
}

.nexa-select-option:hover,
.nexa-select-option:focus-visible {
  color: var(--text-primary);
  outline: none;
  border-color: color-mix(in oklab, var(--text-primary) 8%, transparent);
  background: color-mix(in oklab, var(--text-primary) 7%, transparent);
}

.nexa-select-option[aria-selected="true"] {
  color: var(--text-strong);
  border-color: color-mix(in oklab, var(--cf-orange) 21%, transparent);
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--cf-orange) 13%, transparent), transparent 88%),
    color-mix(in oklab, var(--text-primary) 4%, transparent);
}

.nexa-select-option:disabled { opacity: 0.42; cursor: not-allowed; }
.nexa-select-option-mark {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  color: transparent;
  border-radius: 7px;
  background: color-mix(in oklab, var(--text-primary) 5%, transparent);
}
.nexa-select-option-mark svg { width: 12px; height: 12px; stroke-width: 2.6; }
.nexa-select-option:not([aria-selected="true"]) .nexa-select-option-mark svg {
  color: transparent !important;
}
.nexa-select-option[aria-selected="true"] .nexa-select-option-mark {
  color: var(--orange-ink);
  background: color-mix(in oklab, var(--cf-orange) 14%, transparent);
}
.nexa-select-option-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* No GPT, o rótulo e o ícone já vivem na cápsula externa. O gatilho fica
   leve; o ganho visual aparece na borda/reflexo da cápsula e no menu. */
.gpt-escolha {
  border-color: color-mix(in oklab, var(--text-primary) 14%, var(--border-color));
  background:
    linear-gradient(135deg, color-mix(in oklab, white 5%, transparent), transparent 52%),
    color-mix(in oklab, var(--bg-surface) 95%, var(--text-primary) 5%);
  box-shadow: inset 0 1px 0 color-mix(in oklab, white 8%, transparent);
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.gpt-escolha:hover,
.gpt-escolha:has(.nexa-select.is-open) {
  border-color: color-mix(in oklab, var(--cf-orange) 42%, var(--border-active));
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, white 10%, transparent),
    0 0 0 3px color-mix(in oklab, var(--cf-orange) 8%, transparent);
}
.gpt-escolha .nexa-select-trigger {
  min-width: 72px;
  max-width: 220px;
  height: 26px;
  gap: 5px;
  padding: 0 3px 0 1px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  box-shadow: none;
  font-size: 12.5px;
}
.gpt-escolha .nexa-select-trigger:hover,
.gpt-escolha .nexa-select-trigger:focus-visible,
.gpt-escolha .nexa-select.is-open .nexa-select-trigger {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.gpt-escolha-produto .nexa-select-trigger {
  min-width: 112px;
  font-weight: 750;
}
.gpt-escolha .nexa-select-menu { min-width: 190px; }
.gpt-escolha-produto .nexa-select-menu { min-width: 250px; }

.compare-head .nexa-select-trigger { min-width: 210px; }
.cal-barra .nexa-select-trigger { min-width: 210px; }
.desemp-vista .nexa-select-trigger { min-width: 250px; }
.wa-filtros .nexa-select-trigger { min-width: 170px; }

@media (max-width: 900px) {
  .search-filter-group { flex-wrap: wrap; }
  .search-input-wrapper { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .nexa-select.is-open .nexa-select-menu { animation: none; }
  .nexa-select-chevron { transition: none; }
}

/* ==========================================================================
   VALIDADOR DE FORMATAÇÃO — SÓ O "!"
   O texto que descrevia o erro saiu (o preview ao lado já mostra o asterisco
   virando literal) e a faixa verde de "tudo certo" também: silêncio é a
   confirmação. Sobrou o sinal e o contador.
   ========================================================================== */
.validator-alerta {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--cf-orange);
  color: #3a1c00;
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: help;
}

/* Sem aviso, a faixa deixa de ser faixa: fica só a medida, discreta. */
.wa-validator.ok {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
  justify-content: flex-end;
  padding: 4px 2px;
}

/* Título do ciclo montado no modal de criação */
.titulo-preview {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  color: var(--orange-ink);
}
.titulo-preview.incompleto {
  color: var(--text-secondary);
  font-weight: 600;
}

/* ==========================================================================
   GPT DE PRODUTO — em conversa (29/09/2026)

   O desenho é o dos chats grandes, porque foi o pedido: coluna de conversas à
   esquerda, a conversa no meio com largura de leitura (820px), o campo
   ancorado embaixo, o contexto num painel que abre à direita. A superfície é a
   do NexaCF (`--sup-*`), a mesma do Cronograma.

   ⚠️ A ROLAGEM É SÓ DE `.gpt-mensagens`. A aba ocupa a altura da tela e o
   campo fica parado embaixo; se o corpo da página rolasse, o campo sumiria
   junto com a conversa — o oposto de todo chat.

   ⚠️ Toda regra que dá `display` a um elemento que usa o atributo `hidden`
   tem o par `[hidden] { display: none }` logo abaixo. `display: flex` vence o
   `hidden` do navegador, e o elemento apareceria vazio (mesma armadilha do
   `.cycle-banner` no CLAUDE.md).
   ========================================================================== */

#tab-copilot.gpt { position: relative; }

.gpt-app {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  height: calc(100vh - 68px - 48px);
  min-height: 560px;
  background-color: var(--bg-surface);
  background-image: var(--sup-reflexo);
  border: 1px solid var(--sup-borda);
  border-radius: var(--sup-raio);
  box-shadow: var(--sup-sombra);
  overflow: hidden;
}
#tab-copilot.gpt-contexto-aberto .gpt-app {
  grid-template-columns: 250px minmax(0, 1fr) 330px;
}

/* ---------------------------------------------------------- conversas --- */
.gpt-historico {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--border-color);
  background: var(--overlay-weak);
}
.gpt-nova {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px;
  padding: 9px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--sup-borda);
  border-radius: 11px;
  cursor: pointer;
  transition: var(--transition);
}
.gpt-nova:hover { border-color: var(--border-active); }
.gpt-nova i, .gpt-nova svg { width: 15px; height: 15px; color: var(--chip-laranja-tinta); }
.gpt-lista { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 12px; }
.gpt-lista-vazia { font-size: 12px; color: var(--text-secondary); padding: 6px 12px; }
.gpt-item { display: flex; align-items: center; border-radius: 10px; }
.gpt-item:hover { background: var(--overlay-soft); }
.gpt-item.atual { background: var(--overlay-strong); }
.gpt-item-abrir {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 10px;
  font: inherit;
  text-align: left;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
.gpt-item-titulo {
  font-size: 13px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gpt-item-quando { font-size: 11px; color: var(--text-secondary); }
.gpt-item-apagar { opacity: 0; }
.gpt-item:hover .gpt-item-apagar,
.gpt-item-apagar:focus-visible { opacity: 1; }

/* ----------------------------------------------------------- a barra --- */
.gpt-chat {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.gpt-barra {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-color);
}
.gpt-escolha {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 10px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--overlay-weak);
  border: 1px solid var(--border-color);
  border-radius: 10px;
}
.gpt-escolha:focus-within { border-color: var(--border-active); }
.gpt-escolha select {
  max-width: 220px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  background: transparent;
  border: 0;
  outline: none;
  cursor: pointer;
}
/* A lista suspensa é do sistema: tokens de menu, não os da superfície. */
.gpt-escolha select option { background-color: var(--menu-bg); color: var(--menu-fg); }
.gpt-escolha-produto select { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 13px; }
.gpt-escolha-produto i, .gpt-escolha-produto svg { width: 14px; height: 14px; color: var(--chip-laranja-tinta); }
.gpt-marca {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
}

.gpt-ic {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  transition: var(--transition);
}
.gpt-ic:hover { color: var(--text-primary); background: var(--overlay-soft); }
.gpt-ic:focus-visible { outline: 2px solid var(--cf-orange); outline-offset: 1px; }
.gpt-ic i, .gpt-ic svg { width: 15px; height: 15px; }
#gptVerContexto[aria-expanded="true"] { color: var(--chip-laranja-tinta); background: var(--chip-laranja-fundo); }
.gpt-so-estreito { display: none; }

/* ------------------------------------------------------- a conversa --- */
.gpt-mensagens {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 26px 18px 18px;
  /* O fim da lista esmaece em vez de cortar seco contra o campo. */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent);
}
.gpt-fio {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 820px;
  margin: 0 auto;
}

.gpt-msg.eu { display: flex; flex-direction: column; align-items: flex-end; }
.gpt-bolha {
  max-width: min(80%, 640px);
  padding: 10px 14px;
  background: var(--overlay-soft);
  border: 1px solid var(--border-color);
  border-radius: 18px 18px 6px 18px;
}
.gpt-bolha-texto {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-primary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.gpt-miniaturas { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-bottom: 8px; }
.gpt-bolha > .gpt-miniaturas:last-child { margin-bottom: 0; }
.gpt-miniatura { padding: 0; background: none; border: 0; border-radius: 10px; overflow: hidden; cursor: zoom-in; }
.gpt-miniatura img { display: block; width: 132px; height: 132px; object-fit: cover; }

.gpt-msg-acoes {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.gpt-msg:hover .gpt-msg-acoes,
.gpt-msg-acoes:focus-within,
.gpt-msg-acoes.sempre { opacity: 1; }
.gpt-msg-acoes .gpt-ic { width: 28px; height: 28px; }
.gpt-msg-acoes .gpt-ic i, .gpt-msg-acoes .gpt-ic svg { width: 14px; height: 14px; }
.gpt-meta { margin-left: 6px; font-size: 11px; color: var(--text-secondary); }

.gpt-msg.ele { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; }
.gpt-avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--chip-laranja-tinta);
  background: var(--chip-laranja-fundo);
  border: 1px solid var(--chip-laranja-borda);
  border-radius: 10px;
}
.gpt-avatar i, .gpt-avatar svg { width: 16px; height: 16px; }
.gpt-resposta { min-width: 0; padding-top: 4px; }
.gpt-resposta-corpo { font-size: 14.5px; line-height: 1.65; color: var(--text-primary); overflow-wrap: anywhere; }
.gpt-resposta-corpo > :first-child { margin-top: 0; }
.gpt-resposta-corpo p { margin: 0 0 10px; }
.gpt-resposta-corpo ul, .gpt-resposta-corpo ol { margin: 0 0 10px; padding-left: 22px; }
.gpt-resposta-corpo li { margin: 2px 0; }
.gpt-resposta-corpo strong { font-weight: 700; }
/* `:not(.gpt-bt)`: o "Baixar" é um <a>, e sem isto herdava o sublinhado
   laranja do link da prosa (esta regra pesa mais que a do botão). */
.gpt-resposta-corpo a:not(.gpt-bt) { color: var(--orange-ink); text-decoration: underline; }
.gpt-resposta-corpo code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9em;
  padding: 1px 5px;
  background: var(--overlay-soft);
  border-radius: 5px;
}
.gpt-resposta-corpo blockquote {
  margin: 0 0 10px;
  padding: 2px 0 2px 12px;
  color: var(--text-secondary);
  border-left: 3px solid var(--border-color);
}
.gpt-h { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 15px; margin: 14px 0 6px !important; }
.gpt-pre {
  margin: 0 0 10px;
  padding: 10px 12px;
  overflow-x: auto;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 10px;
}
.gpt-pre code { padding: 0; background: none; }
.gpt-meta-linha { font-size: 12px; color: var(--text-secondary); margin: 6px 0 0; }

/* ------------------------------------------------ o bloco de copy --- */
/* É a PEÇA. Destaca-se da prosa pela superfície própria, e é o único lugar
   com as ações de usar. */
.gpt-copy {
  margin: 12px 0;
  overflow: hidden;
  background-color: var(--bg-input);
  border: 1px solid var(--sup-borda);
  border-radius: 14px;
}
.gpt-copy.aberto { border-style: dashed; }
.gpt-copy-topo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--overlay-weak);
  border-bottom: 1px solid var(--hairline);
}
.gpt-copy-rotulo {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}
.gpt-copy-conta {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.gpt-copy-campo {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 7px 14px;
  font-size: 13px;
  border-bottom: 1px solid var(--hairline);
}
.gpt-copy-campo span {
  flex: none;
  width: 72px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  padding-top: 2px;
}
/* `pre-wrap`: o motor do WhatsApp não escreve <br> — as quebras vêm do texto,
   como no balão do Sandbox. */
.gpt-copy-texto {
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-primary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.gpt-copy-texto .wa-mono { font-family: 'JetBrains Mono', monospace; font-size: 0.92em; }
.gpt-copy-texto .wa-link { color: var(--accent-blue-ink); text-decoration: underline; }
.gpt-copy-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px;
  border-top: 1px solid var(--hairline);
}

.gpt-bt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  background: var(--overlay-weak);
  border: 1px solid var(--border-color);
  border-radius: 9px;
  cursor: pointer;
  transition: var(--transition);
}
.gpt-bt:hover { color: var(--text-primary); border-color: var(--border-active); }
.gpt-bt:focus-visible { outline: 2px solid var(--cf-orange); outline-offset: 1px; }
.gpt-bt.forte {
  color: var(--chip-laranja-tinta);
  background: var(--chip-laranja-fundo);
  border-color: var(--chip-laranja-borda);
}
.gpt-bt i, .gpt-bt svg { width: 14px; height: 14px; }

.gpt-selo {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--overlay-soft);
  border-radius: 999px;
}
.gpt-selo.alerta { color: var(--orange-ink); background: var(--accent-yellow-bg); }
.gpt-selo.ia { color: var(--accent-purple-ink); background: var(--accent-purple-bg); }
.gpt-sinal {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  font-size: 11px;
  font-weight: 800;
  color: #102850;
  background: var(--cf-orange);
  border-radius: 50%;
  cursor: help;
}

.gpt-aviso {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--chip-laranja-fundo);
  border: 1px solid var(--chip-laranja-borda);
  border-radius: 12px;
}
.gpt-aviso p { margin: 0 !important; flex: 1; }
.gpt-aviso > i, .gpt-aviso > svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--chip-laranja-tinta); }
.gpt-aviso.erro { background: var(--accent-red-bg); border-color: rgba(220, 38, 38, 0.4); }
.gpt-aviso.erro > i, .gpt-aviso.erro > svg { color: var(--badge-crm); }

/* ------------------------------------------------------------ imagens --- */
.gpt-img { margin: 12px 0; max-width: 440px; }
.gpt-img-abrir { display: block; width: 100%; padding: 0; background: none; border: 0; cursor: zoom-in; }
/* Altura com teto: um story 9:16 a 440px de largura teria quase 800px e
   empurraria a conversa para fora da tela. A largura segue a proporção. */
.gpt-img img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 520px;
  border: 1px solid var(--sup-borda);
  border-radius: 14px;
}
.gpt-img figcaption { display: flex; align-items: center; gap: 8px; margin: 8px 0 6px; }
.gpt-img-meta { font-size: 11px; color: var(--text-secondary); }
.gpt-img-acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.gpt-img-gerando {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  width: 100%;
  max-width: 320px;
  margin: 12px 0;
  font-size: 13px;
  color: var(--text-secondary);
  border: 1px dashed var(--border-color);
  border-radius: 14px;
  background: linear-gradient(110deg, var(--overlay-weak) 30%, var(--overlay-strong) 50%, var(--overlay-weak) 70%);
  background-size: 220% 100%;
  animation: gpt-brilho 1.5s linear infinite;
}
.gpt-img-gerando i, .gpt-img-gerando svg { width: 22px; height: 22px; }
.gpt-img-gerando b { font-variant-numeric: tabular-nums; }
@keyframes gpt-brilho { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* ------------------------------------------------ pensando e cursor --- */
.gpt-pensando { display: inline-flex; align-items: center; gap: 4px; color: var(--text-secondary); font-size: 13px; }
.gpt-pensando span {
  width: 6px;
  height: 6px;
  background: var(--chip-laranja-tinta);
  border-radius: 50%;
  animation: gpt-ponto 1.2s ease-in-out infinite;
}
.gpt-pensando span:nth-child(2) { animation-delay: 0.15s; }
.gpt-pensando span:nth-child(3) { animation-delay: 0.3s; margin-right: 4px; }
@keyframes gpt-ponto { 0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } }
.gpt-cursor {
  display: inline-block;
  width: 8px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--chip-laranja-tinta);
  border-radius: 2px;
  animation: gpt-piscar 1s steps(2, start) infinite;
}
@keyframes gpt-piscar { to { visibility: hidden; } }

/* ------------------------------------------------------- tela vazia --- */
.gpt-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 100%;
  padding: 24px 0;
  text-align: center;
}
.gpt-vazio-marca {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  color: var(--chip-laranja-tinta);
  background: var(--chip-laranja-fundo);
  border: 1px solid var(--chip-laranja-borda);
  border-radius: 16px;
}
.gpt-vazio-marca i, .gpt-vazio-marca svg { width: 26px; height: 26px; }
.gpt-vazio h3 { font-family: 'Sora', sans-serif; font-size: 22px; font-weight: 800; }
.gpt-sugestoes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 620px;
}
.gpt-sugestao {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  color: var(--text-primary);
  background: var(--overlay-weak);
  border: 1px solid var(--sup-borda);
  border-radius: 14px;
  cursor: pointer;
  transition: var(--transition);
}
.gpt-sugestao:hover { border-color: var(--border-active); background: var(--overlay-soft); }
.gpt-sugestao i, .gpt-sugestao svg { flex: none; width: 16px; height: 16px; color: var(--chip-laranja-tinta); }

/* ------------------------------------------------------------ o campo --- */
.gpt-compositor {
  width: calc(100% - 36px);
  max-width: 820px;
  margin: 0 auto;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  box-shadow: var(--sup-sombra);
  transition: border-color 0.15s ease;
}
.gpt-compositor:focus-within { border-color: var(--border-active); }
.gpt-campo-linha { display: flex; align-items: flex-end; gap: 6px; padding: 8px; }
#gptCampo {
  flex: 1;
  min-width: 0;
  min-height: 36px;
  max-height: 240px;
  padding: 6px 4px;
  font: inherit;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-primary);
  background: transparent;
  border: 0;
  outline: none;
  resize: none;
}
#gptCampo::placeholder { color: var(--text-secondary); opacity: 0.8; }
.gpt-enviar {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: #102850;
  background: var(--cf-orange);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: var(--transition);
}
.gpt-enviar:disabled { opacity: 0.35; cursor: default; }
.gpt-enviar.parar { color: var(--bg-surface); background: var(--text-primary); }
.gpt-enviar:focus-visible { outline: 2px solid var(--cf-orange); outline-offset: 2px; }
.gpt-enviar i, .gpt-enviar svg { width: 18px; height: 18px; }
.gpt-anexos { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 10px 0; }
.gpt-anexos[hidden] { display: none; }
.gpt-anexo { position: relative; }
.gpt-anexo img {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: cover;
  border: 1px solid var(--border-color);
  border-radius: 10px;
}
.gpt-anexo-tirar {
  position: absolute;
  top: -6px;
  right: -6px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  color: var(--bg-surface);
  background: var(--text-primary);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.gpt-anexo-tirar i, .gpt-anexo-tirar svg { width: 12px; height: 12px; }
.gpt-rodape { margin: 8px 0 12px; font-size: 11.5px; text-align: center; color: var(--text-secondary); }

.gpt-descer {
  position: absolute;
  left: 50%;
  bottom: 118px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--sup-borda);
  border-radius: 50%;
  box-shadow: var(--sup-sombra);
  transform: translateX(-50%);
  cursor: pointer;
}
.gpt-descer[hidden] { display: none; }
.gpt-descer i, .gpt-descer svg { width: 16px; height: 16px; }

.gpt-edicao {
  width: min(560px, 70vw);
  padding: 4px 2px;
  font: inherit;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-primary);
  background: transparent;
  border: 0;
  outline: none;
  resize: none;
}
.gpt-edicao-acoes { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }

/* ---------------------------------------------------------- contexto --- */
.gpt-contexto {
  display: none;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 16px;
  border-left: 1px solid var(--border-color);
}
#tab-copilot.gpt-contexto-aberto .gpt-contexto { display: block; }
.gpt-det { border-bottom: 1px solid var(--hairline); padding: 6px 0 10px; }
.gpt-det > summary {
  padding: 6px 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-secondary);
  cursor: pointer;
}
.gpt-det[open] > summary { color: var(--text-primary); }
.gpt-nota { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-secondary); }
.gpt-nota.erro { color: var(--badge-crm); }
.gpt-brief-texto { width: 100%; margin-top: 8px; font-size: 12.5px; line-height: 1.5; resize: vertical; }
.gpt-linha-acoes { display: flex; align-items: center; gap: 10px; margin-top: 8px; }

.cop-fatos { display: flex; flex-direction: column; gap: 4px; padding-top: 6px; }
.cop-fato {
  display: flex;
  gap: 10px;
  padding: 3px 0;
  font-size: 12.5px;
  line-height: 1.45;
  border-bottom: 1px dashed var(--border-color);
}
.cop-fato span { flex: 0 0 42%; color: var(--text-secondary); }

/* ---------------------------------------------- soltar e ampliar --- */
.gpt-soltar {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: none;
  place-items: center;
  font-family: 'Sora', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  background: rgba(7, 13, 25, 0.55);
  border: 2px dashed var(--cf-orange);
  border-radius: var(--sup-raio);
  pointer-events: none;
}
.gpt-soltar span { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; background: var(--bg-surface); border-radius: 12px; }
#tab-copilot.gpt-soltando .gpt-soltar { display: grid; }

.gpt-lupa {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 24px;
  background: rgba(3, 7, 15, 0.86);
  cursor: zoom-out;
}
.gpt-lupa[hidden] { display: none; }
.gpt-lupa img { max-width: 92vw; max-height: 84vh; border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
.gpt-lupa p { max-width: 720px; margin: 0; font-size: 13px; text-align: center; color: #e6ecf7; }

/* ---------------------------------------------------- tela estreita --- */
@media (max-width: 1100px) {
  #tab-copilot.gpt-contexto-aberto .gpt-app { grid-template-columns: 250px minmax(0, 1fr); }
  #tab-copilot.gpt-contexto-aberto .gpt-contexto {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    z-index: 4;
    width: min(340px, 92%);
    background: var(--bg-surface);
    box-shadow: var(--shadow-lg);
  }
  .gpt-app { position: relative; }
}
@media (max-width: 900px) {
  .gpt-app { grid-template-columns: minmax(0, 1fr); height: calc(100vh - 68px - 32px); }
  #tab-copilot.gpt-contexto-aberto .gpt-app { grid-template-columns: minmax(0, 1fr); }
  .gpt-historico { display: none; }
  #tab-copilot.gpt-lista-aberta .gpt-historico {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    z-index: 4;
    display: flex;
    width: min(280px, 86%);
    background: var(--bg-surface);
    box-shadow: var(--shadow-lg);
  }
  .gpt-so-estreito { display: inline-grid; }
  .gpt-marca span { display: none; }
  .gpt-sugestoes { grid-template-columns: minmax(0, 1fr); }
  .gpt-bolha { max-width: 90%; }
  .gpt-mensagens { padding: 18px 12px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .gpt-img-gerando, .gpt-pensando span, .gpt-cursor { animation: none; }
}

/* ==========================================================================
   DESEMPENHO — o número do BigQuery

   NENHUMA COR NOVA. Só tokens que já existem, e sempre o par certo:
   `--accent-*-ink` onde a cor é texto ou ícone pequeno, `--accent-*-bg` e os
   `--overlay-*` onde a cor é preenchimento. Ver *Cor de preenchimento ≠ cor de
   tinta* no CLAUDE.md — é exatamente aqui, num bloco cheio de número colorido,
   que se erra isso e o tema claro fica ilegível.

   As barras do ranking são ILUSTRAÇÃO, sem eixo, e é decisão do time:
   "deixa ele apenas ilustração". A largura é relativa à maior mensagem do
   ciclo. Eixo daria ares de precisão a uma atribuição que é aproximada por
   natureza — um lead que clicou em duas mensagens conta nas duas.
   ========================================================================== */

.desemp-peca {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-top: 12px;
}
.desemp-peca[hidden] { display: none; }

.desemp-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}
.desemp-head h4 {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--accent-blue-ink); margin: 0;
}
/* O Lucide troca o <i> por um <svg>: um seletor que case só `i` deixa de
   valer depois de createIcons(). Sempre os dois. */
.desemp-head h4 i, .desemp-head h4 svg { width: 14px; height: 14px; }
.desemp-head-dir { display: flex; align-items: center; gap: 8px; }
/* `--text-secondary`, não `--text-muted`: no tema claro o muted rende 3,5:1
   sobre esta superfície. Ele serve para rótulo incidental; a hora da consulta
   é o que diz se o número na tela é de agora ou de meia hora atrás. */
.desemp-quando { font-size: 11px; color: var(--text-secondary); }
.desemp-refresh {
  background: none; border: none; cursor: pointer; padding: 3px;
  color: var(--text-secondary); border-radius: var(--radius-sm);
  display: inline-flex; line-height: 0;
}
.desemp-refresh:hover { background: var(--overlay-soft); color: var(--text-primary); }
.desemp-refresh i, .desemp-refresh svg { width: 14px; height: 14px; }

/* Os três números da peça. */
.desemp-numeros { display: flex; gap: 22px; flex-wrap: wrap; }
.desemp-num { display: flex; flex-direction: column; }
.desemp-num strong {
  font-family: 'Sora', sans-serif; font-weight: 800; font-size: 22px;
  line-height: 1.1; color: var(--text-strong);
}
.desemp-num span { font-size: 11.5px; color: var(--text-secondary); margin-top: 2px; }
.desemp-num-chave strong {
  font-family: 'Menlo', 'Consolas', monospace; font-size: 15px;
  color: var(--orange-ink); letter-spacing: -.01em;
}

/* As três frases de estado. Nenhuma delas é "0 leads". */
.desemp-vazio, .desemp-erro, .desemp-alerta, .desemp-conf, .desemp-dica {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 12.5px; line-height: 1.5; margin: 10px 0 0;
}
.desemp-vazio, .desemp-dica { color: var(--text-secondary); }
.desemp-erro { color: var(--badge-crm); }
/* O aviso mais importante do bloco, e o que mais falhava: `--orange-ink` sobre
   a mescla amarela rende 4,15:1 no tema claro. A cor sai do TEXTO e vai para a
   borda e o ícone — é a mesma decisão do termômetro de prazo, pelo mesmo
   motivo. O texto fica em `--text-primary`, que passa nos dois temas. */
.desemp-alerta {
  color: var(--text-primary); background: var(--accent-yellow-bg);
  border-left: 3px solid var(--orange-ink);
  border-radius: var(--radius-sm); padding: 8px 10px;
}
/* Só o ÍCONE leva a cor. A data e a chave dentro do aviso ficam em
   `--text-primary`: em `--orange-ink` elas rendem 4,15:1 no tema claro, e
   negrito de 12,5px não é "texto grande" pela WCAG — o limite é 18,66px em
   negrito. Quem quiser conferir: contraste calculado sobre a MESCLA do amarelo
   translúcido com a superfície, nunca sobre a cor pura. */
.desemp-alerta i, .desemp-alerta svg { color: var(--orange-ink); }
.desemp-conf { color: var(--text-secondary); font-size: 12px; }
.desemp-vazio i, .desemp-vazio svg, .desemp-erro i, .desemp-erro svg,
.desemp-alerta i, .desemp-alerta svg, .desemp-conf i, .desemp-conf svg,
.desemp-dica i, .desemp-dica svg {
  width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px;
}
.desemp-alerta code, .desemp-rodape em {
  font-family: 'Menlo', 'Consolas', monospace; font-size: .92em;
}

/* A repartição por lista de destino. 924 leads na msg01 são a soma de cinco
   listas — quem só olha o total acha que uma mensagem fez tudo sozinha. */
.desemp-listas {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px;
}
.desemp-listas-rot { font-size: 11px; color: var(--text-muted); }
.desemp-chip {
  font-size: 11.5px; padding: 2px 8px; border-radius: 999px;
  background: var(--overlay-weak); color: var(--text-secondary);
  border: 1px solid var(--hairline);
}
.desemp-chip strong { color: var(--text-primary); }

/* ---------------------------------------------------------- a aba inteira -- */

.desemp-aba {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.desemp-aba:empty { display: none; }

.desemp-cartoes {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
}
.desemp-cartao {
  background: var(--bg-input); border: 1px solid var(--hairline);
  border-radius: var(--radius-sm); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.desemp-cartao strong {
  font-family: 'Sora', sans-serif; font-weight: 800; font-size: 19px;
  color: var(--text-strong); line-height: 1.15;
}
.desemp-cartao span { font-size: 11px; color: var(--text-secondary); }

.desemp-rank { margin-top: 16px; }
.desemp-rank-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 8px;
}
.desemp-rank-head h4 {
  font-family: 'Sora', sans-serif; font-weight: 700; font-size: 14px; margin: 0;
}
.desemp-rank-head span {
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: 11.5px; color: var(--text-secondary);
}

.desemp-linha {
  display: grid;
  grid-template-columns: minmax(150px, 1.4fr) minmax(80px, 2fr) 74px 62px;
  align-items: center; gap: 10px;
  padding: 5px 0; border-bottom: 1px solid var(--hairline);
}
.desemp-linha:last-of-type { border-bottom: none; }
.desemp-linha-id { display: flex; flex-direction: column; min-width: 0; }
.desemp-term {
  font-family: 'Menlo', 'Consolas', monospace; font-size: 12px;
  color: var(--orange-ink); font-weight: 600;
}
.desemp-titulo {
  font-size: 12px; color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.desemp-barra-caixa {
  background: var(--overlay-weak); border-radius: 999px; height: 9px; overflow: hidden;
}
.desemp-barra { height: 100%; border-radius: 999px; }
.desemp-barra.whatsapp { background: var(--accent-green); }
.desemp-barra.email { background: var(--accent-blue); }
.desemp-linha-num {
  font-size: 12.5px; font-weight: 700; color: var(--text-primary); text-align: right;
}
.desemp-linha-num.secundario { font-weight: 500; color: var(--text-secondary); }

.desemp-rodape {
  font-size: 11.5px; color: var(--text-secondary);
  line-height: 1.5; margin: 10px 0 0;
}
.desemp-outros { font-size: 12.5px; color: var(--text-secondary); margin-top: 8px; }
.desemp-outros ul { margin: 6px 0 0; padding-left: 18px; }
.desemp-outros li { margin-bottom: 3px; }
.desemp-outros code {
  font-family: 'Menlo', 'Consolas', monospace; font-size: .92em; color: var(--orange-ink);
}

/* -------------------------------------------------- o selo no cronograma -- */

/* Pós-decoração: o desempenho.js insere isto no cartão já renderizado. Não
   encolhe (flex-shrink: 0) porque o título ao lado tem ellipsis e comeria o
   número antes de comer a si mesmo. */
.crono-leads {
  flex-shrink: 0;
  font-size: 11px; font-weight: 700;
  padding: 1px 7px; border-radius: 999px;
  background: var(--accent-green-bg); color: var(--accent-green-ink);
  white-space: nowrap;
}
.crono-leads.divergente {
  background: var(--accent-yellow-bg); color: var(--orange-ink);
}

@media (max-width: 720px) {
  .desemp-linha { grid-template-columns: 1fr 64px 56px; }
  .desemp-barra-caixa { display: none; }
}

/* ==========================================================================
   OS TRÊS TIMES NA TELA — CRM lilás · Copy rosa · Projeto bege

   Pedido do time (`melhorias_time_copy.md`): *"adicionar opção de times e
   diferenciá-los por cores. Assim a gente não se perde misturando as tarefas e
   checklists"*.

   ⚠️ O preenchimento é a cor a 15% e a tinta é token PRÓPRIO por tema — nunca
   a mesma cor nos dois papéis. É a regra de *Cor de preenchimento ≠ cor de
   tinta*, e o bege é o caso que a prova: #c8a882 como texto sobre branco rende
   1,9:1. A tinta dele no tema claro é um marrom fechado.

   ⚠️ Isto NÃO é sinal de permissão. As cores dizem de quem é a tarefa, não
   quem pode aprovar — ver o cabeçalho de TIMES no app.js.
   ========================================================================== */

.badge-time-crm     { background: rgba(167, 139, 250, 0.15); color: var(--time-crm-ink); }
.badge-time-copy    { background: rgba(236, 72, 153, 0.15);  color: var(--time-copy-ink); }
.badge-time-projeto { background: rgba(200, 168, 130, 0.15); color: var(--time-projeto-ink); }

/* A mesma cor quando o time aparece como texto solto (checklist do dia). */
.time-tinta.time-crm     { color: var(--time-crm-ink); font-weight: 600; }
.time-tinta.time-copy    { color: var(--time-copy-ink); font-weight: 600; }
.time-tinta.time-projeto { color: var(--time-projeto-ink); font-weight: 600; }

/* ---------------------------------------------- o checklist com subitens -- */

/* O grupo existe só para a dobra: `alternarEtapa` alterna `.etapa-fechada`
   nele, e é isso que esconde os subitens sem tocar em cada linha. */
.ck-grupo { display: block; }
.ck-grupo.etapa-fechada .ck-subitens { display: none; }

/* Um filete na cor do time à esquerda do item. Preenchimento, não tinta — a
   barra é forma, e o texto ao lado continua com a cor de sempre. */
.ck-item.ck-time-crm     { box-shadow: inset 3px 0 0 var(--time-crm); }
.ck-item.ck-time-copy    { box-shadow: inset 3px 0 0 var(--time-copy); }
.ck-item.ck-time-projeto { box-shadow: inset 3px 0 0 var(--time-projeto); }
.ck-item[class*="ck-time-"] { padding-left: 10px; }

/* O recuo do subitem. `--radius-sm` de borda à esquerda desenha a linha da
   hierarquia sem precisar de um pseudo-elemento por nível — e são dois níveis
   só, por trava no banco. */
.ck-subitens {
  margin-left: 22px;
  padding-left: 10px;
  border-left: 1px solid var(--hairline);
}
.ck-item.ck-sub .ck-texto { font-size: 12.5px; }

/* A seta ocupa a coluna da caixa de marcar: item com subitens não tem caixa
   própria, e sem isto o texto do pai ficaria desalinhado dos filhos.

   ⚠️ `flex: none`, `padding` e `margin` zerados, e não só `width`. A regra
   geral `.etapa-dobra` é a do cabeçalho da fase e declara `flex: 1` — com a
   base em 0%, a largura de 20px deixava de valer e a seta dividia a linha meio
   a meio com o texto: "Conferências" e "Aula Magna" apareciam no meio do
   quadro do aquecimento. Achado no retorno de 29/09/2026. */
.ck-item .etapa-dobra {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 20px; height: 20px; padding: 0; margin: 0;
  cursor: pointer; border-radius: var(--radius-sm);
  color: var(--text-secondary);
}
.ck-item .etapa-dobra:hover { background: var(--overlay-soft); color: var(--text-primary); }
.ck-item .etapa-dobra .etapa-seta,
.ck-item .etapa-dobra svg { width: 14px; height: 14px; }

/* "3/8" no item que tem subitens. */
.ck-conta {
  flex-shrink: 0;
  font-size: 11px; font-weight: 700;
  padding: 1px 7px; border-radius: 999px;
  background: var(--overlay-weak); color: var(--text-secondary);
}

.ck-time {
  flex-shrink: 0;
  width: 92px; min-width: 0;
  font-family: inherit; font-size: 11.5px;
  padding: 3px 6px;
  border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  background: var(--bg-input); color: var(--text-secondary);
}
.ck-time.ck-time-crm     { color: var(--time-crm-ink);     border-color: var(--time-crm); }
.ck-time.ck-time-copy    { color: var(--time-copy-ink);    border-color: var(--time-copy); }
.ck-time.ck-time-projeto { color: var(--time-projeto-ink); border-color: var(--time-projeto); }
/* A lista suspensa de um <select> é desenhada pelo sistema operacional, fora da
   árvore visual da página. Sem estes tokens, a opção herdaria a cor do time e
   ficaria ilegível — a mesma armadilha do <select> do cabeçalho. */
.ck-time option { background: var(--menu-bg); color: var(--menu-fg); }

.ck-add-sub {
  flex-shrink: 0;
  background: none; border: none; cursor: pointer; padding: 3px;
  color: var(--text-muted); border-radius: var(--radius-sm);
  display: inline-flex; line-height: 0;
}
.ck-add-sub:hover { background: var(--overlay-soft); color: var(--text-primary); }
.ck-add-sub i, .ck-add-sub svg { width: 14px; height: 14px; }

/* O checklist dentro da seção da fase, no Cronograma. Espaço acima e abaixo
   para ele não colar no cabeçalho da fase nem no primeiro dia de mensagens. */
[id^="ckFase-"]:not(:empty) { margin: 4px 0 14px; }

/* ------------------------------------- o bloco de destinos, recolhido -- */

/* Pedido do time: "deixar minimizado a parte de CRM (na aba sandbox)". O
   cabeçalho NUNCA some — some o corpo. Recolher o bloco inteiro esconderia o
   próprio botão de reabrir. */
.wa-peca.etapa-fechada .wa-peca-corpo { display: none; }
.wa-peca .wa-peca-topo .etapa-dobra {
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; color: inherit;
}
.wa-peca .wa-peca-topo .etapa-seta,
.wa-peca .wa-peca-topo .etapa-dobra svg { width: 13px; height: 13px; }
.wa-peca.etapa-fechada .wa-peca-topo { margin-bottom: 0; }

@media (max-width: 720px) {
  .ck-time { width: 74px; }
  .ck-subitens { margin-left: 12px; }
}

/* ==========================================================================
   CALENDÁRIO GERAL — todos os ciclos ativos no mesmo mês

   Pedido da reunião de 01/09/2026: *"um calendário com tudo que tá rolando"*.
   Ele divide a aba Cronograma com a lista, por um alternador — e não ganhou
   aba própria porque o pedido mais repetido da mesma reunião foi
   simplicidade.

   ⚠️ NENHUMA COR NOVA. A barra lateral de cada item é a cor do TIME, com as
   mesmas classes `ck-time-*` do checklist; o resto sai de tokens que já
   existem. Ver *Cor de preenchimento ≠ cor de tinta*.
   ========================================================================== */

.crono-visao {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 16px; flex-wrap: wrap;
}
.crono-visao-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  padding: 6px 12px; cursor: pointer;
  background: var(--bg-input); color: var(--text-secondary);
  border: 1px solid var(--border-color); border-radius: var(--radius-sm);
}
.crono-visao-btn:hover { color: var(--text-primary); }
/* Igual ao `.nav-tab.active`: o texto é forte e só o ícone é laranja. */
.crono-visao-btn.ativa {
  background: var(--cf-orange-glow); color: var(--text-primary);
  border-color: var(--border-active);
}
.crono-visao-btn.ativa i, .crono-visao-btn.ativa svg { color: var(--orange-ink); }
.crono-visao-btn i, .crono-visao-btn svg { width: 14px; height: 14px; }
.crono-visao-nota { font-size: 12px; color: var(--text-secondary); margin-left: 4px; }

.cal-barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.cal-nav { display: flex; align-items: center; gap: 8px; }
.cal-mes {
  font-family: 'Sora', sans-serif; font-weight: 700; font-size: 15px;
  min-width: 170px; text-align: center; text-transform: capitalize;
}

/* Sete colunas iguais. `minmax(0, 1fr)` e não `1fr`: sem o minmax, um título
   longo estica a coluna e a semana deixa de ter sete larguras iguais. */
.cal-grade {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--border-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.cal-cabeca {
  background: var(--bg-card);
  padding: 6px 8px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-secondary); text-align: center;
}
.cal-dia {
  background: var(--bg-surface);
  min-height: 104px; padding: 6px;
  display: flex; flex-direction: column; gap: 3px;
}
/* Dia de outro mês continua visível, e mais apagado. Esconder faria a semana
   ficar com buraco, e é a semana que a pessoa lê. */
.cal-dia.fora { opacity: .45; }
/* "Hoje" é um ANEL, não um fundo — é o mesmo tratamento do `.crono-day.hoje`,
   e é o que mantém o texto legível. Fundo laranja com tinta laranja rende
   3,9:1 no tema claro; o anel não mexe no contraste de nada. */
.cal-dia.hoje { box-shadow: inset 0 0 0 2px var(--cf-orange); }
.cal-dia.com-marco { box-shadow: inset 0 2px 0 var(--cf-orange); }
.cal-dia.hoje.com-marco {
  box-shadow: inset 0 0 0 2px var(--cf-orange), inset 0 2px 0 var(--cf-orange);
}

.cal-dia-num {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; font-weight: 700; color: var(--text-secondary);
}
.cal-dia.hoje .cal-dia-num { color: var(--text-primary); }
.cal-hoje-tag {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--orange-ink);
}

/* O marco é o "quando que começa" do pedido, então precisa saltar — mas a cor
   vai no ÍCONE e o texto fica em `--text-primary`. `--orange-ink` sobre a
   mescla laranja rende 4,15:1 no tema claro, e negrito de 10,5px não é texto
   grande pela WCAG. Mesma decisão do aviso do desempenho. */
.cal-marco {
  display: flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 700; line-height: 1.3;
  padding: 2px 5px; border-radius: var(--radius-sm);
  background: var(--cf-orange-glow); color: var(--text-primary);
}
.cal-marco i, .cal-marco svg {
  width: 11px; height: 11px; flex-shrink: 0; color: var(--orange-ink);
}
.cal-marco span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cal-item {
  display: flex; align-items: center; gap: 5px;
  width: 100%; text-align: left; cursor: pointer;
  font-family: inherit; font-size: 11px; line-height: 1.3;
  padding: 3px 5px 3px 8px;
  background: var(--bg-card); color: var(--text-primary);
  border: none; border-radius: var(--radius-sm);
  box-shadow: inset 3px 0 0 var(--overlay-strong);
}
.cal-item:hover { background: var(--bg-card-hover); }
/* A barra lateral é o TIME. Mesmas classes do checklist: uma cor de time só,
   num lugar só. */
.cal-item.ck-time-crm     { box-shadow: inset 3px 0 0 var(--time-crm); }
.cal-item.ck-time-copy    { box-shadow: inset 3px 0 0 var(--time-copy); }
.cal-item.ck-time-projeto { box-shadow: inset 3px 0 0 var(--time-projeto); }
/* Já foi: apaga, como na lista do Cronograma. */
.cal-item.status-enviado, .cal-item.status-cancelado { opacity: .55; }

.cal-item-hora { font-variant-numeric: tabular-nums; color: var(--text-secondary); flex-shrink: 0; }
.cal-item-sigla { font-weight: 700; color: var(--text-secondary); flex-shrink: 0; }
.cal-item-titulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cal-mais {
  background: none; border: none; cursor: pointer; padding: 2px 5px;
  font-family: inherit; font-size: 10.5px; font-weight: 600;
  color: var(--accent-blue-ink); text-align: left; border-radius: var(--radius-sm);
}
.cal-mais:hover { background: var(--overlay-soft); }

.cal-legenda {
  display: flex; flex-wrap: wrap; gap: 10px 16px;
  margin-top: 12px; padding: 10px 12px;
  background: var(--bg-card); border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  font-size: 12px; color: var(--text-secondary);
}
.cal-legenda-item { display: inline-flex; align-items: center; gap: 6px; }
.cal-legenda-item strong { color: var(--orange-ink); }
.cal-legenda-nota { flex: 1 1 100%; font-size: 11.5px; color: var(--text-secondary); }

/* Num telefone, sete colunas não cabem. A grade rola dentro do próprio
   contêiner — o corpo da página nunca rola na horizontal (regra do CLAUDE.md).
   O selo de leads do BigQuery some: no quadrado de 104px ele empurra o título
   para fora, e o número já está na lista e no editor. */
@media (max-width: 860px) {
  /* A ROLAGEM É DO INVÓLUCRO, a largura mínima é da grade. Num elemento só,
     `min-width` maior que a tela faria o CORPO da página rolar na horizontal —
     que é a regra que o CLAUDE.md proíbe. */
  .cal-grade-wrap { overflow-x: auto; }
  .cal-grade { min-width: 720px; }
  .cal-item .crono-leads { display: none; }
}

/* ==========================================================================
   O PAINEL DE CAPTAÇÃO — a planilha do time

   A forma veio da "Desempenho - Pós RT - Ciclo 21": três grupos de coluna
   (total · hoje · vendas), e as linhas em Total → Meta → % Meta, com as
   origens embaixo de Orgânico e de Pago. Pedido da reunião: *"a formatação a
   gente deixa do mesmo jeito"*.

   ⚠️ NENHUMA COR NOVA. As faixas de bloco usam os mesmos véus `--overlay-*`
   do resto; o único destaque colorido é a barra de progresso da meta, em
   `--cf-orange`, que é preenchimento e não tinta.
   ========================================================================== */

.desemp-capt { margin-top: 16px; }

.capt-metas {
  display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 10px;
  background: var(--bg-input); border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
}
.capt-metas-rot {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-secondary); padding-bottom: 5px;
}
.capt-meta-campo { display: flex; flex-direction: column; gap: 3px; }
.capt-meta-campo span { font-size: 11px; color: var(--text-secondary); }
.capt-meta-campo input {
  width: 118px; font-family: inherit; font-size: 12.5px;
  padding: 5px 8px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: var(--bg-surface); color: var(--text-primary);
}
.capt-metas-nota { font-size: 11.5px; color: var(--text-secondary); padding-bottom: 5px; }

.capt-tabela {
  width: 100%; border-collapse: collapse;
  font-size: 12px; white-space: nowrap;
}
.capt-tabela th, .capt-tabela td { padding: 5px 9px; text-align: left; }
.capt-tabela thead th {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: var(--text-secondary);
  border-bottom: 1px solid var(--border-color);
}
.capt-tabela .capt-grupos th {
  text-align: center; color: var(--orange-ink);
  border-bottom: none; padding-bottom: 2px;
}
.capt-tabela tbody th {
  font-weight: 600; color: var(--text-primary); text-align: left;
}
.capt-tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.capt-tabela .num.forte { font-weight: 700; color: var(--text-strong); }
/* A coluna que separa os três grupos. Um filete, não uma borda em cada célula:
   borda por célula desenha o filete quebrado nas linhas de meta, que têm
   colspan. */
.capt-tabela .sep { width: 10px; padding: 0; background: var(--hairline); }

/* ==========================================================================
   AS TRÊS FAIXAS — verde (total) · âmbar (orgânico) · petróleo (pago)

   São as cores da planilha do time, e elas não são enfeite: o Gabriel olhou a
   planilha e disse *"é muito fácil de ver"*. A faixa colorida é o que faz o
   olho achar o bloco sem ler — numa tabela de catorze colunas, isso é a
   diferença entre consultar e procurar.

   ⚠️ A primeira versão desta tela usou véus neutros (`--overlay-*`), pela
   ideia de que três cores numa tabela grande virariam ruído. Estava errado
   para ESTA tela, e o que decidiu foi a frase do Gabriel.

   FAIXA SÓLIDA COM TEXTO BRANCO, NOS DOIS TEMAS
   ----------------------------------------------
   Como a `.app-header`, que fica azul no claro e no escuro. Não é preguiça de
   fazer variante: o bloco é a âncora visual, e uma âncora que muda de peso
   entre os temas deixa de ancorar.

   O verde `#38761d` e o petróleo `#134f5c` são LITERALMENTE os da planilha —
   com texto branco rendem 5,56:1 e 9,13:1.

   ⚠️ O dourado dela, `#bf9000`, rende **2,91:1** com texto branco e ficou de
   fora. Copiar a cor exata seria copiar um defeito de legibilidade para dentro
   de uma tela cuja razão de existir é ser fácil de ver. `#854d0e` fica na
   mesma família e rende 6,85:1.

   Meta, % Meta e as origens usam TINTA do mesmo tom sobre o cartão, com texto
   normal — medido: nenhuma combinação abaixo de 5,0:1 nos dois temas.
   ========================================================================== */

/* As faixas. Cor literal, e não token: elas são iguais nos dois temas, então
   um token que não muda por tema só acrescentaria uma indireção. */
.capt-tabela tr.capt-faixa th, .capt-tabela tr.capt-faixa td {
  color: #ffffff; font-weight: 700;
}
.capt-tabela tr.capt-faixa.b-total th, .capt-tabela tr.capt-faixa.b-total td { background: #38761d; }
.capt-tabela tr.capt-faixa.b-organico th, .capt-tabela tr.capt-faixa.b-organico td { background: #854d0e; }
.capt-tabela tr.capt-faixa.b-pago th, .capt-tabela tr.capt-faixa.b-pago td { background: #134f5c; }
/* O filete entre grupos some dentro da faixa: ali a cor já separa. */
.capt-tabela tr.capt-faixa .sep { background: rgba(255, 255, 255, 0.25); }

/* Meta e % Meta: tinta do mesmo tom, texto normal. */
.capt-tabela tr.capt-meta.b-total td, .capt-tabela tr.capt-meta.b-total th,
.capt-tabela tr.capt-pct.b-total td, .capt-tabela tr.capt-pct.b-total th {
  background: rgba(16, 185, 129, 0.09);
}
.capt-tabela tr.capt-meta.b-organico td, .capt-tabela tr.capt-meta.b-organico th,
.capt-tabela tr.capt-pct.b-organico td, .capt-tabela tr.capt-pct.b-organico th {
  background: rgba(234, 179, 8, 0.09);
}
.capt-tabela tr.capt-meta.b-pago td, .capt-tabela tr.capt-meta.b-pago th,
.capt-tabela tr.capt-pct.b-pago td, .capt-tabela tr.capt-pct.b-pago th {
  background: rgba(59, 130, 246, 0.09);
}

/* As origens: o tom mais leve, para a fileira ainda pertencer ao bloco. */
.capt-tabela tr.capt-origem.b-organico td, .capt-tabela tr.capt-origem.b-organico th {
  background: rgba(234, 179, 8, 0.045);
}
.capt-tabela tr.capt-origem.b-pago td, .capt-tabela tr.capt-origem.b-pago th {
  background: rgba(59, 130, 246, 0.045);
}
/* O subtotal do Google: a mesma cor, com o rótulo em itálico para não ser
   confundido com uma origem a mais — ele repete o que já está acima. */
.capt-tabela tr.capt-subtotal th { font-style: italic; }

.capt-tabela tr.capt-meta td, .capt-tabela tr.capt-meta th,
.capt-tabela tr.capt-pct td, .capt-tabela tr.capt-pct th {
  color: var(--text-secondary); font-size: 11.5px; font-weight: 500;
}
.capt-tabela tr.capt-extra th, .capt-tabela tr.capt-extra td {
  color: var(--text-secondary);
}
.capt-tabela tr.capt-origem th { font-weight: 500; padding-left: 22px; }
/* Origem sem nenhum lead continua na tabela, apagada: sumir faria a lista
   mudar de tamanho a cada dia e ninguém acharia a linha que procura. */
.capt-tabela tr.capt-origem.apagada { opacity: .5; }

/* Os três títulos de grupo, na cor do bloco a que pertencem. */
.capt-tabela .capt-grupos th.g-total { color: var(--accent-green-ink); }
.capt-tabela .capt-grupos th.g-hoje { color: var(--orange-ink); }
.capt-tabela .capt-grupos th.g-vendas { color: var(--accent-blue-ink); }

/* A faixa do período — o "início da captação / dias restantes" que na planilha
   fica solto embaixo da tabela. */
.capt-periodo {
  display: flex; gap: 18px; flex-wrap: wrap;
  padding: 7px 12px; margin-bottom: 8px;
  background: var(--bg-input); border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  font-size: 12px; color: var(--text-secondary);
}
.capt-periodo strong { color: var(--text-primary); }

/* Campanha não mapeada: o aviso fica na mesma faixa do período, ao lado das
   datas a que ele se refere — e não numa faixa própria, que na segunda semana
   vira papel de parede. A cor é TINTA (`--orange-ink`), não preenchimento:
   ver *Cor de preenchimento ≠ cor de tinta* no CLAUDE.md. */
.capt-alerta { color: var(--orange-ink); }
.capt-alerta strong { color: var(--orange-ink); }

/* --- o seletor de vista da aba Desempenho: ciclo ou funil perpétuo --- */
.desemp-vista {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  margin-bottom: 12px;
}
.desemp-vista label { display: flex; gap: 8px; align-items: center; }
.desemp-vista label > span {
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-secondary);
}
.desemp-vista select {
  padding: 6px 10px; min-width: 240px;
  background: var(--bg-input); color: var(--text-primary);
  border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 13px;
}
.desemp-periodo { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.desemp-periodo > span { font-size: 12px; color: var(--text-secondary); }
.desemp-periodo input[type="date"] {
  padding: 5px 8px;
  background: var(--bg-input); color: var(--text-primary);
  border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 13px;
}
.desemp-atalho {
  padding: 5px 10px; cursor: pointer;
  background: transparent; color: var(--text-secondary);
  border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 12px;
}
.desemp-atalho:hover { background: var(--row-hover); color: var(--text-primary); }
/* O atalho ativo é marcado por borda e tinta, não por fundo colorido: o par
   preenchimento/tinta da laranja da marca não passa em contraste como fundo de
   texto no tema claro. */
.desemp-atalho.ativo {
  border-color: var(--orange-ink); color: var(--orange-ink); font-weight: 600;
}

.capt-tabela tbody tr:hover td, .capt-tabela tbody tr:hover th { background: var(--row-hover); }

/* A barra de progresso da meta — o "barra de progresso até chegar às metas"
   que a reunião pediu. Fica DENTRO da célula do %, sem largura fixa. */
.capt-barra {
  height: 3px; margin-top: 3px; border-radius: 999px;
  background: var(--overlay-weak); overflow: hidden;
}
.capt-barra span { display: block; height: 100%; background: var(--cf-orange); }

@media (max-width: 720px) {
  .capt-meta-campo input { width: 92px; }
}


/* ==========================================================================
   CHAT DO ROBOCOPY — botão flutuante e painel
   ==========================================================================
   Tokens da casa, sem cor nova. O painel é escuro nos DOIS temas, como a
   .app-header e o .login-card: o mascote tem fundo azul-marinho, e um painel
   que muda de peso entre os temas descolaria do avatar. Por isso ele re-escopa
   os tokens de texto, em vez de cada regra filha saber qual tema está ativo. */

#rcRaiz { position: fixed; right: 20px; bottom: 20px; z-index: 900; }

.rc-botao {
  width: 60px; height: 60px; border-radius: 50%;
  border: 2px solid var(--cf-orange); background: #0d1f3d;
  padding: 0; cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
  transition: transform .15s ease, box-shadow .15s ease;
}
.rc-botao:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .45); }
.rc-botao:focus-visible { outline: 3px solid var(--cf-orange); outline-offset: 3px; }
.rc-botao img { width: 52px; height: 52px; border-radius: 50%; display: block; }

.rc-painel {
  position: absolute; right: 0; bottom: 74px;
  width: min(420px, calc(100vw - 40px));
  /* ⚠️ A altura desconta o CABEÇALHO, e a conta tem uma parcela fácil de
     esquecer. A `.app-header` é sticky com 68px e z-index 1000; o painel (900)
     passa POR BAIXO dela, então painel alto demais tem o próprio título
     encoberto — foi o relato.

     A soma: 68 do cabeçalho + 16 de respiro + 74 do `bottom` do painel + 20 do
     `bottom` do #rcRaiz = 178. O último é o que me escapou na primeira
     tentativa: o painel é `absolute` dentro do #rcRaiz, que já está a 20px do
     fundo da janela, então o `bottom: 74px` dele vale 94px de viewport.
     Medido em três alturas de tela — com 158 ainda sobrepunha 4px em 702px. */
  height: min(620px, calc(100vh - 178px));
  display: flex; flex-direction: column; overflow: hidden;
  background: #0d1f3d; border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 16px; box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
  /* re-escopo, como a .app-header faz */
  --text-primary: #f2f6fc; --text-secondary: #c3d0e4; --text-muted: #8fa3c0;
  color: var(--text-primary);
}
.rc-painel[hidden] { display: none; }

.rc-cab {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .12); background: rgba(0, 0, 0, .18);
}
.rc-cab img { border-radius: 50%; }
.rc-cab div { display: flex; flex-direction: column; line-height: 1.25; flex: 1; }
.rc-cab strong { font-size: 14px; }
.rc-cab span { font-size: 11px; color: var(--text-muted); }
.rc-x {
  background: none; border: 0; color: var(--text-secondary);
  font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.rc-x:hover { color: var(--text-primary); }
/* O de expandir é ícone, não caractere: precisa de caixa própria e o seletor
   tem de casar o <svg> que o Lucide põe no lugar do <i>. */
.rc-x-icone { display: grid; place-items: center; width: 26px; height: 26px;
              border-radius: 6px; }
.rc-x-icone:hover { background: rgba(255, 255, 255, .1); }
.rc-x-icone i, .rc-x-icone svg { width: 15px; height: 15px; }

/* Na aba do RoboCopy o botão flutuante some — ele abriria um chat por cima do
   chat, e ainda cobriria o canto inferior da tabela. A faixa do ciclo ativo
   também some (regra junto da `na-home`, acima): o RoboCopy responde sobre
   todos os ciclos, e o painel mostra um cartão por ciclo — a faixa de UM ciclo
   em cima dizia que a tela era daquele ciclo, e não é. */
body.na-robocopy #rcRaiz { display: none; }

.rc-corpo { flex: 1; overflow-y: auto; padding: 14px; display: flex;
            flex-direction: column; gap: 12px; }
.rc-vazio { color: var(--text-muted); font-size: 13px; line-height: 1.5; margin: auto 0; }

.rc-msg { display: flex; gap: 8px; align-items: flex-start; }
.rc-eu { justify-content: flex-end; }
.rc-face { border-radius: 50%; flex: none; margin-top: 2px; }
.rc-balao {
  max-width: 86%; padding: 9px 12px; border-radius: 12px; font-size: 13px;
  line-height: 1.55; word-break: break-word;
}
.rc-eu .rc-balao { background: var(--cf-orange); color: #1a1205; border-bottom-right-radius: 4px; }
.rc-ele .rc-balao { background: rgba(255, 255, 255, .07); border-bottom-left-radius: 4px; }
.rc-balao p { margin: 0 0 8px; }
.rc-balao p:last-child { margin-bottom: 0; }
.rc-balao ul { margin: 0 0 8px; padding-left: 18px; }
.rc-balao code { background: rgba(0, 0, 0, .3); padding: 1px 5px; border-radius: 4px;
                 font-size: 12px; }

/* Dado financeiro ganha peso: numa resposta de prosa é o que se lê primeiro.
   NÃO reformata nada — é só um <span> em volta do texto que o núcleo mandou. */
.rc-dado { font-variant-numeric: tabular-nums; font-weight: 600; color: #ffd9a8; }
.rc-eu .rc-dado { color: inherit; }

.rc-erro { color: #ffb4a8; font-size: 13px; }
.rc-nota { color: var(--text-muted); font-size: 11px; line-height: 1.45; margin: 6px 0 0; }

/* Copiar e baixar a resposta. Discretos por desenho: quem lê o chat está
   lendo o número, não procurando botão — eles aparecem no rodapé da bolha e
   ganham contraste ao passar o mouse. */
.rc-acoes { display: flex; gap: 6px; margin-top: 10px; }
.rc-acao { background: none; border: 1px solid var(--border-subtle); border-radius: 6px;
           color: var(--text-secondary); font: inherit; font-size: 11px; cursor: pointer;
           padding: 3px 9px; transition: background .12s, color .12s; }
.rc-acao:hover { background: var(--overlay-soft); color: var(--text-primary); }
.rc-acao:focus-visible { outline: 2px solid var(--cf-orange); outline-offset: 1px; }
/* no painel flutuante o fundo é escuro nos dois temas (ver .rc-painel) */
.rc-painel .rc-acao { border-color: rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .72); }
.rc-painel .rc-acao:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.rc-bloco-tit { font-size: 12px; font-weight: 600; color: var(--text-secondary);
                margin: 10px 0 6px; }

/* --- KPIs ---------------------------------------------------------------- */
.rc-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
           gap: 6px; margin-top: 10px; }
.rc-kpi { background: rgba(0, 0, 0, .22); border-radius: 8px; padding: 8px 10px;
          display: flex; flex-direction: column; gap: 2px; }
.rc-kpi-rot { font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
              color: var(--text-muted); }
.rc-kpi strong { font-size: 15px; font-variant-numeric: tabular-nums; }

/* --- tabela -------------------------------------------------------------- */
/* ⚠️ A rolagem é do INVÓLUCRO. Num elemento só, a largura mínima da tabela
   faria o CORPO da página rolar na horizontal, que a regra da casa proíbe. */
.rc-tab-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch;
               border-radius: 8px; background: rgba(0, 0, 0, .22); }
.rc-tab { border-collapse: collapse; width: 100%; min-width: 320px; font-size: 12px; }
.rc-tab th, .rc-tab td { padding: 6px 7px; white-space: nowrap; }
.rc-tab th { font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
             color: var(--text-muted); font-weight: 600;
             border-bottom: 1px solid rgba(255, 255, 255, .12); }
.rc-tab tbody tr + tr td { border-top: 1px solid rgba(255, 255, 255, .06); }
/* ⚠️ 124px, e o número foi medido: com 190 a coluna de CPL caía fora da vista
   num painel de 420px, e CPL é exatamente o que se procura numa tabela de
   criativo. O nome trunca com reticências e sai inteiro no `title`. A rolagem
   continua existindo para o CTR, que é a coluna que se pode perder. */
.rc-tab td:first-child { max-width: 124px; overflow: hidden; text-overflow: ellipsis; }
.rc-esq { text-align: left; }
.rc-dir { text-align: right; font-variant-numeric: tabular-nums; }

/* --- barras -------------------------------------------------------------- */
.rc-barras { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.rc-barra { display: grid; grid-template-columns: minmax(0, 92px) 1fr auto;
            align-items: center; gap: 8px; font-size: 11px; }
.rc-barra-rot { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
                color: var(--text-secondary); }
.rc-barra-trilho { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .1); }
.rc-barra-fill { height: 100%; border-radius: 999px;
                 background: linear-gradient(90deg, var(--cf-orange), #ffc27a); }
.rc-barra-val { color: var(--text-secondary); white-space: nowrap;
                font-variant-numeric: tabular-nums; }

/* --- rodapé -------------------------------------------------------------- */
.rc-rodape { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px;
             border-top: 1px solid rgba(255, 255, 255, .12); background: rgba(0, 0, 0, .18); }
.rc-rodape textarea {
  flex: 1; resize: none; max-height: 96px; padding: 8px 10px; font: inherit;
  font-size: 13px; color: var(--text-primary); background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 9px;
}
.rc-rodape textarea::placeholder { color: var(--text-muted); }
.rc-rodape textarea:focus { outline: 2px solid var(--cf-orange); outline-offset: -1px; }
.rc-enviar {
  flex: none; width: 36px; height: 36px; border-radius: 9px; border: 0; cursor: pointer;
  background: var(--cf-orange); color: #1a1205; display: grid; place-items: center;
}
/* Lucide troca o <i> por <svg>: o seletor precisa casar os dois. */
.rc-enviar i, .rc-enviar svg { width: 17px; height: 17px; }

/* --- "pensando" ---------------------------------------------------------- */
.rc-pensando { color: var(--text-muted); display: flex; align-items: center; gap: 7px; }
.rc-pontos { display: inline-flex; gap: 3px; }
.rc-pontos i { width: 4px; height: 4px; border-radius: 50%; background: currentColor;
               animation: rc-pulsa 1.2s infinite ease-in-out; }
.rc-pontos i:nth-child(2) { animation-delay: .15s; }
.rc-pontos i:nth-child(3) { animation-delay: .3s; }
@keyframes rc-pulsa { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .rc-pontos i { animation: none; opacity: .6; }
  .rc-botao { transition: none; }
}

@media (max-width: 560px) {
  #rcRaiz { right: 12px; bottom: 12px; }
  .rc-painel { width: calc(100vw - 24px); height: calc(100vh - 100px); }
  .rc-kpis { grid-template-columns: 1fr 1fr; }
}


/* --- a ABA do RoboCopy ----------------------------------------------------
   O painel flutuante é escuro porque tem o mascote em cima e vive sobre a
   ferramenta; a ABA é conteúdo, então segue o tema como as outras. Por isso
   ela NÃO re-escopa os tokens — quem faz isso é o .rc-painel. */
.rc-aba {
  display: flex; flex-direction: column;
  height: min(72vh, 720px);
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: 12px; overflow: hidden;
}
.rc-aba .rc-rodape {
  background: var(--bg-subtle); border-top: 1px solid var(--border-subtle);
}
.rc-aba .rc-rodape textarea {
  color: var(--text-primary); background: var(--bg-surface);
  border-color: var(--border-subtle); max-height: 140px;
}
.rc-aba .rc-rodape textarea::placeholder { color: var(--text-muted); }
.rc-aba .rc-vazio { color: var(--text-muted); }
.rc-aba .rc-ele .rc-balao { background: var(--overlay-soft); }
.rc-aba .rc-nota, .rc-aba .rc-bloco-tit,
.rc-aba .rc-barra-rot, .rc-aba .rc-barra-val { color: var(--text-secondary); }
/* ⚠️ `--text-secondary`, não `--text-muted`. O muted rende 3,81:1 sobre o
   --bg-surface do tema claro, e cabeçalho de tabela e rótulo de KPI são texto
   que se PRECISA ler. É a quarta vez que o muted reprova neste projeto: ele
   serve para o que é incidental. O secondary dá 5,61:1. */
.rc-aba .rc-kpi-rot, .rc-aba .rc-tab th { color: var(--text-secondary); }
.rc-aba .rc-kpi, .rc-aba .rc-tab-wrap { background: var(--overlay-soft); }
.rc-aba .rc-barra-trilho { background: var(--overlay-soft); }
.rc-aba .rc-tab th { border-bottom-color: var(--border-subtle); }
.rc-aba .rc-tab tbody tr + tr td { border-top-color: var(--border-subtle); }
/* ⚠️ No tema claro o realce laranja-claro do painel some sobre branco.
   `--orange-ink` é a tinta de TEXTO da marca — é a regra de "cor de
   preenchimento ≠ cor de tinta", e o painel escuro não pode usar a mesma. */
.rc-aba .rc-dado { color: var(--orange-ink); }

/* A largura é a razão de a aba existir: no painel de 420px o CTR ficava fora
   da vista e o rótulo do gráfico truncava em 92px. Aqui cabe tudo. */
.rc-corpo-larga { padding: 20px 24px; gap: 16px; }
.rc-corpo-larga .rc-balao { max-width: min(760px, 78%); font-size: 14px; }
.rc-corpo-larga .rc-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rc-corpo-larga .rc-tab { min-width: 0; font-size: 13px; }
.rc-corpo-larga .rc-tab td:first-child { max-width: none; }
.rc-corpo-larga .rc-tab th, .rc-corpo-larga .rc-tab td { padding: 7px 12px; }
.rc-corpo-larga .rc-barra { grid-template-columns: minmax(0, 210px) 1fr auto;
                            font-size: 12px; }
.rc-corpo-larga .rc-barra-trilho { height: 10px; }
.rc-corpo-larga .rc-face { width: 34px; height: 34px; }

@media (max-width: 720px) {
  .rc-aba { height: min(68vh, 560px); }
  .rc-corpo-larga { padding: 14px; }
  .rc-corpo-larga .rc-kpis { grid-template-columns: 1fr 1fr; }
  .rc-corpo-larga .rc-balao { max-width: 92%; }
  .rc-corpo-larga .rc-barra { grid-template-columns: minmax(0, 110px) 1fr auto; }
}


/* --- RoboCopy: parser ------------------------------------------------------ */
.rc-balao ol { margin: 0 0 8px; padding-left: 20px; }
.rc-balao .rc-h { font-size: 13px; font-weight: 700; margin: 10px 0 6px; color: var(--text-primary); }
.rc-balao h3.rc-h { font-size: 14px; }
.rc-balao blockquote { margin: 0 0 8px; padding: 6px 10px; border-left: 3px solid var(--cf-orange);
                       color: var(--text-secondary); }
.rc-balao hr { border: 0; border-top: 1px solid rgba(255, 255, 255, .14); margin: 10px 0; }
.rc-balao a { color: #ffc27a; text-decoration: underline; }
.rc-aba .rc-balao a { color: var(--orange-ink); }
.rc-aba .rc-balao hr { border-top-color: var(--border-subtle); }
.rc-balao em { font-style: italic; }

/* --- RoboCopy: medidor e série ------------------------------------------- */
.rc-medidor { margin-top: 8px; display: grid; gap: 5px; }
.rc-medidor-topo { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px;
                   color: var(--text-secondary); }
.rc-medidor-topo strong { font-size: 16px; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.rc-medidor-trilho { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.rc-medidor-fill { height: 100%; border-radius: 999px;
                   background: linear-gradient(90deg, var(--cf-orange), #ffc27a); }
.rc-medidor-estourou .rc-medidor-fill { background: #e5533d; }
.rc-medidor-base { display: flex; justify-content: space-between; font-size: 11px;
                   color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.rc-aba .rc-medidor-trilho { background: var(--overlay-soft); }

.rc-serie { margin-top: 6px; }
.rc-serie svg { width: 100%; height: 96px; display: block; color: var(--cf-orange); }
.rc-serie-area { fill: currentColor; opacity: .18; }
.rc-serie-linha { stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.rc-serie-ponto { fill: currentColor; }
.rc-serie-legenda { display: flex; justify-content: space-between; gap: 8px; font-size: 11px;
                    color: var(--text-secondary); font-variant-numeric: tabular-nums; margin-top: 4px; }
.rc-serie-legenda strong { color: var(--text-primary); }
.rc-aba .rc-serie svg { color: var(--orange-ink); }

/* --- RoboCopy: as duas visões da aba --------------------------------------- */
.rc-visoes-wrap { display: flex; align-items: center; gap: 8px; }
.rc-visoes { display: inline-flex; background: var(--overlay-soft); border: 1px solid var(--border-subtle);
             border-radius: 9px; padding: 3px; gap: 2px; }
.rc-visoes button { border: 0; background: transparent; color: var(--text-secondary); font: inherit;
                    font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 7px; cursor: pointer; }
.rc-visoes button.ativo { background: var(--bg-surface); color: var(--text-primary);
                          box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.rc-visoes button:focus-visible { outline: 2px solid var(--cf-orange); outline-offset: 1px; }

/* --- RoboCopy: o painel de instrumentos ------------------------------------ */
/* ⚠️ Segue o TEMA, como a aba: é conteúdo, não o mascote flutuante. Por isso
   os tokens comuns e as tintas (`--orange-ink`) em vez do laranja puro. */
.rc-instrumentos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); }
/* ⚠️ `display: grid` e `display: flex` VENCEM o display:none do atributo
   `hidden` — a mesma armadilha da `.cycle-banner`. Sem estas duas linhas, clicar
   em "Conversa" marcava o painel como escondido e ele continuava na tela. */
.rc-instrumentos[hidden], #tab-robocopy .rc-aba[hidden] { display: none; }
.rc-ciclo { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 12px;
            padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rc-ciclo-cab { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.rc-ciclo-cab h3 { margin: 0; font-size: 15px; color: var(--text-primary); }
.rc-ciclo-quando { margin-left: auto; font-size: 12px; color: var(--text-secondary);
                   font-variant-numeric: tabular-nums; }
.rc-ciclo-quando.rc-velho { color: var(--badge-crm); font-weight: 600; }
.rc-selo { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
           padding: 2px 7px; border-radius: 999px; background: var(--overlay-soft); color: var(--text-secondary); }
.rc-selo-obs { color: var(--orange-ink); }
.rc-ciclo .rc-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rc-ciclo .rc-kpi, .rc-ciclo .rc-tab-wrap { background: var(--overlay-soft); }
.rc-ciclo .rc-kpi-rot, .rc-ciclo .rc-tab th, .rc-ciclo .rc-nota, .rc-ciclo .rc-bloco-tit { color: var(--text-secondary); }
.rc-ciclo .rc-tab th { border-bottom-color: var(--border-subtle); }
.rc-ciclo .rc-tab td:first-child { max-width: 260px; }
.rc-ciclo .rc-tab td:last-child { white-space: normal; min-width: 220px; font-size: 11.5px; color: var(--text-secondary); }
.rc-ciclo .rc-medidor-trilho { background: var(--overlay-soft); }
.rc-ciclo .rc-erro { color: var(--badge-crm); }
.rc-recusas { margin-top: 10px; font-size: 12.5px; }
.rc-recusas summary { cursor: pointer; color: var(--text-secondary); font-weight: 600; }
.rc-recusas ul { margin: 6px 0 0; padding-left: 18px; color: var(--text-secondary); display: grid; gap: 3px; }
.rc-recusas strong { color: var(--text-primary); font-weight: 600; }
@media (max-width: 560px) { .rc-ciclo .rc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==========================================================================
   SEGMENTAÇÃO — o grafo de produtos e áreas de interesse (O46KR1)

   Segunda vista da aba Destinos WA, pelo mesmo desenho do alternador
   Lista·Calendário do Cronograma. Segmentar é preparação, não trabalho do dia:
   não pode ocupar a tela de quem só quer colar uma mensagem.

   As cores das áreas vêm do BANCO (`area_interesse.cor` e `.nucleo`), não
   daqui — área nova precisa nascer com cor, e cor em CSS exigiria deploy.
   ========================================================================== */

.wa-vistas {
  display: inline-flex; gap: 2px; padding: 2px; margin-bottom: 18px;
  background: var(--bg-surface); border: 1px solid var(--border-color);
  border-radius: 6px;
}
.wa-vista-bt {
  font-family: 'Sora', sans-serif; font-size: 12.5px; font-weight: 500;
  border: 0; background: none; color: var(--text-secondary);
  padding: 7px 16px; border-radius: 4px; cursor: pointer;
}
.wa-vista-bt[aria-pressed="true"] { background: var(--cf-navy); color: #fff; }

.seg-quadro {
  background: var(--bg-elevated); border: 1px solid var(--border-color);
  border-radius: 10px; overflow: hidden;
}
#segMapa { width: 100%; height: auto; display: block; touch-action: none; }
.seg-no { cursor: grab; }
.seg-no.pegando { cursor: grabbing; }
.seg-rot {
  font-family: 'Sora', sans-serif; text-anchor: middle; pointer-events: none;
  fill: var(--text-secondary); font-size: 11.5px; font-weight: 500;
}
/* Área em CAIXA ALTA: existe um produto "Auditoria" e uma área "Auditoria", e
   com a mesma tipografia os dois nós liam como o mesmo nó. */
.seg-rot.hub {
  fill: var(--text-primary); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .11em;
}
.seg-no.aceso .seg-rot { fill: var(--text-primary); }
.seg-no.apagado { opacity: .5; }
.seg-elo.apagado { opacity: .32; }
.seg-no .bola { transition: stroke-opacity .15s; }
.seg-no:hover .bola, .seg-no:focus-visible .bola {
  stroke: var(--text-primary); stroke-opacity: .5; stroke-width: 2.5;
}
.seg-elo {
  stroke: var(--text-muted); stroke-opacity: .45; stroke-width: 1.4;
  pointer-events: none; transition: stroke-opacity .2s;
}
.seg-elo.aceso { stroke-opacity: 1; stroke-width: 2.4; }
.seg-anel { fill: none; stroke: var(--text-primary); stroke-width: 2.5; opacity: .9; }
.seg-par { cursor: pointer; }
/* Linha grossa e invisível: uma aresta de 1,4px é alvo de clique impossível. */
/* A faixa invisível que torna a aresta clicável. ⚠️ Ela é LARGA (16px) e foi
   o que escondia o ×: enquanto os dois moravam na mesma camada, esta linha era
   pintada por cima e engolia o clique, sobrando 1px de borda de cada lado. Hoje
   o × vive numa camada anexada depois — ver as três camadas em `segDesenhar`.
   Se algum dia alguém juntar as camadas de novo, o defeito volta inteiro. */
.seg-corte { stroke: transparent; stroke-width: 16; pointer-events: stroke; }
.seg-par:hover .seg-elo {
  stroke: var(--orange-ink) !important; stroke-opacity: 1;
  stroke-width: 3.5; stroke-dasharray: 6 4;
}
.seg-alvo { fill: none; stroke-dasharray: 5 5; stroke-width: 2; opacity: .9; }

.seg-dicas {
  display: flex; gap: 18px; align-items: baseline; flex-wrap: wrap;
  margin-top: 9px; padding: 0 2px;
}
.seg-ajuda { font-size: 11.5px; color: var(--text-muted); }
.seg-ajuda strong { color: var(--text-secondary); font-weight: 600; }
.seg-recado {
  margin-left: auto; font-size: 12px; font-family: 'Sora', sans-serif;
  color: var(--orange-ink); opacity: 0; transition: opacity .25s;
}
.seg-recado.on { opacity: 1; }

.seg-faixa {
  margin-top: 16px; display: flex; align-items: center; gap: 24px;
  flex-wrap: wrap; padding: 0 2px;
}
.seg-quem { max-width: 340px; }
.seg-quem strong {
  display: block; font-family: 'Sora', sans-serif; font-size: 16px; font-weight: 600;
}
.seg-fichas { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.seg-ficha {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11px;
  font-family: 'Sora', sans-serif; background: var(--bg-surface);
  border: 1px solid var(--border-color); border-radius: 999px;
  padding: 2px 3px 2px 8px; color: var(--text-secondary); cursor: pointer;
}
.seg-ficha:hover { border-color: var(--text-muted); }
.seg-ficha .pto { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.seg-ficha .x {
  border: 0; background: none; color: var(--text-muted); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0 5px; border-radius: 999px;
  font-family: inherit;
}
.seg-ficha .x:hover { color: var(--orange-ink); }
.seg-ficha.so { color: var(--text-muted); cursor: default; }
.seg-med { display: flex; flex-direction: column; gap: 1px; }
.seg-med b {
  font-family: 'Sora', sans-serif; font-size: 20px; font-weight: 600;
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.seg-med b.v { color: var(--accent-green-ink); }
.seg-med b.l { color: var(--orange-ink); }
.seg-med b.c { color: var(--text-muted); }
.seg-med span { font-size: 11.5px; color: var(--text-secondary); }
.seg-ofer {
  margin-left: auto; font-size: 12px; color: var(--text-secondary); max-width: 32ch;
}
.seg-ofer strong { color: var(--orange-ink); font-family: 'Sora', sans-serif; }

.seg-colunas {
  margin-top: 18px; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
}
@media (max-width: 900px) { .seg-colunas { grid-template-columns: 1fr; } }
.seg-col {
  background: var(--bg-surface); border: 1px solid var(--border-color);
  border-radius: 8px; padding: 13px 14px 8px;
}
.seg-col-cab {
  display: flex; align-items: baseline; gap: 8px; padding-bottom: 9px;
  border-bottom: 1px solid var(--border-color);
}
.seg-col-cab h3 {
  margin: 0; font-family: 'Sora', sans-serif; font-size: 12.5px; font-weight: 600;
}
.seg-col-cab .n {
  margin-left: auto; font-family: 'Sora', sans-serif; font-size: 15px;
  font-weight: 600; font-variant-numeric: tabular-nums;
}
.seg-col.a .n { color: var(--accent-green-ink); }
.seg-col.b .n { color: var(--orange-ink); }
.seg-col.c .n { color: var(--text-muted); }
.seg-porque {
  font-size: 11px; color: var(--text-muted); margin: 8px 0 4px; line-height: 1.45;
}
.seg-rol { max-height: 220px; overflow-y: auto; margin-right: -6px; padding-right: 6px; }
.seg-g {
  display: flex; align-items: center; gap: 8px; padding: 6px 0;
  font-size: 12.5px; border-bottom: 1px solid var(--border-color);
}
.seg-g:last-child { border-bottom: 0; }
.seg-g .pt { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.seg-g .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seg-g .tg {
  margin-left: auto; font-family: 'Sora', sans-serif; font-size: 10px;
  color: var(--text-muted); flex: none;
}
.seg-nada { font-size: 12px; color: var(--text-muted); font-style: italic; padding: 9px 0; }
.seg-rodape { margin-top: 16px; font-size: 12px; color: var(--text-muted); max-width: 80ch; }
.seg-rodape strong { color: var(--text-secondary); font-weight: 600; }

/* O × que corta a ligação. Só aparece nas arestas do nó selecionado: nas 42
   ele seria ruído, e aqui ele nasce onde a pessoa já está olhando. */
.seg-x { cursor: pointer; transition: opacity .18s ease; }
/*
   ⚠️ MOVIMENTO E ALVO DE PRECISÃO NUNCA COEXISTEM — é a regra que concilia as
   duas queixas de 21/09. O mapa volta a se acomodar depois de cada gesto (o
   efeito que o time quer, e o que separa um nó de cima do outro sozinho), e
   enquanto ele se acomoda os × não estão lá para serem perseguidos. Voltam ao
   parar, que hoje leva ~1,6s na mediana e no máximo 3s pelo teto de quadros.

   `pointer-events: none` junto com a opacidade: × invisível que ainda recebe
   clique é pior que × visível, porque a pessoa acerta sem ver o que acertou.
*/
.seg-movendo .seg-x { opacity: 0; pointer-events: none; }
/* O alvo de clique, invisível e maior que o desenho: 36px contra os 22 do
   círculo visível. `fill: transparent` (e não `none`) é o que o torna
   clicável — `none` não recebe ponteiro. */
.seg-x-alvo { fill: transparent; }
.seg-x-fundo {
  fill: var(--bg-surface); stroke: var(--text-muted); stroke-width: 1.5;
  transition: fill .15s, stroke .15s;
}
.seg-x-sinal {
  font-family: 'Sora', sans-serif; font-size: 15px; font-weight: 600;
  text-anchor: middle; fill: var(--text-secondary); pointer-events: none;
}
.seg-x:hover .seg-x-fundo, .seg-x:focus-visible .seg-x-fundo {
  fill: var(--orange-ink); stroke: var(--orange-ink);
}
.seg-x:hover .seg-x-sinal, .seg-x:focus-visible .seg-x-sinal { fill: #fff; }


/* --------------------------------------------------------------------------
   IMAGEM DA PRÉ-VISUALIZAÇÃO — bloco do editor
   Ele só aparece com "Imagem Anexa" escolhida; ver `pintarImagemDaPeca()`.
   -------------------------------------------------------------------------- */
.img-previa {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.img-previa img {
  width: 104px;
  height: 70px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  flex-shrink: 0;
  background: var(--bg-input);
}

.img-previa-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

/* Nome de arquivo é texto de fora e vem de qualquer tamanho: sem o min-width:0
   acima e o corte aqui, um nome longo estica a linha e empurra os botões para
   fora do cartão. */
.img-previa-nome {
  font-size: 11.5px;
  color: var(--text-secondary);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.img-previa-nota {
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 8px 0 0;
}

/* Botão pequeno das ações da imagem. `.btn-secondary` sozinho ocupa a altura
   de um campo, e aqui ele fica ao lado de uma miniatura de 70px. */
.btn-mini {
  padding: 5px 10px;
  font-size: 11.5px;
  gap: 5px;
}

.btn-mini i,
.btn-mini svg {
  width: 14px;
  height: 14px;
}

/* ==========================================================================
   PARIDADE VISUAL COM O NEXABI

   O pedido desta rodada e de acabamento, nao de estrutura. Por isso esta
   camada preserva o HTML, as abas, os fluxos e todas as dimensoes internas dos
   componentes; ela troca somente os tokens visuais e as superficies pelo
   sistema usado em `cf-analytics/src/styles.css` e em `AppSidebar`.
   ========================================================================== */

/* Tema escuro: os mesmos valores-base do NexaBI. */
:root {
  --cf-navy-dark: oklch(0.16 0.045 258);
  --cf-navy: oklch(0.16 0.045 258);
  --cf-navy-mid: oklch(0.26 0.05 260);
  --cf-navy-light: oklch(0.30 0.06 260);
  --cf-orange: oklch(0.74 0.18 55);
  --cf-orange-hover: oklch(0.69 0.19 50);
  --cf-orange-glow: oklch(0.74 0.18 55 / 0.25);
  --orange-ink: oklch(0.74 0.18 55);
  --text-orange: oklch(0.74 0.18 55);

  --bg-dark: oklch(0.18 0.04 255);
  --bg-surface: oklch(0.22 0.045 258);
  --bg-card: oklch(0.22 0.045 258);
  --bg-card-hover: oklch(0.26 0.05 260);
  --bg-input: oklch(0.30 0.05 260 / 0.80);
  --bg-elevated: oklch(0.24 0.05 258);
  --bg-subtle: oklch(0.20 0.04 258);
  --border-color: oklch(0.36 0.06 258 / 0.55);
  --border-subtle: oklch(0.36 0.06 258 / 0.38);
  --border-active: oklch(0.74 0.18 55 / 0.55);
  --text-primary: oklch(0.97 0.01 240);
  --text-strong: oklch(0.99 0.005 240);
  --text-secondary: oklch(0.78 0.025 250);
  --text-muted: oklch(0.72 0.025 250);

  --overlay-weak: oklch(1 0 0 / 0.045);
  --overlay-soft: oklch(1 0 0 / 0.07);
  --overlay-strong: oklch(1 0 0 / 0.11);
  --hairline: oklch(1 0 0 / 0.055);
  --row-hover: oklch(1 0 0 / 0.025);
  --scroll-thumb: oklch(0.74 0.18 55 / 0.32);

  --shadow-sm: 0 1px 0 0 oklch(1 0 0 / 0.04) inset,
               0 12px 32px -20px oklch(0 0 0 / 0.56);
  --shadow-md: inset 0 1px 0 oklch(1 0 0 / 0.07),
               0 18px 38px -26px oklch(0 0 0 / 0.72);
  --shadow-lg: inset 0 1px 0 oklch(1 0 0 / 0.08),
               0 22px 48px -28px oklch(0 0 0 / 0.78);
  --glass-bg: oklch(0.18 0.04 255 / 0.95);
  --glass-border: oklch(0.36 0.06 258 / 0.55);
  --radius-lg: 14px;

  --sup-raio: 14px;
  --sup-borda: color-mix(in oklab, var(--border-color) 55%, oklch(1 0 0 / 0.26));
  --sup-reflexo: linear-gradient(132deg, oklch(1 0 0 / 0.105) 0%, oklch(1 0 0 / 0.025) 20%, transparent 44%);
  --sup-halo: radial-gradient(88% 62% at 102% -8%, color-mix(in oklab, var(--cf-orange) 10%, transparent), transparent 70%);
  --sup-sombra: inset 0 1px 0 oklch(1 0 0 / 0.13),
                inset 1px 0 0 oklch(1 0 0 / 0.035),
                0 22px 48px -28px oklch(0 0 0 / 0.78);
}

/* Tema claro: cartoes brancos sobre o canvas frio do NexaBI. */
:root[data-theme="light"] {
  --cf-navy-dark: oklch(0.18 0.04 255);
  --cf-navy: oklch(0.24 0.07 255);
  --cf-navy-mid: oklch(0.32 0.09 255);
  --cf-navy-light: oklch(0.40 0.11 255);
  --cf-orange: oklch(0.68 0.20 45);
  --cf-orange-hover: oklch(0.63 0.20 43);
  --cf-orange-glow: oklch(0.68 0.20 45 / 0.20);
  --orange-ink: oklch(0.61 0.19 43);
  --text-orange: oklch(0.61 0.19 43);

  --bg-dark: oklch(0.985 0.004 250);
  --bg-surface: oklch(1 0 0);
  --bg-card: oklch(1 0 0);
  --bg-card-hover: oklch(0.975 0.006 250);
  --bg-input: oklch(0.94 0.01 250);
  --bg-elevated: oklch(1 0 0);
  --bg-subtle: oklch(0.97 0.006 250);
  --border-color: oklch(0.92 0.01 250);
  --border-subtle: oklch(0.92 0.01 250 / 0.78);
  --border-active: oklch(0.68 0.20 45 / 0.58);
  --text-primary: oklch(0.27 0.02 255);
  --text-strong: oklch(0.20 0.02 255);
  --text-secondary: oklch(0.44 0.02 255);
  --text-muted: oklch(0.50 0.02 255);

  --overlay-weak: oklch(0.20 0.02 255 / 0.035);
  --overlay-soft: oklch(0.20 0.02 255 / 0.055);
  --overlay-strong: oklch(0.20 0.02 255 / 0.09);
  --hairline: oklch(0.20 0.02 255 / 0.07);
  --row-hover: oklch(0.20 0.02 255 / 0.025);
  --scroll-thumb: oklch(0.68 0.20 45 / 0.32);

  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.04),
               0 8px 24px -18px oklch(0 0 0 / 0.10);
  --shadow-md: inset 0 1px 0 oklch(1 0 0 / 0.20),
               0 18px 38px -26px oklch(0.20 0.02 255 / 0.28);
  --shadow-lg: inset 0 1px 0 oklch(1 0 0 / 0.24),
               0 22px 48px -28px oklch(0.20 0.02 255 / 0.32);
  --glass-bg: oklch(0.985 0.004 250 / 0.95);
  --glass-border: oklch(0.92 0.01 250 / 0.90);

  --sup-borda: color-mix(in oklab, var(--border-color) 72%, oklch(1 0 0 / 0.22));
  --sup-reflexo: linear-gradient(132deg, oklch(1 0 0 / 0.78) 0%, oklch(1 0 0 / 0.18) 20%, transparent 44%);
  --sup-halo: radial-gradient(88% 62% at 102% -8%, color-mix(in oklab, var(--cf-orange) 8%, transparent), transparent 70%);
  --sup-sombra: inset 0 1px 0 oklch(1 0 0 / 0.20),
                0 18px 38px -26px oklch(0.20 0.02 255 / 0.30);
}

html,
body,
button,
input,
select,
textarea {
  font-family: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-feature-settings: "cv11", "ss01", "ss03";
}

body {
  background-color: var(--bg-dark);
  background-image:
    radial-gradient(980px 680px at 92% 4%, color-mix(in oklab, var(--cf-orange) 9%, transparent), transparent 66%),
    radial-gradient(820px 620px at 4% 48%, oklch(0.66 0.18 250 / 0.08), transparent 70%),
    radial-gradient(circle, oklch(1 0 0 / 0.012) 0.5px, transparent 0.9px);
  background-size: auto, auto, 7px 7px;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

:root[data-theme="light"] body {
  background-image:
    radial-gradient(900px 620px at 92% 6%, color-mix(in oklab, var(--cf-orange) 8%, transparent), transparent 66%),
    radial-gradient(760px 560px at 6% 42%, oklch(0.55 0.22 255 / 0.07), transparent 68%),
    radial-gradient(circle, oklch(0.20 0.02 255 / 0.022) 0.5px, transparent 0.85px);
}

/* Top bar do NexaBI: superficie do canvas, filete fino e vidro discreto. */
.app-header,
:root[data-theme="light"] .app-header {
  --cf-orange: oklch(0.74 0.18 55);
  --orange-ink: oklch(0.74 0.18 55);
  --bg-dark: oklch(0.18 0.04 255);
  --bg-surface: oklch(0.22 0.045 258);
  --bg-card: oklch(0.22 0.045 258);
  --bg-input: oklch(0.30 0.05 260 / 0.80);
  --border-color: oklch(0.36 0.06 258 / 0.55);
  --text-primary: oklch(0.97 0.01 240);
  --text-strong: oklch(0.99 0.005 240);
  --text-secondary: oklch(0.78 0.025 250);
  --text-muted: oklch(0.72 0.025 250);
  --overlay-weak: oklch(1 0 0 / 0.045);
  --overlay-soft: oklch(1 0 0 / 0.07);
  --overlay-strong: oklch(1 0 0 / 0.11);
  background: oklch(0.18 0.04 255);
  border-bottom-color: oklch(0.36 0.06 258 / 0.55);
  box-shadow: 0 1px 0 oklch(1 0 0 / 0.025);
  backdrop-filter: blur(18px) saturate(1.10);
}

.brand-logo-img {
  filter: drop-shadow(0 8px 18px color-mix(in oklab, var(--cf-orange) 22%, transparent));
}

:root[data-theme="light"] .brand-logo-img {
  filter: invert(1) hue-rotate(180deg) drop-shadow(0 8px 18px color-mix(in oklab, var(--cf-orange) 16%, transparent));
}

.brand-logo:hover .brand-logo-img {
  filter: drop-shadow(0 10px 22px color-mix(in oklab, var(--cf-orange) 42%, transparent));
}

:root[data-theme="light"] .brand-logo:hover .brand-logo-img {
  filter: invert(1) hue-rotate(180deg) drop-shadow(0 10px 22px color-mix(in oklab, var(--cf-orange) 30%, transparent));
}

.app-header .btn-secondary {
  background: color-mix(in oklab, var(--bg-card) 82%, transparent);
  border-color: var(--border-color);
  color: var(--text-secondary);
}

.app-header .btn-secondary:hover {
  background: var(--overlay-soft);
  border-color: color-mix(in oklab, var(--cf-orange) 40%, var(--border-color));
  color: var(--text-strong);
}

/* Sidebar: mesma superficie, hierarquia e estado ativo do AppSidebar. */
.app-sidebar,
:root[data-theme="light"] .app-sidebar {
  --bg-surface: color-mix(in oklab, var(--bg-card) 80%, var(--bg-dark));
  --text-primary: oklch(0.97 0.01 240);
  --text-strong: oklch(0.99 0.005 240);
  --text-secondary: oklch(0.78 0.025 250);
  --text-muted: oklch(0.72 0.025 250);
  --orange-ink: oklch(0.74 0.18 55);
  --border-color: oklch(0.36 0.06 258 / 0.55);
  --overlay-weak: oklch(1 0 0 / 0.045);
  --overlay-soft: oklch(1 0 0 / 0.07);
  --overlay-strong: oklch(1 0 0 / 0.11);
  width: 256px;
  background: oklch(0.16 0.045 258);
  border-right-color: color-mix(in oklab, var(--border-color) 70%, transparent);
  padding: 18px 10px 12px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, var(--cf-orange) 45%, transparent) transparent;
}

:root[data-theme="light"] .app-sidebar {
  --cf-orange: oklch(0.74 0.18 55);
  --bg-surface: oklch(0.20 0.043 258);
  --text-primary: oklch(0.97 0.01 240);
  --text-strong: oklch(0.99 0.005 240);
  --text-secondary: oklch(0.78 0.025 250);
  --text-muted: oklch(0.72 0.025 250);
  --orange-ink: oklch(0.74 0.18 55);
  --border-color: oklch(0.36 0.06 258 / 0.55);
  --overlay-weak: oklch(1 0 0 / 0.045);
  --overlay-soft: oklch(1 0 0 / 0.07);
  --overlay-strong: oklch(1 0 0 / 0.11);
  background: oklch(0.16 0.045 258);
}

.app-sidebar::-webkit-scrollbar { width: 5px; }
.app-sidebar::-webkit-scrollbar-track { background: transparent; }
.app-sidebar::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--cf-orange) 50%, transparent),
    color-mix(in oklab, var(--cf-orange) 22%, transparent));
}

.side-nav,
.side-grupo { gap: 2px; }
.side-grupo + .side-grupo { margin-top: 12px; }

.side-grupo-titulo,
.side-tools-titulo {
  padding-inline: 12px;
  color: color-mix(in oklab, var(--cf-orange) 80%, transparent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.app-sidebar .nav-tab {
  min-height: 40px;
  padding: 9px 12px;
  gap: 10px;
  border: 0;
  border-radius: 8px;
  color: color-mix(in oklab, var(--text-primary) 75%, transparent);
  font-weight: 500;
  box-shadow: none;
  transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.app-sidebar .nav-tab:hover {
  color: var(--text-strong);
  background: color-mix(in oklab, var(--bg-input) 60%, transparent);
}

.app-sidebar .nav-tab:hover svg { transform: scale(1.10); }

.app-sidebar .nav-tab.active {
  color: var(--cf-orange);
  font-weight: 600;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--cf-orange) 15%, transparent),
    color-mix(in oklab, var(--cf-orange) 8%, transparent),
    transparent);
  border: 0;
  box-shadow: none;
}

.app-sidebar .nav-tab.active::before {
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: var(--cf-orange);
  box-shadow: 0 0 12px 2px color-mix(in oklab, var(--cf-orange) 55%, transparent);
}

.app-sidebar .nav-tab.active svg,
.app-sidebar .nav-tab.active i { color: var(--cf-orange); }

.side-tools {
  border-top-color: color-mix(in oklab, var(--border-color) 70%, transparent);
}

.side-tool {
  border-radius: 8px;
  color: color-mix(in oklab, var(--text-primary) 75%, transparent);
}

.side-tool:hover {
  color: var(--text-strong);
  background: color-mix(in oklab, var(--bg-input) 60%, transparent);
}

/* Superficies do produto: reflexo, halo e elevacao identicos ao surface-card. */
:is(
  .cycle-banner,
  .home-panorama,
  .home-card,
  .home-ciclo,
  .kanban-col,
  .kanban-card,
  .archive-import,
  .archive-stat,
  .archive-card,
  .today-group,
  .today-item,
  .editor-panel,
  .wa-card,
  .wa-caixa,
  .metrics-table-card,
  .kpi-card,
  .compare-card,
  .golden-card,
  .modal-card,
  .login-card,
  .agenda-dia,
  .cal-cabeca,
  .cal-dia,
  .cal-item,
  .cal-legenda,
  .marco,
  .oferta-card,
  .checklist-prep,
  .crono-day,
  .seg-col,
  .seg-ficha,
  .desemp-aba,
  .rc-aba,
  .rc-ciclo,
  .gpt-app,
  .gpt-contexto,
  .gpt-historico,
  .toast
) {
  background:
    var(--sup-reflexo),
    var(--sup-halo),
    color-mix(in oklab, var(--bg-card) 84%, transparent);
  border-color: var(--sup-borda);
  border-radius: var(--sup-raio);
  box-shadow: var(--sup-sombra);
  -webkit-backdrop-filter: blur(15px) saturate(1.12);
  backdrop-filter: blur(15px) saturate(1.12);
}

:root:not([data-theme="light"]) :is(
  .cycle-banner,
  .home-panorama,
  .home-card,
  .home-ciclo,
  .kanban-col,
  .kanban-card,
  .archive-import,
  .archive-stat,
  .archive-card,
  .today-group,
  .today-item,
  .editor-panel,
  .wa-card,
  .wa-caixa,
  .metrics-table-card,
  .kpi-card,
  .compare-card,
  .golden-card,
  .modal-card,
  .login-card,
  .agenda-dia,
  .cal-cabeca,
  .cal-dia,
  .cal-item,
  .cal-legenda,
  .marco,
  .oferta-card,
  .checklist-prep,
  .crono-day,
  .seg-col,
  .seg-ficha,
  .desemp-aba,
  .rc-aba,
  .rc-ciclo,
  .gpt-app,
  .gpt-contexto,
  .gpt-historico,
  .toast
) {
  background:
    linear-gradient(132deg, oklch(1 0 0 / 0.105) 0%, oklch(1 0 0 / 0.025) 20%, transparent 44%),
    radial-gradient(88% 62% at 102% -8%, color-mix(in oklab, var(--cf-orange) 10%, transparent), transparent 70%),
    color-mix(in oklab, var(--bg-card) 56%, transparent);
  border-color: color-mix(in oklab, var(--border-color) 55%, oklch(1 0 0 / 0.26));
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.13),
    inset 1px 0 0 oklch(1 0 0 / 0.035),
    0 22px 48px -28px oklch(0 0 0 / 0.78);
}

:root[data-theme="light"] :is(
  .cycle-banner,
  .home-panorama,
  .home-card,
  .home-ciclo,
  .kanban-col,
  .kanban-card,
  .archive-import,
  .archive-stat,
  .archive-card,
  .today-group,
  .today-item,
  .editor-panel,
  .wa-card,
  .wa-caixa,
  .metrics-table-card,
  .kpi-card,
  .compare-card,
  .golden-card,
  .modal-card,
  .login-card,
  .agenda-dia,
  .cal-cabeca,
  .cal-dia,
  .cal-item,
  .cal-legenda,
  .marco,
  .oferta-card,
  .checklist-prep,
  .crono-day,
  .seg-col,
  .seg-ficha,
  .desemp-aba,
  .rc-aba,
  .rc-ciclo,
  .gpt-app,
  .gpt-contexto,
  .gpt-historico,
  .toast
) {
  background:
    linear-gradient(132deg, oklch(1 0 0 / 0.12) 0%, oklch(1 0 0 / 0.035) 18%, transparent 42%),
    radial-gradient(80% 54% at 100% 0%, color-mix(in oklab, var(--cf-orange) 8%, transparent), transparent 72%),
    color-mix(in oklab, var(--bg-card) 84%, transparent);
  border-color: color-mix(in oklab, var(--border-color) 72%, oklch(1 0 0 / 0.22));
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.14),
    inset 1px 0 0 oklch(1 0 0 / 0.035),
    0 18px 38px -26px oklch(0 0 0 / 0.42);
}

/* Estados semanticos continuam acima do acabamento de superficie. */
:root:not([data-theme="light"]) .home-card.atual,
:root:not([data-theme="light"]) .home-ciclo.atual,
:root[data-theme="light"] .home-card.atual,
:root[data-theme="light"] .home-ciclo.atual {
  border-color: var(--border-active);
}

:root:not([data-theme="light"]) .home-panorama,
:root[data-theme="light"] .home-panorama {
  border-left-color: var(--cf-orange);
}

:root:not([data-theme="light"]) .today-group.late,
:root[data-theme="light"] .today-group.late {
  background:
    linear-gradient(var(--accent-red-bg), var(--accent-red-bg)),
    var(--sup-reflexo),
    var(--bg-card);
}

:root:not([data-theme="light"]) :is(.home-card, .home-ciclo, .kanban-card, .archive-card, .golden-card):hover,
:root[data-theme="light"] :is(.home-card, .home-ciclo, .kanban-card, .archive-card, .golden-card):hover {
  border-color: color-mix(in oklab, var(--cf-orange) 36%, var(--border-color));
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.12),
    0 20px 42px -30px color-mix(in oklab, var(--cf-orange) 18%, transparent);
  transform: translateY(-2px);
}

/* Campos e controles seguem a caixa compacta do NexaBI. */
:is(.input-field, .search-input, .filter-select, .cycle-selector-container, .wa-input, .wa-select) {
  border-color: var(--border-color);
  border-radius: 10px;
  box-shadow: 0 1px 2px oklch(0 0 0 / 0.025);
}

:is(.input-field, .search-input, .filter-select, .wa-input, .wa-select):focus {
  border-color: var(--cf-orange);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--cf-orange) 18%, transparent);
}

/* O NexaBI usa a mesma familia em titulos, botoes e navegacao. O `important`
   vence os Sora antigos e os estilos inline sem alterar o HTML da aplicacao. */
.app-shell :is(h1, h2, h3, h4, h5, h6, button, select, .panel-title, .card-title, .cycle-select),
.modal-overlay :is(h1, h2, h3, h4, h5, h6, button, select),
.login-overlay :is(h1, h2, h3, h4, h5, h6, button, select) {
  font-family: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  letter-spacing: -0.02em;
  font-feature-settings: "cv11", "ss01", "ss03";
}

.app-shell :is(h1, h2, h3, h4, h5, h6),
.modal-overlay :is(h1, h2, h3, h4, h5, h6),
.login-overlay :is(h1, h2, h3, h4, h5, h6) {
  font-family: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
}

@media (max-width: 1040px) {
  .app-sidebar { width: 60px; padding: 16px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .app-sidebar .nav-tab,
  .app-sidebar .nav-tab svg { transition: none; }
}

/* --------------------------------------------------------------------------
   TOPO EM DUAS FAIXAS — MESMA ARQUITETURA VISUAL DO NEXABI
   A marca ocupa a cabeça da lateral. A página e os controles ficam na primeira
   faixa do canvas; o contexto do ciclo e as ações de criação, na segunda.
   -------------------------------------------------------------------------- */
.app-header,
:root[data-theme="light"] .app-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: grid;
  grid-template-columns: 256px minmax(0, 1fr);
  width: 100%;
  height: 100px;
  padding: 0;
  align-items: stretch;
  background: transparent;
  border: 0;
  box-shadow: inset 0 3px 0 color-mix(in oklab, var(--cf-orange) 30%, transparent);
  backdrop-filter: none;
  pointer-events: none;
}

.brand-section {
  grid-column: 1;
  align-self: start;
  display: flex;
  align-items: center;
  width: 256px;
  height: 56px;
  padding: 3px 14px 0;
  background: oklch(0.16 0.045 258);
  border-right: 1px solid oklch(0.32 0.05 258 / 0.60);
  border-bottom: 1px solid oklch(0.32 0.05 258 / 0.60);
  pointer-events: auto;
}

.brand-logo {
  width: 100%;
  min-width: 0;
}

.brand-logo-img,
:root[data-theme="light"] .brand-logo-img {
  width: 226px;
  height: auto;
  max-width: 100%;
  max-height: 25px;
  filter: drop-shadow(0 7px 16px color-mix(in oklab, var(--cf-orange) 22%, transparent));
}

.header-main {
  grid-column: 2;
  display: grid;
  grid-template-rows: 56px 44px;
  min-width: 0;
  height: 100px;
  color: var(--text-primary);
  pointer-events: auto;
}

.header-primary-row,
.header-context-row {
  display: flex;
  min-width: 0;
  align-items: center;
  background: color-mix(in oklab, var(--bg-dark) 97%, transparent);
  border-bottom: 1px solid var(--border-color);
  backdrop-filter: blur(18px) saturate(1.10);
}

.header-primary-row {
  justify-content: space-between;
  gap: 18px;
  padding: 3px 24px 0;
}

.header-page-title {
  min-width: 0;
  overflow: hidden;
  color: var(--text-strong);
  font-family: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-actions.header-top-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.header-top-actions .sync-estado,
.header-top-actions .conta-chip,
.header-top-actions .btn-icon-only {
  height: 36px;
}

.header-top-actions .btn-icon-only {
  width: 36px;
  border-radius: 12px;
}

.header-top-actions .conta-chip {
  width: 36px;
  padding: 0 4px;
  border-radius: 50%;
}

.header-top-actions .conta-inicial {
  width: 28px;
  height: 28px;
}

.header-top-actions .conta-nome { display: none; }

.header-context-row {
  justify-content: space-between;
  gap: 16px;
  padding: 5px 16px;
}

.header-context-row .cycle-selector-container {
  width: min(390px, 48vw);
  max-width: 390px;
  height: 34px;
  padding: 3px 11px;
  border-radius: 10px;
  background: color-mix(in oklab, var(--bg-card) 62%, transparent);
}

.header-context-row .cycle-selector-container label {
  font-size: 8px;
  line-height: 1.05;
  letter-spacing: 0.08em;
}

.header-context-row .cycle-select {
  width: 100%;
  max-width: none;
  font-size: 11.5px;
  line-height: 1.1;
}

.header-create-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.header-create-actions .btn-secondary,
.header-create-actions .btn-primary {
  height: 32px;
  padding: 0 13px;
  border-radius: 9px;
  font-family: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: -0.01em;
}

.header-create-actions .btn-primary {
  box-shadow: 0 8px 22px -12px color-mix(in oklab, var(--cf-orange) 72%, transparent);
}

.header-create-actions svg {
  width: 15px;
  height: 15px;
}

/* A lateral começa logo abaixo da faixa da marca, como no NexaBI. O espaço no
   fluxo fica no próprio shell para o canvas continuar alinhado aos 256 px. */
.app-shell {
  padding-left: 256px;
}

.app-sidebar,
:root[data-theme="light"] .app-sidebar {
  position: fixed;
  z-index: 900;
  top: 56px;
  bottom: 0;
  left: 0;
  width: 256px;
  height: auto;
  padding-top: 28px;
}

@media (max-width: 1040px) {
  .app-header,
  :root[data-theme="light"] .app-header {
    grid-template-columns: 60px minmax(0, 1fr);
  }

  .brand-section {
    width: 60px;
    justify-content: center;
    padding-inline: 10px;
  }

  .brand-logo {
    justify-content: center;
  }

  .brand-logo-img { display: none; }

  .brand-logo::before {
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    background: url("favicon.png?v=2") center / contain no-repeat;
    filter: drop-shadow(0 6px 12px color-mix(in oklab, var(--cf-orange) 30%, transparent));
  }

  .app-shell { padding-left: 60px; }

  .app-sidebar,
  :root[data-theme="light"] .app-sidebar {
    width: 60px;
    padding: 24px 10px 12px;
  }
}

@media (max-width: 760px) {
  .header-primary-row { padding-inline: 12px; }
  .header-context-row { padding-inline: 10px; }
  .header-top-actions .sync-estado { display: none; }
  .header-context-row .cycle-selector-container { width: min(340px, 52vw); }
  .header-create-actions .btn-secondary { display: none; }
  .header-create-actions .btn-primary { padding-inline: 10px; }
}

/* Reflexo diagonal dos cards interativos, igual ao KPI "Pedidos aprovados" do
   NexaBI. A faixa anda pelo background, sem `overflow: hidden`: assim ela não
   corta menus, balões nem conteúdo que ultrapasse a caixa do card. */
:is(
  .home-card,
  .home-ciclo,
  .kanban-card,
  .archive-card,
  .golden-card,
  .today-item,
  .cal-item
) {
  isolation: isolate;
  position: relative;
}

:is(
  .home-card,
  .home-ciclo,
  .kanban-card,
  .archive-card,
  .golden-card,
  .today-item,
  .cal-item
)::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(
      112deg,
      transparent 39%,
      oklch(0.78 0.15 70 / 0.003) 46%,
      oklch(0.90 0.11 75 / 0.024) 50%,
      oklch(0.78 0.15 70 / 0.004) 54%,
      transparent 61%
    ) no-repeat;
  background-size: 200% 100%;
  background-position: 89% 0;
  opacity: 0;
  transition:
    opacity 260ms ease,
    background-position 680ms cubic-bezier(0.22, 1, 0.36, 1);
}

:is(
  .home-card,
  .home-ciclo,
  .kanban-card,
  .archive-card,
  .golden-card,
  .today-item,
  .cal-item
):hover::after,
:is(
  .home-card,
  .home-ciclo,
  .kanban-card,
  .archive-card,
  .golden-card,
  .today-item,
  .cal-item
):focus-within::after {
  opacity: 1;
  background-position: 27% 0;
}

@media (prefers-reduced-motion: reduce) {
  :is(
    .home-card,
    .home-ciclo,
    .kanban-card,
    .archive-card,
    .golden-card,
    .today-item,
    .cal-item
  )::after {
    transition: opacity 1ms linear;
    background-position: 50% 0;
  }
}