/* =============================================================================
   TCSSA-CTe — cores do tema (claro e escuro) e base.
   REGRA: nenhuma cor fixa nas telas. Toda cor vem destas variáveis, que têm
   versão clara e escura. Marca: marinho #022C7E, verde #3FAE2A.
   Escolha do tema: automático (segue o sistema), ou fixo pelo botão do topo
   (atributo data-tema="claro" | "escuro" no <html>).
   ============================================================================= */
@font-face {
  font-family: "Inter";
  src: url("/vendor/inter/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --marca: #022C7E;
  --marca-verde: #3FAE2A;
  --link: #0a3a9c;
  --fundo: #f2f5f9;
  --superficie: #ffffff;
  --texto: #1b2433;
  --texto-forte: #0b1424;
  --rotulo: #354156;
  --sutil: #5d687b;
  --borda: #d6dce6;
  --linha: #e6eaf1;
  --zebra: #f7f9fc;
  --hover: #edf2fb;
  --quadro-fundo: #ffffff;
  --quadro-borda: #cfd7e4;
  --quadro-cab: #e8eef8;
  --quadro-titulo: #0f2a5c;
  --quadro-barra: #1f56c4;
  --campo-fundo: #ffffff;
  --campo-borda: #b8c2d2;
  --campo-texto: #1b2433;
  --campo-desligado: #f0f2f6;
  --foco: rgba(31, 86, 196, .30);
  --primaria: #022C7E;
  --primaria-hover: #0a3a9c;
  --primaria-texto: #ffffff;
  --lateral-fundo: #022C7E;
  --lateral-texto: #dbe5fb;
  --lateral-ativo: rgba(255, 255, 255, .14);
  --lateral-grupo: #9fb4e6;
  --ok: #217a12;
  --ok-fundo: #e7f6e3;
  --erro: #c62828;
  --erro-fundo: #fdecec;
  --aviso: #9a4d00;
  --aviso-fundo: #fff4e0;
  --sombra: 0 6px 24px rgba(15, 30, 60, .14);
  --raio: 10px;
}

/* Escuro: quadros e campos um pouco mais claros que o fundo, bordas visíveis,
   rótulos claros, títulos em branco. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --fundo: #0c1320;
    --superficie: #121a28;
    --texto: #e3e9f4;
    --texto-forte: #ffffff;
    --rotulo: #d6dff0;
    --sutil: #a2aec4;
    --borda: #36425a;
    --linha: #2a3446;
    --zebra: #172133;
    --hover: #1d2b45;
    --quadro-fundo: #151e2e;
    --quadro-borda: #46546f;
    --quadro-cab: #22314f;
    --quadro-titulo: #f1f5ff;
    --quadro-barra: #5b8cf0;
    --campo-fundo: #1e2839;
    --campo-borda: #5a6680;
    --campo-texto: #eef2fa;
    --campo-desligado: #192232;
    --foco: rgba(91, 140, 240, .45);
    --primaria: #2f63d4;
    --primaria-hover: #4275e3;
    --primaria-texto: #ffffff;
    --link: #8fb1ff;
    --lateral-fundo: #0a1630;
    --lateral-texto: #cdd8f2;
    --lateral-ativo: rgba(120, 160, 255, .18);
    --lateral-grupo: #8199cc;
    --ok: #79d468;
    --ok-fundo: #16301a;
    --erro: #ff8a8a;
    --erro-fundo: #3a1b1f;
    --aviso: #f3b766;
    --aviso-fundo: #3a2a12;
    --sombra: 0 8px 28px rgba(0, 0, 0, .5);
  }
}
:root[data-tema="escuro"] {
  color-scheme: dark;
  --fundo: #0c1320;
  --superficie: #121a28;
  --texto: #e3e9f4;
  --texto-forte: #ffffff;
  --rotulo: #d6dff0;
  --sutil: #a2aec4;
  --borda: #36425a;
  --linha: #2a3446;
  --zebra: #172133;
  --hover: #1d2b45;
  --quadro-fundo: #151e2e;
  --quadro-borda: #46546f;
  --quadro-cab: #22314f;
  --quadro-titulo: #f1f5ff;
  --quadro-barra: #5b8cf0;
  --campo-fundo: #1e2839;
  --campo-borda: #5a6680;
  --campo-texto: #eef2fa;
  --campo-desligado: #192232;
  --foco: rgba(91, 140, 240, .45);
  --primaria: #2f63d4;
  --primaria-hover: #4275e3;
  --primaria-texto: #ffffff;
  --link: #8fb1ff;
  --lateral-fundo: #0a1630;
  --lateral-texto: #cdd8f2;
  --lateral-ativo: rgba(120, 160, 255, .18);
  --lateral-grupo: #8199cc;
  --ok: #79d468;
  --ok-fundo: #16301a;
  --erro: #ff8a8a;
  --erro-fundo: #3a1b1f;
  --aviso: #f3b766;
  --aviso-fundo: #3a2a12;
  --sombra: 0 8px 28px rgba(0, 0, 0, .5);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  background: var(--fundo);
  color: var(--texto);
  text-rendering: optimizeLegibility;
}
a { color: var(--link); }
h1, h2, h3 { color: var(--texto-forte); margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--quadro-barra); outline-offset: 2px; }