/* ============================
   PRELOADER - ESTRUCTURA Y ANIMACIONES
   ============================ */

#preloader-placeholder {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f6f9fc; /* Color por defecto tema claro */
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

/* Placeholder tema oscuro */
#preloader-placeholder.tema-oscuro,
html.tema-oscuro #preloader-placeholder,
html[data-bs-theme="oscuro"] #preloader-placeholder {
  background-color: #0F172A !important;
}

/* Preloader */
.preloader {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: #f6f9fc; /* Color por defecto tema claro */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

/* Preloader tema oscuro */
.preloader.tema-oscuro,
html.tema-oscuro .preloader,
html[data-bs-theme="oscuro"] .preloader {
  background-color: #0F172A !important;
}

/* Contenedor del logo */
.logo-container {
  position: relative;
  width: 400px;
  height: 400px;
}

/* Fragmentos */
.logo-part {
  position: absolute;
  width: 50%;
  height: 50%;
  background-size: 200px 200px; /* escala total de la imagen completa */
  background-repeat: no-repeat;
  opacity: 0;
}

/* Ajuste de cada fragmento para mostrar su parte del logo - TEMA CLARO */
.part1 { 
  top: 0; 
  left: 0;
  background-image: url('../img/fragmento1preloader_claro.png');
}

.part2 { 
  top: 0; 
  right: 0;
  background-image: url('../img/fragmento3preloader_claro.png');
}

.part3 { 
  bottom: 0; 
  left: 0;
  background-image: url('../img/fragmento2preloader_claro.png');
}

.part4 { 
  bottom: 0; 
  right: 0;
  background-image: url('../img/fragmento4preloader_claro.png');
}

/* Fragmentos para tema OSCURO */
.preloader.tema-oscuro .part1,
html.tema-oscuro .preloader .part1,
html[data-bs-theme="oscuro"] .preloader .part1 {
  background-image: url('../img/fragmento1preloader_oscuro.png');
}

.preloader.tema-oscuro .part2,
html.tema-oscuro .preloader .part2,
html[data-bs-theme="oscuro"] .preloader .part2 {
  background-image: url('../img/fragmento3preloader_oscuro.png');
}

.preloader.tema-oscuro .part3,
html.tema-oscuro .preloader .part3,
html[data-bs-theme="oscuro"] .preloader .part3 {
  background-image: url('../img/fragmento2preloader_oscuro.png');
}

.preloader.tema-oscuro .part4,
html.tema-oscuro .preloader .part4,
html[data-bs-theme="oscuro"] .preloader .part4 {
  background-image: url('../img/fragmento4preloader_oscuro.png');
}

/* ============================
   KEYFRAMES - ANIMACIONES
   ============================ */

/* Animaciones de entrada */
@keyframes from-top { 
  0% { 
    transform: translateY(-150%); 
    opacity: 0; 
  } 
  100% { 
    transform: translateY(0); 
    opacity: 1; 
  } 
}

@keyframes from-right { 
  0% { 
    transform: translateX(150%); 
    opacity: 0; 
  } 
  100% { 
    transform: translateX(0); 
    opacity: 1; 
  } 
}

@keyframes from-left { 
  0% { 
    transform: translateX(-150%); 
    opacity: 0; 
  } 
  100% { 
    transform: translateX(0); 
    opacity: 1; 
  } 
}

@keyframes from-bottom { 
  0% { 
    transform: translateY(150%); 
    opacity: 0; 
  } 
  100% { 
    transform: translateY(0); 
    opacity: 1; 
  } 
}

/* Animación de salida para repetir */
@keyframes fade-out { 
  0% { 
    opacity: 1; 
  } 
  100% { 
    opacity: 0; 
    transform: scale(0.9); 
  } 
}

@keyframes spin { 
  0% { 
    transform: rotate(0deg); 
  } 
  100% { 
    transform: rotate(360deg); 
  } 
}

/* ============================
   SECUENCIAS DE ANIMACIÓN
   ============================ */

/* Secuencia de animación (clase cycle aplicada por JS) */
.preloader.cycle .part1 { 
  animation: from-top 0.6s ease forwards 0s; 
}

.preloader.cycle .part2 { 
  animation: from-right 0.6s ease forwards 0.6s; 
}

.preloader.cycle .part4 { 
  animation: from-bottom 0.6s ease forwards 1.2s; 
}

.preloader.cycle .part3 { 
  animation: from-left 0.6s ease forwards 1.8s; 
}

/* Animación de desvanecimiento */
.preloader.fade-pieces .logo-part { 
  animation: fade-out 0.4s ease forwards; 
}

/* ============================
   SPINNER CIRCULAR
   ============================ */

.spinner {
  margin-top: 1.5rem;
  width: 48px;
  height: 48px;
  border: 4px solid rgba(100, 116, 139, 0.3);
  border-top-color: #0F4C81;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Spinner tema oscuro */
.preloader.tema-oscuro .spinner,
html.tema-oscuro .preloader .spinner,
html[data-bs-theme="oscuro"] .preloader .spinner {
  border-color: rgba(148, 163, 184, 0.3);
  border-top-color: #60A5FA;
}

/* ============================
   ESTADOS DE VISIBILIDAD
   ============================ */

/* Desaparecer preloader */
.preloader.hide { 
  opacity: 0; 
  visibility: hidden; 
}

#preloader-placeholder.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none; /* importante para no bloquear clics */
}