/* ==========================================================================
   Painel HUD — Tema
   Carregado depois de apple-tokens.css: aproveita a estrutura (grade de 8pt,
   escala tipográfica, molas reais) e troca a pele por um HUD cyber.

   Regra que veio da pesquisa e que segura o resultado: neon é acento, não
   superfície. Fica em 10–15% da tela. O resto é near-black e azul sujo.
   ========================================================================== */

:root,
:root[data-theme="dark"] {   /* empata a especificidade do apple-tokens.css */
  /* ---------------------------------------------------------- tipografia -- */
  --font-system:  'Ruda', ui-sans-serif, system-ui, -apple-system, 'SF Pro Text', sans-serif;
  /* Ruda também nos números. Ela não tem algarismo de largura fixa nem a
     feature `tnum`, então o alinhamento de coluna vem do alinhamento à
     direita com duas casas decimais — que resolve o caso que importa. */
  --font-mono:    var(--font-system);
  --font-display: 'Ruda', ui-sans-serif, system-ui, sans-serif;

  /* ------------------------------------------------------------ densidade -- */
  /* A escala anterior pedia zoom de 80% para caber bem. Aqui ela já nasce
     nesse tamanho: tipografia a ~0,85 e alturas de componente a ~0,8. */
  --text-large-title: 700 28px/34px   var(--font-system);
  --text-title1:      700 23px/29px   var(--font-system);
  --text-title2:      700 19px/24px   var(--font-system);
  --text-title3:      600 17px/22px   var(--font-system);
  --text-headline:    600 15px/20px   var(--font-system);
  --text-body:        400 14.5px/20px var(--font-system);
  --text-callout:     400 14px/19px   var(--font-system);
  --text-subheadline: 400 13px/18px   var(--font-system);
  --text-footnote:    400 12px/16px   var(--font-system);
  --text-caption1:    400 11px/15px   var(--font-system);
  --text-caption2:    400 10px/13px   var(--font-system);
  --text-kpi:         800 20px/24px   var(--font-system);
  --text-kpi-lg:      800 26px/30px   var(--font-system);
  --text-card-title:  700 13.5px/18px var(--font-system);

  --alt-controle: 36px;   /* campo, seletor, data */
  --alt-botao:    33px;
  --pad-cartao:   14px;
  --alt-rotulo:   14px;   /* uma linha de rótulo — mantém controles alinhados */

  /* ------------------------------------------------------------- neon ----- */
  /* Dessaturado de propósito: #00FFFF puro vibra na tela e cansa a vista. */
  --neon:        #22E0F5;   /* ciano — ação, foco e brilho da interface */
  --neon-forte:  #6FF2FF;
  --neon-fundo:  rgba(34, 224, 245, 0.10);
  --neon-linha:  rgba(34, 224, 245, 0.30);
  --magenta:     #FF3DA6;   /* identidade secundária, só decoração */
  --magenta-fundo: rgba(255, 61, 166, 0.10);

  /* Status é reservado: nunca vira cor de série.
     A regra que os separa é a luminosidade — status vive ACIMA da banda das
     séries (OKLCH L ≥ 0,70; as séries ficam entre 0,48 e 0,67), então um sinal
     de estado nunca é confundido com um dado. E status sempre sai com ícone e
     rótulo, nunca só pela cor. */
  --positivo:  #5EE38B;   /* concluído, recebido, dentro do limite */
  --atencao:   #FFE81F;   /* prazo curto, acima de 80% do teto */
  --critico:   #FF6B7A;   /* vencido, estourado, recusado */
  --lima:      var(--positivo);   /* nomes antigos, mantidos por compatibilidade */
  --ambar:     var(--atencao);
  --vermelho:  var(--critico);
  --violeta:   #9B6BFF;

  --acento:        var(--neon);
  --acento-forte:  var(--neon-forte);
  --acento-sobre:  #041318;                        /* texto sobre o acento */
  --acento-botao:  var(--acento);                  /* fundo do botão primário */
  --acento-brilho: rgba(34, 224, 245, 0.55);
  --atencao-texto: var(--atencao);                 /* mesma cor: no escuro fecha */
  --acento-suave: var(--neon-fundo);
  --acento-linha: var(--neon-linha);

  /* ---------------------------------------------------------- superfícies -- */
  --bg-0: #04070f;   /* fundo absoluto */
  --bg-1: #080e1a;   /* página */
  --bg-2: #101a2c;   /* painel */
  --bg-3: #16233a;   /* painel elevado / campo */
  --bg-4: #1d2d49;   /* estado ativo */

  --color-bg-primary:   var(--bg-2);
  --color-bg-secondary: var(--bg-1);
  --color-bg-tertiary:  var(--bg-0);

  --superficie:       var(--bg-2);
  --superficie-alta:  var(--bg-3);
  --superficie-baixa: #0b1322;

  /* Três pesos de fio, não um só: a borda do painel precisa desenhar a forma;
     a divisória interna só precisa separar. Usar o mesmo peso nos dois enchia
     a tela de traço. */
  --linha:       rgba(125, 205, 245, 0.22);   /* aresta de painel e campo */
  --linha-forte: rgba(130, 210, 250, 0.36);   /* foco, cabeçalho de tabela */
  --divisor:     rgba(150, 200, 235, 0.10);   /* linha de tabela, item de lista */
  --borda:       var(--linha);
  --borda-forte: var(--linha-forte);
  --trilho:      rgba(120, 190, 230, 0.09);

  --color-separator:      var(--linha);
  --color-fill:           rgba(120, 190, 230, 0.16);
  --color-fill-secondary: rgba(120, 190, 230, 0.11);
  --color-fill-tertiary:  rgba(120, 190, 230, 0.06);

  /* --------------------------------------------------------------- texto -- */
  --color-label:            #dfeaf7;
  --color-label-secondary:  rgba(223, 234, 247, 0.70);
  --color-label-tertiary:   rgba(223, 234, 247, 0.46);
  --color-label-quaternary: rgba(223, 234, 247, 0.24);

  /* ------------------------------------------------------------ sistêmico -- */
  --color-blue:   var(--neon);
  --color-green:  var(--lima);
  --color-red:    var(--vermelho);
  --color-orange: var(--ambar);
  --color-yellow: #FFD84D;
  --color-teal:   #4DF0D0;
  --color-purple: var(--violeta);
  --color-pink:   var(--magenta);
  --color-indigo: #6D8BFF;
  --color-mint:   #4DF0C4;

  --sentiment-up:   var(--positivo);
  --sentiment-down: var(--critico);
  --sentiment-flat: var(--color-label-tertiary);

  /* -------------------------------------------------------------- forma --- */
  /* Geometria Apple: raios concêntricos, nada de canto cortado.
     Regra do aninhamento — raio interno = raio externo menos o padding. */
  --radius-xs: 6px;  --radius-sm: 10px; --radius-md: 14px;
  --radius-lg: 20px; --radius-xl: 28px; --radius-full: 9999px;

  /* --------------------------------------------------------- profundidade -- */
  /* Sombra em camadas como na escada da HIG: uma curta de contato e uma
     longa e difusa. No escuro entra também o fio de luz na aresta de cima,
     que é o que faz o painel parecer levantado em vez de recortado. */
  --sombra-1: 0 1px 2px rgba(0,0,0,0.45), 0 2px 8px -4px rgba(0,0,0,0.5);
  --sombra-2: 0 2px 4px -2px rgba(0,0,0,0.5), 0 10px 26px -12px rgba(0,0,0,0.72);
  --sombra-3: 0 4px 8px -4px rgba(0,0,0,0.55), 0 20px 44px -18px rgba(0,0,0,0.78);
  --sombra-4: 0 10px 20px -10px rgba(0,0,0,0.6), 0 34px 70px -24px rgba(0,0,0,0.85);
  --rim: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --shadow-1: var(--sombra-1); --shadow-2: var(--sombra-2);
  --shadow-3: var(--sombra-3); --shadow-4: var(--sombra-4); --shadow-5: var(--sombra-4);
  --sombra-cartao: var(--sombra-2);
  --sombra-cartao-alta: var(--sombra-3);

  --brilho-neon:    0 0 0 1px var(--neon-linha), 0 0 18px -4px rgba(34, 224, 245, 0.55);
  --brilho-magenta: 0 0 0 1px rgba(255, 61, 166, 0.32), 0 0 18px -4px rgba(255, 61, 166, 0.5);
  --shadow-glow-blue: var(--brilho-neon);

  /* --------------------------------------------------------- visualização -- */
  /* Paleta categórica — escolhida por script, não a olho.
     Passa nos seis checks do método em ambos os modos: banda de luminosidade,
     piso de croma, separação sob protanopia/deuteranopia (pior par adjacente
     ΔE 13,4 · alvo ≥ 8), piso de visão normal (ΔE 31,2 · piso 15) e contraste
     ≥ 3:1 contra a superfície. A ORDEM é o mecanismo de segurança: foi
     enumerada entre 40.320 permutações e só 3.680 passam — esta é uma delas.
     Trocar a ordem exige rodar o validador de novo. */
  --viz-1: #15a3b3;   /* ciano   */
  --viz-2: #8426fb;   /* violeta */
  --viz-3: #6ca411;   /* lima    */
  --viz-4: #fc179f;   /* magenta */
  --viz-5: #075ff8;   /* azul    */
  --viz-6: #c18211;   /* âmbar   */
  --viz-7: #1294f9;   /* azure   */
  --viz-8: #fc1658;   /* rosa    */

  --viz-1-soft: rgba(21, 163, 179, 0.10);
  --viz-2-soft: rgba(132, 38, 251, 0.10);
  --viz-3-soft: rgba(108, 164, 17, 0.10);
  --viz-4-soft: rgba(252, 23, 159, 0.10);
  --viz-5-soft: rgba(7, 95, 248, 0.10);
  --viz-6-soft: rgba(193, 130, 17, 0.10);
  --viz-7-soft: rgba(18, 148, 249, 0.10);
  --viz-8-soft: rgba(252, 22, 88, 0.10);

  /* O topo mais claro dá volume à barra; a identidade é a base, que é o
     degrau validado. */
  --grad-1: linear-gradient(180deg, #4fcdde 0%, #15a3b3 100%);
  --grad-2: linear-gradient(180deg, #a17afc 0%, #8426fb 100%);
  --grad-3: linear-gradient(180deg, #92ce48 0%, #6ca411 100%);
  --grad-4: linear-gradient(180deg, #fd91c1 0%, #fc179f 100%);
  --grad-5: linear-gradient(180deg, #5b93fc 0%, #075ff8 100%);
  --grad-6: linear-gradient(180deg, #edaa47 0%, #c18211 100%);
  --grad-7: linear-gradient(180deg, #81befd 0%, #1294f9 100%);
  --grad-8: linear-gradient(180deg, #fd8c96 0%, #fc1658 100%);

  /* Par de polaridade: receita contra despesa não é identidade, é sinal. */
  --grad-pos: linear-gradient(180deg, #8bf0ae 0%, #2bbf62 100%);
  --grad-neg: linear-gradient(180deg, #ff9aa5 0%, #e23a52 100%);
  /* Rampa ordinal: um matiz só, escurecendo a cada degrau. Etapa de funil tem
     ordem, e a ordem precisa estar na cor. Validada com --ordinal: luminosidade
     monótona, ΔL ≥ 0,06 entre degraus e ponta clara acima de 2:1. */
  --ord-1: #2ad5e8; --ord-2: #23b9ca; --ord-3: #1c9eac;
  --ord-4: #158390; --ord-5: #0f6a74; --ord-6: #0a5760;

  /* Neutro para totais e "outros" — soma não é categoria. */
  --grad-neutro: linear-gradient(180deg, #8b9bb5 0%, #5b6c86 100%);
  --viz-neutro: #7f8fa8;

  --viz-grid:       rgba(120, 190, 230, 0.10);
  --viz-axis-label: rgba(223, 234, 247, 0.64);
  --viz-track:      rgba(120, 190, 230, 0.09);
  --viz-tooltip-bg: #0a1322;
  --viz-tooltip-fg: #dfeaf7;

  /* -------------------------------------------------------------- vidro --- */
  --glass-tint:      rgba(10, 17, 30, 0.72);
  --glass-blur:      22px;
  --glass-sat:       150%;
  --glass-rim:       rgba(120, 220, 255, 0.20);
  --glass-edge:      rgba(120, 200, 240, 0.16);
  --glass-underline: rgba(0, 0, 0, 0.55);
  --glass-tint-xs: rgba(10,17,30,0.60); --glass-tint-sm: rgba(9,15,27,0.76);
  --glass-tint-md: rgba(9,15,27,0.84);  --glass-tint-lg: rgba(8,13,24,0.90);

  --lateral-larg: 208px;
  --topo-alt: 52px;

  color-scheme: dark;
}

/* ==========================================================================
   Modo diurno — mesma geometria e os mesmos acentos, superfície clara.
   Existe para quem precisa apresentar a tela num projetor ou sob sol.
   ========================================================================== */
[data-theme="light"] {
  --neon:       #0093B8;
  --neon-forte: #00758F;
  --acento-sobre:  #ffffff;
  /* No claro o acento precisa descer para o branco em cima dele fechar 4,5:1. */
  --acento-botao:  #00708A;
  --acento-brilho: rgba(0, 147, 184, 0.45);
  --atencao-texto: #3C7F00;   /* o verde de fundo não serve como texto no branco */
  --neon-fundo: rgba(0, 147, 184, 0.10);
  --neon-linha: rgba(0, 147, 184, 0.28);
  --magenta:    #D1006E;
  /* No claro o status desce em vez de subir: continua fora da banda das séries. */
  --positivo:   #0F6B3C;   /* esmeralda escuro — concluído, recebido */
  --atencao:    #4FAF00;   /* verde neon — atenção, prazo curto */
  --critico:    #C62A40;
  --violeta:    #6B3FD4;

  --bg-0: #e7ecf3; --bg-1: #f2f5f9; --bg-2: #ffffff; --bg-3: #f7f9fc; --bg-4: #eaf3f7;
  --color-bg-primary: #fff; --color-bg-secondary: var(--bg-1); --color-bg-tertiary: var(--bg-0);
  --superficie: #fff; --superficie-alta: #fbfcfe; --superficie-baixa: #f2f5f9;

  --linha:       rgba(10, 40, 60, 0.14);
  --linha-forte: rgba(10, 40, 60, 0.26);
  --divisor:     rgba(10, 40, 60, 0.08);
  --trilho:      rgba(10, 40, 60, 0.08);
  --color-fill:           rgba(10, 60, 90, 0.12);
  --color-fill-secondary: rgba(10, 60, 90, 0.08);
  --color-fill-tertiary:  rgba(10, 60, 90, 0.05);

  --color-label:            #0a1622;
  --color-label-secondary:  rgba(10, 22, 34, 0.68);
  --color-label-tertiary:   rgba(10, 22, 34, 0.46);
  --color-label-quaternary: rgba(10, 22, 34, 0.22);


  --sombra-1: 0 1px 2px rgba(12, 30, 48, 0.08);
  --sombra-2: 0 2px 6px -2px rgba(12, 30, 48, 0.10), 0 10px 24px -12px rgba(12, 30, 48, 0.22);
  --sombra-3: 0 8px 20px -8px rgba(12, 30, 48, 0.18), 0 24px 48px -20px rgba(12, 30, 48, 0.28);
  --sombra-4: 0 24px 60px -18px rgba(12, 30, 48, 0.34);
  --rim: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --shadow-1: var(--sombra-1); --shadow-2: var(--sombra-2);
  --shadow-3: var(--sombra-3); --shadow-4: var(--sombra-4); --shadow-5: var(--sombra-4);
  --sombra-cartao: var(--sombra-2); --sombra-cartao-alta: var(--sombra-3);
  --brilho-neon: 0 0 0 1px var(--neon-linha), 0 4px 14px -4px rgba(0, 147, 184, 0.45);

  /* Mesmas famílias, degrau para superfície clara — validado igualmente. */
  --viz-1: #15a3b3; --viz-2: #8217fb; --viz-3: #6ca411; --viz-4: #fc179f;
  --viz-5: #075ff8; --viz-6: #c98712; --viz-7: #1294f9; --viz-8: #fc1658;
  --grad-2: linear-gradient(180deg, #a173fc 0%, #8217fb 100%);
  --grad-6: linear-gradient(180deg, #f0af49 0%, #c98712 100%);
  --grad-pos: linear-gradient(180deg, #4fb06e 0%, #2E7D46 100%);
  --grad-neg: linear-gradient(180deg, #e05c70 0%, #C62A40 100%);
  --grad-neutro: linear-gradient(180deg, #93a2b8 0%, #64748b 100%);
  --viz-neutro: #64748b;
  --ord-1: #23b9ca; --ord-2: #1da1b0; --ord-3: #178a97;
  --ord-4: #11737e; --ord-5: #0b5d67; --ord-6: #074b53;
  --viz-grid: rgba(10, 40, 60, 0.10);
  --viz-axis-label: rgba(10, 22, 34, 0.55);
  --viz-track: rgba(10, 40, 60, 0.08);
  --viz-tooltip-bg: #0a1622; --viz-tooltip-fg: #f5f9ff;

  --glass-tint: rgba(255, 255, 255, 0.78);
  --glass-rim: rgba(255, 255, 255, 0.9);
  --glass-edge: rgba(10, 40, 60, 0.10);
  --glass-tint-xs: rgba(255,255,255,0.70); --glass-tint-sm: rgba(255,255,255,0.80);
  --glass-tint-md: rgba(255,255,255,0.88); --glass-tint-lg: rgba(255,255,255,0.93);

  color-scheme: light;
}

/* ==========================================================================
   Fundo vivo — grade em deriva, dois focos de luz da cidade e scanlines.
   Tudo em transform/opacity: nada aqui força relayout.
   ========================================================================== */

.mesh-bg {
  position: fixed; inset: 0; z-index: -2;
  pointer-events: none; overflow: hidden;
  background:
    radial-gradient(1100px 620px at 12% -8%,  rgba(34, 224, 245, 0.16), transparent 62%),
    radial-gradient(980px 560px at 92% 108%,  rgba(255, 61, 166, 0.14), transparent 60%),
    radial-gradient(700px 700px at 78% 12%,   rgba(155, 107, 255, 0.10), transparent 66%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
}
[data-theme="light"] .mesh-bg {
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(0, 147, 184, 0.13), transparent 62%),
    radial-gradient(980px 560px at 92% 108%, rgba(209, 0, 110, 0.09), transparent 60%),
    linear-gradient(180deg, #f7f9fc 0%, var(--bg-1) 100%);
}

/* A malha HUD (grade de 44px, varredura, scanlines) saiu com o mundo anterior:
   grade decorativa e listra de tubo são tiques que o piso de craft recusa, e o
   mundo bento pinta o fundo no body. */
/* ==========================================================================
   Utilidades de forma e luz
   ========================================================================== */

.brilho-texto { text-shadow: 0 0 12px currentColor; }

/* ==========================================================================
   Acessibilidade — as três chaves do sistema continuam valendo
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .page-anim > * { animation: none; }
}

@media (prefers-contrast: more) {
  :root {
    --linha: rgba(150, 220, 255, 0.42);
    --linha-forte: rgba(170, 230, 255, 0.62);
    --color-label-secondary: rgba(223, 234, 247, 0.88);
    --color-label-tertiary:  rgba(223, 234, 247, 0.70);
  }
}

@media (prefers-reduced-transparency: reduce) {
  :root { --glass-tint: #080d18; --glass-tint-sm: #080d18; --glass-tint-lg: #060a12; }
}