/* =============================================================================
   CTL Hub Quiz — tela /auth/ (login e cadastro do apresentador)
   -----------------------------------------------------------------------------
   Padrão Cobalt (06) do padroes-visuais-v2.html: barra de marca fina no topo,
   corpo centrado nos dois eixos e um card estreito (~380 px) com título em
   Outfit, subtítulo fraco e botão primário de largura cheia.

   Só tokens de tokens.css: nenhuma cor fixa, nenhum hex (PADRÃO, seção 5).
   Auditado em 320 px sem rolagem lateral.
   ========================================================================== */

/* A casca enxuta não precisa grudar no topo: nesta tela não há lista longa
   para rolar, e o `sticky` herdado deixaria a borda flutuando sobre o card. */
.auth-barra {
  position: static;
}

.auth {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Sem rodapé aqui (o bloco é sobrescrito), então o corpo fica com todo o
     espaço restante e o card cai no centro ótico da tela. */
  min-height: calc(100dvh - var(--altura-topo));
  padding: var(--e8) var(--e4) var(--e12);
}

.auth__cartao {
  width: 100%;
  max-width: var(--largura-estreita);
  gap: var(--e5);
}

.auth__titulo {
  font-size: var(--texto-2xl);
}

/* Erro que não pertence a um campo (credenciais inválidas, conta desativada). */
.auth__alerta {
  display: flex;
  flex-direction: column;
  gap: var(--e1);
  padding: var(--e3) var(--e4);
  border: 1px solid var(--erro);
  border-radius: var(--raio-md);
  background: var(--erro-suave);
}

.auth__nota {
  line-height: 1.5;
}

/* Telas muito estreitas: devolve ao conteúdo os 8 px de cada lado do card. */
@media (max-width: 380px) {
  .auth {
    padding: var(--e6) var(--e4) var(--e8);
  }

  .auth__cartao {
    padding: var(--e4);
  }
}