/* ============================================================
   pagina.css — casca de index.html (único ponto de entrada real)

   Diferente de components.css: aqui HÁ seletor de elemento
   (`body`). É proposital — este arquivo só é linkado em
   index.html, não é pensado pra conviver com estilo.css em outro
   lugar. Ver docs/design_notes.md.

   Dois shells convivem no mesmo body, um visível por vez:
   `.pagina-shell` (pré-login, coluna única) e `.shell` (pós-login,
   nav lateral + conteúdo — definido em components.css).
   ============================================================ */

/* estilo.css ainda define max-width/padding/color em `body` (e um
   `body:has(table)`) pensados pro layout de coluna única antigo — como
   pagina.css carrega depois, neutralizamos aqui pra não brigar com
   .pagina-shell/.shell, que mandam na largura agora. */
body {
  margin: 0;
  max-width: none;
  padding: 0;
  background: var(--bg);
  color: var(--texto);
  font-family: var(--fonte-corpo);
  font-size: var(--texto-base);
  line-height: var(--linha-normal);
  transition: background-color var(--transicao-base), color var(--transicao-base);
}

/* estilo.css's `body:has(table)` rule outranks a plain `body` selector on
   especificidade sozinha, ordem de carga à parte — casado aqui pra não
   voltar o limite de 60rem (a página sempre tem <table> no DOM, oculta
   ou não). */
body:has(table) {
  max-width: none;
  padding: 0;
}

/* O bug real dos dois shells aparecendo juntos: `.pagina-shell` e `.shell`
   definem `display` explicitamente (flex/grid). Regra de autor sempre
   vence a regra do user-agent, mesmo quando o seletor do UA (`[hidden] {
   display: none }`) teria maior especificidade em teoria — a origem da
   regra decide antes da especificidade. Resultado: o atributo `hidden`
   nunca tinha efeito visual nenhum contra essas duas classes, e os dois
   shells sempre apareciam desde o load, independente do que o JS setasse
   em `.hidden`. `!important` aqui é o jeito padrão de devolver ao atributo
   HTML nativo o comportamento que uma classe de autor está pisando. */
[hidden] {
  display: none !important;
}

/* Shell pré-login: splash centralizada (logo grande, nome, botão de
   entrar) — ver .login-cartao/.login-logo em components.css pro
   conteúdo. É a única coisa que usa .pagina-shell hoje, por isso a
   classe já É o layout de centralização, sem modificador. */
.pagina-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--espaco-6);
}

/* Botão de tema único e persistente — fora dos dois shells condicionais
   (login/app) porque tema é preferência de página, não de sessão. Existir
   uma vez só evita duplicar `id` entre os dois. */
.tema-flutuante {
  position: fixed;
  top: var(--espaco-4);
  right: var(--espaco-4);
  z-index: 20;
}

.secao + .secao {
  margin-top: var(--espaco-10);
  padding-top: var(--espaco-8);
  border-top: 1px solid var(--borda);
}

.secao h2,
.secao h3,
.secao h4,
.secao h5 {
  font-family: var(--fonte-titulo);
  font-stretch: condensed;
  font-weight: var(--peso-negrito);
  color: var(--texto);
}

.secao h2 { font-size: var(--texto-2xl); }
.secao h3 { font-size: var(--texto-xl); }
.secao h4 { font-size: var(--texto-lg); margin-bottom: var(--espaco-2); }
.secao h5 { font-size: var(--texto-md); margin-bottom: var(--espaco-2); }