/* ============================================================================
 * base.css — o container da casa. As medidas de layout, num lugar só.
 *
 * ┌─ POR QUE ESTE ARQUIVO EXISTE, decisão do dono em 17/08/2026 ──────────────┐
 * │ O `box` tinha TRÊS sistemas de layout que não se conheciam:                │
 * │                                                                           │
 * │   · `app.css`      — as telas com menu; 900px repetido em quatro regras;   │
 * │   · `folha.php`    — 224 linhas de CSS próprio, sem carregar o app.css;    │
 * │   · `relatorio.php`—  46 linhas idem.                                      │
 * │                                                                           │
 * │ Consertar a largura de um bloco dentro de um deles é, nas palavras do      │
 * │ dono, *"uma solução dentro de uma solução"*. O conserto que dura é ter um  │
 * │ container só, que qualquer página veste.                                   │
 * └───────────────────────────────────────────────────────────────────────────┘
 *
 * ┌─ COMO SE USA ─────────────────────────────────────────────────────────────┐
 * │ Bloco que é coluna de conteúdo ganha `class="coluna"`. Só isso.            │
 * │                                                                           │
 * │ Página que precisa de OUTRA largura não inventa regra: redefine o token no │
 * │ próprio `:root`. A `/folha` faz isso — lá a coluna é a largura da folha    │
 * │ A4, porque os controles não devem ser mais largos que a coisa que eles     │
 * │ controlam.                                                                │
 * └───────────────────────────────────────────────────────────────────────────┘
 *
 * ┌─ O QUE ESTÁ AQUI: MEDIDA E COR. O QUE NÃO ESTÁ: COMPONENTE ───────────────┐
 * │ A paleta mudou de casa em 17/08/2026, junto com o menu. Ela morava no       │
 * │ `app.css`, e por isso as telas de papel **não seguiam o tema**: quem estava │
 * │ no escuro clicava em "imprimir esta etiqueta" e caía num fundo claro.       │
 * │                                                                           │
 * │ ⚠️ **A moldura segue o tema; a FOLHA não.** O papel é branco com tinta      │
 * │ preta em qualquer tema, porque é isso que sai da impressora — uma prévia    │
 * │ escura mentiria sobre o resultado. Ver o `<style>` da `/folha`: o fundo, os │
 * │ painéis e o texto usam os tokens; `.folha` e `.pagina` são fixos.           │
 * └───────────────────────────────────────────────────────────────────────────┘
 * ========================================================================== */

:root {
  /* A coluna de conteúdo. 900px é o que o app já usava; agora tem nome. */
  --coluna: 900px;

  /* Formulário e leitura curta: linha longa demais cansa de ler. */
  --coluna-estreita: 520px;

  /* O recuo lateral — o ar entre o texto e a borda da tela.
     Existe como token porque quem redefine `--coluna` quase sempre precisa
     redefinir isto junto: na `/folha` o recuo é zero no desktop, para o painel
     encostar nas mesmas bordas da folha. */
  --respiro: 1.2rem;
}

.coluna {
  max-width: var(--coluna);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--respiro);
  padding-right: var(--respiro);
}

.coluna-estreita {
  max-width: var(--coluna-estreita);
  margin-left: auto;
  margin-right: auto;
}

/* ------------------------------------------------------------------- tema
   Absorvido da versão vizinha (item 5), com uma diferença: lá o tema escuro
   veio junto com um layout novo. Aqui **o layout é o mesmo** — nenhuma medida,
   nenhum espaçamento e nenhuma estrutura mudou. O que mudou foi a paleta, e
   só porque ela já estava em variáveis desde a Versao_001.

   Três estados, nesta ordem de precedência:
     1. `data-tema` no <html> — escolha explícita, gravada em localStorage
     2. `prefers-color-scheme` do sistema, quando não há escolha explícita
     3. claro, o padrão

   O `:not([data-tema])` é o que faz a regra 1 vencer a 2 sem `!important`:
   assim quem prefere claro num sistema escuro não é sobrescrito. */
:root {
  --tinta:     #17181a;
  --fraco:     #6b6f76;
  --linha:     #e2e3e6;
  --fundo:     #fbfbfa;
  --papel:     #ffffff;
  --realce:    #b4522a;   /* terracota discreto, só para estado e ação */
  --alerta:    #fff6ef;
  --alerta-borda: #efdccd;
  --erro:      #a3251c;
  --erro-borda:#eccfcd;
  --ok:        #1f6b3f;
  --ok-borda:  #cfe6d8;
  --contraste: #ffffff;   /* o que se lê POR CIMA de --tinta e de --realce */
  --tinta-forte: #000000; /* hover de botão sólido */
  --lavado:    #f0efec;   /* hover de botão vazado, fundo de <code> */
  --raio:      6px;
  color-scheme: light;
}

/* Paleta escura. Mesmos papéis, mesma hierarquia de contraste — o realce
   clareia porque terracota escuro sobre fundo escuro some. */
:root[data-tema="escuro"] {
  --tinta:     #e6e7e9;
  --fraco:     #9498a0;
  --linha:     #303338;
  --fundo:     #131417;
  --papel:     #1c1e22;
  --realce:    #e08252;
  --alerta:    #2a2018;
  --alerta-borda: #4a382a;
  --erro:      #f0918a;
  --erro-borda:#5a3230;
  --ok:        #79cfa0;
  --ok-borda:  #2c4a39;
  --contraste: #131417;
  --tinta-forte: #ffffff;
  --lavado:    #26292e;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) {
    --tinta:     #e6e7e9;
    --fraco:     #9498a0;
    --linha:     #303338;
    --fundo:     #131417;
    --papel:     #1c1e22;
    --realce:    #e08252;
    --alerta:    #2a2018;
    --alerta-borda: #4a382a;
    --erro:      #f0918a;
    --erro-borda:#5a3230;
    --ok:        #79cfa0;
    --ok-borda:  #2c4a39;
    --contraste: #131417;
    --tinta-forte: #ffffff;
    --lavado:    #26292e;
    color-scheme: dark;
  }
}