/* =====================================================
   18. LOGIN PAGE — modernizado, theme dark gris/zinc
   Aplica sobre la estructura base de AdminLTE:
   body.login-page > main.login-box > .login-logo + .card.login-card-body
   Requiere las variables --zinc-* ya definidas en el archivo
   principal (theme-dark-gris.css). Si lo usás suelto, agregá
   el bloque de variables del final.
   ===================================================== */

/* Fondo de toda la página: degradé sutil en vez de plano */
body.login-page {
  background: radial-gradient(circle at 20% 20%, #27272a 0%, #18181b 55%, #0f0f11 100%) !important;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-box {
  width: 100%;
  max-width: 400px;
  padding: 1rem;
}

/* Logo/título arriba de la card */
.login-logo {
  text-align: center;
  margin-bottom: 1.5rem;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.login-logo a {
  color: var(--zinc-100, #f4f4f5) !important;
  text-decoration: none;
}
.login-logo a b {
  color: var(--zinc-400, #a1a1aa);
  font-weight: 800;
}

/* Card principal: efecto "glass" oscuro con borde sutil */
.login-page .card {
  background-color: rgba(39, 39, 42, 0.85) !important; /* zinc-800 semitransparente */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(63, 63, 70, 0.6) !important;
  border-radius: 1rem !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
}

.login-card-body {
  padding: 2rem 1.75rem !important;
}

.login-box-msg {
  text-align: center;
  color: var(--zinc-400, #a1a1aa) !important;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
}

/* Inputs: mismo estilo que el resto de la app, más altos para look "premium" */
.login-page .form-control {
  background-color: rgba(15, 15, 17, 0.6) !important;
  border: 1px solid var(--zinc-700, #3f3f46) !important;
  border-radius: 0.6rem !important;
  color: #e4e4e7 !important;
  padding: 0.7rem 1rem;
  height: auto;
}
.login-page .form-control::placeholder {
  color: var(--zinc-500, #71717a) !important;
}
.login-page .form-control:focus {
  background-color: rgba(15, 15, 17, 0.8) !important;
  border-color: var(--zinc-500, #71717a) !important;
  box-shadow: 0 0 0 3px rgba(113, 113, 122, 0.2) !important;
}

/* input-group: el ícono a la derecha del email/password */
.login-page .input-group {
  margin-bottom: 1rem !important;
}
.login-page .input-group .form-control {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: none !important;
}
.login-page .input-group-text {
  background-color: rgba(15, 15, 17, 0.6) !important;
  border: 1px solid var(--zinc-700, #3f3f46) !important;
  border-left: none !important;
  border-top-right-radius: 0.6rem !important;
  border-bottom-right-radius: 0.6rem !important;
  color: var(--zinc-400, #a1a1aa) !important;
}
.login-page .input-group:focus-within .form-control,
.login-page .input-group:focus-within .input-group-text {
  border-color: var(--zinc-500, #71717a) !important;
}

/* Checkbox "Remember me" */
.login-page .form-check-label {
  color: var(--zinc-400, #a1a1aa) !important;
  font-size: 0.875rem;
}
.login-page .form-check-input {
  background-color: rgba(15, 15, 17, 0.6);
  border-color: var(--zinc-600, #52525b);
}
.login-page .form-check-input:checked {
  background-color: var(--zinc-500, #71717a);
  border-color: var(--zinc-500, #71717a);
}

/* Botón de ingresar: gradiente zinc consistente con el resto de la app */
.login-page .btn-primary {
  background: linear-gradient(135deg, #71717a 0%, #3f3f46 100%) !important;
  border: none !important;
  border-radius: 0.6rem !important;
  font-weight: 600;
  padding: 0.6rem 1rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.login-page .btn-primary:hover {
  background: linear-gradient(135deg, #a1a1aa 0%, #52525b 100%) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5) !important;
  transform: translateY(-1px);
}

/* Separador "- OR -" y botones sociales */
.login-page .social-auth-links p {
  color: var(--zinc-500, #71717a);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  position: relative;
  margin: 1.25rem 0;
}
.login-page .social-auth-links p::before,
.login-page .social-auth-links p::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 35%;
  height: 1px;
  background: var(--zinc-700, #3f3f46);
}
.login-page .social-auth-links p::before { left: 0; }
.login-page .social-auth-links p::after { right: 0; }

.login-page .social-auth-links .btn {
  border-radius: 0.6rem !important;
  font-weight: 500;
  border: 1px solid var(--zinc-700, #3f3f46) !important;
  background: rgba(15, 15, 17, 0.5) !important;
  color: var(--zinc-300, #d4d4d8) !important;
  box-shadow: none !important;
}
.login-page .social-auth-links .btn:hover {
  background: var(--zinc-800, #27272a) !important;
  border-color: var(--zinc-600, #52525b) !important;
}

/* Links inferiores (olvidé mi contraseña / registrarse) */
.login-page p a {
  color: var(--zinc-400, #a1a1aa) !important;
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.15s ease;
}
.login-page p a:hover {
  color: var(--zinc-100, #f4f4f5) !important;
  text-decoration: underline;
}

/* ===== Variables de respaldo por si este archivo se usa suelto,
   sin el theme-dark-gris.css principal cargado ===== */
:root {
  --zinc-900: #18181b;
  --zinc-800: #27272a;
  --zinc-700: #3f3f46;
  --zinc-600: #52525b;
  --zinc-500: #71717a;
  --zinc-400: #a1a1aa;
  --zinc-300: #d4d4d8;
  --zinc-100: #f4f4f5;
}

/* =====================================================
   16. SWEETALERT2
   Las reglas de swal2 se movieron a sweet-alert-css-style.css
   (única fuente ahora, la carga login.php/loginsecondfactor.php
   además de layout.php) — acá había una copia pegada que se
   podía desincronizar en silencio.
   ===================================================== */

.login-page .form-check {
  display: flex;
  align-items: center;
  justify-content: center;   /* centra el bloque checkbox + label */
  gap: 0.5rem;
  padding-left: 0;
  margin-bottom: 1.25rem !important;  /* separación del botón de abajo */
}

.login-page .form-check-input {
  width: 1.2em;
  height: 1.2em;
  margin: 0;
  flex-shrink: 0;             /* evita que el checkbox se achique si el label es largo */
  background-color: rgba(15, 15, 17, 0.6);
  border: 1.5px solid var(--zinc-600, #52525b);
  border-radius: 0.3em !important;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.login-page .form-check-input:hover {
  border-color: var(--zinc-400, #a1a1aa);
}

.login-page .form-check-input:checked {
  background-color: var(--zinc-500, #71717a);
  border-color: var(--zinc-500, #71717a);
}

.login-page .form-check-input:focus {
  border-color: var(--zinc-500, #71717a);
  box-shadow: 0 0 0 3px rgba(113, 113, 122, 0.25);
}

.login-page .form-check-label {
  color: var(--zinc-300, #d4d4d8) !important;
  font-size: 0.9rem;
  cursor: pointer;
  user-select: none;
}