/* =====================================================================
   Vesper — tokens e base
   O Dash carrega assets/ em ordem alfabética: 00 tokens → 10 casca →
   20/21/30/31 (CSS copiado do SIAPE, que lê --theme-*) → 90 tema dos
   componentes Dash/Bootstrap (último: vence o copiado).

   Identidade "Ciclo" (docs/identidade/ESPEC.md, aprovada em 2026-10-05):
   papel mineral + tinta verde-grafite da Comerc; verde é carga, brasa é
   descarga, ação é tinta. Carga e descarga diferem também em luminosidade
   (daltonismo: nunca só o matiz) — medido: 2,87:1 entre as duas no claro e
   2,84:1 no escuro; a descarga tem ≥ 3:1 sobre o painel nos dois temas. A
   brasa SÓ significa descarga: acento genérico de controle usa a tinta.
   Âmbar e sol são de marca (horizonte e estrela), nunca de dado.
   ===================================================================== */

:root {
  color-scheme: light;

  /* superfícies e tinta. Papel um passo mais verde desde a Moldura viva
     (2026-10-06): o branco dos painéis se destaca dele; tinta-3 segue 4,84:1. */
  --vesper-papel: #EEF3EC;
  --vesper-painel: #FFFFFF;
  --vesper-painel-2: #F6F8F7;
  --vesper-trilho: #E7EDE9;
  --vesper-linha: #D5DED9;
  --vesper-linha-forte: #B9C7BF;
  --vesper-tinta: #16241B;       /* tinta da Comerc: 16,1:1 sobre branco */
  --vesper-tinta-2: #4B5F55;      /* texto secundário: 6,6:1 sobre branco */
  --vesper-tinta-3: #5B6E64;      /* notas: 5,4:1 sobre branco e 5,0:1 sobre o papel */
  --vesper-acao-hover: #2A4639;   /* hover do botão primário (tinta) */

  /* o ciclo */
  --vesper-carga: #A4CE4E;        /* verde Comerc — preenchimento, nunca texto no claro */
  --vesper-carga-texto: #4E7A00;  /* verde para texto/indicador no claro: 5,1:1 */
  --vesper-carga-suave: rgba(164, 206, 78, .18);
  --vesper-descarga: #C43D0B;     /* brasa de dado: 5,22:1 sobre branco, 2,87:1 contra a carga */
  --vesper-descarga-suave: rgba(196, 61, 11, .10);
  --vesper-ociosa: #DCE4DF;

  /* marca (símbolo, horizonte, estrela) — nunca cor de dado */
  --vesper-verde-comerc: #60AB56; /* 1º degrau do horizonte (verde de marca sobre fundo claro) */
  --vesper-brasa: #FF5A20;        /* Micropower: célula da descarga no símbolo */
  --vesper-ambar: #FF9500;        /* só no horizonte */
  --vesper-sol: #FFC904;          /* a estrela; só sobre tinta/fundo escuro (1,54:1 no branco) */
  --vesper-nevoa: #F3F8E7;        /* texto sobre a tinta da marca */
  --vesper-marca-fundo: #16241B;  /* painel da marca no login, nos dois temas */
  --vesper-estrela: #16241B;      /* estrela do símbolo: tinta no claro, sol no escuro */

  /* acento de controle (slider, aviso informativo, ícone de destino): tinta */
  --vesper-acento: var(--vesper-tinta);
  --vesper-acento-suave: rgba(22, 36, 27, .06);

  /* ── Moldura viva (2026-10-06, decisão do dono: "falta vida, uma corzinha") ──
     A cor entra na MOLDURA e na MARCA, nunca no dado: nos gráficos verde segue
     carga e brasa segue descarga; ação segue tinta. Plano: docs/planos/moldura-viva.md */
  /* moldura (trilho lateral): tinta da marca nos dois temas */
  --vesper-moldura: #16241B;
  --vesper-moldura-texto: #F3F8E7;    /* névoa: 14,9:1 sobre a moldura */
  --vesper-moldura-texto-2: #B9CABF;  /* 9,4:1 sobre a moldura */
  --vesper-moldura-linha: #2B4239;
  --vesper-moldura-ativo: rgba(243, 248, 231, .10);
  --vesper-moldura-estrela: #FFC904;  /* sol: a estrela marca a página atual (10,45:1) */
  --vesper-moldura-anel: #3D584D;     /* contorno de 1 px do logo sobre tinta (ESPEC) */
  /* horizonte: 5 degraus discretos do dia à ponta, nunca degradê contínuo */
  --vesper-horizonte-1: var(--vesper-verde-comerc);
  --vesper-horizonte-2: #A4CE4E;
  --vesper-horizonte-3: var(--vesper-sol);
  --vesper-horizonte-4: var(--vesper-ambar);
  --vesper-horizonte-5: var(--vesper-brasa);
  /* cor de cada página (ícone de seção, barra do KPI). Simulador = o dia (verde),
     Potencial = o entardecer (âmbar), conta/admin = neutro. Ícone ≥ 3:1. */
  --vesper-acento-sim: #4E7A00;               /* 4,49:1 sobre o quadrado suave */
  --vesper-acento-sim-suave: rgba(164, 206, 78, .22);
  --vesper-acento-sim-barra: #A4CE4E;
  --vesper-acento-pot: #8A5A00;               /* 5,21:1 sobre o quadrado suave */
  --vesper-acento-pot-suave: rgba(255, 149, 0, .16);
  --vesper-acento-pot-barra: #FF9500;
  --vesper-acento-neutro: var(--vesper-tinta-2);  /* 5,99:1 */
  --vesper-acento-neutro-suave: rgba(22, 36, 27, .07);
  --vesper-acento-neutro-barra: var(--vesper-linha-forte);

  /* estados */
  --vesper-perigo: #B3261E;
  --vesper-perigo-suave: rgba(179, 38, 30, .08);
  --vesper-aviso: #8A5A00;
  --vesper-aviso-suave: rgba(230, 159, 0, .14);

  /* tipografia — Archivo e o eixo de largura (wdth 62–125) */
  --vesper-fonte: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  /* Urbanist: marca e títulos (o "o" circular que "comerc" e "MICROPOWER" têm em comum) */
  --vesper-fonte-titulo: "Urbanist", "Segoe UI", system-ui, -apple-system, sans-serif;
  --vesper-largo: 118;            /* títulos */
  --vesper-estreito: 88;          /* rótulos */

  /* escala (razão ~1,25) */
  --vesper-t-xs: 12.5px;
  --vesper-t-s: 13.5px;
  --vesper-t-m: 15px;
  --vesper-t-l: 19px;
  --vesper-t-xl: 24px;
  --vesper-t-2xl: 31px;
  --vesper-t-3xl: 40px;

  /* raio por hierarquia: painel > controle > célula */
  --vesper-raio-painel: 14px;
  --vesper-raio-controle: 8px;
  --vesper-raio-celula: 3px;

  --vesper-trilho-largura: 228px;
  --vesper-trilho-recolhido: 68px;

  /* ── aliases lidos pelo CSS e pelo Python copiados do SIAPE ── */
  --theme-bg: var(--vesper-papel);
  --theme-panel: var(--vesper-painel);
  --theme-panel2: var(--vesper-painel-2);
  --theme-line: var(--vesper-linha);
  --theme-ink: var(--vesper-tinta);
  --theme-mut: var(--vesper-tinta-2);
  --theme-dim: var(--vesper-tinta-3);
  --theme-serif: var(--vesper-fonte);
  --font-primary: var(--vesper-fonte);
  --brand-text: var(--vesper-carga-texto);
  /* O CSS herdado do SIAPE usa --comerc-green como acento genérico (aba ativa,
     pílula ligada, botão). Na identidade Ciclo verde é carga e ação é tinta:
     o alias aponta para o acento de controle. */
  --comerc-green: var(--vesper-acento);
  --comerc-green-dark: var(--vesper-acento);
  --comerc-green-light: var(--vesper-acento);
  --comerc-green-lighter: var(--vesper-acento-suave);
  --comerc-black: var(--vesper-tinta);
  --comerc-dark-gray: #2E4038;
  --comerc-gray: var(--vesper-tinta-2);
  --comerc-light-gray: var(--vesper-linha);
  --comerc-very-light: var(--vesper-painel-2);
  --comerc-white: var(--vesper-painel);
  --focus-ring: #4E7A00;
  --shadow-sm: 0 1px 2px rgba(22, 36, 27, .06);
  --shadow-md: 0 6px 18px rgba(22, 36, 27, .10);
  --card-radius: var(--vesper-raio-painel);
}

html[data-theme="dark"] {
  color-scheme: dark;

  /* Um passo mais aberto desde a Moldura viva ("muito escuro"). Medido sobre o
     painel #1C322B: tinta-3 5,52:1; neutro de dado 3,79:1; descarga 3,35:1;
     carga 9,5:1; pior rótulo da matriz do Potencial 4,58:1. */
  --vesper-papel: #15281F;
  --vesper-painel: #1C322B;
  --vesper-painel-2: #22392F;
  --vesper-trilho: #0F1B18;
  --vesper-linha: #2F483E;
  /* a moldura fica MAIS escura que o papel: no escuro ela é o fundo da janela */
  --vesper-moldura: #0E1915;
  --vesper-moldura-linha: #24382F;
  --vesper-acento-sim: #B5E856;               /* 6,34:1 sobre o quadrado suave */
  --vesper-acento-sim-suave: rgba(181, 232, 86, .16);
  --vesper-acento-sim-barra: #B5E856;
  --vesper-acento-pot: #F0C766;               /* 6,46:1 sobre o quadrado suave */
  --vesper-acento-pot-suave: rgba(255, 149, 0, .16);
  --vesper-acento-pot-barra: #FF9500;
  --vesper-acento-neutro-suave: rgba(230, 239, 234, .08);
  --vesper-linha-forte: #3D584D;
  --vesper-tinta: #E6EFEA;
  --vesper-tinta-2: #A9BDB3;
  --vesper-tinta-3: #94AA9F;
  --vesper-acao-hover: #FFFFFF;

  /* Carga um passo mais clara e descarga um passo mais escura que a brasa de
     marca: 10,48:1 e 3,69:1 sobre o painel, 2,84:1 entre as duas. */
  --vesper-carga: #B5E856;
  --vesper-carga-texto: #B5E856;
  --vesper-carga-suave: rgba(181, 232, 86, .16);
  --vesper-descarga: #E04A12;
  --vesper-descarga-suave: rgba(224, 74, 18, .18);
  --vesper-ociosa: #2A3F38;
  --vesper-acento-suave: rgba(230, 239, 234, .08);
  --vesper-estrela: #FFC904;

  --vesper-perigo: #F2B8B5;
  --vesper-perigo-suave: rgba(242, 184, 181, .10);
  --vesper-aviso: #F0C766;
  --vesper-aviso-suave: rgba(240, 199, 102, .12);

  --comerc-dark-gray: #CFE0D6;
  --focus-ring: #B5E856;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 8px 22px rgba(0, 0, 0, .35);
}

/* ── base ─────────────────────────────────────────────────────────────── */
html, body {
  background: var(--vesper-papel);
  color: var(--vesper-tinta);
}
body {
  margin: 0;
  font-family: var(--vesper-fonte);
  font-size: var(--vesper-t-m);
  line-height: 1.5;
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 1, "lnum" 1;   /* números alinham em tabela e KPI */
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--vesper-fonte);
  color: var(--vesper-tinta);
  letter-spacing: -0.005em;
}
/* Títulos de página e de seção em Urbanist; h3 para baixo segue em Archivo. */
h1, h2 { font-family: var(--vesper-fonte-titulo); font-weight: 700; letter-spacing: -0.01em; font-variation-settings: normal; }
h1 { font-size: var(--vesper-t-2xl); line-height: 1.12; }
h2 { font-size: var(--vesper-t-l); line-height: 1.25; }
h3 { font-size: 17px; font-weight: 650; font-variation-settings: "wdth" 105; }
p { max-width: 78ch; }
/* Link "solto" (sem classe) é ação: tinta sublinhada (verde é carga, não link).
   Botão, item de menu e destino têm estilo próprio. */
a:not([class]) { color: var(--vesper-tinta); text-decoration: underline; text-decoration-color: var(--vesper-linha-forte); text-underline-offset: 3px; }
a:not([class]):hover { text-decoration-color: currentColor; }
code { font-family: var(--vesper-fonte); }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible,
.form-control:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 0; }
.btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; box-shadow: none; }
.Select.is-focused:not(.is-open) > .Select-control { box-shadow: 0 0 0 2px var(--focus-ring); }
.Select-input > input:focus-visible { outline: none; }

/* Indicador global de carregamento: o Dash marca o bloco recalculando com
   data-dash-is-loading="true"; barra fina no topo enquanto houver pendência. */
[data-dash-is-loading="true"] { opacity: .55; transition: opacity .15s ease-in; cursor: progress; }
body:has([data-dash-is-loading="true"])::before {
  content: ""; position: fixed; top: 0; left: 0; z-index: 3000;
  height: 3px; width: 100%; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--vesper-carga), var(--vesper-descarga), transparent);
  background-size: 40% 100%; background-repeat: no-repeat;
  animation: vesper-carregando 1.1s ease-in-out infinite;
}
@keyframes vesper-carregando { from { background-position: -40% 0; } to { background-position: 140% 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  body:has([data-dash-is-loading="true"])::before { background-size: 100% 100%; opacity: .7; }
}

.ui-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}