/* ===================================================================
   AUTH.CSS
   Pantallas sueltas con un formulario o un mensaje corto:
   registro, recuperar contraseña, contacto.
   =================================================================== */

.auth-page{
  max-width: 440px;
  margin: 0 auto;
  padding: 44px 20px 56px;
}

/* Variante ancha para el formulario de contacto (texto largo + adjuntos). */
.auth-page-wide{
  max-width: 600px;
}

@media (min-width: 768px){
  .auth-page{
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 40px;
    margin: 40px auto 56px;
    box-shadow: 0 8px 30px -14px var(--shadow-color);
  }
}

.auth-page .eyebrow{
  margin-bottom: 6px;
}

.auth-page h1{
  font-size: 25px;
  margin: 0 0 12px;
}

.auth-intro{
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-faint);
  margin-bottom: 24px;
}

.auth-page .btn-forge{
  margin-top: 8px;
}

.auth-foot{
  font-size: 13px;
  color: var(--ink-faint);
  margin-top: 18px;
}

.auth-foot a{
  color: var(--ember);
}

/* Páginas de solo mensaje ("revisa tu correo", "contraseña actualizada"). */
.auth-page-message .auth-intro{
  margin-bottom: 20px;
}