/* GRAJA-SIGN — camada de tema.
 *
 * Um só conjunto de tokens para o painel e para as páginas do cliente. O tema
 * tem TRÊS estados: "auto" (segue o sistema, e é o padrão), "claro" e "escuro".
 * Auto não carimba atributo nenhum na raiz — quem decide é o prefers-color-scheme;
 * a escolha explícita carimba data-tema e vence em qualquer direção.
 *
 * Toda cor nasce aqui em :root. Nenhuma cor pode ter sua única definição dentro
 * de um bloco de media query ou de [data-tema]: se tiver, o tema oposto fica sem
 * ela e a tela quebra em metade dos aparelhos.
 */

/* ─────────────────────────── Dia ─────────────────────────── */
:root{
  --fundo:#f2f4f8;
  --fundo-alto:#e8ecf4;          /* faixas, cabeçalhos de tabela */
  --cartao:#ffffff;
  --cartao-alto:#f7f9fc;         /* campos, blocos embutidos */
  --borda:#dde3ec;
  --borda-forte:#c6d0de;
  --texto:#151b2b;
  --texto-medio:#3d4757;
  --suave:#68758c;

  --acento:#3457d5;
  --acento-forte:#2743b4;
  --acento-suave:#eaeeff;        /* fundo de destaque do acento */
  --acento-contraste:#ffffff;

  --ok:#0f7a45;      --ok-fundo:#e8f7ee;   --ok-borda:#b7e3c8;
  --alerta:#9a5b06;  --alerta-fundo:#fdf4e3; --alerta-borda:#f0d9a8;
  --erro:#b3241f;    --erro-fundo:#fdeeed;  --erro-borda:#f4c6c3;

  --sombra:0 1px 2px rgba(15,25,50,.05), 0 6px 20px -8px rgba(15,25,50,.12);
  --sombra-alta:0 2px 4px rgba(15,25,50,.06), 0 14px 34px -10px rgba(15,25,50,.2);
  /* Anel de foco. Com color-mix fica translúcido; sem ele, o navegador
     ignora a linha e o :focus-visible do reset ainda garante contorno. */
  --anel:0 0 0 3px color-mix(in srgb, var(--acento) 32%, transparent);

  --r-p:8px; --r-m:12px; --r-g:16px; --r-pill:999px;
  --fonte:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --transicao:160ms cubic-bezier(.4,0,.2,1);
}

/* ────────────────────────── Noite ────────────────────────── */
/* Escrito duas vezes de propósito: uma para "auto" seguir o sistema, outra para
   a escolha explícita ganhar do sistema. As duas listas são idênticas. */
:root:not([data-tema="claro"]){
  --noite-fundo:#0b1020;
  --noite-fundo-alto:#111830;
  --noite-cartao:#121a2e;
  --noite-cartao-alto:#0d1526;
  --noite-borda:#1f2c48;
  --noite-borda-forte:#31415f;
  --noite-texto:#e9eefa;
  --noite-texto-medio:#bcc7dc;
  --noite-suave:#8494b0;
  --noite-acento:#6b8bff;
  --noite-acento-forte:#8aa4ff;
  --noite-acento-suave:#182347;
  --noite-acento-contraste:#0b1020;
  --noite-ok:#4ade80;      --noite-ok-fundo:#0c2418;      --noite-ok-borda:#1c4a31;
  --noite-alerta:#fbbf24;  --noite-alerta-fundo:#2a1f06;  --noite-alerta-borda:#5a4413;
  --noite-erro:#fca5a5;    --noite-erro-fundo:#2a1114;    --noite-erro-borda:#5c2126;
  --noite-sombra:0 1px 2px rgba(0,0,0,.4), 0 8px 26px -10px rgba(0,0,0,.7);
  --noite-sombra-alta:0 2px 6px rgba(0,0,0,.5), 0 18px 40px -12px rgba(0,0,0,.8);
}

@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]){
    --fundo:var(--noite-fundo);             --fundo-alto:var(--noite-fundo-alto);
    --cartao:var(--noite-cartao);           --cartao-alto:var(--noite-cartao-alto);
    --borda:var(--noite-borda);             --borda-forte:var(--noite-borda-forte);
    --texto:var(--noite-texto);             --texto-medio:var(--noite-texto-medio);
    --suave:var(--noite-suave);
    --acento:var(--noite-acento);           --acento-forte:var(--noite-acento-forte);
    --acento-suave:var(--noite-acento-suave); --acento-contraste:var(--noite-acento-contraste);
    --ok:var(--noite-ok);         --ok-fundo:var(--noite-ok-fundo);         --ok-borda:var(--noite-ok-borda);
    --alerta:var(--noite-alerta); --alerta-fundo:var(--noite-alerta-fundo); --alerta-borda:var(--noite-alerta-borda);
    --erro:var(--noite-erro);     --erro-fundo:var(--noite-erro-fundo);     --erro-borda:var(--noite-erro-borda);
    --sombra:var(--noite-sombra); --sombra-alta:var(--noite-sombra-alta);
  }
}

:root[data-tema="escuro"]{
  --fundo:var(--noite-fundo);             --fundo-alto:var(--noite-fundo-alto);
  --cartao:var(--noite-cartao);           --cartao-alto:var(--noite-cartao-alto);
  --borda:var(--noite-borda);             --borda-forte:var(--noite-borda-forte);
  --texto:var(--noite-texto);             --texto-medio:var(--noite-texto-medio);
  --suave:var(--noite-suave);
  --acento:var(--noite-acento);           --acento-forte:var(--noite-acento-forte);
  --acento-suave:var(--noite-acento-suave); --acento-contraste:var(--noite-acento-contraste);
  --ok:var(--noite-ok);         --ok-fundo:var(--noite-ok-fundo);         --ok-borda:var(--noite-ok-borda);
  --alerta:var(--noite-alerta); --alerta-fundo:var(--noite-alerta-fundo); --alerta-borda:var(--noite-alerta-borda);
  --erro:var(--noite-erro);     --erro-fundo:var(--noite-erro-fundo);     --erro-borda:var(--noite-erro-borda);
  --sombra:var(--noite-sombra); --sombra-alta:var(--noite-sombra-alta);
}

/* ───────────────────────── Base ───────────────────────── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--fonte);
  background:var(--fundo);
  color:var(--texto);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  /* Um brilho muito discreto atrás do topo dá profundidade sem custar
     desempenho — é gradiente, não imagem. */
  background-image:
    radial-gradient(1100px 420px at 50% -180px,
      color-mix(in srgb, var(--acento) 12%, transparent), transparent 70%);
  /* Sem color-mix o gradiente inteiro é descartado e sobra o fundo liso — que
     é exatamente o que se quer como degradação. */
  background-repeat:no-repeat;
  background-attachment:fixed;
}
h1,h2,h3,h4{line-height:1.25;letter-spacing:-.011em}
a{color:var(--acento);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--acento-forte)}
:focus-visible{outline:2px solid var(--acento);outline-offset:2px;border-radius:4px}
code{font-family:var(--mono)}
/* Números que se comparam em coluna precisam alinhar. */
.tabela td,.num,.hash,code{font-variant-numeric:tabular-nums}

/* Troca de tema sem piscar de cor em cor. */
body,.cartao,.painel-bloco,.bloco,.tabela td,.tabela th,input,select,textarea,.botao,button{
  transition:background-color var(--transicao),border-color var(--transicao),color var(--transicao);
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:1ms !important;animation-duration:1ms !important}
}

/* ─────────────────── Alternador de tema ─────────────────── */
/* Três estados num botão só. O rótulo diz o estado ATUAL, não o próximo:
   "auto" é informação, e um botão que mente sobre o próprio estado confunde. */
.tema{
  display:inline-flex;align-items:center;gap:6px;
  margin:0;width:auto;padding:6px 11px;
  border:1px solid var(--borda);border-radius:var(--r-pill);
  background:var(--cartao-alto);color:var(--suave);
  font-size:12px;font-weight:600;font-family:inherit;cursor:pointer;
  line-height:1.4;
}
.tema:hover{border-color:var(--borda-forte);color:var(--texto);filter:none}
.tema .icone{font-size:13px;line-height:1}
.tema .rot{letter-spacing:.02em}
@media (max-width:520px){ .tema .rot{display:none} .tema{padding:6px 9px} }