/* Estilos personalizados para la página de carga*/
/* === PANTALLA DE CARGA === */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #0d6efd, #1B396A, #0d6efd);
  background-size: 300% 300%;
  animation: gradientMove 6s ease-in-out infinite;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

/* Logo animado (fade + zoom) */
#preloader-logo {
  width: 120px;
  height: 120px;
  opacity: 0;
  animation: logoFadeZoom 2s ease-in-out forwards;
  filter: drop-shadow(0 0 5px rgba(255,255,255,0.6));
}

/* Texto animado */
#preloader p {
  font-size: 1.1rem;
  letter-spacing: 1px;
  opacity: 0;
  animation: textFade 2s ease-in-out 0.8s forwards;
}

/* Ocultamiento al cargar */
#preloader.fade-out {
  opacity: 0;
  visibility: hidden;
}

/* === ANIMACIONES === */

/* Movimiento suave del fondo degradado */
@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Logo aparece y hace zoom sutil */
@keyframes logoFadeZoom {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  60% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Texto sube suavemente */
@keyframes textFade {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}


/* === FIN PANTALLA DE CARGA === */