/* ============================================================================
   AUTH.CSS — Entrar, crear cuenta y recuperar contraseña
   ============================================================================
   Estas cuatro pantallas (login, registro, cambiar contraseña y recuperar
   contraseña) son la puerta entre la web pública y el portal interno. Antes
   iban en oscuro con tipografía propia, así que quien venía de la web sentía
   que había aterrizado en otro sitio. Ahora usan el mismo sistema de diseño
   que el portal: mismos tokens, misma tipografía, mismo coral.

   IMPORTANTE — no se tocó NADA del marcado de esas páginas. Se conservan sus
   nombres de clase originales (.login-card, .btn-login, .form-group…) y aquí
   se les da la piel nueva. Los formularios llevan CSRF, honeypots y campos que
   el PHP lee por `name`: reescribir el HTML era arriesgar el funcionamiento
   para no ganar nada.

   Requiere tokens.css y base.css cargados antes.

   Índice:
     1. Lienzo y tarjeta
     2. Cabecera (logo, títulos)
     3. Campos
     4. Contraseña con ojo
     5. Casilla «mantener sesión»
     6. Botones
     7. Avisos (error, éxito, info)
     8. Enlaces secundarios
     9. Piezas propias de recuperar contraseña (pasos y código)
     10. Piezas propias de registro (estados, género, rejilla)
   ========================================================================== */


/* ============================================================================
   1. LIENZO Y TARJETA
   ========================================================================== */

body {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5) var(--space-4);
  /* Un halo coral muy tenue detrás de la tarjeta: da profundidad sin recurrir
     a una sombra dura, que en este sistema plano cantaría. */
  background:
    radial-gradient(70% 55% at 50% 0%, var(--blueberry-100), transparent 70%),
    var(--color-bg);
}

.login-card,
.reg-card {
  width: 100%;
  max-width: 27rem;
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--oat-300) 60%, transparent);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-7) var(--space-6);
}

/* El registro pide bastantes más datos. */
.reg-card { max-width: 34rem; }

@media (max-width: 30rem) {
  .login-card,
  .reg-card { padding: var(--space-6) var(--space-5); }
}


/* ============================================================================
   2. CABECERA
   ========================================================================== */

.logo-area {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
}
.logo-area img {
  width: auto;
  height: 3rem;
  max-width: 100%;
}
/* change_password y forgot_password no ponen logo sino un icono suelto. */
.logo-area > i {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-size: 1.3rem;
}

.login-card h2,
.reg-card h2 {
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-align: center;
  margin-bottom: var(--space-2);
}

.login-card > p,
.reg-card > p,
.subtitle {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}


/* ============================================================================
   3. CAMPOS
   ========================================================================== */

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: var(--space-4);
}

.form-group label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="tel"],
.form-group input[type="date"],
.form-group select,
.date-picker-btn {
  width: 100%;
  font: inherit;
  font-size: var(--text-md);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.7rem 0.9rem;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

.form-group input::placeholder { color: var(--color-text-muted); opacity: 0.7; }

.form-group input:focus,
.form-group select:focus,
.date-picker-btn:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

/* Marca de campo obligatorio del registro. */
.req { color: var(--color-accent); }
.hint { font-size: var(--text-xs); color: var(--color-text-muted); }


/* ============================================================================
   4. CONTRASEÑA CON OJO
   ========================================================================== */

.password-wrapper { position: relative; display: flex; align-items: center; }
.password-wrapper input { padding-right: 2.9rem !important; }

.password-toggle {
  position: absolute;
  right: 0.35rem;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.password-toggle:hover { color: var(--color-text); background: var(--color-bg-subtle); }


/* ============================================================================
   5. CASILLA «MANTENER SESIÓN»
   --------------------------------------------------------------------------
   La casilla real se oculta y se dibuja .checkbox-custom en su lugar; el
   <label> envolvente hace que el clic siga funcionando.
   ========================================================================== */

.checkbox-wrapper { margin-bottom: var(--space-5); }

.remember-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.45;
}
.remember-checkbox input { position: absolute; opacity: 0; width: 0; height: 0; }

.checkbox-custom {
  flex: none;
  position: relative;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.remember-checkbox input:checked + .checkbox-custom {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.remember-checkbox input:checked + .checkbox-custom::after {
  content: '';
  position: absolute;
  left: 0.35rem;
  top: 0.12rem;
  width: 0.3rem;
  height: 0.6rem;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
/* El foco tiene que verse: la casilla real es invisible. */
.remember-checkbox input:focus-visible + .checkbox-custom {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}


/* ============================================================================
   6. BOTONES
   ========================================================================== */

.btn-login,
.btn-submit,
.btn-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: 0.8em 1.2em;
  font: inherit;
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--btn-radius);
  background: var(--color-text);
  color: var(--color-bg);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-spring),
              box-shadow var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
.btn-login:hover,
.btn-submit:hover,
.btn-link:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-login:active,
.btn-submit:active { transform: translateY(0); }
.btn-login:disabled,
.btn-submit:disabled { opacity: 0.55; cursor: default; transform: none; }


/* ============================================================================
   7. AVISOS
   ========================================================================== */

.error-msg,
.success-msg,
.info-msg,
.info-box,
.alert {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: var(--text-sm);
  line-height: 1.5;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  margin-bottom: var(--space-4);
}

.error-msg,
.alert-error {
  color: var(--blueberry-400);
  background: var(--blueberry-100);
  border-color: var(--blueberry-200);
}
.success-msg {
  color: var(--lime-400);
  background: var(--lime-100);
  border-color: var(--lime-200);
}
.info-msg,
.info-box {
  color: var(--slushie-500);
  background: var(--slushie-100);
  border-color: var(--slushie-200);
}


/* ============================================================================
   8. ENLACES SECUNDARIOS
   ========================================================================== */

.forgot-password-link,
.back-link,
.login-link {
  display: block;
  margin-top: var(--space-4);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-accent);
}
.forgot-password-link:hover,
.back-link:hover,
.login-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Volver a la web pública: es una salida, no la acción principal. */
.external-portal-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: var(--space-5);
  padding: 0.7rem 1rem;
  font-size: var(--text-sm);
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--btn-radius);
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.external-portal-link:hover {
  background: var(--color-bg-subtle);
  border-color: var(--color-border-strong);
}


/* ============================================================================
   9. RECUPERAR CONTRASEÑA — pasos y código
   ========================================================================== */

.step-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-bottom: var(--space-4);
}
.step-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-border);
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.step-dot.done   { background: var(--color-success); }
.step-dot.active { background: var(--color-accent); transform: scale(1.35); }

.otp-row {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: var(--space-5);
}
.otp-box {
  width: 2.9rem;
  height: 3.4rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 1.4rem;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.otp-box:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}
@media (max-width: 26rem) {
  .otp-row { gap: 0.35rem; }
  .otp-box { width: 2.4rem; height: 3rem; font-size: 1.2rem; }
}


/* ============================================================================
   10. REGISTRO — estados, género, rejilla
   ========================================================================== */

/* Pantallas de «enlace no válido» y «cuenta creada». */
.state { text-align: center; }
.state p { color: var(--color-text-muted); font-size: var(--text-sm); margin-bottom: var(--space-5); }

.ico {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto var(--space-4);
  border-radius: var(--radius-pill);
  font-size: 1.5rem;
}
.ico.ok  { background: var(--lime-100);      color: var(--color-success); }
.ico.bad { background: var(--blueberry-100); color: var(--color-accent); }

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-4);
}
@media (max-width: 32rem) {
  .grid { grid-template-columns: minmax(0, 1fr); }
}

/* Selector de género: dos botones que se comportan como un grupo de radio. */
.gender-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}
.gender-opt {
  padding: 0.65rem 0.5rem;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.gender-opt:hover { border-color: var(--color-border-strong); color: var(--color-text); }
.gender-opt.active {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  color: var(--color-accent);
  font-weight: var(--weight-medium);
}

/* Trampa anti-bot: tiene que existir en el DOM pero no verse ni tabularse. */
.honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.date-picker-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  cursor: pointer;
}
.date-picker-btn-text { color: var(--color-text); }