/* Fondo general */
.login-body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f6f8; /* fallback claro */
}

/* Video siempre detrás */
.video-background{
  position: fixed;
  inset: 0;
  z-index: -1; /* detrás */
  overflow: hidden;
  /* RUTA CORREGIDA: debe apuntar a img/poster.jpg */
  background: #101114 url('img/poster.jpg') center/cover no-repeat;
}
.video-background video{
  position: absolute;
  top: 50%; left: 50%;
  min-width: 100%; min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
}
.video-background .video-overlay{
  position: absolute; inset: 0;
  background: rgba(0,0,0,.35);
}

/* Contenido */
.auth-wrapper{
  position: relative;
  z-index: 1;
  flex: 1;
  display: grid;
  place-items: center;
  padding: 24px;
}

/* Formulario con fondo rojo claro detrás */
.auth-card{
  width: min(460px, 100%);
  background: #fff;
  position: relative;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 10px 40px rgba(0,0,0,.1);
}
.auth-card::before{
  content:"";
  position: absolute;
  inset: -20px;
  background: #fce4e4; /* rojo claro */
  border-radius: 20px;
  z-index: -1;
}

.auth-head{ 
  text-align: center; 
  margin-bottom: 16px; 
  /* CENTRADO DEL LOGO: Añadido flexbox para centrar elementos internos si es necesario */
  display: flex; 
  flex-direction: column;
  align-items: center; /* Centra horizontalmente el logo */
}
.auth-logo{ width: 80px; height: 80px; margin-bottom: 8px; border-radius: 50%;}
.auth-head h1{ margin: 0 0 6px; font-size: 26px; }
.auth-subtitle{ margin: 0 0 6px; color: #6b7280; font-size: 14px; }

/* Inputs */
.form-group{ margin-bottom: 14px; }
.form-group label{ display:block; margin-bottom:6px; font-weight:600; font-size:14px; }
.form-group input{
  width: 100%; padding: 12px 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 16px;
}
.form-group input:focus-visible{
  outline: none; border-color:#F01C24;
  box-shadow: 0 0 0 3px rgba(240,28,36,.2);
}
.form-group.is-invalid input{ border-color:#ef4444; }
.error-msg{ display:none; color:#b91c1c; font-size:13px; margin-top:4px; }
.form-group.is-invalid .error-msg{ display:block; }

/* Password con ojo */
.password-field{ position: relative; }
.password-field input{ padding-right: 42px; }
.btn-eye{
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; cursor: pointer; font-size: 18px;
}

/* Botón */
.btn-enviar{
  width: 100%; padding: 12px 18px;
  border: none; border-radius: 999px;
  background:#e73e0f; color:#fff;
  font-size: 16px; font-weight:700;
  cursor:pointer;
}
.btn-enviar:hover{ background:#F01C24; }

/* Nota */
.auth-note{ text-align:center; font-size:14px; margin-top: 12px; }

/* Links */
.auth-link{ color:#F01C24; text-decoration:none; }
.auth-link:hover{ text-decoration:underline; }

/* Fila recordarme */
.auth-row{ display:flex; justify-content:space-between; align-items:center; margin:10px 0 16px; }
.chk{ display:flex; align-items:center; gap:6px; font-size:14px; }

/* ================= DARK MODE OVERRIDES PARA LOGIN (Añadido) ================= */

body.dark-mode .login-body {
  background: var(--bg, #121212) !important;
}

body.dark-mode .auth-card {
  /* Fondo principal de la tarjeta */
  background: var(--card, #1e1e1e) !important;
  box-shadow: 0 10px 40px rgba(0,0,0,.5) !important;
}

body.dark-mode .auth-card::before {
  /* Fondo del borde exterior (rojo claro) */
  background: #550000 !important; /* Rojo oscuro para contraste */
}

body.dark-mode .auth-head h1 {
  /* Título principal */
  color: var(--title, #ffffff) !important;
}

body.dark-mode .auth-subtitle {
  /* Subtítulo de paciencia */
  color: var(--muted, #a0a0a0) !important;
}

/* ================= FIN DARK MODE OVERRIDES ================= */


/* ================= LOGIN RESPONSIVE (MOBILE/TABLET) ================= */

/* Un poco más de contraste del video en móvil para legibilidad */
@media (max-width: 880px){
  .video-background .video-overlay{
    background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55));
  }
}

/* Layout general */
@media (max-width: 880px){
  .login-body{
    padding-bottom: env(safe-area-inset-bottom);
  }
  .auth-wrapper{
    min-height: calc(100dvh - var(--header-h, 64px));
    place-items: start;                 /* arranca arriba */
    padding: clamp(14px, 4vw, 24px);
  }
  .auth-card{
    width: min(520px, 92vw);
    padding: clamp(16px, 4vw, 22px);
    border-radius: 14px;
  }
  .auth-card::before{
    inset: clamp(-12px, -2vw, -18px);
    border-radius: 18px;
  }

  /* Cabecera de la card */
  .auth-logo{ width: 64px; height: 64px; }
  .auth-head h1{
    font-size: clamp(20px, 5vw, 26px);
    line-height: 1.25;
  }
  .auth-subtitle{ font-size: 13px; }

  /* Inputs y botón */
  .form-group{ margin-bottom: 12px; }
  .form-group input{ font-size: 16px; padding: 12px 14px; }
  .btn-enviar{
    height: 44px;
    padding: 0 18px;
    font-size: 15.5px;
    border-radius: 999px;
  }

  /* “Recordarme” y links: en columna para que no se amontonen */
  .auth-row{
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* Ajuste fino para teléfonos angostos */
@media (max-width: 420px){
  .auth-card{
    width: 94vw;
    padding: 14px;
    border-radius: 12px;
  }
  .auth-card::before{
    inset: -10px;
    border-radius: 16px;
  }
  .auth-head h1{ font-size: clamp(18px, 5.2vw, 22px); }
  .btn-enviar{ height: 44px; font-size: 15px; }
}