/* Estilos compartidos de las páginas de autenticación (login, recuperar
   contraseña). Extraído de templates/login.html para no duplicar este
   bloque en cada página nueva del flujo de "olvidé mi contraseña". */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  min-height: 100vh;
  display: flex;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: #0f172a;
  overflow: hidden;
}

/* ── Panel izquierdo (decorativo) ── */
.login-brand {
  display: none;
  flex: 1;
  background: #0d9488;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 60px;
  position: relative;
  overflow: hidden;
}
@media (min-width: 900px) { .login-brand { display: flex; } }

.login-brand::before {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  top: -120px; right: -120px;
}
.login-brand::after {
  content: '';
  position: absolute;
  width: 350px; height: 350px;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  bottom: -80px; left: -80px;
}

.brand-icon {
  width: 90px; height: 90px;
  /* Cuadrado redondeado, no un círculo perfecto: un círculo recorta las
     esquinas de cualquier logo que no sea también circular. Con esquinas
     redondeadas + object-fit:contain en el <img>, el logo siempre se ve
     completo sin importar su forma (cuadrado, rectangular, etc). */
  border-radius: 22px;
  background: rgba(255,255,255,.15);
  border: 2px solid rgba(255,255,255,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.8rem; color: #fff;
  margin-bottom: 28px;
  position: relative; z-index: 1;
  overflow: hidden;
}
/* Cuando hay un logo real (no el ícono de respaldo), fondo blanco sólido:
   se ve limpio con cualquier logo, incluidos los que tienen fondo
   transparente o colores claros que se perderían sobre el panel teal. */
.brand-icon.has-logo {
  background: #fff;
  border-color: rgba(255,255,255,.5);
}
.brand-icon img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 12px;
}
.brand-title {
  font-size: 1.8rem; font-weight: 800; color: #fff;
  text-align: center; line-height: 1.3;
  position: relative; z-index: 1;
}
.brand-sub {
  font-size: .95rem; color: rgba(255,255,255,.65);
  margin-top: 10px; text-align: center;
  position: relative; z-index: 1;
}
.brand-badge {
  margin-top: 40px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 30px;
  padding: 8px 20px;
  font-size: .78rem; color: rgba(255,255,255,.8);
  display: flex; align-items: center; gap: 8px;
  position: relative; z-index: 1;
}

/* ── Panel derecho (formulario) ── */
.login-panel {
  flex: 0 0 420px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 44px;
  overflow-y: auto;
}
@media (max-width: 899px) {
  .login-panel { flex: 1; padding: 36px 24px; }
}

.login-form-wrap { width: 100%; max-width: 340px; }

/* Header del form */
.lf-logo {
  display: flex; align-items: center; gap: 14px; margin-bottom: 36px;
}
.lf-logo-icon {
  width: 48px; height: 48px; border-radius: 14px;
  background: #0d9488;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: #fff;
  box-shadow: 0 4px 14px rgba(13,148,136,.35);
  overflow: hidden;
  flex-shrink: 0;
}
.lf-logo-icon.has-logo {
  background: #fff;
  box-shadow: 0 4px 14px rgba(15,23,42,.12);
  border: 1px solid #e2e8f0;
}
.lf-logo-icon img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 5px;
}
.lf-logo-text h1 { font-size: 1.1rem; font-weight: 800; color: #0f172a; }
.lf-logo-text p  { font-size: .72rem; color: #64748b; margin-top: 1px; }

.lf-heading { font-size: 1.5rem; font-weight: 800; color: #0f172a; margin-bottom: 6px; }
.lf-sub { font-size: .85rem; color: #64748b; margin-bottom: 30px; }

/* Campos */
.field-group { margin-bottom: 20px; }
.field-label {
  display: block; font-size: .78rem; font-weight: 700;
  color: #374151; margin-bottom: 7px; letter-spacing: .01em;
}
.field-input-wrap { position: relative; }
.field-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: #94a3b8; font-size: 1rem; pointer-events: none;
}
.field-input {
  width: 100%; padding: 11px 14px 11px 42px;
  border: 1.5px solid #e2e8f0; border-radius: 10px;
  font-size: .9rem; color: #0f172a; background: #f8fafc;
  outline: none; transition: border-color .2s, box-shadow .2s, background .2s;
}
.field-input:focus {
  border-color: #0d9488;
  box-shadow: 0 0 0 3px rgba(13,148,136,.12);
  background: #fff;
}
.field-input.is-invalid { border-color: #ef4444; background: #fff5f5; }
.field-input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(239,68,68,.12); }

/* Toggle contraseña */
.field-toggle {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: #94a3b8; cursor: pointer;
  font-size: .95rem; padding: 4px; line-height: 1;
  transition: color .15s;
}
.field-toggle:hover { color: #0d9488; }

/* Error alert */
.alert-error {
  background: #fef2f2; border: 1.5px solid #fecaca;
  border-radius: 10px; padding: 12px 16px;
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 22px; animation: shakeIn .35s ease;
}
.alert-error .ae-icon {
  color: #ef4444; font-size: 1.1rem; flex-shrink: 0; margin-top: 1px;
}
.alert-error .ae-text { font-size: .83rem; color: #7f1d1d; line-height: 1.5; }
.alert-error .ae-title { font-weight: 700; color: #dc2626; font-size: .85rem; }

/* Success alert (reutiliza el mismo patrón visual que alert-error) */
.alert-success {
  background: #f0fdf4; border: 1.5px solid #bbf7d0;
  border-radius: 10px; padding: 12px 16px;
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 22px; animation: shakeIn .35s ease;
}
.alert-success .ae-icon { color: #16a34a; font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.alert-success .ae-text { font-size: .83rem; color: #14532d; line-height: 1.5; }
.alert-success .ae-title { font-weight: 700; color: #15803d; font-size: .85rem; }

@keyframes shakeIn {
  0%  { opacity:0; transform: translateX(-8px); }
  60% { transform: translateX(4px); }
  100%{ opacity:1; transform: translateX(0); }
}

/* Btn */
.btn-login {
  width: 100%; padding: 12px;
  background: #0d9488;
  color: #fff; border: none; border-radius: 10px;
  font-size: .92rem; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .18s, transform .15s;
  box-shadow: 0 4px 14px rgba(13,148,136,.3);
  margin-top: 6px;
  text-decoration: none;
}
.btn-login:hover  { background: #0f766e; transform: translateY(-1px); }
.btn-login:active { background: #0d9488; transform: translateY(0); }

/* Link secundario (ej. "¿Olvidaste tu contraseña?", "Volver a iniciar sesión") */
.lf-link-row { text-align: center; margin-top: 16px; }
.lf-link {
  font-size: .82rem; color: #0d9488; font-weight: 600;
  text-decoration: none;
}
.lf-link:hover { text-decoration: underline; }
.lf-forgot { text-align: right; margin-top: -12px; margin-bottom: 20px; }
.lf-forgot .lf-link { font-size: .78rem; }

/* Footer */
.lf-footer {
  margin-top: 32px; text-align: center;
  font-size: .72rem; color: #94a3b8;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.lf-disclaimer {
  margin-top: 6px; text-align: center;
  font-size: .68rem; color: #b0b8c4; line-height: 1.4;
}