/* ======================================================================
   GLOBALS — reset e base. Depende de tokens.css.
   Ordem nas páginas: tokens.css → globals.css → appShell.css →
   componentes.css → extras da página.
====================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

/* Esconde elemento com x-cloak até o Alpine iniciar, evitando piscada. */
[x-cloak] { display: none !important; }

body {
  font-family: var(--fonte-ui);
  font-size: 15px;            /* 1px acima do negocios: a secretaria usa
                                 monitor antigo e o texto de 14px cansava */
  line-height: 1.5;
  color: var(--neutro-800);
  background: var(--neutro-50);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;         /* nunca scroll horizontal (spec D12) */
}

button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img { max-width: 100%; display: block; }
table { border-collapse: collapse; width: 100%; }

/* Foco sempre visível — acessibilidade e navegação por teclado, que é
   como a professora vai preencher o mapa de notas na fase 2. */
:focus-visible {
  outline: 2px solid var(--primaria-600);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

.pagina-erro {
  max-width: 480px;
  margin: 15vh auto;
  padding: 24px;
  text-align: center;
}
.pagina-erro h1 { font-size: 22px; margin-bottom: 12px; color: var(--neutro-900); }
.pagina-erro p  { margin-bottom: 12px; color: var(--neutro-600); }
.pagina-erro a  { color: var(--primaria-800); text-decoration: underline; }