/* ═══════════════════════════════════════════════════════════════════════════
   AQS HUB — Telas de autenticação

   As quatro telas (login e os três passos de redefinição) não estendem
   base.html: cada uma repetia o mesmo bloco de estilo. Este arquivo é a
   folha única delas e consome os tokens do design system.

   Layout: painel de marca escuro à esquerda (a identidade AQS que a topbar
   carrega no resto do produto) e formulário claro à direita.
   ═══════════════════════════════════════════════════════════════════════════ */

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  font-family: var(--font-sans);
}

.auth-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

/* ── Painel de marca ─────────────────────────────────────────────────────── */

.auth-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-3xl);
  background:
    radial-gradient(90% 60% at 20% 0%, rgba(22, 140, 255, 0.28) 0%, rgba(12, 17, 23, 0) 60%),
    var(--topbar-bg);
  color: var(--color-white);
  overflow: hidden;
}

.auth-brand__mark {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-white);
}

.auth-brand__pitch {
  max-width: 24ch;
  font-size: 34px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--color-white);
}

.auth-brand__note {
  font-size: var(--text-caption);
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.6;
}

/* ── Coluna do formulário ────────────────────────────────────────────────── */

.auth-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl) var(--space-lg);
}

.auth-card {
  width: 100%;
  max-width: 400px;
}

.auth-heading {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-heading);
  margin: 0 0 var(--space-xs);
}

.auth-subheading {
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-xl);
}

.auth-description {
  font-size: var(--text-body-sm);
  color: var(--color-text);
  line-height: var(--line-height-relaxed);
  margin: 0 0 var(--space-lg);
}
.auth-description strong { color: var(--color-heading); }

.auth-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--color-primary-light);
  color: var(--color-primary-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: var(--space-md);
}

/* ── Mensagens ───────────────────────────────────────────────────────────── */

.auth-messages { margin-bottom: var(--space-md); }

.auth-alert {
  background: var(--color-danger-bg);
  border: 1px solid #F6C6CD;
  color: var(--color-danger-ink);
  border-radius: 8px;
  padding: 10px 13px;
  font-size: var(--text-label);
  margin-bottom: var(--space-sm);
}

.auth-alert--success {
  background: var(--color-success-bg);
  border-color: #B9E7D4;
  color: var(--color-success-ink);
}

.form-non-field-errors {
  background: var(--color-danger-bg);
  border: 1px solid #F6C6CD;
  color: var(--color-danger-ink);
  border-radius: 8px;
  padding: 10px 13px;
  font-size: var(--text-label);
  margin-bottom: var(--space-md);
}

/* ── Formulário ──────────────────────────────────────────────────────────── */

.form-group { margin-bottom: var(--space-md); }

.form-label {
  display: block;
  font-size: var(--text-label);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 6px;
}

.form-input {
  width: 100%;
  background: var(--color-bg-card);
  border: 1px solid var(--color-input-border);
  border-radius: 8px;
  padding: 11px 13px;
  font-size: var(--text-body-sm);
  color: var(--color-heading);
  font-family: var(--font-sans);
  box-sizing: border-box;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-input::placeholder { color: var(--color-text-subtle); }
.form-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

/* Erro não depende só de cor: ganha um marcador textual */
.form-field-error {
  display: flex;
  gap: 5px;
  font-size: var(--text-caption);
  color: var(--color-danger-ink);
  margin-top: 5px;
}
.form-field-error::before { content: '!'; font-weight: 700; }

.form-hint {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  margin-top: 5px;
}

.btn-primary {
  display: block;
  width: 100%;
  padding: 12px var(--space-lg);
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: 8px;
  font-size: var(--text-body-sm);
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  text-align: center;
  margin-top: var(--space-lg);
  transition: background var(--transition-fast);
}
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-primary:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn-primary[disabled] { opacity: 0.6; cursor: progress; }

/* ── Rodapé do cartão ────────────────────────────────────────────────────── */

.auth-footer {
  text-align: center;
  margin-top: var(--space-lg);
}

.auth-link {
  font-size: var(--text-label);
  color: var(--color-primary-ink);
  text-decoration: none;
  border-radius: var(--radius-xs);
}
.auth-link:hover { color: var(--color-primary-hover); text-decoration: underline; }
.auth-link:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* ── Responsivo ──────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .auth-page { grid-template-columns: 1fr; }

  /* No celular a marca vira uma faixa curta no topo: o formulário é o que
     importa, e ocupar meia tela com identidade atrapalharia. */
  .auth-brand {
    padding: var(--space-lg);
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
  }
  .auth-brand__pitch { display: none; }
  .auth-brand__note  { display: none; }

  .auth-panel { padding: var(--space-xl) var(--space-md) var(--space-2xl); }
}