/**
 * auth.css — páginas de acceso (login y recuperación de contraseña).
 *
 * Complementa a nueva.css; NO la reemplaza. Se carga después.
 *
 * Todo lo que ya existía se reutiliza tal cual: .container, .site-header,
 * .site-footer, .field, .btn, .msg, .sr-only, .skip-link y las variables de
 * :root. Acá solo está el armazón que la portada no necesitaba: una página
 * centrada verticalmente con la tarjeta de acceso al medio.
 *
 * Vive aparte de nueva.css a propósito. DHT-18 dejó la portada nueva aislada
 * para que tocarla no pudiera romper nada en producción; si el login empezara
 * a editar nueva.css esa garantía se pierde en las dos direcciones.
 */

/*--------------------------------------------------------------
# Armazón de página
--------------------------------------------------------------*/

/* Pie abajo aunque el contenido sea corto, y tarjeta centrada en el resto. */
.auth-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.auth-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: clamp(2rem, 6vw, 4rem);
}

/* La cabecera es sticky en la portada, donde hay scroll. Acá no lo hay y
   quedarse pegada solo estorba en pantallas bajas. */
.auth-page .site-header { position: static; }

/*--------------------------------------------------------------
# Tarjeta
--------------------------------------------------------------*/
/* El margen automático es lo que la centra. .auth-main centra al .container,
   que mide hasta --container y llega mucho más allá de estos 420 px; sin este
   margen la tarjeta se apoya en el borde izquierdo de ese contenedor y la
   página se ve descuadrada. DHT-146 */
.auth-card {
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  box-shadow: var(--shadow-sm);
}

.auth-card h1 {
  font-size: var(--step-2);
  margin-bottom: 0.35rem;
}

.auth-card .auth-intro {
  font-size: var(--step--1);
  color: var(--ink-500);
  margin-bottom: 1.75rem;
}

/* nueva.css pone margin-bottom: 0 al último .field, que allá es correcto
   porque el botón va en un .dialog-foot con su propio borde. Acá el botón
   viene justo después, así que hay que devolverle el aire. */
.auth-form .field:last-of-type { margin-bottom: 1.1rem; }

.auth-form .btn--block { margin-top: 0.5rem; }

/* El estado de término de solicitud.php no es un formulario, así que la regla
   de arriba no lo alcanza y el botón queda pegado al aviso. DHT-146 */
.auth-done .btn--block { margin-top: 1.1rem; }

/*--------------------------------------------------------------
# Recuperación de contraseña
--------------------------------------------------------------*/

/* <details> y no un modal: se abre y se envía sin una línea de JavaScript.
   El modal anterior dependía de Bootstrap, que ya no se carga. */
.auth-recover {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.auth-recover > summary {
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--primary);
  cursor: pointer;
  list-style: none;
  text-align: center;
}
.auth-recover > summary::-webkit-details-marker { display: none; }
.auth-recover > summary:hover { color: var(--primary-dark); }

.auth-recover > summary:focus-visible {
  outline: 3px solid var(--brand-magenta);
  outline-offset: 3px;
  border-radius: 4px;
}

.auth-recover[open] > summary { margin-bottom: 1.25rem; }

.auth-recover .recover-hint {
  font-size: 0.8125rem;
  color: var(--ink-500);
  margin-bottom: 1rem;
}

/*--------------------------------------------------------------
# Pie reducido
--------------------------------------------------------------*/

/* El pie de la portada reparte texto y redes a los extremos. En una página
   angosta se ve descolgado; acá va todo centrado. */
.auth-page .site-footer .container { justify-content: center; text-align: center; }

@media (max-width: 520px) {
  .auth-card { border: 0; box-shadow: none; padding-inline: 0; }
}