/* ═══════════════════════════════════════════════════════════════════════════
   O TEMA — paleta da casa em tokens, claro e escuro, e o vidro
   [CC] Jano Assistente · 17/08/2026

   🔴 A PALETA NÃO FOI ESCOLHIDA: foi MEDIDA. Varri 504 arquivos dos outros
   projetos da operação e contei ocorrência de cor. `#0B2447` aparece 781×  e
   `#C7202A` 459×, os dois em SETE projetos — Aurora, Calíope, Estratégia,
   Fonte, Íris, MapaPará, Minerva, Sentinela. Isso é identidade, não gosto.

   🔴 E O PAR PRINCIPAL NÃO PODE SE TOCAR. Contraste medido (WCAG 2.1):

       branco  sobre marinho .... 15,47  ✅
       ouro    sobre marinho ..... 6,35  ✅  ← é ele que carrega número
       branco  sobre vermelho .... 5,72  ✅
       cinza   sobre marinho ..... 3,84  🔴 texto normal · ✅ só grande
       VERMELHO sobre MARINHO .... 2,70  🔴 REPROVA ATÉ EM TEXTO GRANDE

   ⚠️ Por isso o vermelho aqui é **faixa, borda e alerta — nunca letra sobre o
   marinho**. Já era assim por instinto; agora é por medição, e está escrito
   para a próxima pessoa não desfazer sem saber o que desfaz.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── ESCURO: o padrão da casa ─────────────────────────────────────────────── */
:root{
  --marinho:#0B2447;  --vermelho:#C7202A;  --ouro:#C8A13A;
  --preto:#1A2027;    --cinza:#74808C;

  --fundo:#08152a;  --caixa:rgba(14,36,68,.72);  --caixa-solida:#0e2444;
  --linha:#1b365d;  --tinta:#e8eef7;  --fraco:#93a7c4;
  /* 🔴 #61789c media 3,45 sobre o cartão — reprovava o piso de 4,5 do texto
     normal. Clareado até PASSAR, não até parecer bonito. */
  --tenue:#8ba0be;
  --ouro-claro:#E8B84B;  --verde:#7FB69C;  --vermelho-claro:#F87171;
  --azul:#60A5FA;   --trilho:#0a1c33;
  --vidro:blur(9px) saturate(1.15);
  --sombra:0 1px 0 rgba(255,255,255,.045) inset, 0 8px 26px rgba(0,0,0,.32);
  --brilho:0 0 30px rgba(200,161,58,.22);
}

/* ── CLARO ────────────────────────────────────────────────────────────────
   ⚠️ Não é o escuro invertido. No claro o marinho vira TINTA (15,47 sobre
   branco) e o ouro sai de vez do texto: ouro sobre branco dá 2,44 — reprova.
   Cor que funciona num modo pode ser ilegível no outro, e trocar só o fundo é
   o erro mais comum de tema duplo. */
:root[data-tema="claro"]{
  --fundo:#f4f6f9;  --caixa:rgba(255,255,255,.78);  --caixa-solida:#ffffff;
  --linha:#d7dde6;  --tinta:#12203a;  --fraco:#3d4c63;
  /* 🔴 #74808C media 4,03 sobre branco — reprovava. Escurecido até passar. */
  --tenue:#5a6880;
  /* 🔴 E O `--ouro` TAMBÉM, não só o `--ouro-claro`: o número grande do painel
     usa `--ouro`, e no claro ele media **2,44** — ilegível, e eu teria
     publicado. Medir a TELA, não o token, é o que pegou. */
  --ouro:#7d5f0d;  --ouro-claro:#6b5209;
  --verde:#1c6b45;  --vermelho-claro:#a3141d;  --azul:#1b5fb0;
  --trilho:#e6eaf1;
  --sombra:0 1px 0 rgba(255,255,255,.7) inset, 0 6px 18px rgba(11,36,71,.09);
  --brilho:0 0 24px rgba(138,106,18,.16);
}
@media (prefers-color-scheme:light){
  :root:not([data-tema="escuro"]){
    --fundo:#f4f6f9;  --caixa:rgba(255,255,255,.78);  --caixa-solida:#ffffff;
    --linha:#d7dde6;  --tinta:#12203a;  --fraco:#3d4c63;  --tenue:#5a6880;
    --ouro:#7d5f0d;  --ouro-claro:#6b5209;  --verde:#1c6b45;  --vermelho-claro:#a3141d;
    --azul:#1b5fb0;  --trilho:#e6eaf1;
    --sombra:0 1px 0 rgba(255,255,255,.7) inset, 0 6px 18px rgba(11,36,71,.09);
    --brilho:0 0 24px rgba(138,106,18,.16);
  }
}

/* ── O VIDRO ──────────────────────────────────────────────────────────────
   🔴 SÓ AQUI, e nunca no app de campo: `backdrop-filter` compõe uma camada
   por quadro. No desktop é grátis; no celular fraco em 3G é onde trava, e o
   orçamento do 06 é de 9,7 KB e um aparelho de entrada.
   ⚠️ `@supports` porque quem não tem o filtro precisa do fundo SÓLIDO — sem
   isso o cartão fica translúcido sobre o fundo e o texto perde contraste. */
.painel, .kpi, .gerador, .item, .legenda{
  background:var(--caixa-solida);
  border:1px solid var(--linha);
  box-shadow:var(--sombra);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .painel, .kpi, .gerador, .item, .legenda{
    background:var(--caixa);
    -webkit-backdrop-filter:var(--vidro);
    backdrop-filter:var(--vidro);
  }
}

/* o halo do número grande — o «efeito de luz» da direção A */
.kpi .val, .heroi{ text-shadow:var(--brilho); }

/* 🔴 O VERMELHO COMO FAIXA, NUNCA COMO LETRA SOBRE O MARINHO. */
.faixa-alerta{
  background:repeating-linear-gradient(45deg,var(--vermelho) 0 14px,#8e1620 14px 28px);
  color:#fff;
}

/* ── o botão de tema ──────────────────────────────────────────────────────── */
/* ⚠️ `--fraco` no botão media 2,10 sobre a barra escura no modo claro: a barra
   NÃO troca de cor com o tema (é sempre escura), então o texto dela também não
   pode. Cor fixa aqui é o certo — token que segue o tema erra quando o fundo
   não segue. */
#jano-tema{
  font:600 12px/1 ui-sans-serif,system-ui,sans-serif;background:transparent;
  color:#c3d0e2;border:1px solid #1b365d;padding:6px 10px;cursor:pointer;
  margin-left:auto;border-radius:3px;
}
#jano-tema:hover{color:#fff;border-color:#C8A13A}
@media print{ #jano-tema{display:none} }