/* ============================================================
   "Noite Encaixe" - o tema (escuro e claro) das telas do CLIENTE.

   Aprovado pelo Paulo em 09/10/2026 (referencia: C-noite). Esta folha traz:
   1. os TOKENS dos dois modos (`data-tema="escuro"` e `data-tema="claro"` no
      <html>), os mesmos nomes da referencia aprovada;
   2. a letra (Bricolage Grotesque nos titulos e nos numeros grandes,
      Instrument Sans no texto), a superficie, as linhas e o foco;
   3. os componentes comuns, com o prefixo `n-` (novos) e a roupa nova das
      classes `ext-*` / `fx-*` / `ce-*` que as telas ja usam.

   ESCOPO: as telas do CLIENTE (`_extrato_cabeca.html`) e, desde a fase 3
   (13/10/2026), as da EQUIPE: elas carregam SO os tokens e o alternador, por
   `_noite_cabeca.html`, e a ponte `casa.css` aponta as variaveis antigas para
   eles. As regras de componente daqui (`.extrato`, `.n-*`) continuam sendo do
   cliente; nenhuma regra solta de `body`/`.casa` mora nesta folha.

   REGRA: cor fixa (hex, rgb) so existe entre `TOKENS:inicio` e `TOKENS:fim`.
   Fora disso, tudo e `var(--...)`: um teste confere isso (tests/test_tema_noite.py).
   O modo e escolhido ANTES de pintar por um script no <head>
   (`_extrato_cabeca.html`): ?tema= > localStorage `ve-tema` > sistema.
   ============================================================ */

/* TOKENS:inicio  (o unico trecho deste arquivo onde cor fixa e permitida) */
:root,
[data-tema="escuro"] {
  color-scheme: dark;
  --fundo: #061427;
  --fundo-brilho: #0E2A52;
  --fundo-faixa: #040E1D;
  --superficie: #0B2240;
  --superficie-2: #102A4E;
  --borda-painel: #142D50;
  --trilho: #13305A;
  --linha: #1C3A63;
  --linha-2: #29497A;
  --grade: #16304F;
  --texto: #EEF4FB;
  --texto-2: #A9BDD8;
  --texto-3: #7D93B4;
  --entrou: #10A98A;
  --saiu: #7884EA;
  --negativo: #E85564;
  --alerta: #C28320;
  --neutra: #3A5784;
  --neutra-2: #5873A8;
  --resultado: #EEF4FB;
  --ponto-pos: #7FE3C6;
  --sobrou: #7FE3C6;
  --acento: #7FE3C6;
  --acento-texto: #7FE3C6;
  --acento-fundo: #7FE3C6;
  --acento-tinta: #061427;
  --negativo-texto: #FF9AA4;
  --negativo-tinta: #1A0710;
  --negativo-veu: rgba(232, 85, 100, .09);
  --zero: #7A3A52;
  --alerta-texto: #F2C27A;
  --alerta-veu-a: rgba(194, 131, 32, .16);
  --alerta-veu-b: rgba(194, 131, 32, .04);
  --area-entrou-a: .42;
  --area-saiu-a: .38;
  --dica-fundo: #16345F;
  --dica-borda: #29497A;
  --cursor: #3B5D8F;
  --cabeca: #2B4770;
  --f-salarios: #5A56C7;
  --f-extras: #9C9FF0;
  --f-prolabore: #4D9CD0;
  --f-autonomos: #2F6A94;
  --f-rescisao: #BF4922;
  --f-ferias: #B88C19;
  --f-decimo: #9750A7;
  --f-fgts: #019D7E;
  --f-inss: #5FCDAE;
  --f-outros: #7D93B4;
  --f-pequenos: #5873A8;
  --veu-ok: rgba(16, 169, 138, .14);
  --veu-hover: rgba(238, 244, 251, .04);
  --veu-neutro: rgba(238, 244, 251, .07);
  --sombra-coluna: 0 30px 60px -40px rgba(0, 0, 0, .6);
  --sombra-flutuante: 0 10px 30px -12px rgba(0, 0, 0, .6);
  --sombra-cima: 0 -12px 24px -20px rgba(0, 0, 0, .6);
}
[data-tema="claro"] {
  color-scheme: light;
  --fundo: #EEF2F7;
  --fundo-brilho: #DCE6F3;
  --fundo-faixa: #E2E9F2;
  --superficie: #FFFFFF;
  --superficie-2: #EAF0F7;
  --borda-painel: #D5DEEA;
  --trilho: #E7EDF5;
  --linha: #DAE2EC;
  --linha-2: #B9C7D9;
  --grade: #E8EDF3;
  --texto: #0B2240;
  --texto-2: #3E5272;
  --texto-3: #56688A;
  --entrou: #008A6C;
  --saiu: #5863D3;
  --negativo: #D3384E;
  --alerta: #BB7400;
  --neutra: #B8C6DA;
  --neutra-2: #8DA2C2;
  --resultado: #0B2240;
  --ponto-pos: #008A6C;
  --sobrou: #0B2240;
  --acento: #00876F;
  --acento-texto: #006B58;
  --acento-fundo: #0B2240;
  --acento-tinta: #FFFFFF;
  --negativo-texto: #B42838;
  --negativo-tinta: #FFFFFF;
  --negativo-veu: rgba(211, 56, 78, .07);
  --zero: #E7A1AB;
  --alerta-texto: #8A5300;
  --alerta-veu-a: rgba(187, 116, 0, .13);
  --alerta-veu-b: rgba(187, 116, 0, .03);
  --area-entrou-a: .26;
  --area-saiu-a: .24;
  --dica-fundo: #0B2240;
  --dica-borda: #0B2240;
  --cursor: #9FB1C9;
  --cabeca: #CBD6E4;
  --f-salarios: #3E44B1;
  --f-extras: #6F76DA;
  --f-prolabore: #5A91D7;
  --f-autonomos: #2B7BA6;
  --f-rescisao: #B04613;
  --f-ferias: #C58D04;
  --f-decimo: #9043A1;
  --f-fgts: #008A6C;
  --f-inss: #56C2A3;
  --f-outros: #8392AB;
  --f-pequenos: #8DA2C2;
  --veu-ok: rgba(0, 138, 108, .10);
  --veu-hover: rgba(11, 34, 64, .035);
  --veu-neutro: rgba(11, 34, 64, .06);
  --sombra-coluna: 0 30px 60px -40px rgba(11, 34, 64, .28);
  --sombra-flutuante: 0 10px 30px -12px rgba(11, 34, 64, .35);
  --sombra-cima: 0 -12px 24px -20px rgba(11, 34, 64, .35);
}
/* Impressao e PDF: SEMPRE o claro, seja qual for a escolha da pessoa. Os valores
   sao os do bloco claro acima (um teste confere que sao identicos). */
@media print {
  :root,
  [data-tema="escuro"],
  [data-tema="claro"] {
    color-scheme: light;
    --fundo: #EEF2F7;
    --fundo-brilho: #DCE6F3;
    --fundo-faixa: #E2E9F2;
    --superficie: #FFFFFF;
    --superficie-2: #EAF0F7;
    --borda-painel: #D5DEEA;
    --trilho: #E7EDF5;
    --linha: #DAE2EC;
    --linha-2: #B9C7D9;
    --grade: #E8EDF3;
    --texto: #0B2240;
    --texto-2: #3E5272;
    --texto-3: #56688A;
    --entrou: #008A6C;
    --saiu: #5863D3;
    --negativo: #D3384E;
    --alerta: #BB7400;
    --neutra: #B8C6DA;
    --neutra-2: #8DA2C2;
    --resultado: #0B2240;
    --ponto-pos: #008A6C;
    --sobrou: #0B2240;
    --acento: #00876F;
    --acento-texto: #006B58;
    --acento-fundo: #0B2240;
    --acento-tinta: #FFFFFF;
    --negativo-texto: #B42838;
    --negativo-tinta: #FFFFFF;
    --negativo-veu: rgba(211, 56, 78, .07);
    --zero: #E7A1AB;
    --alerta-texto: #8A5300;
    --alerta-veu-a: rgba(187, 116, 0, .13);
    --alerta-veu-b: rgba(187, 116, 0, .03);
    --area-entrou-a: .26;
    --area-saiu-a: .24;
    --dica-fundo: #0B2240;
    --dica-borda: #0B2240;
    --cursor: #9FB1C9;
    --cabeca: #CBD6E4;
    --f-salarios: #3E44B1;
    --f-extras: #6F76DA;
    --f-prolabore: #5A91D7;
    --f-autonomos: #2B7BA6;
    --f-rescisao: #B04613;
    --f-ferias: #C58D04;
    --f-decimo: #9043A1;
    --f-fgts: #008A6C;
    --f-inss: #56C2A3;
    --f-outros: #8392AB;
    --f-pequenos: #8DA2C2;
    --veu-ok: rgba(0, 138, 108, .10);
    --veu-hover: rgba(11, 34, 64, .035);
    --veu-neutro: rgba(11, 34, 64, .06);
    --sombra-coluna: 0 30px 60px -40px rgba(11, 34, 64, .28);
    --sombra-flutuante: 0 10px 30px -12px rgba(11, 34, 64, .35);
    --sombra-cima: 0 -12px 24px -20px rgba(11, 34, 64, .35);
  }
}
:root {
  /* O marinho da marca em tudo o que NAO muda de modo: a cabeca do celular, a
     metade escura das telas de entrada, o cartao escuro do computador. */
  --marinho: #0B2240;
  --cab-fundo: #0B2240;
  --cab-texto: #EEF4FB;
  --cab-texto-2: #A9BDD8;
  --cab-texto-3: #7D93B4;
  --cab-acento: #7FE3C6;
  --cab-neg: #FF9AA4;
  --cab-chip: rgba(255, 255, 255, .08);
  --cab-chip-texto: #D6E2F1;
  --cab-linha: rgba(255, 255, 255, .22);
  --cab-acento-veu: rgba(127, 227, 198, .16);
  --cab-borda: rgba(255, 255, 255, .18);
  --logo-fundo: #FFFFFF;
  --hachura: rgba(255, 255, 255, .6);
  --raio: 20px;
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-texto: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  /* os nomes que o servidor manda (`chave`) para as duas partes de nome composto */
  --f-pro_labore: var(--f-prolabore);
  --f-inss_empresa: var(--f-inss);
}
/* TOKENS:fim */

/* ================================================= BASE */
html { background: var(--fundo); }
body.extrato {
  background-color: var(--fundo);
  background-image: radial-gradient(1200px 520px at 78% -120px, var(--fundo-brilho) 0%, transparent 70%);
  background-repeat: no-repeat;
  color: var(--texto);
  font-family: var(--font-texto);
  -webkit-font-smoothing: antialiased;
}
/* Sem `tabular-nums`: nas duas letras ele alarga a pontuacao ("26 . 310 , 59").
   O numero fica como a referencia aprovada o desenha. */
body.extrato, body.extrato * { font-variant-numeric: normal; font-feature-settings: normal; }
.extrato h1, .extrato h2, .extrato h3 { font-family: var(--font-display); }
.extrato :focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.extrato input:focus, .extrato textarea:focus, .extrato select:focus { outline: 2px solid var(--acento); outline-offset: 1px; }
.extrato ::placeholder { color: var(--texto-3); opacity: 1; }
.extrato ::selection { background: var(--acento-fundo); color: var(--acento-tinta); }

/* Os numeros que a pessoa le primeiro: letra de titulo. */
.extrato .ext-valor, .extrato .ext-numero b, .extrato .ext-pessoas-numeros b,
.extrato .fx-fato b, .extrato .fx-agora b, .extrato .fx-frase, .extrato .fx-total b,
.extrato .kpi strong, .extrato .rosca-total, .extrato .fis-numero {
  font-family: var(--font-display);
}

/* ================================================= O ALTERNADOR sol/lua */
.n-tema {
  all: unset; box-sizing: border-box; cursor: pointer; flex: none;
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  color: var(--texto-2); border: 1px solid var(--linha);
}
.n-tema:hover { color: var(--texto); border-color: var(--linha-2); }
.n-tema:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.n-tema svg { width: 18px; height: 18px; display: block; }
[data-tema="escuro"] .n-tema .lua { display: none; }
[data-tema="claro"] .n-tema .sol { display: none; }
/* Dentro da cabeca marinho do celular e da metade escura das telas de entrada. */
.n-tema-cab { color: var(--cab-texto-2); border-color: var(--cab-borda); width: 34px; height: 34px; }
.n-tema-cab:hover { color: var(--cab-texto); border-color: var(--cab-texto-2); }
.n-tema-cab:focus-visible { outline-color: var(--cab-acento); }
.ext-l1 > .n-tema { margin-left: 4px; }
.ext-l1 > .ext-emp { margin-right: auto; }

/* ================================================= COMPONENTES COMUNS (n-) */
/* o painel: a superficie onde ficam os numeros e os graficos */
.n-painel { background: var(--superficie); border: 1px solid var(--borda-painel); border-radius: var(--raio); padding: 22px 24px; }
.n-painel h2, .n-painel h3 { margin: 0; letter-spacing: -.02em; }
.n-sub { color: var(--texto-2); margin: 6px 0 0; font-size: 15px; }
/* a faixa de alerta ambar: o que ainda falta e muda o numero */
.n-faixa-ambar, .extrato .pendencia {
  border: 0; border-left: 3px solid var(--alerta); border-radius: 0 14px 14px 0;
  background: linear-gradient(90deg, var(--alerta-veu-a), var(--alerta-veu-b));
  padding: 16px 18px; color: var(--texto-2);
}
.n-faixa-ambar b, .n-faixa-ambar strong { color: var(--alerta-texto); }
/* a pilula do mes no vermelho */
.n-pilula-neg {
  display: inline-block; background: var(--negativo); color: var(--negativo-tinta);
  font-weight: 700; font-size: 13px; padding: 2px 9px; border-radius: 999px; white-space: nowrap;
}
/* as abas dos paineis e a fileira de meses */
.n-abas { display: flex; gap: 4px; flex-wrap: wrap; }
.n-abas a, .n-abas span {
  text-decoration: none; color: var(--texto-2); font-weight: 500; font-size: 15px;
  padding: 7px 14px; border-radius: 999px; white-space: nowrap;
}
.n-abas a:hover { color: var(--texto); }
.n-abas [aria-current] { color: var(--acento-tinta); background: var(--acento-fundo); font-weight: 600; }
.n-meses { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.n-meses a, .n-meses span {
  flex: none; font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 999px;
  background: var(--superficie-2); color: var(--texto-2); text-decoration: none; white-space: nowrap;
}
.n-meses [aria-current] { background: var(--acento-fundo); color: var(--acento-tinta); }
/* botoes */
.n-botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-weight: 600;
  font-size: 14px; padding: 9px 16px; min-height: 40px; border-radius: 12px; cursor: pointer; text-decoration: none;
  border: 1px solid var(--linha-2); background: transparent; color: var(--texto);
}
.n-botao:hover { border-color: var(--texto-2); }
.n-botao-forte { background: var(--acento-fundo); color: var(--acento-tinta); border-color: var(--acento-fundo); }
/* a conversa lateral e a barra inferior do celular */
.n-conversa { background: var(--fundo); border-left: 1px solid var(--linha); }
.n-barra-baixo { background: var(--superficie); border-top: 1px solid var(--linha); }
/* o "para o contador": detalhes que abrem */
.n-detalhes { border: 1px solid var(--linha); border-radius: 16px; padding: 0 22px; }
.n-detalhes > summary { cursor: pointer; list-style: none; padding: 18px 0; display: flex; align-items: center; gap: 12px; font-weight: 600; }
.n-detalhes > summary::-webkit-details-marker { display: none; }
.n-detalhes > summary::before {
  content: ""; width: 8px; height: 8px; margin-right: 4px; transform: rotate(-45deg); transition: transform .2s;
  border-right: 2px solid var(--texto-2); border-bottom: 2px solid var(--texto-2);
}
.n-detalhes[open] > summary::before { transform: rotate(45deg); }
[data-tema="claro"] .n-detalhes { background: var(--superficie); border-color: var(--borda-painel); }

/* ================================================= AS PECAS DO APP.CSS NO TEMA NOVO */
.extrato .aviso-erro { background: var(--negativo-veu); border-color: var(--negativo); color: var(--negativo-texto); }
.extrato .aviso-ok { background: var(--veu-ok); border-color: var(--entrou); color: var(--acento-texto); }
.extrato .aviso-ambar { background: var(--alerta-veu-a); border-color: var(--alerta); color: var(--alerta-texto); }
.extrato .aviso-info { background: var(--superficie-2); border-color: var(--linha-2); color: var(--texto-2); }
.extrato .tag-op { background: var(--veu-ok); color: var(--acento-texto); }
.extrato .tag-v { background: var(--alerta-veu-a); color: var(--alerta-texto); }
.extrato .tag-q { background: var(--negativo-veu); color: var(--negativo-texto); }
.extrato .tag-neutra { background: var(--veu-neutro); color: var(--texto-2); }
.extrato tbody tr:hover { background: var(--veu-hover); }
.extrato .conta-conferir summary:hover, .extrato .aviso-alvo:hover { background: var(--veu-hover); }
.extrato .balancete-completo tr.sintetica { background: var(--veu-hover); }
.extrato .balancete-completo tr[data-abre]:hover { background: var(--veu-neutro); }
.extrato .fis-fatia { background: var(--veu-neutro); }
.extrato .fis-porque li:last-child { background: var(--veu-hover); }
.extrato .pergunta { background: var(--veu-ok); }
.extrato .resposta { background: var(--alerta-veu-a); }
.extrato .pergunta-nova { background: linear-gradient(90deg, var(--veu-ok), var(--cartao) 220px); }
.extrato .voc-marco-falta { border-color: var(--alerta); background: var(--alerta-veu-a); }
.extrato .escolha-empresa:hover { background: var(--veu-hover); }
.extrato .escolha-fiscal:hover { background: var(--alerta-veu-b); }
/* A tarja da previa do escritorio: o ambar vira borda, o texto segue legivel. */
.extrato .faixa-previa { background: var(--superficie-2); color: var(--texto); border-bottom: 2px solid var(--alerta); }
.extrato .faixa-previa a { color: var(--alerta-texto); }
.extrato .modal { background: var(--superficie); color: var(--texto); }
.extrato .kpis { border-color: var(--linha); background: var(--linha); }
.extrato .cartao { border-color: var(--borda-painel); }
[data-tema="claro"] .extrato .cartao { box-shadow: 0 0 0 1px var(--borda-painel); }

/* Impressao: o alternador nao sai no papel (e as cores, no papel, sao as do claro). */
@media print {
  .n-tema { display: none !important; }
  body.extrato { background-image: none; }
}

/* ================================================= AJUSTES DE ENCAIXE DAS PECAS ANTIGAS */
.extrato .ext-barra-acoes { align-items: center; }
.extrato .ext-barra-acoes a { color: var(--texto); border-color: var(--linha-2); border-radius: 999px; }
.extrato .ext-barra-acoes a:hover { border-color: var(--texto-2); }
.ext-l1 .ext-escritorio { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 440px) {
  .ext-l1 .ext-escritorio { display: none; }
}