/* TEMA DO PAINEL — a fonte única dos tokens (30/09/2026).
   Reformulação pedida pelo Bruno ("o painel completo está tudo muito bagunçado"), com o esboço
   "central de operações" como linguagem: azul-marinho quase preto em camadas, brilho ambiente
   discreto, o ouro da marca só como acento, seleção e ação importante.
   Todas as páginas do painel (index, login, qr, modelos) leem daqui; cada uma guarda só o que é
   dela, e sempre por estes tokens. A Rede do sistema tem paleta própria (docs/identidade-visual.md).

   O QUE NÃO MUDA: as cinco cores de bolinha (--ok verde, --info azul, --ouro amarelo, --erro
   vermelho, --branco-bola) têm significado decidido pelo motor (cor_do_checkin). */

:root{
  /* marca */
  --ouro:#D2A129; --ouro-claro:#EDC768; --ouro-hover:#E4B946; --ouro-texto:#1A1206;

  /* superfícies — da mais funda para a mais próxima */
  --fundo:#060B12;
  --painel:#0B131D;
  --cartao:#0F1925;
  --superficie:linear-gradient(152deg,#101B27 0%,#0B141E 100%);
  --superficie-alta:linear-gradient(152deg,#13202E 0%,#0D1722 100%);
  --fundo-ambiente:
    radial-gradient(900px 520px at 88% -10%,rgba(21,119,166,.14),transparent 62%),
    radial-gradient(620px 420px at 6% -4%,rgba(215,167,25,.06),transparent 60%),
    #060B12;
  --sombra-sup:inset 0 1px 0 rgba(255,255,255,.035),0 1px 2px rgba(0,0,0,.28);

  /* texto — contraste AA medido sobre --cartao (#0F1925): secundário 8,4:1, apagado 5,8:1 */
  --texto:#F1F5F9; --secundario:#A6B3C1; --apagado:#8595A6;
  --linha:rgba(139,175,203,.14); --linha-forte:rgba(139,175,203,.26);
  --realce:rgba(215,167,25,.12);

  /* realce tecnológico secundário: informação neutra, nunca estado */
  --ciano:#6FD8FF; --ciano-a10:rgba(111,216,255,.10); --ciano-a30:rgba(111,216,255,.30);

  /* semânticas (as de sempre) */
  --ok:#4E9A5A; --ok-claro:#6BC47A;
  --info:#3E6FA8; --info-claro:#6FA4E8;
  --erro:#B4453C; --erro-claro:#E08A82;
  --roxo:#7C5CBF; --roxo-claro:#B39DDB;
  --atencao:var(--ouro); --atencao-claro:var(--ouro-claro);
  --branco-bola:#F3EFE6;

  /* camadas com alfa: a mesma cor, alfa 0.NN */
  --erro-a08:rgba(180,69,60,.08); --erro-a10:rgba(180,69,60,.10); --erro-a16:rgba(180,69,60,.16); --erro-a34:rgba(180,69,60,.34); --erro-a35:rgba(180,69,60,.35); --erro-a40:rgba(180,69,60,.4); --erro-a45:rgba(180,69,60,.45); --erro-a50:rgba(180,69,60,.5);
  --info-a12:rgba(62,111,168,.12); --info-a16:rgba(62,111,168,.16); --info-a35:rgba(62,111,168,.35); --info-a40:rgba(62,111,168,.4); --info-a50:rgba(62,111,168,.5); --info-a55:rgba(62,111,168,.55);
  --ok-a08:rgba(78,154,90,.08); --ok-a10:rgba(78,154,90,.1); --ok-a12:rgba(78,154,90,.12); --ok-a16:rgba(78,154,90,.16); --ok-a35:rgba(78,154,90,.35); --ok-a40:rgba(78,154,90,.4); --ok-a55:rgba(78,154,90,.55);
  --ouro-a08:rgba(210,161,41,.08); --ouro-a10:rgba(210,161,41,.1); --ouro-a12:var(--realce); --ouro-a14:rgba(210,161,41,.14); --ouro-a35:rgba(210,161,41,.35); --ouro-a40:rgba(210,161,41,.4); --ouro-a45:rgba(210,161,41,.45); --ouro-a50:rgba(210,161,41,.5); --ouro-a55:rgba(210,161,41,.55);
  --roxo-a12:rgba(124,92,191,.12); --roxo-a16:rgba(124,92,191,.16); --roxo-a35:rgba(124,92,191,.35); --roxo-a40:rgba(124,92,191,.4); --roxo-a50:rgba(124,92,191,.5);
  --sobre-a035:rgba(255,255,255,.035); --sobre-a04:rgba(255,255,255,.04); --sobre-a045:rgba(255,255,255,.045); --sobre-a05:rgba(255,255,255,.05); --sobre-a12:rgba(255,255,255,.12);
  --sombra-a55:rgba(2,6,12,.66);

  /* forma e ritmo */
  --raio-s:7px; --raio-m:10px; --raio-l:14px; --raio-xl:18px;
  --sombra-1:0 1px 2px rgba(0,0,0,.3); --sombra-2:0 18px 44px rgba(0,0,0,.42);
  --esp-1:4px; --esp-2:8px; --esp-3:12px; --esp-4:16px; --esp-5:24px; --esp-6:32px;
  --anda:.16s;
  /* o movimento (10/10/2026): botão 150 ms, menu/modal/conteúdo 230 ms, número e barra 560 ms */
  --mov-rapido:150ms; --mov-medio:230ms; --mov-longo:560ms; --mov-saida:cubic-bezier(.22,.8,.24,1); --mov-mola:cubic-bezier(.34,1.14,.64,1);

  /* tipografia: Inter na interface; mono só em hora, código, número tabular e rótulo técnico */
  --letra:Inter,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Consolas,'Cascadia Mono',monospace;
  --serif:Georgia,'Iowan Old Style','Times New Roman',serif;

  color-scheme:dark;
}

/* TEMA CLARO — os mesmos papéis. As cores "-claro" viram versões escuras: aqui elas são texto
   sobre branco, e o verde/azul/ouro claros davam 2–3:1. */
:root[data-tema="claro"]{
  --fundo:#F2F4F8; --painel:#FFFFFF; --cartao:#FFFFFF;
  --superficie:#FFFFFF; --superficie-alta:#FFFFFF;
  --fundo-ambiente:
    radial-gradient(900px 520px at 88% -10%,rgba(21,119,166,.07),transparent 62%),
    radial-gradient(620px 420px at 6% -4%,rgba(215,167,25,.06),transparent 60%),
    #F2F4F8;
  --sombra-sup:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.04);
  --texto:#0F1722; --secundario:#4B5766; --apagado:#5B6776;
  --linha:rgba(15,30,50,.12); --linha-forte:rgba(15,30,50,.22);
  --realce:rgba(210,161,41,.14);
  --ouro-claro:#8A6710; --ok-claro:#2F7A3B; --info-claro:#2D5F9A; --erro-claro:#A5372E; --roxo-claro:#6A4BB0;
  --ciano:#0E7FA8;
  --sobre-a035:rgba(15,30,50,.035); --sobre-a04:rgba(15,30,50,.04); --sobre-a045:rgba(15,30,50,.045); --sobre-a05:rgba(15,30,50,.05); --sobre-a12:rgba(15,30,50,.12);
  --sombra-a55:rgba(15,23,34,.45);
  color-scheme:light;
}

/* ---------- base comum ---------- */
*,*::before,*::after{box-sizing:border-box}
body{background:var(--fundo-ambiente);background-attachment:fixed;color:var(--texto);font-family:var(--letra);
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{text-wrap:balance}
::selection{background:rgba(215,167,25,.32);color:var(--texto)}
:focus-visible{outline:2px solid var(--ouro-claro);outline-offset:2px}
button,input,select,textarea{font:inherit;color:inherit}
*{scrollbar-width:thin;scrollbar-color:var(--sobre-a12) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--sobre-a12);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-track{background:transparent}

/* ícone de traço do sprite (<symbol id="i-…">): herda a cor e o tamanho do texto */
.i{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.14em}

/* o número que alinha em coluna */
.num,.mono{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}