/* Assessor, painel admin. Tokens do sistema visual.
   Fonte: Outfit (Google Fonts), pesos 300/400/500/600.
   Carregar no <head>:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600&display=swap" rel="stylesheet">
*/
:root {
  /* Superfícies */
  --fundo: #000000;
  --cartao: #131313;
  --cartao-2: #1a1a1a;
  --cartao-3: #232323;
  --linha: #2a2a2a;
  --linha-forte: #3a3a3a;

  /* Marca e ação */
  --lima: #E1FB15;
  --lima-escuro: #9fb10c;      /* pontos e hachura sobre lima */
  --lima-suave: color-mix(in srgb, #E1FB15 14%, #131313);
  --verde: #32D583;
  --verde-suave: color-mix(in srgb, #32D583 14%, #131313);
  --alerta: #FDB022;
  --perigo: #FF6B5E;
  --branco: #FFFFFF;

  /* Texto (contraste medido sobre #131313: texto 17:1, suave 8:1, mudo 5.6:1) */
  --texto: #F4F4F4;
  --texto-suave: #BDBDBD;
  --texto-mudo: #9A9A9A;
  --texto-sobre-lima: #0B0B0B;

  /* Destaque: a cor da marca quando ela é texto, borda, traço ou anel de foco. No escuro é a própria lima;
     no claro vira oliva escuro, porque lima sobre branco não se lê. Lima como FUNDO (botão, cartão) fica igual nos dois. */
  --destaque: #E1FB15;
  --veu: rgba(0, 0, 0, .7);          /* fundo atrás de diálogo e gaveta */
  --sombra: rgba(0, 0, 0, .6);
  --seta-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BDBDBD' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --esquema: dark;

  /* Gráficos */
  --barra: #1f1f1f;
  --hachura: #5b5b5b;
  --hachura-passo: 5px;
  --ponto: #7f8f08;

  /* Raios */
  --raio-cartao: 28px;
  --raio-interno: 20px;
  --raio-campo: 16px;
  --raio-pilula: 999px;

  /* Espaçamento, múltiplos de 8 */
  --e1: 4px;  --e2: 8px;  --e3: 16px;  --e4: 24px;
  --e5: 32px; --e6: 48px; --e7: 64px;
  --gap-grade: 16px;

  /* Tamanhos de toque e entalhe */
  --toque: 44px;
  --botao-circulo: 40px;
  --entalhe-largura: 96px;     /* 2 botões; use 52px para 1 */
  --entalhe-largura-1: 52px;
  --entalhe-altura: 52px;

  /* Tipografia */
  --fonte: "Outfit", "Urbanist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --peso-fino: 300;
  --peso-normal: 400;
  --peso-medio: 500;
  --peso-forte: 600;
  --t-rotulo: 0.8125rem;       /* 13px */
  --t-corpo: 1rem;             /* 16px */
  --t-titulo-cartao: 1.125rem; /* 18px */
  --t-titulo-tela: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  --t-numero: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
  --t-numero-g: clamp(2.75rem, 2rem + 3.2vw, 4.5rem);

  /* Movimento */
  --suave: cubic-bezier(.2, .7, .2, 1);
  --t-curto: 160ms;
  --t-medio: 280ms;
  --t-feedback: 1800ms;
  --t-pulso: 600ms;

  /* Foco por teclado */
  --foco: 0 0 0 2px var(--fundo), 0 0 0 4px var(--destaque);

  /* Breakpoints (referência; media queries não aceitam var) */
  /* celular: até 720px | desktop: 1024px+ | alvo de teste: 390 e 1440 */
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-curto: 0ms; --t-medio: 0ms; --t-pulso: 0ms; }
}

/* Tema claro: escolhido no menu (data-tema="claro") ou, no Automático (sem data-tema), quando o aparelho está no claro */
:root[data-tema="claro"] {
  --fundo: #EDEDE8;
  --cartao: #FFFFFF;
  --cartao-2: #F2F2EE;
  --cartao-3: #E6E6E1;
  --linha: #E0E0DA;
  --linha-forte: #C9C9C3;
  --lima-escuro: #8A9A00;
  --lima-suave: color-mix(in srgb, #E1FB15 24%, #FFFFFF);
  --verde: #0B7A45;
  --verde-suave: color-mix(in srgb, #0B7A45 12%, #FFFFFF);
  --alerta: #A15C00;
  --perigo: #C8281C;
  /* contraste medido sobre #FFFFFF: texto 18.7:1, suave 9.6:1, mudo 5.7:1, destaque 7.6:1 */
  --texto: #121212;
  --texto-suave: #454545;
  --texto-mudo: #666666;
  --barra: #E9E9E4;
  --hachura: #B5B5AE;
  --ponto: #7f8f08;
  --destaque: #4D5900;
  --veu: rgba(20, 20, 16, .38);
  --sombra: rgba(20, 20, 16, .16);
  --seta-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23454545' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --esquema: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-tema]) {
    --fundo: #EDEDE8;
    --cartao: #FFFFFF;
    --cartao-2: #F2F2EE;
    --cartao-3: #E6E6E1;
    --linha: #E0E0DA;
    --linha-forte: #C9C9C3;
    --lima-escuro: #8A9A00;
    --lima-suave: color-mix(in srgb, #E1FB15 24%, #FFFFFF);
    --verde: #0B7A45;
    --verde-suave: color-mix(in srgb, #0B7A45 12%, #FFFFFF);
    --alerta: #A15C00;
    --perigo: #C8281C;
    /* contraste medido sobre #FFFFFF: texto 18.7:1, suave 9.6:1, mudo 5.7:1, destaque 7.6:1 */
    --texto: #121212;
    --texto-suave: #454545;
    --texto-mudo: #666666;
    --barra: #E9E9E4;
    --hachura: #B5B5AE;
    --ponto: #7f8f08;
    --destaque: #4D5900;
    --veu: rgba(20, 20, 16, .38);
    --sombra: rgba(20, 20, 16, .16);
    --seta-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23454545' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    --esquema: light;
}
}

/* Base mínima */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: var(--esquema); }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-weight: var(--peso-normal);
  font-size: var(--t-corpo);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: none; box-shadow: var(--foco); border-radius: inherit; }
.so-leitor {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}