@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');

.input-icon {
  position: absolute;
  left: 15px;
  top: 72%;
  transform: translateY(-50%);
  color: #888;
  font-size: 1.2rem;
  pointer-events: none; /* evita que el icono bloquee la escritura */
}


body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  transition: all 0.6s ease;
}

/* Fondo animado */
.animated-bg {
   position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(-45deg, #004d99, #0066cc, #3399ff, #66ccff);
  background-size: 400% 400%;
  z-index: -1; /* detrás de todo el contenido */
  animation: gradientBG 15s ease infinite;
}

@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Header y Footer */
header, footer {
  text-align:center;
  padding:15px;
  backdrop-filter:blur(6px);
  transition:all 0.6s ease;
  position:relative;
}
footer {
  margin-top:auto;
  font-size:0.85rem;
  display:flex;
  justify-content:center;
  gap:1rem;
  align-items:center;
}

/* Botón tema */
.theme-toggle {
  position:absolute;
  top:15px;
  right:20px;
  border:none;
  padding:8px 12px;
  border-radius:20px;
  cursor:pointer;
  transition: all 0.4s ease;
}

/* Contenedor del login */
.login-container {
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Card de login */
.login-card {
  max-width:400px;
  width:100%;
  border-radius:12px;
  padding:2rem;
  transition: all 0.6s ease;
  animation: fadeSlide 0.8s ease;
}
@keyframes fadeSlide {
  from { opacity:0; transform: translateY(-20px);}
  to { opacity:1; transform: translateY(0);}
}
.login-card h4 {
  font-weight:bold;
  text-align:center;
  margin-bottom:1.5rem;
}

/* Inputs */
.form-control {
  transition: all 0.3s ease;
  border-radius:6px;
}
.form-control:focus {
  border-color: #007bff;
  box-shadow: 0 0 10px rgba(0,123,255,0.5);
}

/* Toggle password */
.password-wrapper { position:relative; }
.toggle-password {
  cursor:pointer;
  position:absolute;
  right:15px;
  top:38px;
  color:#999;
  transition: transform 0.2s ease;
}
.toggle-password:hover {
  transform: scale(1.2);
}

/* Caps lock */
#caps-warning {
  display:none;
  font-size:0.85rem;
  margin-top:5px;
}

/* Spinner botón */
.spinner-border {
  width:1rem;
  height:1rem;
  border-width:0.15em;
  margin-left:10px;
  display:none;
}

/* Mensajes de error */
#error-msg {
  display:none;
  animation: fadeIn 0.5s ease;
}
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
@keyframes shake {
  0%,100%{transform:translateX(0);}
  25%{transform:translateX(-5px);}
  50%{transform:translateX(5px);}
  75%{transform:translateX(-5px);}
}

/* Botón login */
.btn-login {
  font-weight:bold;
  transition: all 0.3s ease;
  border:none;
}
.btn-login:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

/* Tema claro */

body.day header, body.day footer {background:rgba(0,0,0,0.4); color:#fff;}
body.day .theme-toggle { background:#007bff; color:#fff;}
body.day .login-card { background:rgba(255,255,255,0.9); color:#000; box-shadow:0 8px 20px rgba(0,0,0,0.3);}
body.day .form-control { background:#fff; border:1px solid #ccc; color:#000;}
body.day .form-control:focus { border-color:#007bff; box-shadow:0 0 6px rgba(0,123,255,0.6);}
body.day .btn-login { background:#007bff; color:#fff;}
body.day .btn-login:hover { background:#0056b3;}
body.day #caps-warning { color:#dc3545; }

/* Tema oscuro */

body.night header, body.night footer { background: rgba(0,0,0,0.6); color:#fff;}
body.night .theme-toggle { background:#00d9ff; color:#000; font-weight:bold;}
body.night .login-card { background: rgba(20,20,20,0.9); color:#f1f1f1; border:1px solid rgba(255,255,255,0.1); box-shadow:0 8px 20px rgba(0,0,0,0.7);}
body.night .form-control { background:#1e1e1e; border:1px solid rgba(255,255,255,0.2); color:#f1f1f1;}
body.night .form-control:focus { border-color:#00d9ff; box-shadow:0 0 8px rgba(0,217,255,0.5);}
body.night .btn-login { background:#00d9ff; color:#000;}
body.night .btn-login:hover { background:#00aacc; color:#fff;}
body.night #caps-warning { color:#ff6b6b;}

/* Tema claro */ body.night .animated-bg { background: linear-gradient(-45deg,#1d2671,#c33764,#2c5364,#0f2027);
background-size: 125% 125%;}


/* Tema claro - futurista día */
body.day .animated-bg {
  background: linear-gradient(-45deg, #00f5a0, #00d9ff, #ff6ec7, #ffcc00);
  background-size: 400% 400%;
  animation: gradientBG 50s ease infinite;
}