/* =============================
   LOGIN – ODK Analytics
   ============================= */
:root{
  --primary-color:#0061a1;
  --secondary-color:#2c5282;
  --accent-color:#0061a1;
  --text:#1f2937;
  --muted:#6b7280;
  --bg:#f5f7fb;
  --white:#ffffff;
  --shadow-lg:0 15px 35px rgba(0,0,0,.10);
  --shadow-md:0 8px 20px rgba(0,0,0,.08);
  --radius-xl:15px;
  --radius-lg:12px;
  --radius-md:10px;
}

/* Fondo */
body{
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  min-height:100vh;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color:var(--text);
}

/* Contenedor */
.login-container{
  background:var(--white);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  width:100%;
  max-width:400px;
  animation:fadeInUp .6s ease-out;
}

/* Encabezado */
.login-header{
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
  color:#fff;
  padding:2rem;
  text-align:center;
}
.login-header h2{ margin:0; font-weight:700; letter-spacing:.2px; }
.login-header .subtitle{ opacity:.95; font-size:.95rem; margin-top:.4rem; }

/* Cuerpo */
.login-body{ padding:2rem; background:#fff; }

/* Inputs */
.form-floating{ margin-bottom:1rem; }
.form-control{
  border-radius: var(--radius-md);
  border:2px solid #e2e8f0;
  transition: all .2s ease;
  box-shadow:none;
}
.form-control:focus{
  border-color: var(--accent-color);
  box-shadow: 0 0 0 .2rem rgba(66,153,225,.25);
}

/* Toggle de contraseña */
.password-toggle{
  position:absolute;
  right:14px; top:50%;
  transform:translateY(-50%);
  background:none; border:none; cursor:pointer;
  color:#6c757d;
}
.password-toggle:hover{ color:var(--primary-color); }

/* Checkbox */
.form-check{ margin:1.25rem 0; }
.form-check-input:checked{
  background-color:var(--accent-color);
  border-color:var(--accent-color);
}

/* Botón principal */
.btn-login{
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
  border:none; border-radius: var(--radius-md);
  padding:12px; font-weight:700; width:100%; color:#fff;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  box-shadow: var(--shadow-md);
}
.btn-login:hover{ transform:translateY(-2px); filter:saturate(1.05); }
.btn-login:active{ transform:translateY(0); }
.btn-login:focus{ box-shadow: 0 0 0 .2rem rgba(54,96,146,.25); outline:none; }

.loading-spinner{ display:none; }

/* Alertas */
.alert{
  border-radius: var(--radius-md);
  border:none;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
  margin-bottom:1rem;
}

/* Footer */
.footer-links{
  text-align:center;
  padding:1rem 2rem;
  background:#f8f9fa;
  border-top:1px solid #e9ecef;
}
.footer-links a{
  color:var(--primary-color); text-decoration:none; font-size:.92rem;
}
.footer-links a:hover{ color:var(--accent-color); text-decoration:underline; }

/* Animación */
@keyframes fadeInUp{
  from{ opacity:0; transform:translateY(30px); }
  to{ opacity:1; transform:translateY(0); }
}

/* Responsive */
@media (max-width:576px){
  .login-container{ margin:20px; border-radius:10px; }
  .login-header,.login-body{ padding:1.5rem; }
}

/* Accesibilidad: foco visible en enlaces y botones secundarios */
a:focus, .btn:focus, .password-toggle:focus{
  outline:2px solid rgba(66,153,225,.6);
  outline-offset:2px;
}

/* Modo oscuro del SO: mantenemos el login en tema claro para elegancia */
@media (prefers-color-scheme: dark){
  body{ background: linear-gradient(135deg, #304b6d, #1f3654); }
  .footer-links{ background:#f1f3f5; }
}