/* ════════════════════════════════════════════════════════════
   Paschoaleto & Sedrez — tokens de UI
   Gramática estrutural Industry. Regras de uso em CLAUDE.md.

   FONTE ÚNICA do vocabulário. Nunca hex solto no componente.
   Todo valor de cor aqui foi medido em contraste WCAG nos dois
   temas; rode verificar.ps1 depois de qualquer alteração.
   ════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Open+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* ══════════════════════════════════════════════════════════════════
     PALETA DO BRIEFING DAS TRES PECAS — adotada em 16/09/2026.

     Decisao do Ricardo, respondendo a pergunta direta sobre qual manda:
     "Briefing vence, ao pe da letra". Ela SUBSTITUI a paleta anterior,
     que vinha do descritivo da marca de setembro. O que mudou e por que
     esta na secao "Divergencias medidas" do CLAUDE.md -- leia antes de
     "corrigir" qualquer valor daqui de volta.

     DUAS REPROVACOES RESTANTES, de proposito e com registro:
       --label sobre --bg      2,96:1   (o briefing pede 10,5px/700)
       --blue sobre --bg       4,16:1   (o briefing usa como link)
     As duas falham SO NO TEMA CLARO; no escuro medem 5,67 e 5,34.

     Eram QUATRO. Sairam duas, e nenhuma por remendo:
       --on-deep-2 sobre a superficie  4,36 -> 10,54, quando --shell foi
         separado de --deep e o fundo escureceu.
       --focus                          2,67 -> resolvido pelo anel de
         DUAS FAIXAS, mais abaixo. Nenhuma cor unica da paleta alcanca
         3:1 contra os cinco fundos; duas faixas adjacentes, sim.
     ══════════════════════════════════════════════════════════════════ */

  /* ── Marca ──────────────────────────────────────────────
     --brand continua NAO sendo cor de texto nem fundo de texto
     branco: 2,83:1 sobre branco. O proprio briefing diz isso.   */
  --brand:        #00ABAD;  /* acao, destaque, dia corrente             */
  --brand-2:      #009597;  /* PRESSIONADO — preenchimento, nunca texto:
                               branco sobre ele da 3,65:1              */
  --deep:         #02665C;  /* TEXTO colorido, link, acao, aba ativa    */
  --deep-2:       #025B52;  /* hover da acao primaria                   */
  --deep-3:       #01474A;  /* barra lateral — contraste sobre --deep   */
  --light:        #00B398;  /* serie de grafico apenas — nao e texto    */
  --blue:         #0082A8;  /* azul complementar — LINK, por decisao do
                               briefing. Mede 4,41:1 sobre branco e
                               4,16:1 sobre o papel.                    */
  --risk:         #C0392B;  /* SO semantica de risco                    */
  --warn:         #92650F;  /* SO semantica de atencao. O briefing nao
                               lista cor de atencao e proibe amarelo;
                               este ambar escuro fica porque as tres
                               pecas tem estado de atencao e retira-lo
                               seria mudanca semantica, nao de cor.     */
  --ok:           #1E7A4C;  /* SO semantica de conformidade — idem      */

  /* Par obrigatorio: texto que vai por cima de --deep/--deep-2/--deep-3 */
  --on-deep:      #FFFFFF;  /* 6,87:1 sobre --deep, 10,49:1 sobre --deep-3 */
  --on-brand:     #12191A;  /* texto sobre --brand e --brand-2. Quase preto,
                               e nao branco: branco sobre #00ABAD da 2,83:1 e
                               o proprio briefing diz que --brand nao recebe
                               texto. Quase preto da 6,30:1 sobre --brand e
                               4,87:1 sobre --brand-2, e passa nos dois.
                               NAO muda por tema -- --brand tambem nao muda. */
  --on-shell:     #FFFFFF;  /* texto sobre --shell e --deep-3. NAO e --on-deep:
                               --on-deep e par de --deep, que CLAREIA no tema
                               escuro e leva o texto a escurecer junto. A casca
                               e a lateral nao clareiam, entao o texto delas
                               tem de ficar branco nos dois temas. */
  --on-deep-2:    #8fdbdb;  /* verde claro em texto sobre fundo escuro.
                               4,36:1 sobre --deep — limitrofe; 6,66:1
  /* ── Anel de foco em DUAS FAIXAS ───────────────────────────────────
     Revisto em 16/09/2026. Antes era uma cor só, e por isso reprovava:
     medido, NENHUMA cor da paleta alcança 3:1 contra os cinco fundos que
     um controle pode ter aqui.

       anel          branco  papel  tinta  casca  casca-2
       --deep          6,87   6,48   6,24   2,42     1,48
       --brand         2,83   2,67   2,57   5,88     3,59
       --blue          4,41   4,16   4,01   3,76     2,30

     Trocar --focus de --brand para --deep só mudava a falha de lugar:
     saía do papel e ia para a barra de topo, a lateral e o rodapé.

     A saída é o anel ter duas faixas adjacentes, uma clara e uma escura:
     qualquer que seja o fundo, uma das duas contrasta. Medido:
       sobre branco/papel/tinta  o ANEL resolve  (6,87 / 6,48 / 6,24)
       sobre casca e casca-2     o HALO resolve  (16,61 / 10,16)
       e as duas faixas contrastam 6,87 entre si.
     Isso fecha a reprovação sem contrariar o briefing: --brand continua
     no anel, mas no tema escuro, onde ele passa em tudo. */
  --focus:        #02665C;  /* faixa externa */
  --focus-halo:   #FFFFFF;  /* faixa interna, colada ao elemento */

  /* ── Superficies e texto (tema claro) ── */
  /* ── Superfície escura ──────────────────────────────────────────────
     Separada de --deep em 16/09/2026, por decisão do Ricardo, depois de
     medir as duas hipóteses lado a lado.

     A hipótese descartada era trocar o verde inteiro por #03231F. Ela
     consertava o contraste do fundo escuro, mas a 16,61:1 sobre branco o
     token deixa de ler como verde: título, KPI e link viravam pretos, e
     a distribuição da marca perdia os 10% de verde.

     Separados, cada um faz o que sabe: --shell é área grande que sempre
     recebe branco por cima; --deep continua sendo texto, link e ação
     sobre papel. É a mesma gramática de --on-deep / --on-shell. */
  --shell:        #03231F;  /* faixa, topo, rodapé, barra lateral       */
  --shell-2:      #0A4A40;  /* passo claro: gradiente e hover da casca  */
  --bg:           #FAF8F5;  /* papel — area de conteudo                 */
  --surface:      #FFFFFF;  /* cartoes, SEM contorno                    */
  --surface-2:    #F0ECE6;  /* hover de linha, cabecalho de tabela      */
  --nav:          #03231F;  /* cabeçalho acompanha a casca              */
  --text:         #3C3C3C;  /* corpo                          10,41:1  */
  --text-2:       #5d5d60;  /* cinza de apoio                  6,19:1  */
  --text-3:       #7a7a7d;  /* NAO-TEXTO: icone decorativo     4,04:1  */
  --label:        #98908a;  /* rotulo em caixa alta — a assinatura
                               tipografica do conjunto, diz o briefing.
                               2,96:1 sobre o papel. Reprova e fica.    */
  --line:         #E8E3DC;  /* divisor sobre papel                      */
  --line-2:       #F0ECE6;  /* divisor interno, mais leve               */
  --tint:         #e8f7f7;  /* tinta de hover, bloco tinto, etiqueta    */
  /* Cartao do briefing e SEM CONTORNO, separado por respiro. A sombra
     passa a ser o unico sinal de borda, entao ela nao pode sumir. */
  --shadow:       0 1px 2px rgba(2,102,92,.04), 0 6px 18px rgba(2,102,92,.065), 0 18px 46px rgba(2,102,92,.045);

  /* ── Tipografia ──
     Tres familias, e so estas tres. Barlow nao faz parte do
     padrao, apesar de aparecer em referencia-app.html.       */
  --font-heading: 'Poppins', system-ui, sans-serif;
  --font-body:    'Open Sans', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* ── Geometria ──
     O briefing separa o canto do CARTAO do canto do CONTROLE, que o
     padrao anterior unificava em 12px. Sao dois valores agora. */
  --radius:       14px;  /* cartoes e blocos                            */
  --radius-ctl:   9px;   /* botoes e campos                             */
  --radius-pill:  999px; /* etiquetas e contadores: circulo completo    */
  --radius-lg:    26px;  /* hero e faixa de topo                        */
  --hair:         1px;

  /* ── Espacamento ──
     Escala canonica. Nao existe --space-*; ver EQUIVALENCIAS.md.
     O briefing pede padding de pagina 36-40px, gap 24-28px entre
     blocos e padding interno de cartao 20-26px: --sp-10, --sp-8 e
     --sp-6 cobrem os tres sem token novo. */
  --sp-1: 4px; --sp-2: 7px; --sp-3: 10px; --sp-4: 14px;
  --sp-5: 18px; --sp-6: 22px; --sp-8: 30px; --sp-10: 42px;

  /* ── Chrome ── */
  --side-w: 238px;
  --header-h: 74px;
  --rail-w: 84px;        /* trilho do menu recolhido (2.0)              */

  /* ═══ 2.0 · direcao B2, aprovada em 08/10/2026 ═══
     NENHUMA COR NOVA. Tudo o que tem matiz sai de token oficial, direto
     ou por color-mix; o contraste medido continua valendo. */

  /* Ritmo tipografico: entrelinha e tracking amarrados a cada degrau. */
  --fs-display: clamp(30px, 1.8vw + 18px, 46px);   /* saudacao da faixa   */
  --fs-num-xl:  clamp(40px, 2.4vw + 26px, 68px);   /* numero de destaque  */
  --fs-small:   12.5px;
  --fs-meta:    11.5px;
  --lh-tight: 1.05; --lh-title: 1.3; --lh-body: 1.6;
  --tr-display: -.03em; --tr-num: -.04em;

  /* Ritmo vertical: separa SECOES, nao cartoes. */
  --sp-12: 56px; --sp-16: 76px;

  /* Profundidade em tres niveis. --shadow (acima) e o repouso. */
  --shadow-1: var(--shadow);
  --shadow-2: 0 1px 2px rgba(3,35,31,.05), 0 10px 26px rgba(3,35,31,.09), 0 30px 64px rgba(3,35,31,.08);
  --shadow-3: 0 2px 6px rgba(3,35,31,.08), 0 28px 72px rgba(3,35,31,.20);
  --edge-light: inset 0 1px 0 rgba(255,255,255,.7);   /* fio de luz no topo */

  /* Superficie escura (--shell): gradiente, brilho e textura diagonal.
     Textura e brilho so existem sobre --shell, nunca no papel, e o brilho
     nunca recebe texto por cima. */
  --grad-shell: linear-gradient(140deg, var(--shell-2) 0%, var(--shell) 58%);
  --glow-brand: radial-gradient(70% 120% at 85% 0%, color-mix(in srgb, var(--brand) 30%, transparent), transparent 60%);
  --riscas: repeating-linear-gradient(118deg, color-mix(in srgb, var(--on-shell) 4%, transparent) 0 1px, transparent 1px 9px);
  --hairline-on-shell: color-mix(in srgb, var(--on-shell) 12%, transparent);
  --track-shell: color-mix(in srgb, var(--on-shell) 14%, transparent);

  /* Vidro: so na barra de topo e nos paineis grandes (custo de desempenho). */
  --glass:      color-mix(in srgb, var(--bg) 84%, transparent);
  --glass-blur: saturate(1.5) blur(14px);

  /* Progresso: --deep sobre superficie clara (6,87:1); no escuro vira --brand. */
  --fill: var(--deep);

  /* Movimento: tres duracoes, duas curvas. Tudo a zero com
     prefers-reduced-motion (bloco no fim do arquivo). */
  --dur-1: 120ms; --dur-2: 220ms; --dur-3: 420ms;
  --ease-out: cubic-bezier(.22,1,.36,1); --ease-std: cubic-bezier(.4,0,.2,1);
  --lift: translateY(-4px); --press: scale(.98); --stagger: 60ms;
}

[data-theme="dark"] {
  --bg:        #12191A;
  --surface:   #1B2324;
  --surface-2: #202829;
  --nav:       #0E1516;  /* cabecalho acompanha a casca */
  --text:      #E6ECEB;  /* 12,57:1 */
  --text-2:    #9AA6A6;  /*  6,00:1 */
  --text-3:    #6C7878;  /*  3,29:1 — NÃO-TEXTO */
  --line:      #2C3637;
  --line-2:    #252E2F;
  --tint:      #0E3130;

  /* Semânticas reacertadas para fundo escuro. Sem isto,
     --risk cai para 2,76:1 e some justamente onde importa. */
  --deep:      #4FC9C0;
  --deep-2:    #54CBC2;
  --blue:      #2E98B8;
  --risk:      #D57A71;
  --warn:      #BA8B30;
  --ok:        #5FA180;

  /* --deep aqui é claro: o texto por cima tem de ser escuro.
     Branco sobre #4FC9C0 dá 2,01:1. */
  --on-deep:   #12191A;
  --focus:      #00ABAD;  /* no escuro ele passa em TODOS os fundos: 4,95 a 6,53 */
  --focus-halo: #12191A;  /* faixa interna, contrasta 6,30 com o anel */


  /* ── Tokens do briefing, no escuro ──────────────────────────────────
     A casca e a barra lateral NAO seguem --deep. Elas tem token proprio
     justamente porque --deep clareia para #4FC9C0 aqui: tres vezes nesta
     semana um fundo verde escrito com --deep virou laje turquesa no tema
     escuro. Com --shell e --deep-3 separados, isso nao volta a acontecer. */
  --shell:     #0E1516;  /* branco por cima: 18,46:1 */
  --shell-2:   #17201F;  /* passo claro da casca no escuro */
  --deep-3:    #0B1213;  /* branco por cima: 18,92:1 */
  --brand-2:   #3FC4C6;  /* pressionado — preenchimento, nunca texto */
  --on-brand:  #12191A;  /* 6,30:1 sobre --brand — o MESMO do claro */
  --on-shell:  #FFFFFF;  /* 18,46:1 sobre --shell, 18,92:1 sobre --deep-3 */
  --on-deep-2: #8fdbdb;  /* 11,71:1 sobre --shell, 12,00:1 sobre --deep-3 */
  --label:     #98908a;  /* o MESMO hex do claro, e aqui ele PASSA:
                            5,10:1 sobre --surface. A reprovacao de
                            2,96:1 e do tema claro, nao da cor. */
  --shadow:    0 1px 2px rgba(0,0,0,.34), 0 8px 24px rgba(0,0,0,.28);
  /* 2.0 */
  --shadow-2:  0 1px 2px rgba(0,0,0,.40), 0 12px 30px rgba(0,0,0,.34);
  --shadow-3:  0 2px 6px rgba(0,0,0,.45), 0 30px 80px rgba(0,0,0,.55);
  --edge-light: inset 0 1px 0 rgba(255,255,255,.05);
  --fill:      var(--brand);   /* sobre superficie escura, --brand da 5,88:1 */
}

/* ── Base ───────────────────────────────────────────────── */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
}

/* Titulo em PRIMARIA, nao em cinza. O descritivo da marca (revisao de
   setembro de 2026) promoveu #02665C a primaria e manda h1/h2/h3 nela.
   Quem precisar de titulo cinza declara --text no proprio componente; quem
   estiver sobre fundo verde ja declara --on-deep. */
h1, h2, h3 { font-family: var(--font-heading); font-weight: 600; margin: 0; letter-spacing: -.012em; color: var(--deep); }
h1 { font-size: 20px; }
h2 { font-size: 15px; }
h3 { font-size: 14px; }

a       { color: var(--deep); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

/* Anel de foco em DUAS FAIXAS, revisto em 16/09/2026.
   A faixa externa e o outline; a interna e um box-shadow de 2px de spread,
   que preenche exatamente o vao aberto pelo outline-offset. As duas ficam
   encostadas e formam um anel de 4px, claro por dentro e escuro por fora.

   Por que duas: medido, nenhuma cor da paleta alcanca 3:1 contra os cinco
   fundos possiveis (branco, papel, tinta, casca, casca-2). Com duas faixas,
   sempre uma delas contrasta -- e elas contrastam 6,87 entre si.

   O box-shadow SUBSTITUI a sombra propria do elemento enquanto ele esta em
   foco. E de proposito: foco e estado transitorio, e a elevacao volta assim
   que o foco sai. */
/* Especificidade dobrada, pelo mesmo motivo do [disabled][disabled]: um
   seletor como input[type="text"] pesa 0,1,1 e VENCE :focus-visible, que
   pesa 0,1,0 — o halo sumiria justamente nos campos, que sao o controle
   mais focado da tela. Duplicar a pseudo-classe leva a 0,2,0 sem mudar
   o que ela casa. */
:focus-visible:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--focus-halo);
}
::selection    { background: color-mix(in srgb, var(--brand) 20%, transparent); }

/* A especificidade DOBRADA não é enfeite, e custou uma regressão para eu
   descobrir. Componente escrito com `all: unset` — o padrão do CRM para
   botão — redeclara opacity com especificidade de classe (0,1,0). Como o
   <style> da página vem depois deste arquivo, no empate ele vence, e o botão
   desabilitado ficava com opacidade 1: sem nenhum sinal de que está morto.
   Dobrar o seletor põe a regra em (0,2,0) e ela passa a valer em qualquer
   ordem, sem precisar de !important. */
[disabled][disabled], .is-disabled.is-disabled { opacity: .45; pointer-events: none; }

/* ── Números ────────────────────────────────────────────── */
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  text-align: right;
}

/* ── Rótulo de seção ──
   O briefing chama isto de "a assinatura tipográfica do conjunto":
   10,5px, peso 700, tracking 0,13em, cor --label.

   ATENÇÃO — reprovação conhecida e deliberada. --label (#98908a) mede
   2,96:1 sobre o papel --bg e 3,14:1 sobre branco, contra os 4,5:1 que
   texto de 10,5px exige. Foi adotado assim por decisão do Ricardo em
   16/09/2026, ciente da medição. No tema escuro o MESMO hex dá 5,10:1
   e passa — a reprovação é do tema claro, não da cor.

   Se um dia isto for revisto: --text-2 no mesmo lugar dava 5,03:1. */
.cap {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--label);
}

/* ── Card (objeto de wireframe) ─────────────────────────── */
.card {
  background: var(--surface);
  /* SEM CONTORNO, por decisao do briefing de 16/09/2026. A sombra passa
     a ser o unico sinal de borda -- por isso ela nao pode sair daqui. */
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card-head {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: var(--hair) solid var(--line-2);
  display: flex; align-items: baseline; justify-content: space-between;
}
.card-body { padding: var(--sp-5); }

/* Grade modular: células de largura igual separadas por 1px */
.grid-cells {
  display: grid; gap: var(--hair);
  background: var(--line);
  border: var(--hair) solid var(--line);
  box-shadow: var(--shadow);
}
.grid-cells > * { background: var(--surface); padding: var(--sp-5); }

/* ── Botões ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 9px 15px;
  border-radius: var(--radius-pill);   /* 2.0: botao em pilula; CAMPO continua em --radius-ctl */
  font-size: 12.5px; font-weight: 600;
  transition: background var(--dur-1) var(--ease-std), box-shadow var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-std);
}
.btn:active { transform: var(--press); }
/* A tabela do briefing poe #00ABAD em "acao, destaque" e #02665C em
   "fundo da aplicacao, faixas, cabecalho". A acao primaria migrou de
   --deep para --brand em 16/09/2026 por causa disso. */
.btn-primary        { background: var(--brand);   color: var(--on-brand); }
.btn-primary:hover  { background: var(--brand-2); color: var(--on-brand); }
.btn-secondary      { border: var(--hair) solid var(--line); color: var(--text); }
.btn-secondary:hover{ background: var(--surface-2); }
.btn-ghost          { color: var(--deep); }
.btn-ghost:hover    { background: var(--tint); }
/* Pressionado: um passo a mais, como pede o briefing. --brand-2 e
   preenchimento, nunca texto -- branco sobre ele da 3,65:1. */
.btn-primary:active { background: var(--brand-2); color: var(--on-brand); box-shadow: inset 0 2px 5px rgba(0,0,0,.18); }

/* ── Controle segmentado ──
   Pílula dentro de pílula: a barra é um objeto flutuante e o item ativo é
   uma pílula sólida dentro dela. Serve aba, filtro e atalho — os três são o
   mesmo controle, mudando só o que a escolha significa.

   ENTROU AQUI EM 15/09/2026, e o motivo foi medido: este mesmo desenho
   estava escrito SEIS vezes, sob CINCO nomes — .tab no boletim, e
   .aba-painel, .aba-modal, .seg-tipo e .atalho-periodo no CRM. Quatro deles
   criados no mesmo dia, por mim. É assim que o padrão diverge: não por
   discordância, mas por cada tela batizar de novo o que já existia.

   O ESTADO ATIVO VEM DO ARIA, não de uma classe. Duas razões:
   1. leitor de tela precisa do aria de qualquer forma — uma classe a mais
      seria a mesma informação escrita duas vezes, com chance de divergir;
   2. classe de estado foi exatamente onde a divergência apareceu: o CRM
      tinha "ativa" nas abas e "ativo" nos filtros, para a mesma coisa.

   Use aria-selected em aba (role="tab") e aria-pressed em botão de filtro
   ou atalho. O componente atende os dois. */
.seg {
  display: inline-flex; flex-wrap: wrap; gap: var(--sp-1);
  padding: var(--sp-1);
  background: var(--surface);
  border: var(--hair) solid var(--line);
  border-radius: var(--radius);   /* o recipiente NÃO é pílula: quebrando em
                                     duas linhas, 999px vira cápsula torta */
  box-shadow: var(--shadow);
  max-width: 100%;
}
/* Variante sem relevo, para barra de filtro dentro de um cartão que já
   flutua — sombra dentro de sombra vira sujeira. */
.seg-plano { background: var(--surface-2); box-shadow: none; border-radius: var(--radius-pill); }

/* Variante compacta, para barra de FILTRO. Aba troca o conteúdo da tela e
   merece o corpo cheio; filtro é ajuste ao lado do conteúdo e não deve
   competir com ele. Mesmo desenho, um degrau abaixo na escala. */
.seg-compacto .seg-item { padding: 5px var(--sp-4); font-size: 12.5px; }

.seg-item {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 13.5px; font-weight: 600;
  color: var(--text-2);
  white-space: nowrap; cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
.seg-item:hover { background: var(--surface-2); color: var(--text); }
.seg-item[aria-selected="true"],
.seg-item[aria-pressed="true"] { background: var(--deep); color: var(--on-deep); }
.seg-item[aria-selected="true"]:hover,
.seg-item[aria-pressed="true"]:hover { background: var(--deep-2); color: var(--on-deep); }

/* Contador dentro do item. No item ativo ele INVERTE — fundo --on-deep e
   texto --deep — em vez de virar um branco translúcido, que sobre --deep
   não alcançaria 4,5:1 em 10,5px. */
.seg-count {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 10.5px; font-weight: 600;
  padding: 1px 7px; border-radius: var(--radius-pill);
  background: var(--line-2); color: var(--text-2);
}
.seg-item[aria-selected="true"] .seg-count,
.seg-item[aria-pressed="true"]  .seg-count { background: var(--on-deep); color: var(--deep); }
.seg-count:empty { display: none; }

@media (prefers-reduced-motion: reduce) { .seg-item { transition: none; } }
@media (max-width: 840px) { .seg-item { min-height: 44px; } }  /* alvo de toque */

/* ── Tag ──
   Fundo derivado do próprio token por color-mix, para seguir o
   tema sozinho. 10% é o teto que ainda mantém 4,5:1. */
.tag {
  display: inline-block;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}
.tag-ok   { color: var(--deep); background: color-mix(in srgb, var(--deep) 10%, var(--surface)); }
.tag-warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, var(--surface)); }
.tag-risk { color: var(--risk); background: color-mix(in srgb, var(--risk) 10%, var(--surface)); }
.tag-conforme { color: var(--ok);   background: color-mix(in srgb, var(--ok) 10%, var(--surface)); }
.tag-mute { color: var(--text-2); background: var(--line-2); }

/* ── Tabela ─────────────────────────────────────────────── */
.table { border-collapse: collapse; width: 100%; }
/* 2.0 (D5, 08/10/2026): sem faixa no cabecalho. --label sobre --surface-2
   media 2,67:1, pior que as reprovacoes registradas (2,96 e 3,14) e sem
   registro. Sem a faixa o rotulo volta a --surface (3,14, aceito). */
.table thead tr { background: transparent; }
.table th {
  padding: 11px var(--sp-4);
  border-bottom: var(--hair) solid var(--line);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--label);
  text-align: left;
}
.table td { padding: 12px var(--sp-4); border-bottom: var(--hair) solid var(--line-2); }
/* Linha clicável. O hover é --tint, e não --surface-2: #FAFBFB sobre #FFFFFF
   é 1,4% de diferença de luminância — numa tabela densa, quem olha de longe
   ou enxerga pouco contraste simplesmente não vê a linha mudar. --tint é
   verde de marca, discreto e visível. Medido no CRM em 15/09/2026, onde a
   tabela tem sete colunas e a linha inteira é clicável.
   --surface-2 continua sendo o hover de ITEM (menu, célula) — ali o alvo é
   pequeno e o cursor já diz onde está. */
.table tbody tr[data-clickable], tr.rowlink { cursor: pointer; }
.table tbody tr[data-clickable]:hover, tr.rowlink:hover { background: var(--tint); }

/* ── Estado vazio ──
   Uma tabela sem registro mostrava o cabeçalho sobre espaço branco, que lê
   como "quebrou" e não como "não há nada". A borda é TRACEJADA de propósito:
   distingue "espaço à espera de conteúdo" de "cartão com conteúdo faltando".
   O texto diz o que apareceria ali; quem escreve a tela põe o botão que cria
   o primeiro registro. */
.empty {
  text-align: center;
  padding: var(--sp-10) var(--sp-5);
  font-size: 13px;
  color: var(--text-2);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  border: var(--hair) dashed var(--line);
  border-radius: var(--radius);
}
/* Dentro de tabela a borda tracejada brigaria com a do cartão em volta. */
td.empty, th.empty { background: none; border: 0; border-radius: 0; }
.table tfoot tr { background: var(--surface-2); }
.table tfoot td { font-weight: 600; border-bottom: 0; }

/* ── Nav ────────────────────────────────────────────────── */
.nav-item {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 9px 10px;
  border-left: 2px solid transparent;
  font-size: 13.5px; color: var(--text-2); text-align: left;
}
.nav-item:hover      { background: var(--surface-2); }
.nav-item[aria-current="page"] {
  border-left-color: var(--deep);
  background: var(--tint);
  color: var(--deep);
  font-weight: 600;
}

/* ── Barra de progresso / série ─────────────────────────── */
.bar       { height: 6px; background: var(--line-2); overflow: hidden; }
.bar > i   { display: block; height: 100%; background: var(--deep); }

/* ── Faixa de severidade ──
   A cor é reforço, não o único sinal: o card traz o rótulo. */
.strip-risk { border-left: 2px solid var(--risk); }
.strip-warn { border-left: 2px solid var(--warn); }
.strip-ok   { border-left: 2px solid var(--deep); }

/* ── Layout da aplicação ────────────────────────────────── */
.app { display: grid; grid-template-columns: var(--side-w) 1fr; min-height: 100vh; }
.app-header {
  height: var(--header-h);
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0 var(--sp-6);
  background: var(--nav);
  border-bottom: var(--hair) solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.app-side {
  display: flex; flex-direction: column;
  background: var(--nav);
  border-right: var(--hair) solid var(--line);
}

@media (max-width: 1120px) {
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .g2, .g3 { grid-template-columns: 1fr; }
}
@media (max-width: 840px) {
  .app { grid-template-columns: 1fr; }
  .app-side {
    position: fixed; z-index: 40; inset: 0 auto 0 0; width: var(--side-w);
    transform: translateX(-100%); transition: transform .22s ease;
  }
  .app[data-nav-open] .app-side { transform: none; box-shadow: 0 0 0 100vmax rgba(0,0,0,.35); }
  .g4, .g2, .g3 { grid-template-columns: 1fr; }
  .btn, .nav-item { min-height: 44px; }  /* alvo de toque */
}

@media (prefers-reduced-motion: reduce) {
  .app-side { transition: none; }
}

/* ════════════════════════════════════════════════════════════
   COMPONENTES 2.0 (direcao B2, 08/10/2026)
   O que entra aqui e o que as telas repetem. Layout de pagina (casca,
   faixa de abertura, vitrine) fica na camada B2 de cada ferramenta.
   ════════════════════════════════════════════════════════════ */
body { line-height: var(--lh-body); }
h1, h2, h3 { line-height: var(--lh-title); }

/* Cartao 2.0: o oficial mais o fio de luz. Clicavel sobe um degrau. */
.card-2 {
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--edge-light), var(--shadow-1);
  transition: box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.card-2[data-clickable] { cursor: pointer; }
.card-2[data-clickable]:hover { transform: var(--lift); box-shadow: var(--edge-light), var(--shadow-2); }

/* Numero de destaque: Poppins, apertado, algarismo tabular. */
.num-xl, .num-lg {
  font-family: var(--font-heading); font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: var(--tr-num); line-height: var(--lh-tight);
}
.num-xl { font-size: var(--fs-num-xl); }
.num-lg { font-size: 28px; }
.num-xl small, .num-lg small { font-size: .46em; font-weight: 500; letter-spacing: 0; margin-right: .25em; }

/* Hero na casca: textura diagonal + brilho + gradiente, so sobre --shell.
   Texto SEMPRE --on-shell; o brilho fica no canto, longe do texto. */
.hero {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  color: var(--on-shell);
  background-color: var(--shell);   /* base para quem mede contraste */
  background-image: var(--riscas), var(--glow-brand), var(--grad-shell);
  box-shadow: var(--shadow-2);
}
.hero h1, .hero h2, .hero h3 { color: var(--on-shell); }
.hero .cap { color: var(--on-deep-2); }

/* Anel de progresso. --p de 0 a 100. O conic-gradient e o dado, nao enfeite. */
.ring {
  --p: 0; --size: 112px; --w: 10px;
  width: var(--size); height: var(--size); border-radius: var(--radius-pill);
  background: conic-gradient(var(--ring-fill, var(--fill)) calc(var(--p) * 1%), var(--ring-track, var(--line-2)) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--w)), black calc(100% - var(--w) + 1px));
          mask: radial-gradient(farthest-side, transparent calc(100% - var(--w)), black calc(100% - var(--w) + 1px));
}
.on-shell .ring { --ring-fill: var(--brand); --ring-track: var(--track-shell); }

/* Barra de progresso 2.0: arredondada, mais alta que .bar. */
.meter     { height: 8px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--text) 9%, transparent); overflow: hidden; }
.meter > i { display: block; height: 100%; border-radius: inherit; background: var(--fill);
             transform-origin: left; animation: ps-encher var(--dur-3) var(--ease-out) both; }
.meter.risco > i { background: var(--risk); }
.meter.aviso > i { background: var(--warn); }
@keyframes ps-encher { from { transform: scaleX(0); } }

/* Entrada em cascata: cada bloco recebe --i (0, 1, 2...) no style. */
.reveal { animation: ps-subir var(--dur-3) var(--ease-out) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }
@keyframes ps-subir { from { opacity: 0; transform: translateY(10px); } }

/* Esqueleto de carregamento: [data-carregando] .sk */
[data-carregando] .sk { color: transparent !important; background: color-mix(in srgb, var(--text) 10%, transparent); border-radius: 6px; animation: ps-pulso 1s ease-in-out infinite alternate; }
[data-carregando] .sk * { visibility: hidden; }
@keyframes ps-pulso { to { opacity: .45; } }

/* Barra de topo de vidro. */
.topbar-glass { position: sticky; top: 0; z-index: 20; background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-bottom: var(--hair) solid var(--line); }

/* Contador de pendencia: vermelho e decisao pendente (regra do CRM).
   --risk sobre 10% dele mesmo, o mesmo par da .tag-risk. */
.pend {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 10.5px; font-weight: 600; line-height: 18px;
  min-width: 20px; padding: 0 7px; text-align: center; border-radius: var(--radius-pill);
  color: var(--risk); background: color-mix(in srgb, var(--risk) 10%, var(--surface));
}

/* Movimento e enfeite: quem pediu menos recebe zero e a tela chega pronta. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --lift: none; --press: none; --stagger: 0ms; }
  .reveal, .meter > i, [data-carregando] .sk { animation: none; }
}