/* =====================================================================
   Paleta pastel "de oficina" para las pantallas de autenticación:
   login, alta de usuario, verificación de correo, olvidé/restablecer
   contraseña y reenvío de verificación.

   Este archivo es SOLO estética (colores, tipografía, sombras, radios).
   No define estructura nueva ni reemplaza clases de Bootstrap - solo las
   retoca. No debe requerir cambios en los <form>, ids ni JS existentes.
   ===================================================================== */

:root {
  --auth-bg-start: #eef1f4;
  --auth-bg-end: #e7ecef;
  --auth-card-bg: #ffffff;
  --auth-primary: #8fb3c9;      /* azul grisáceo pastel */
  --auth-primary-dark: #6d93aa;
  --auth-accent: #b7cdb8;       /* verde salvia pastel */
  --auth-text: #3f4750;
  --auth-muted: #7a8590;
  --auth-border: #dde3e8;
  --auth-danger-bg: #fbe6e8;
  --auth-danger-text: #9c4a56;
  --auth-danger-border: #f3c8cd;
  --auth-success-bg: #e7f2ea;
  --auth-success-text: #3f7a58;
  --auth-success-border: #cbe3d2;
  --auth-radius: 16px;
}

/* --- Fondo y tipografía general de las páginas de autenticación --- */

body.auth-page {
  background: linear-gradient(160deg, var(--auth-bg-start), var(--auth-bg-end)) !important;
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  color: var(--auth-text);
}

/* --- La "tarjeta" visual: .container (login/forgot/reset-password) y
   .containers (new_user.php) son, hoy, el único recuadro blanco de cada
   página. Se les da la misma identidad visual. --- */

body.auth-page .container,
body.auth-page .containers {
  background-color: var(--auth-card-bg) !important;
  border-radius: var(--auth-radius) !important;
  box-shadow: 0 14px 34px rgba(63, 71, 80, 0.10), 0 2px 8px rgba(63, 71, 80, 0.05);
  border: 1px solid var(--auth-border);
  padding: 34px 30px !important;
  max-width: 460px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* .containers (new_user.php) vive DENTRO de .container.auth-plain, así
   que además de max-width necesita su propio auto-centrado horizontal
   (a diferencia de .container, que Bootstrap ya centra por su cuenta). */
body.auth-page .container.auth-plain .containers {
  margin-top: 24px !important;
  float: none;
}

/* En new_user.php el recuadro real es .containers; el .container que lo
   envuelve es solo la grilla de Bootstrap y debe quedar transparente
   para no verse como una tarjeta dentro de otra tarjeta. Se marca con
   la clase auth-plain (agregada solo a ese div contenedor). */
body.auth-page .container.auth-plain {
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  max-width: none;
}

/* --- Encabezado de marca (logo + nombre), decorativo, sin formularios --- */

body.auth-page .auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}
body.auth-page .auth-brand-badge {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  box-shadow: 0 4px 10px rgba(111, 147, 170, 0.25);
  border: 1px solid var(--auth-border);
  flex-shrink: 0;
}
body.auth-page .auth-brand-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
body.auth-page .auth-brand-text {
  text-align: left;
}
body.auth-page .auth-brand-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--auth-text);
  line-height: 1.15;
}
body.auth-page .auth-brand-tag {
  font-size: 0.7rem;
  color: var(--auth-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* --- Tipografía general dentro de la tarjeta --- */

body.auth-page h1,
body.auth-page h2 {
  color: var(--auth-text);
  font-weight: 600;
}
body.auth-page p {
  color: var(--auth-text);
}
body.auth-page .text-muted {
  color: var(--auth-muted) !important;
}
body.auth-page label {
  color: var(--auth-text);
  font-weight: 500;
  font-size: 0.9rem;
}

/* --- Campos e inputs --- */

/* Compatibilidad Bootstrap 4→5: estas páginas siguen usando .form-group
   (login.php, new_user.php, reset-password.php, forgot-password.php) para
   separar los campos, pero Bootstrap 5 ya no define esa clase (la reemplazó
   por utilidades .mb-3 en el HTML). Sin esto, al unificar todas las páginas
   en Bootstrap 5 los campos quedarían pegados entre sí. */
body.auth-page .form-group {
  margin-bottom: 1rem;
}

body.auth-page .form-control {
  border: 1px solid var(--auth-border);
  border-radius: 10px;
  padding: 10px 14px;
  background-color: #fbfcfd;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body.auth-page .form-control:focus {
  border-color: var(--auth-primary);
  box-shadow: 0 0 0 3px rgba(143, 179, 201, 0.25);
  background-color: #fff;
}

body.auth-page .form-check-input:checked {
  background-color: var(--auth-primary);
  border-color: var(--auth-primary);
}

/* --- Botones --- */

body.auth-page .btn-primary {
  background-color: var(--auth-primary) !important;
  border-color: var(--auth-primary) !important;
  border-radius: 10px;
  padding: 10px 18px;
  font-weight: 600;
  box-shadow: 0 4px 10px rgba(111, 147, 170, 0.25);
  transition: background-color .15s ease, box-shadow .15s ease;
}
body.auth-page .btn-primary:hover,
body.auth-page .btn-primary:focus {
  background-color: var(--auth-primary-dark) !important;
  border-color: var(--auth-primary-dark) !important;
  box-shadow: 0 6px 14px rgba(109, 147, 170, 0.32);
}
body.auth-page .btn-primary:disabled {
  background-color: var(--auth-border) !important;
  border-color: var(--auth-border) !important;
  color: var(--auth-muted);
  box-shadow: none;
}

body.auth-page a {
  color: var(--auth-primary-dark);
}
body.auth-page a:hover {
  color: var(--auth-text);
}
body.auth-page a.btn {
  background-color: var(--auth-primary) !important;
  border-radius: 10px;
  color: #fff;
}
body.auth-page a.btn:hover {
  background-color: var(--auth-primary-dark) !important;
}

/* --- Alertas / mensajes de feedback --- */

body.auth-page .alert-danger {
  background-color: var(--auth-danger-bg) !important;
  color: var(--auth-danger-text) !important;
  border: 1px solid var(--auth-danger-border) !important;
  border-radius: 10px;
}
body.auth-page .alert-success {
  background-color: var(--auth-success-bg) !important;
  color: var(--auth-success-text) !important;
  border: 1px solid var(--auth-success-border) !important;
  border-radius: 10px;
}

/* --- Checador de fuerza de contraseña (password-strength.js/.css) ---
   Los colores del relleno de la barra los pone el JS por su cuenta
   (rojo/naranja/amarillo/verde "de semáforo"); en vez de tocar ese
   script, se suaviza el tono con un filtro CSS para que combine con
   la paleta pastel sin perder la señal de rojo=débil, verde=fuerte. */
body.auth-page .password-strength-fill {
  filter: saturate(55%) brightness(1.12);
}
body.auth-page .password-strength-bar {
  background: #eef1f3;
}
body.auth-page .password-checklist li.ok {
  color: var(--auth-success-text);
}
body.auth-page .password-checklist .req {
  color: #b06a72;
}
body.auth-page .password-checklist li.ok .req {
  color: var(--auth-success-text);
}
body.auth-page .password-checklist .rec {
  color: var(--auth-muted);
}
body.auth-page .password-match-label.ok {
  color: var(--auth-success-text);
}
body.auth-page .password-match-label.bad {
  color: var(--auth-danger-text);
}

/* --- Páginas de una sola caja (confirmaremail.php, resend.php) --- */

body.auth-page .box {
  background-color: var(--auth-card-bg) !important;
  border-radius: var(--auth-radius) !important;
  box-shadow: 0 14px 34px rgba(63, 71, 80, 0.10), 0 2px 8px rgba(63, 71, 80, 0.05);
  border: 1px solid var(--auth-border);
  max-width: 460px;
}
body.auth-page .box .ok {
  color: var(--auth-success-text) !important;
}
body.auth-page .box .err {
  color: var(--auth-danger-text) !important;
}