/* Fondo animado modo claro */
body {
  background: linear-gradient(-45deg, #89f7fe, #66a6ff, #6a11cb, #2575fc); /* Gradiente multicolor inclinado */
  background-size: 400% 400%;/* Hace que el fondo tenga mayor área para animar */
  animation: gradientBG 15s ease infinite;/* Animación infinita de desplazamiento */
}
/* Definición de la animación para el fondo claro */
@keyframes gradientBG {
  0% { background-position: 0% 50%; }/* inicio: izquierda */
  50% { background-position: 100% 50%; }/* mitad: derecha */
  100% { background-position: 0% 50%; } /* final: regresa a la izquierda */
}


/*  Botón primario (modo claro)  */
.btn-primary {
  background: linear-gradient(90deg, #3b82f6, #2563eb);/* Azul degradado */
  border: none;/* Sin borde */
  color: #fff;/* Texto blanco */
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.4);/* Sombra azul suave */
  transition: all 0.3s ease;/* Transición suave */
}
/* Efecto hover en botón primario */
.btn-primary:hover {
  background: linear-gradient(90deg, #2563eb, #1d4ed8);/* Azul más oscuro */
  box-shadow: 0 0 18px rgba(37, 99, 235, 0.7);/* Brillo más fuerte */
}

/* Modo oscuro */

body.dark-mode {
  background: linear-gradient(-45deg, #0f0c29, #302b63, #24243e, #1a1a2e);/* Colores oscuros */
  background-size: 400% 400%;
  animation: gradientDark 20s ease infinite;/* Animación más lenta */
}

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

/* Logo cambia en modo oscuro */
body.dark-mode #logo {
  content: url("archivos/logo-blanco.png");
}

/* Inputs (modo oscuro) */
.dark-mode .form-control {

  background-color: #1e1e1e; /* Fondo gris oscuro */

  color: #f5f5f5;/* Texto claro */

  border: 1px solid #444;/* Borde tenue */
}

/* Botones en modo oscuro  */

.dark-mode .btn-primary {

  background-color: #3b82f6;

  /* azul brillante */

  border-color: #3b82f6; /* Azul brillante */

  color: white;

}





.dark-mode .btn-success {

  background-color: #10b981;/* Verde brillante */

  border-color: #10b981;

}







/* Cuadro del formulario */

.form-card {
  background: rgba(255, 255, 255, 0.8);/* Fondo semi-transparente */
  padding: 2rem;/* Espaciado interno */
  backdrop-filter: blur(12px);/* Efecto vidrio esmerilado */
  border: 1px solid rgba(255, 255, 255, 0.2); /* Borde tenue */
  border-radius: 20px;/* Bordes redondeados */
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1),
              0 0 20px rgba(102, 166, 255, 0.2); /* Sombra + Glow azul suave */
  max-width: 450px;/* Ancho máximo */
  margin: auto;/* Centrado horizontal */
  margin-top: 2rem;
  transition: all 0.3s ease;
  animation: fadeInUp 0.8s ease;/* Animación de entrada */
}


/* Adaptación al modo oscuro */

body.dark-mode .form-card {
  background: rgba(30, 30, 30, 0.8);/* Fondo oscuro translúcido */
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.25),   /* glow azul */
              0 0 40px rgba(106, 17, 203, 0.15);  /*clow púrpura */
}

/* === Botón modo oscuro (toggle) === */
.btn-outline-dark {

  border: none !important;

  outline: none !important;

  box-shadow: none !important;

  cursor: pointer;

  font-size: 1.5rem;

}


/* Evita bordes/efectos al enfocarse */
.btn-outline-dark:focus,

.btn-outline-dark:focus-visible,

.btn-outline-dark:active {

  border: none !important;

  outline: none !important;

  box-shadow: none !important;

}


/* Links en modo oscuro */
body.dark-mode a {

  color: #4da6ff;

  /* un azul más suave */

}



body.dark-mode a:hover {

  color: #60a5fa;/* Azul más vivo al pasar */

  /* cambia sutilmente */

}


/* Input enfocado en modo oscuro */
body.dark-mode .form-control:focus {

  border-color: #3b82f6;

  box-shadow: 0 0 5px #3b82f6;/* Glow azul */

}



/* animacion boton modo oscuro */

.btn-outline-dark:active {

  transform: rotate(180deg);

  transition: transform 0.4s ease;

}


/* === Responsive para móviles pequeños === */
@media (max-width: 576px) {

  .form-card {

    margin: 1rem;

    padding: 1.5rem;

  }

}

/* 🎨 Estilos del botón de toggle dark/light */

#darkModeToggle {

  transition: all 0.3s ease-in-out;

  border-radius: 50%;/* Circular */

  width: 40px;

  height: 40px;

  padding: 0;

  font-size: 18px;

  display: flex;/* Centrado contenido */

  align-items: center;

  justify-content: center;

  border: none !important;

  outline: none !important;

  box-shadow: none !important;

}


/* Hover botones */
/* Hover en modo claro */
.btn-outline-dark:hover {

  background-color: #000;

  color: #fff;

}

/* Hover en modo oscuro */
.btn-outline-light:hover {

  background-color: #fff;

  color: #000;

}

/* === Botón para mostrar/ocultar contraseña === */
.toggle-pass {
  position: absolute;/* Se ubica dentro del input */
  right: 10px;
  top: 38px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  color: #6b7280; /* gris suave */
}

.toggle-pass:hover {
  color: #3b82f6; /* azul al pasar */
}

/* Arreglar textos en modo oscuro */
body.dark-mode .text-muted {
  color: #a0aec0 !important;
}