/* =====================================================================
   OS TOKENS DO PAINEL (etapa D do multi-empresa, docs/PLANO-MULTIEMPRESA.md)
   O painel não carrega a pele da tela (camadas/), então os tokens que ele usa moram aqui, com os MESMOS nomes e
   valores de lá:
     --ac-*            a cor da Smart Air V2.3, copiada de camadas/holo.css (escuro e claro);
     --b*, --e-*, --s-* a régua de 7 px e as famílias de elemento e espaço, copiadas de camadas/suico.css.
   scripts/testa_painel_comum.py confere que cada --ac-* daqui vale o mesmo que em holo.css: mudou lá, a prova avisa.
   Os tokens próprios do painel (--pn-*) só combinam os de cima; os poucos valores novos estão declarados aqui.
   Fora deste arquivo, o CSS do painel não tem px nem hex cru (a mesma prova confere).
   ===================================================================== */
:root{
  /* a régua (suico.css) */
  --b:7px;--b2:14px;--b3:21px;--b4:28px;--b5:35px;--b6:42px;--b8:56px;
  --e-t-cap:11px;--e-lh-cap:var(--b2);
  --e-t-mini:12px;--e-lh-mini:var(--b2);
  --e-t-ctl:13px;
  --e-t-body:14px;--e-lh-body:var(--b3);
  --e-t-sub:21px;--e-lh-sub:var(--b4);
  --e-t-head:28px;--e-lh-head:var(--b5);
  --e-ctl:var(--b5);--e-ctl-lista:var(--b6);
  --e-ico-seta:20px;
  --e-fio:1px;--e-fio-2:2px;--e-raio:3px;
  --s-in-1:var(--b);--s-in-2:var(--b2);--s-in-3:var(--b3);
  --s-entre-1:var(--b);--s-entre-2:var(--b2);--s-entre-3:var(--b3);--s-entre-4:var(--b4);
  --s-estr-1:var(--b3);--s-estr-2:var(--b4);--s-estr-3:var(--b5);--s-estr-4:var(--b6);
  --r:var(--e-raio);

  /* próprios do painel (novos) */
  --pn-fonte:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --pn-largura:1120px;          /* a coluna do conteúdo no computador */
  --pn-margem-celular:16px;     /* a sobra dos lados no celular (390 px) */
  --pn-dialogo:600px;           /* a largura dos diálogos */
  --pn-bola:var(--b4);          /* a bolinha da marca no cabeçalho */
  --pn-faixa:var(--b);          /* a faixa da cor da marca, no alto */
  --pn-rapido:.12s;
  --pn-zero:0;

  /* a porta de entrada (painel/entrar/), pelo desenho aprovado pelo dono em 09/11/2026 (novos) */
  --en-largura:1120px;          /* o cartão de duas colunas no computador */
  --en-margem:20px;             /* a sobra em volta do cartão */
  --en-raio:16px;--en-raio-2:8px;
  --en-pad:52px;--en-pad-dir:46px;  /* o respiro de dentro das colunas (esquerda, direita) */
  --en-pad-celular:24px;
  --en-esquerda:45.5%;          /* a largura da coluna da marca */
  --en-selo:50px;
  --en-ponto:7px;               /* a bolinha do rótulo */
  --en-t-rotulo:10px;--en-t-nome:14px;--en-t-sub:11px;--en-t-nota:12px;--en-t-selo:20px;--en-t-selo-2:11px;
  --en-t-titulo:clamp(34px,4.3vw,50px);--en-lh-titulo:1.1;
  --en-t-titulo-dir:28px;--en-t-titulo-dir-celular:24px;
  --en-t-desc:15px;--en-lh-desc:24px;
  --en-desc:330px;              /* a medida do texto da esquerda */
  --en-texto:420px;             /* a medida do texto da direita */
  --en-altura:640px;            /* a altura mínima do cartão no computador */
  --en-logo-max:180px;          /* o logo da empresa no lugar da sigla: a altura do selo, e no máximo esta largura */

  /* a aba Marca e a aba Conteúdo (etapa F, novos) */
  --pn-previa-celular:390px;    /* a prévia "celular" da porta de entrada: a largura do celular das provas */
  --pn-logo-topo:var(--b4);     /* o logo da empresa no cabeçalho do painel, na altura da bolinha */
  --pn-logo-amostra:var(--b8);  /* o logo atual, na aba Marca */
  --pn-cor-amostra:var(--b6);   /* o seletor de cor ao lado do #rrggbb */
  --pn-json-linhas:24;          /* as linhas do JSON avançado */
}

/* ---------- escuro (o padrão, como a tela) ---------- */
:root,html[data-holo="dark"]{
  color-scheme:dark;
  --ac-texto:#EAF4FF;--ac-texto-rgb:234,244,255;
  --ac-texto-2:#A9C0DA;
  --ac-texto-3:#9DB3CE;
  --ac-borda:#7F93AB;--ac-borda-rgb:127,147,171;
  --ac-foco:#FFFFFF;
  --ac-sobre-ligue:#0F1722;
  --ac-trilho:#33445F;
  --ac-problema:#F45E6E;--ac-problema-rgb:244,94,110;
  --ac-acao-atraso:#FBA263;--ac-acao-atraso-rgb:251,162,99;
  --ac-tipo-empresa:#24E6AE;--ac-tipo-empresa-rgb:36,230,174;
  --ac-superficie-cartao:#182332;--ac-superficie-cartao-rgb:24,35,50;
  --ac-superficie-cartao-2:#102A4E;
  --ac-superficie-fundo:#0F1722;
  --pn-sombra:0 1.25em 3em rgba(0,0,0,.45);
  --pn-veu:rgba(0,0,0,.6);
  --en-fundo:#050B14;--en-fundo-alto:#0A1A28;
  --en-cartao:#0D1B2D;--en-cartao-dir:#0C192C;
  --en-destaque-padrao:#5EE8D0;  /* o verde-água do desenho; a cor da marca troca este, pelo JS, quando vem válida */
  --en-sombra:0 24px 60px rgba(0,0,0,.45);
}

/* ---------- claro ---------- */
html[data-holo="light"]{
  color-scheme:light;
  --ac-texto:#0F2230;--ac-texto-rgb:15,34,48;
  --ac-texto-2:#3B5170;
  --ac-texto-3:#4A5E78;
  --ac-borda:#5E7289;--ac-borda-rgb:94,114,137;
  --ac-foco:#000000;
  --ac-sobre-ligue:#FFFFFF;
  --ac-trilho:#BCCBDD;
  --ac-problema:#C21065;--ac-problema-rgb:194,16,101;
  --ac-acao-atraso:#6C2E01;--ac-acao-atraso-rgb:108,46,1;
  --ac-tipo-empresa:#004E3E;--ac-tipo-empresa-rgb:0,78,62;
  --ac-superficie-cartao:#FFFFFF;--ac-superficie-cartao-rgb:255,255,255;
  --ac-superficie-cartao-2:#EAF2FA;
  --ac-superficie-fundo:#EAF2FA;
  --pn-sombra:0 1.25em 3em rgba(var(--ac-texto-rgb),.16);
  --pn-veu:rgba(var(--ac-texto-rgb),.45);
  --en-fundo:var(--ac-superficie-fundo);--en-fundo-alto:#F6FAFE;
  --en-cartao:var(--ac-superficie-cartao);--en-cartao-dir:#FBFDFF;
  --en-destaque-padrao:#00695C;
  --en-sombra:0 24px 60px rgba(var(--ac-texto-rgb),.12);
}

/* ---------- os papéis de cada cor no painel (valem nos dois temas) ---------- */
:root{
  --pn-fundo:var(--ac-superficie-fundo);
  --pn-cartao:var(--ac-superficie-cartao);
  --pn-cartao-2:var(--ac-superficie-cartao-2);
  --pn-tinta:var(--ac-texto);
  --pn-tinta-2:var(--ac-texto-2);
  --pn-tinta-3:var(--ac-texto-3);
  --pn-linha:rgba(var(--ac-borda-rgb),.26);
  --pn-linha-2:rgba(var(--ac-borda-rgb),.6);
  --pn-fantasma:color-mix(in srgb,var(--ac-texto) 8%,transparent);
  --pn-acento:var(--ac-texto-2);       /* o --h-turq da tela */
  --pn-foco:var(--ac-foco);
  --pn-botao:var(--ac-texto);          /* o botão principal: a tinta chapada */
  --pn-sobre-botao:var(--ac-sobre-ligue);
  --pn-perigo:var(--ac-problema);
  --pn-perigo-fundo:rgba(var(--ac-problema-rgb),.12);
  --pn-ok:var(--ac-tipo-empresa);
  --pn-ok-fundo:rgba(var(--ac-tipo-empresa-rgb),.12);
  --pn-alerta:var(--ac-acao-atraso);
  --pn-alerta-fundo:rgba(var(--ac-acao-atraso-rgb),.12);
  --pn-marca:var(--ac-texto-2);        /* a cor da marca da empresa troca este, pelo JS, quando vem válida */
  --en-linha:rgba(var(--ac-borda-rgb),.22);
  --en-tinta-2:var(--ac-texto-3);
}
html[data-holo="light"]{--en-linha:rgba(var(--ac-borda-rgb),.3);--en-tinta-2:var(--ac-texto-2)}