/* Fonte da casa servida pelo próprio sistema (funciona sem internet). */
@font-face { font-family: "Open Sans"; font-weight: 400; font-display: swap; src: url("../fontes/open-sans-400.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-weight: 600; font-display: swap; src: url("../fontes/open-sans-600.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-weight: 700; font-display: swap; src: url("../fontes/open-sans-700.woff2") format("woff2"); }

/* ==========================================================================
   Tokens da casa — base de todo sistema.
   Regra unica: nenhuma cor, espaco ou raio aparece fora deste bloco.
   A paleta navy vem dos paineis Integra360 ja em uso; o cinza-azulado e a
   escala semantica (verde/ambar/vermelho) seguem o padrao que o pessoal ja
   reconhece nos relatorios de fiscalizacao.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- marca ------------------------------------------------------------ */
  --marca-900: #0b1220;   /* navy mais escuro: topo, rodape             */
  --marca-800: #0f294d;   /* navy do painel                              */
  --marca-700: #12325e;
  --marca-600: #1b3f70;   /* navy de apoio, bordas em tema escuro        */
  --marca-500: #2563eb;   /* azul de acao: botao primario, link          */
  --marca-400: #39a0ff;   /* destaque, serie principal de grafico        */
  --marca-100: #e8eefc;   /* fundo de selecao, chip                      */

  /* --- superficie e texto ----------------------------------------------- */
  --fundo:        #f6f8fb;  /* fundo da aplicacao                        */
  --superficie:   #ffffff;  /* cartao, tabela, modal                     */
  --superficie-2: #eef2f8;  /* cabecalho de tabela, faixa sutil          */
  --borda:        #d8e0ec;
  --borda-forte:  #b6c4d8;
  --texto:        #0f172a;  /* titulo e numero                           */
  --texto-2:      #475569;  /* corpo, rotulo                             */
  --texto-3:      #7b8aa1;  /* legenda, texto auxiliar                   */

  /* --- semantica: significado, nunca so decoracao ------------------------ */
  --ok:      #15803d;  --ok-fundo:      #dcfce7;   /* conforme, em dia    */
  --atencao: #a16207;  --atencao-fundo: #fef3c7;   /* vencendo, parcial   */
  --atencao-grafico: #d97706;  /* ambar de preenchimento (barras, faixas): o --atencao e tom de texto */
  --erro:    #b91c1c;  --erro-fundo:    #fee2e2;   /* NC, atrasado        */
  --neutro:  #475569;  --neutro-fundo:  #e9eef5;   /* sem informacao      */
  /* Os tons de texto acima passam em contraste 4.5:1 sobre o proprio
     fundo pareado — nao troque um sem trocar o outro. */

  /* --- espaco: escala de 4 px, sem valores fora dela --------------------- */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px;
  --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 64px;

  /* --- tipografia -------------------------------------------------------- */
  --fonte: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-xs: 12px; --t-sm: 14px; --t-md: 16px;
  --t-lg: 20px; --t-xl: 24px; --t-2xl: 32px;

  /* --- forma -------------------------------------------------------------- */
  --raio-1: 6px; --raio-2: 10px; --raio-3: 16px;
  --sombra-1: 0 1px 2px rgba(15, 23, 42, .06);
  --sombra-2: 0 4px 16px rgba(15, 23, 42, .10);

  /* --- layout ------------------------------------------------------------- */
  --lateral: 240px;
  --topo: 56px;
}

/* Tema escuro. So os tokens mudam de valor — nenhum componente sabe que o
   tema existe, e por isso nada precisa ser reescrito. */
:root[data-tema="escuro"],
:root:not([data-tema="claro"]) {
  /* deixe este bloco vazio se o sistema for so claro; ele existe para o dia
     em que pedirem modo escuro e voce nao ter que refatorar nada. */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --fundo:        #0b1220;
    --superficie:   #101a2e;
    --superficie-2: #16233d;
    --borda:        #1f3355;
    --borda-forte:  #2d4770;
    --texto:        #e8eefc;
    --texto-2:      #9db8e0;
    --texto-3:      #6b83a8;
    --ok:      #4ade80;  --ok-fundo:      #0f2f1d;
    --atencao: #fbbf24;  --atencao-fundo: #33270a;
    --erro:    #f87171;  --erro-fundo:    #3a1414;
    --neutro:  #9db8e0;  --neutro-fundo:  #1b2b45;
    --sombra-1: 0 1px 2px rgba(0, 0, 0, .4);
    --sombra-2: 0 4px 16px rgba(0, 0, 0, .5);
  }
}

/* --- base ---------------------------------------------------------------- */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--fonte);
  font-size: var(--t-sm);
  color: var(--texto);
  background: var(--fundo);
}
/* Todo numero: largura fixa por digito, senao a coluna dança ao atualizar. */
.num, td.num, .kpi-valor { font-variant-numeric: tabular-nums; text-align: right; }

/* Foco visivel — quem navega por teclado precisa enxergar onde esta. */
:focus-visible { outline: 2px solid var(--marca-500); outline-offset: 2px; }