/* ============================================================================
   LINHA · tokens
   Sistema visual do portal a partir de 30/09/2026. Substitui por inteiro as
   camadas anteriores (aurora, kit N2-N5, pf, 16/*, 23-*...).

   Princípios: superfície branca, uma borda fina, nenhuma sombra fora do que
   flutua, cor só para marca, ação principal e estado. A paleta é a do portal
   (verde-oliva); o resto foi desenhado de novo.
   ============================================================================ */
:root{
  /* menu lateral e cartões de destaque: verde da marca, texto claro */
  --l-verde:#394820; --l-verde-borda:#2e3a19; --l-verde-texto:#ffffff; --l-verde-texto-2:rgba(255,255,255,.74);
  --l-verde-hover:rgba(255,255,255,.10); --l-verde-ativo:#ffffff; --l-verde-ativo-texto:#394820; --l-verde-alerta:#ffc4a3;
  /* marca */
  --l-marca:#394820;
  --l-marca-forte:#2a3517;
  --l-marca-media:#526533;
  --l-marca-clara:#cfdcb8;
  --l-marca-suave:#eef2e6;
  --l-marca-tinta:#394820;
  --l-sobre-marca:#ffffff;

  /* neutros */
  --l-fundo:#eef1e8;
  --l-sup:#ffffff;
  --l-sup-2:#f9faf7;
  --l-sup-3:#f1f3ec;
  --l-borda:#e3e6dc;
  --l-borda-forte:#cdd2c3;
  --l-fio:#eceee7;
  --l-texto:#1d2215;
  --l-texto-2:#535a48;
  --l-texto-3:#6c7263;
  --l-campo:#ffffff;
  --l-campo-borda:#d3d7ca;

  /* estado (sempre com texto ou ícone junto) */
  --l-ok:#0e6e55;       --l-ok-fundo:#e6f3ee;
  --l-atencao:#8a4b00;  --l-atencao-fundo:#fdf1dc;
  --l-erro:#b42318;     --l-erro-fundo:#fbeceb;
  --l-info:#1d5fb8;     --l-info-fundo:#e9f0fa;
  --l-neutro:#535a48;   --l-neutro-fundo:#eff1ea;

  /* Manchester: a cor é a informação */
  --l-r-vermelho:#c1121f; --l-r-laranja:#e8820c; --l-r-amarelo:#f5c211;
  --l-r-verde:#237a38;    --l-r-azul:#1864ab;
  --l-sobre-claro:#1d2215;

  /* séries de gráfico: ordem fixa, validada para daltonismo no claro e no escuro
     (ΔE adjacente >= 8,4). A 1ª é o verde da marca. Nunca ciclar: a 9ª vira "Outros". */
  --lg-1:#56702a; --lg-2:#2a78d6; --lg-3:#eb6834; --lg-4:#1baf7a;
  --lg-5:#eda100; --lg-6:#e87ba4; --lg-7:#4a3aa7; --lg-8:#e34948;
  --l-atencao-marca:#d98a00;   /* preenchimento de estado "atenção" em gráfico */

  /* forma */
  --l-raio-1:6px;
  --l-raio-2:8px;
  --l-raio-3:12px;
  --l-raio-4:16px;
  --l-raio-pilula:999px;

  /* espaço (4 px) */
  --l-e1:4px; --l-e2:8px; --l-e3:12px; --l-e4:16px; --l-e5:20px; --l-e6:24px; --l-e8:32px; --l-e10:40px; --l-e12:48px; --l-e16:64px;

  /* letra */
  --l-fonte:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --l-mono:ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --l-t-mini:12px;
  --l-t-peq:13px;
  --l-t-corpo:14px;
  --l-t-med:15px;
  --l-t-titulo:16px;
  --l-t-tela:20px;
  --l-t-numero:28px;

  /* medidas */
  --l-controle:36px;
  --l-controle-p:30px;
  --l-rail:64px;
  --l-rail-aberto:232px;
  --l-topo:60px;

  /* profundidade: só o que flutua */
  --l-sombra-flutua:0 12px 32px -8px rgba(20,26,12,.18), 0 2px 6px rgba(20,26,12,.06);
  --l-sombra-modal:0 24px 64px -12px rgba(20,26,12,.30);
  /* cartão: sombra curta + difusa (contraste sem borda pesada) e a versão de hover */
  --l-sombra-bloco:0 1px 2px rgba(20,26,12,.05), 0 6px 20px -8px rgba(20,26,12,.14);
  --l-sombra-bloco-alto:0 2px 4px rgba(20,26,12,.06), 0 14px 32px -10px rgba(20,26,12,.22);
  --l-raio-bloco:14px;
  --l-veu:rgba(20,26,12,.36);
  --l-anel:0 0 0 3px rgba(57,72,32,.16);
  --l-foco:#1d5fb8;

  --l-rapido:120ms;
  --l-medio:200ms;
  --l-curva:cubic-bezier(.2,.7,.3,1);

  color-scheme:light;
}

body.theme-dark{
  --l-verde:#27311a; --l-verde-borda:#35422a; --l-verde-ativo:#dfe9cc; --l-verde-ativo-texto:#27311a;
  --l-marca:#a9c47a;
  --l-marca-forte:#bfd596;
  --l-marca-media:#8fae5c;
  --l-marca-clara:#3c4a29;
  --l-marca-suave:#252d1b;
  --l-marca-tinta:#b8d08d;
  --l-sobre-marca:#141a0c;

  --l-fundo:#0f120b;
  --l-sombra-bloco:0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px -10px rgba(0,0,0,.6);
  --l-sombra-bloco-alto:0 1px 0 rgba(255,255,255,.04) inset, 0 16px 36px -12px rgba(0,0,0,.75);
  --l-sup:#191d14;
  --l-sup-2:#1d2218;
  --l-sup-3:#232a1d;
  --l-borda:#2c3325;
  --l-borda-forte:#3b4431;
  --l-fio:#252b1f;
  --l-texto:#e8ecdf;
  --l-texto-2:#b3baa6;
  --l-texto-3:#8f977f;
  --l-campo:#15190f;
  --l-campo-borda:#3b4431;

  --l-ok:#6fcfa9;       --l-ok-fundo:#16291f;
  --l-atencao:#f0b45e;  --l-atencao-fundo:#2e2412;
  --l-erro:#f3928a;     --l-erro-fundo:#321715;
  --l-info:#8db6f2;     --l-info-fundo:#16213a;
  --l-neutro:#b3baa6;   --l-neutro-fundo:#232a1d;

  --l-veu:rgba(0,0,0,.55);
  --lg-1:#7f9e4c; --lg-2:#3987e5; --lg-3:#d95926; --lg-4:#199e70;
  --lg-5:#c98500; --lg-6:#d55181; --lg-7:#9085e9; --lg-8:#e66767;
  --l-atencao-marca:#c98500;
  --l-anel:0 0 0 3px rgba(169,196,122,.22);
  --l-foco:#8db6f2;
  color-scheme:dark;
}

@media (prefers-reduced-motion:reduce){
  :root{ --l-rapido:0ms; --l-medio:0ms; }
}

/* ----------------------------------------------------------------------------
   Nomes antigos que o JS ainda escreve em style="" (var(--brand), var(--line)...).
   Apontam para os tokens novos até cada painel ser limpo. Quando nenhum
   template usar mais um nome, ele sai daqui.
   ---------------------------------------------------------------------------- */
:root, body.theme-dark{
  --brand:var(--l-marca); --brand2:var(--l-marca-media); --primary:var(--l-marca);
  --primary-dark:var(--l-marca-forte); --brand-soft:var(--l-marca-suave);
  --olive-light:var(--l-marca-media); --accent:var(--l-marca); --acc:var(--l-marca);
  --on-brand:var(--l-sobre-marca); --on-fill:var(--l-sobre-claro);
  --ink:var(--l-texto); --txt:var(--l-texto); --ink-soft:var(--l-texto-2); --txt-soft:var(--l-texto-2);
  --muted:var(--l-texto-3); --ink-faint:var(--l-texto-3);
  --line:var(--l-borda); --border:var(--l-borda); --bd:var(--l-borda); --glass-brd:var(--l-borda);
  --glass:var(--l-sup); --surface:var(--l-sup); --card:var(--l-sup); --surface-2:var(--l-sup-2);
  --bg:var(--l-fundo); --bg-soft:var(--l-sup-2); --field-bg:var(--l-campo);
  --ok:var(--l-ok); --ok-soft:var(--l-ok-fundo);
  --warn:var(--l-atencao); --warn-soft:var(--l-atencao-fundo);
  --err:var(--l-erro); --danger:var(--l-erro); --neg:var(--l-erro);
  --info:var(--l-info); --info-soft:var(--l-info-fundo);
  --p0:var(--l-r-vermelho); --p1:var(--l-r-laranja); --p2:var(--l-r-amarelo); --p3:var(--l-r-verde); --p4:var(--l-r-azul);
  --gold:var(--l-atencao); --navy:var(--l-info);
  --au-glass:var(--l-sup); --au-glass-brd:var(--l-borda);
  --ds-primary:var(--l-marca); --ds-primary-hover:var(--l-marca-forte); --ds-primary-ico:var(--l-marca);
  --ds-accent:var(--l-marca); --ds-white:var(--l-sup); --ds-input:var(--l-campo); --ds-bd-input:var(--l-campo-borda);
  --ds-t-strong:var(--l-texto); --ds-t-soft:var(--l-texto-2); --ds-t-faint:var(--l-texto-3);
  --ds-font:var(--l-fonte); --ds-chip:var(--l-sup-3);
  --ds-r-ctrl:var(--l-raio-2); --ds-r-modal:var(--l-raio-4); --ds-r-ico:var(--l-raio-2);
  --ds-sh-modal:var(--l-sombra-modal); --ds-sh-btn:none;
  --ds-warn-fg:var(--l-atencao); --ds-warn-bg:var(--l-atencao-fundo); --ds-warn-bd:var(--l-atencao);
  --ds-info-fg:var(--l-info); --ds-info-bg:var(--l-info-fundo); --ds-info-bd:var(--l-info);
  --ds-err-fg:var(--l-erro); --ds-err-bg:var(--l-erro-fundo); --ds-err-bd:var(--l-erro);
  --pf-texto-2:var(--l-texto-2); --pf-e4:var(--l-e4);
  --av1:var(--l-marca); --av2:var(--l-marca-forte); --av3:var(--l-marca-media);
}

/* ============================================================================
   COR DO PORTAL (01/10/2026): a pessoa escolhe verde (padrão), azul, rosa ou roxo.
   A escolha vira <html data-cor="..."> (app.uiPrefs.setCor e o script curto no
   <head> das páginas avulsas, chave localStorage "ui-cor-portal", cópia no
   servidor em /api/ui-prefs). Cada cor troca a marca, o menu, a aba ativa e
   também os neutros levemente tingidos, no claro e no escuro.
   O escuro mora em body.theme-dark, então a cor escura também é declarada no
   body (senão o verde escuro do body venceria a herança do html).
   ============================================================================ */
:root{ --l-aba-ativa:#4f7a1e }
body.theme-dark{ --l-aba-ativa:var(--l-marca-tinta) }

/* ---------- azul ---------- */
html[data-cor="azul"]{
  --l-verde:#1f3a5f; --l-verde-borda:#172c48; --l-verde-ativo-texto:#1f3a5f;
  --l-marca:#1f3a5f; --l-marca-forte:#152a45; --l-marca-media:#2f5d94; --l-marca-clara:#c5d6ec; --l-marca-suave:#e8eff8; --l-marca-tinta:#1f3a5f;
  --l-aba-ativa:#1d5fb8;
  --l-fundo:#edf1f6; --l-sup-2:#f8fafc; --l-sup-3:#eff3f8; --l-borda:#dfe5ee; --l-borda-forte:#c9d2df; --l-fio:#e9edf3;
  --l-texto:#172033; --l-texto-2:#4a566b; --l-texto-3:#657187; --l-campo-borda:#cfd7e3; --l-neutro:#4a566b; --l-neutro-fundo:#eef2f7;
  --lg-1:#1f3a5f;
}
html[data-cor="azul"] body.theme-dark{
  --l-verde:#172540; --l-verde-borda:#22345a; --l-verde-ativo:#d6e4f7; --l-verde-ativo-texto:#172540;
  --l-marca:#8fb4ea; --l-marca-forte:#a9c6f0; --l-marca-media:#6f9be0; --l-marca-clara:#24365a; --l-marca-suave:#17223a; --l-marca-tinta:#9fc0f0; --l-sobre-marca:#0b1426;
  --l-aba-ativa:#9fc0f0;
  --l-fundo:#0b0f17; --l-sup:#131a26; --l-sup-2:#172030; --l-sup-3:#1c2638; --l-borda:#263247; --l-borda-forte:#34425b; --l-fio:#1f293b;
  --l-texto:#e4eaf3; --l-texto-2:#a9b4c6; --l-texto-3:#8591a6; --l-campo:#0f1520; --l-campo-borda:#34425b; --l-neutro:#a9b4c6; --l-neutro-fundo:#1c2638;
  --lg-1:#6f9be0;
}

/* ---------- rosa ---------- */
html[data-cor="rosa"]{
  --l-verde:#7a2650; --l-verde-borda:#621e40; --l-verde-ativo-texto:#7a2650;
  --l-marca:#7a2650; --l-marca-forte:#5e1c3d; --l-marca-media:#9c3b6b; --l-marca-clara:#f0c9dc; --l-marca-suave:#fbedf3; --l-marca-tinta:#7a2650;
  --l-aba-ativa:#b0306e;
  --l-fundo:#f6eef2; --l-sup-2:#fcf8fa; --l-sup-3:#f5edf1; --l-borda:#eadfe5; --l-borda-forte:#d8c8d1; --l-fio:#f1e8ec;
  --l-texto:#2a1720; --l-texto-2:#634a56; --l-texto-3:#7d6470; --l-campo-borda:#ddcdd5; --l-neutro:#634a56; --l-neutro-fundo:#f5edf1;
  --lg-1:#7a2650;
}
html[data-cor="rosa"] body.theme-dark{
  --l-verde:#3a1529; --l-verde-borda:#4f2038; --l-verde-ativo:#f5d3e4; --l-verde-ativo-texto:#3a1529;
  --l-marca:#ec9cc2; --l-marca-forte:#f2b5d2; --l-marca-media:#d97aa8; --l-marca-clara:#4a2236; --l-marca-suave:#2b1520; --l-marca-tinta:#f0a9cb; --l-sobre-marca:#1f0c16;
  --l-aba-ativa:#f0a9cb;
  --l-fundo:#120b0f; --l-sup:#1c1318; --l-sup-2:#22171d; --l-sup-3:#2a1d24; --l-borda:#36262f; --l-borda-forte:#47333e; --l-fio:#2e2129;
  --l-texto:#f1e6eb; --l-texto-2:#c3aeb8; --l-texto-3:#a08a95; --l-campo:#170e13; --l-campo-borda:#47333e; --l-neutro:#c3aeb8; --l-neutro-fundo:#2a1d24;
  --lg-1:#d97aa8;
}

/* ---------- roxo ---------- */
html[data-cor="roxo"]{
  --l-verde:#3f2a6b; --l-verde-borda:#31205a; --l-verde-ativo-texto:#3f2a6b;
  --l-marca:#3f2a6b; --l-marca-forte:#2f1f52; --l-marca-media:#5b4391; --l-marca-clara:#d6ccef; --l-marca-suave:#f1edfa; --l-marca-tinta:#3f2a6b;
  --l-aba-ativa:#6a44c2;
  --l-fundo:#f0eef6; --l-sup-2:#faf9fd; --l-sup-3:#f2f0f8; --l-borda:#e3dfee; --l-borda-forte:#cdc7de; --l-fio:#ece9f3;
  --l-texto:#1e1a2b; --l-texto-2:#524c66; --l-texto-3:#6b6580; --l-campo-borda:#d3cee3; --l-neutro:#524c66; --l-neutro-fundo:#f2f0f8;
  --lg-1:#3f2a6b;
}
html[data-cor="roxo"] body.theme-dark{
  --l-verde:#241a3d; --l-verde-borda:#33264f; --l-verde-ativo:#e0d6f7; --l-verde-ativo-texto:#241a3d;
  --l-marca:#b3a0ec; --l-marca-forte:#c7b8f2; --l-marca-media:#9883e0; --l-marca-clara:#34285a; --l-marca-suave:#1e1830; --l-marca-tinta:#bba9f0; --l-sobre-marca:#120c22;
  --l-aba-ativa:#bba9f0;
  --l-fundo:#0e0c14; --l-sup:#17141f; --l-sup-2:#1c1826; --l-sup-3:#221e2e; --l-borda:#2d283b; --l-borda-forte:#3c354d; --l-fio:#262132;
  --l-texto:#ebe8f3; --l-texto-2:#b4aec6; --l-texto-3:#8f89a3; --l-campo:#120f19; --l-campo-borda:#3c354d; --l-neutro:#b4aec6; --l-neutro-fundo:#221e2e;
  --lg-1:#9883e0;
}

/* tokens antigos (--brand, --primary, --ds-*...) são declarados no :root e no
   body.theme-dark a partir dos --l-*: redeclarar no body garante que leiam a cor
   escolhida também onde o body não é escuro */
html[data-cor] body{
  --brand:var(--l-marca); --brand2:var(--l-marca-media); --primary:var(--l-marca);
  --primary-dark:var(--l-marca-forte); --brand-soft:var(--l-marca-suave);
  --olive-light:var(--l-marca-media); --accent:var(--l-marca); --acc:var(--l-marca);
  --on-brand:var(--l-sobre-marca); --bg:var(--l-fundo); --bg-soft:var(--l-sup-2);
  --ds-primary:var(--l-marca); --ds-primary-hover:var(--l-marca-forte); --ds-primary-ico:var(--l-marca); --ds-accent:var(--l-marca);
  --av1:var(--l-marca); --av2:var(--l-marca-forte); --av3:var(--l-marca-media);
}