/**
 * ============================================================
 * ADVOGAONLINE — AUTH PAGES (login + setup)
 * Externalized from the inline <style> blocks of
 * auth/login.ejs (~300 lines) and auth/setup.ejs (~76 lines) — ADR-005.
 *
 * Consumes the shared --ao-* tokens from base/_tokens.css only;
 * NO local :root token block (the duplicated login :root was removed).
 * Linked in addition to main.css on both standalone pages, so atoms
 * (.form-control, .btn-primary, .alert, .form-check) inherit the global
 * component kit — this file only adds page composition + a few accents.
 * ============================================================
 */

/* --- Page shell: clean dark background; no wallpaper, no overlay --- */
.auth-page {
  background-color: var(--ao-bg);
  color: var(--ao-text);
  min-height: 100vh;
}

.auth-page--login {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.auth-page--setup {
  display: block;
  padding: 2.5rem 1rem;
}

/* --- Card surface (hairline border, minimal shadow — per ADR-002) --- */
.auth-card {
  width: 100%;
  max-width: 440px;
  background-color: var(--ao-surface);
  border: 1px solid var(--bs-border-color);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.30);
  overflow: hidden;
  /* gentle, finite entrance — no infinite pulsing */
  animation: authCardIn 0.4s ease-out both;
}

.auth-page--setup .auth-card {
  max-width: 720px;
  margin: 0 auto;
}

@keyframes authCardIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .auth-card { animation: none; }
}

/* --- Header --- */
.auth-header {
  text-align: center;
  padding: 2.25rem 2rem 1.25rem;
  border-bottom: 1px solid var(--bs-border-color);
}

/* Single logo — preserved asset, transparent on dark, NO glow animation. */
.auth-logo {
  display: inline-block;
  width: auto;
  max-width: 210px;
  height: auto;
  margin-bottom: 0.75rem;
}

/* Brand voice set in the serif (Fraunces) — the only serif on the page. */
.auth-tagline {
  margin: 0;
  font-family: var(--ao-font-brand);
  font-size: var(--ao-text-md);
  font-style: italic;
  line-height: var(--ao-leading-snug);
  color: var(--ao-text-muted);
}

/* --- Body --- */
.auth-body {
  padding: 1.75rem 2rem 2rem;
}

.auth-body .alert {
  margin-bottom: 1.25rem;
}

/* Floating-label legibility on the dark inputs (inputs themselves come
   from the global _forms.css atom). */
.auth-body .form-floating > label {
  color: var(--ao-text-muted);
}

.auth-body .form-check {
  margin: 0.25rem 0 1.25rem;
}

.auth-body .form-check-label {
  color: var(--ao-text-muted);
  user-select: none;
}

/* ============================================================
 * SETUP-specific
 * ============================================================ */
.setup-icon {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 2.25rem;
  color: var(--ao-gold);
}

.setup-title {
  margin: 0 0 0.25rem;
  font-size: var(--ao-text-xl);
  font-weight: 600;
  color: var(--ao-text);
}

/* Section divider label — quiet raised strip, gold icon accent. */
.setup-section {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.75rem 0 1rem;
  padding: 0.5rem 0.75rem;
  background-color: var(--ao-surface-2);
  border: 1px solid var(--bs-border-color);
  border-radius: 8px;
  font-size: var(--ao-text-sm);
  font-weight: 600;
  color: var(--ao-text);
}

.setup-section:first-of-type {
  margin-top: 0;
}

.setup-section i {
  color: var(--ao-gold);
}

/* Welcome notice → semantic "info" soft, consistent with _alerts.css. */
.setup-info {
  display: flex;
  gap: 0.6rem;
  padding: 0.875rem 1rem;
  margin-bottom: 1.5rem;
  background-color: var(--ao-info-soft);
  border: 1px solid rgba(76, 155, 224, 0.28);
  border-left-width: 4px;
  border-radius: 8px;
  color: var(--ao-text);
}

.setup-info i {
  color: var(--ao-info);
}

.setup-help {
  margin-top: 0.5rem;
  font-size: var(--ao-text-sm);
  color: var(--ao-text-muted);
}

/* UF field stays visually uppercased (display-only — submitted value
   is unchanged; CSS text-transform does not alter form data). */
#estado {
  text-transform: uppercase;
}

/* --- Mobile --- */
@media (max-width: 576px) {
  .auth-header { padding: 1.75rem 1.25rem 1rem; }
  .auth-logo { max-width: 170px; }
  .auth-body { padding: 1.5rem 1.25rem; }
}