/* ══════════════════════════════════════════════════════════════════════════
   ESCALA BASE DO SISTEMA — responsividade de TODAS as telas
   Carregado logo depois do Bootstrap, nos DOIS templates-base:
   `templates/base.html` (produto) e `painel/templates/painel/base_painel.html`.

   ── O problema que este arquivo resolve ──────────────────────────────────
   Relatado pelo dono em 13/08/2026: *"na minha tela de 15 polegadas está tudo
   muito grande quando abro no navegador a 100%; ela devia deixar as letras
   menores para tudo caber"*.

   Medido no navegador dele, contra homologação, no mesmo dia:

   | O que                       | Valor medido            |
   |-----------------------------|-------------------------|
   | `html { font-size }`        | **16px** — o padrão do  |
   |                             | navegador, nunca        |
   |                             | sobrescrito em lugar    |
   |                             | nenhum do projeto       |
   | Viewport real da tela dele  | **1280 × 551 CSS px**   |
   |                             | (15" com escala 150%    |
   |                             | do Windows)             |
   | Botão do Bootstrap          | 18.4px                  |
   | Título                      | 25.6px                  |

   O aperto é de **ALTURA** (551px úteis), não de largura — 1280px nunca
   dispara os breakpoints de largura do Bootstrap (992/768px), então nenhuma
   regra responsiva existente chega a valer nessa tela. É por isso que "tudo
   fica grande": o layout é servido em tamanho de monitor grande dentro de
   meia tela.

   ── Como resolve ─────────────────────────────────────────────────────────
   Um único ponto de controle: `html { font-size }`. O Bootstrap 5 é
   inteiramente construído em `rem` — tipografia, espaçamento, botões, inputs,
   cards, modais. Mudar a raiz reescala **toda** a biblioteca de uma vez, sem
   tocar em componente nenhum. Os 348 valores em `rem` do CSS próprio do
   projeto vêm junto de graça.

   A escala desce por faixa de altura, nos MESMOS degraus que o
   `auth_responsivo.css` já usa nas telas de login (900/800/700/620px) — de
   propósito: dois esquemas de degrau diferentes no mesmo sistema é como as
   telas começam a divergir.

   ── O que este arquivo NÃO alcança ───────────────────────────────────────
   Valor em `px` ignora a raiz. O CSS próprio tem **1133 valores em `px`**
   contra 348 em `rem` (contagem de 13/08/2026), então parte da interface fica
   fora da escala até ser convertida. A conversão começou por `card.css` e
   `style.css`, que concentram as fontes fixas. Ao mexer em qualquer CSS deste
   projeto, **escreva `rem`, não `px`** — a régua é `px ÷ 16`, de forma que em
   tela alta o resultado é idêntico ao valor aprovado hoje.

   ── Por que não `zoom` nem `transform: scale()` ──────────────────────────
   Os dois "resolveriam" em uma linha e quebram coisas reais: `zoom` não é
   padrão e desalinha `position: fixed` (a sidebar e os modais dependem
   disso); `scale()` borra texto e desalinha as coordenadas de clique. A raiz
   em `rem` é o mecanismo que o próprio Bootstrap espera.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Degrau 0: tela alta ───────────────────────────────────────────────────
   16px é exatamente o que o sistema usa hoje. Em monitor grande, portanto,
   este arquivo não muda um pixel do visual aprovado — igual à promessa que o
   `auth_responsivo.css` faz para as telas de login. */
:root {
    --escala-raiz: 16px;

    /* Tokens de espaçamento vertical, em rem: acompanham a raiz sozinhos.
       Use-os no lugar de padding/margin fixos ao escrever CSS novo. */
    --esp-xs: 0.25rem;
    --esp-sm: 0.5rem;
    --esp-md: 1rem;
    --esp-lg: 1.5rem;
    --esp-xl: 2rem;

    /* Tokens de tipografia. Os nomes dizem o PAPEL, não o tamanho — assim o
       valor pode mudar sem que o nome vire mentira. */
    --texto-mini: 0.625rem;    /* 10px — legenda, contador, badge pequeno */
    --texto-menor: 0.75rem;    /* 12px — apoio, rodapé de card */
    --texto-pequeno: 0.8125rem;/* 13px — tabela densa, metadado */
    --texto-base: 0.875rem;    /* 14px — corpo das telas de trabalho */
    --texto-medio: 1rem;       /* 16px — corpo padrão */
    --texto-titulo: 1.25rem;   /* 20px — título de card */
    --texto-destaque: 1.5rem;  /* 24px — número grande, KPI */
}

html {
    font-size: var(--escala-raiz);
}

/* Mantém o corpo preso à escala. O Bootstrap define `--bs-body-font-size:
   1rem`, então isto é redundante hoje — está aqui para o caso de um tema
   futuro sobrescrever a variável com valor absoluto. */
body {
    font-size: var(--bs-body-font-size, 1rem);
}

/* ── Degrau 1: notebook grande / monitor baixo ────────────────────────────
   1920×1080 a 125% (a configuração PADRÃO de fábrica do Windows em telas
   Full HD) cai aqui: sobram ~730px de altura útil. */
@media (max-height: 900px) {
    :root { --escala-raiz: 15.5px; }
}

/* ── Degrau 2 ─────────────────────────────────────────────────────────────
   Onde ficam a maioria dos notebooks de 14"–15" em uso real. */
@media (max-height: 800px) {
    :root { --escala-raiz: 15px; }
}

/* ── Degrau 3 ─────────────────────────────────────────────────────────────
   1366×768: a resolução mais comum do parque de máquinas da SECAD. Depois da
   barra do navegador sobram ~625px. */
@media (max-height: 700px) {
    :root { --escala-raiz: 14px; }
}

/* ── Degrau 4: o caso relatado ────────────────────────────────────────────
   551px de altura útil — 15" com escala 150% do Windows. É o degrau que
   atende a queixa que originou este arquivo. 13px é 81% do tamanho original:
   encolhe o suficiente para caber sem chegar perto do limite de leitura
   confortável (que a WCAG situa bem abaixo disso para texto de corpo). */
@media (max-height: 620px) {
    :root { --escala-raiz: 13px; }
}

/* ── Piso ─────────────────────────────────────────────────────────────────
   Abaixo disto não se ganha mais nada encolhendo: o problema deixa de ser de
   escala e passa a ser de layout (o conteúdo precisa rolar). Trava em 12.5px
   para o texto não virar ilegível em janela espremida. */
@media (max-height: 520px) {
    :root { --escala-raiz: 12.5px; }
}

/* ── Celular e tablet em pé ───────────────────────────────────────────────
   Aqui a altura é grande e a LARGURA é o aperto — o oposto do caso acima.
   Encolher a fonte pioraria a leitura, então a raiz volta a 15px e quem
   resolve o resto é o layout responsivo do Bootstrap. */
@media (max-width: 576px) {
    :root { --escala-raiz: 15px; }
}