html, body { height: 100%; }

body {
  background: var(--ground);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: var(--txt-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

#app { min-height: 100%; display: flex; flex-direction: column; }

/* Tela de boot — visível até o router assumir. */
.boot {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  padding: var(--e-6);
  text-align: center;
}

.boot__marca {
  font-size: var(--txt-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--azul-900);
}

.boot__msg {
  font-size: var(--txt-sm);
  color: var(--texto-3);
}

.boot__msg[data-tipo="erro"] { color: var(--falta); }
.boot__msg[data-tipo="ok"]   { color: var(--conforme); }

/* Utilitário de acessibilidade: visível apenas para leitores de tela.
 *
 * `top`/`left` explícitos, mesmo sendo 0 — sem eles, `position: absolute`
 * usa a posição ESTÁTICA do elemento (onde ele cairia no fluxo normal) como
 * referência. Dentro de uma célula de tabela larga que rola no próprio
 * contêiner (ex.: `.central-tabela__scroll`), a posição estática da última
 * coluna fica além do viewport mesmo com a tabela contida — e o elemento de
 * 1px "puxava" o documento inteiro a rolar na horizontal para alcançá-la.
 * `top: 0; left: 0` fixa a referência no canto do ancestral posicionado mais
 * próximo, e some do cálculo de layout do resto da página.
 */
.sr-only {
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Checkbox/radio/range nativos na cor da marca, não no azul do navegador. */
:root { accent-color: var(--azul-900); }