/* QuadroForce — a base comum das três portas.
 *
 * ⚠️⚠️ ELAS PARECIAM TRÊS PRODUTOS DIFERENTES, e o motivo era estrutural:
 * `porta.css`, `coletor.css` e `painel.css` nasceram independentes, cada um
 * declarando a própria paleta. O resultado, medido nas telas de entrada:
 *
 *   | token     | painel    | coletor   | porta     |
 *   |-----------|-----------|-----------|-----------|
 *   | primário  | #3C6934   | #2D5A27   | #2D5A27   |
 *   | superfície| #F6FBF4   | #FCFDF6   | #FBFDF6   |
 *   | fonte     | Roboto    | system-ui | system-ui |
 *
 * ⚠️ E o desvio do primário não era gosto: `#2D5A27` é a COR DE ORIGEM de onde
 * a paleta tonal foi gerada — não é papel nenhum. O papel `md-primary` é
 * `#3C6934`. Duas telas pintavam a barra com a semente, e o handoff é
 * explícito: "não inventar cores: usar os papéis --md-*".
 *
 * Este arquivo é a fonte única: as fontes locais, os papéis de cor e a moldura
 * (barra e rodapé) que as três telas compartilham. O corpo de cada uma
 * continua sendo seu — bater ponto é um ato, o painel é uma bancada de
 * trabalho, e forçar o mesmo layout neles seria uniformidade sem função.
 *
 * ⚠️ FONTES LOCAIS, SEM CDN: a CSP de produção é `font-src 'self'`. Os
 * arquivos vivem em /painel/fonts/ desde a Etapa 4 e são servidos para as três
 * telas — duplicá-los custaria 76 KB por porta sem ganho nenhum.
 */

@font-face {
  font-family: "Roboto";
  src: url("/painel/fonts/roboto.woff2") format("woff2");
  font-weight: 400 500;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Mono";
  src: url("/painel/fonts/robotomono.woff2") format("woff2");
  font-weight: 400 500;
  font-display: swap;
}

:root {
  /* ── Papéis de cor MD3 (esquema claro do handoff, literais) ──────────── */
  --md-primary: #3C6934;            --md-on-primary: #FFFFFF;
  --md-primary-container: #BEF0B2;  --md-on-primary-container: #002300;
  --md-error: #B3261E;              --md-error-container: #F9DEDC;
  --md-on-error-container: #410E0B;
  --md-warning: #8A4F00;            --md-warning-container: #FFDCC0;
  --md-on-warning-container: #2E1500;
  --md-surface: #F6FBF4;            --md-on-surface: #191D18;
  --md-on-surface-variant: #41493E; --md-outline: #707A6E;
  --md-outline-variant: #BFC9BC;
  --md-surface-container-lowest: #FFFFFF;
  --md-surface-container-low: #F0F5EE;
  --md-surface-container: #EBF0E9;
  --md-surface-variant: #E1E4D8;

  /* ── Forma (escala MD3) ─────────────────────────────────────────────── */
  --canto-p: 12px;
  --canto-m: 16px;
  --canto-g: 28px;
  --canto-total: 999px;

  /* A régua horizontal das portas: barra, conteúdo e rodapé a compartilham. */
  --porta-largura: 30rem;
  --porta-respiro: 1.25rem;

  /* ⚠️ MD3 NÃO USA PESO 700 NA INTERFACE: títulos e rótulos em 500, corpo em
     400. A ênfase vem de escala e cor, não de bold. */
  --fonte: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-mono: "Roboto Mono", ui-monospace, "JetBrains Mono", Consolas, monospace;
}

/* ⚠️ O ATRIBUTO `hidden` VALE MAIS QUE QUALQUER `display` DE CLASSE.
   Sem esta regra, toda classe que declara `display` derruba o `display:none`
   nativo do atributo e o elemento continua ocupando a tela — foi assim que a
   faixa de senha provisória apareceu como um risco amarelo solto no coletor. */
[hidden] { display: none !important; }

/* ── A moldura comum ──────────────────────────────────────────────────────
   Barra no topo e rodapé no pé: é o que faz as três telas se reconhecerem
   como o mesmo produto, sem impor o mesmo corpo a todas. */

.qf-barra {
  background: var(--md-primary);
  color: var(--md-on-primary);
}
.qf-barra-dentro {
  width: 100%; max-width: var(--porta-largura); margin: 0 auto; min-height: 54px;
  padding: 0 var(--porta-respiro);
  display: flex; align-items: center; gap: 0.6rem;
  color: inherit; text-decoration: none;
}
.qf-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  flex-shrink: 0;
}
.qf-marca { line-height: 1.2; }
.qf-marca strong { display: block; font-size: 0.95rem; font-weight: 500; }
.qf-marca span { font-size: 0.72rem; color: rgba(255, 255, 255, .78); }

/* ⚠️ O rótulo do caminho de volta é VISÍVEL: marca clicável sem rótulo é
   adivinhação, e quem não tenta não descobre que existe saída. */
.qf-voltar {
  margin-left: auto; font-size: 0.8rem;
  padding: 0.45rem 0.8rem; border-radius: var(--canto-total);
  background: rgba(255, 255, 255, .12);
}
a.qf-barra-dentro:hover .qf-voltar,
a.qf-barra-dentro:focus-visible .qf-voltar { background: rgba(255, 255, 255, .22); }
a.qf-barra-dentro:focus-visible { outline: 2px solid var(--md-on-primary); outline-offset: -2px; }

.qf-rodape {
  border-top: 1px solid var(--md-outline-variant);
  padding: 1.25rem var(--porta-respiro);
  text-align: center;
  color: var(--md-on-surface-variant);
  font-size: 0.78rem; line-height: 1.5;
}
.qf-rodape p { margin: 0.15rem 0; }