/* ====================================
   SITIO WEB - ESTILOS DEL LOADER MODAL
   ==================================== */

/* CRÍTICO: Estilos que deben cargarse inmediatamente para mostrar el loader */
/* CRÍTICO: Mostrar loader inmediatamente */
body.loading > *:not(#loader-modal) { 
  display: none !important; 
}

#loader-modal { 
  position: fixed !important; 
  top: 0 !important; 
  left: 0 !important; 
  width: 100% !important; 
  height: 100% !important; 
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%) !important; 
  z-index: 99999 !important; 
  display: flex !important; 
  align-items: center !important; 
  justify-content: center !important; 
}

/* Modal de Carga con Animación de Soldadura */
.loader-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
  overflow: hidden; /* Para contener las chispas */
}

.loader-modal.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-modal.completing {
  animation: loaderComplete 1s ease-in-out;
}

@keyframes loaderComplete {
  0% { 
    transform: scale(1);
    opacity: 1;
  }
  50% { 
    transform: scale(1.02);
    opacity: 1;
    filter: brightness(1.1);
  }
  100% { 
    transform: scale(1);
    opacity: 1;
    filter: brightness(1);
  }
}

/* Animación especial cuando la soldadura está completa */
.loader-modal.completing .welding-loader {
  animation: weldingComplete 1s ease-in-out;
}

@keyframes weldingComplete {
  0% { 
    filter: drop-shadow(0 0 15px rgba(255, 193, 7, 0.3));
  }
  50% { 
    filter: drop-shadow(0 0 25px rgba(255, 193, 7, 0.8)) brightness(1.2);
    transform: scale(1.05);
  }
  100% { 
    filter: drop-shadow(0 0 20px rgba(255, 193, 7, 0.5)) brightness(1.1);
    transform: scale(1.02);
  }
}

.loader-modal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  max-width: 600px;
  width: 90%;
  padding: 60px 20px;
  position: relative;
  min-height: 400px;
}

/* Texto del Modal */
.loader-text h2 {
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 10px 0;
  color: #ffffff;
}

.loader-text p {
  font-size: 16px;
  margin: 0 0 30px 0;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
}

/* Bloqueo de scroll en el body y ocultamiento del contenido principal */
body.loading {
  overflow: hidden !important;
  height: 100vh !important;
}

/* Ocultar todo el contenido principal mientras carga, excepto el loader */
body.loading > *:not(#loader-modal) {
  display: none !important;
}

/* Asegurar que el loader esté siempre visible durante la carga */
#loader-modal {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Cuando ya no está cargando, mostrar contenido y ocultar loader */
body:not(.loading) > *:not(#loader-modal) {
  display: block;
  animation: fadeInContent 0.5s ease-in-out;
}

body:not(.loading) #loader-modal {
  display: none !important;
}

@keyframes fadeInContent {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ===== RESPONSIVE - LOADER MODAL ===== */

/* Tablets y móviles */
@media (max-width: 768px) {
  .loader-modal-content {
    padding: 20px 15px;
    max-width: 95%;
  }
  
  .loader-text h2 {
    font-size: 22px;
    margin-bottom: 12px;
  }
  
  .loader-text p {
    font-size: 14px;
    margin-bottom: 25px;
  }
}

@media (max-width: 640px) {
  .loader-modal-content {
    max-width: 98%;
    padding: 15px 10px;
  }
  
  .loader-text h2 {
    font-size: 20px;
  }
  
  .loader-text p {
    font-size: 13px;
    margin-bottom: 20px;
  }
}

@media (max-width: 480px) {
  .loader-modal {
    padding: 10px;
  }
  
  .loader-modal-content {
    padding: 15px 10px;
    max-width: 100%;
  }
  
  .loader-text h2 {
    font-size: 18px;
    margin-bottom: 10px;
  }
  
  .loader-text p {
    font-size: 12px;
    margin-bottom: 15px;
  }
}

@media (max-width: 360px) {
  .loader-modal-content {
    padding: 10px 8px;
  }
  
  .loader-text h2 {
    font-size: 16px;
    margin-bottom: 8px;
  }
  
  .loader-text p {
    font-size: 11px;
    margin-bottom: 12px;
  }
}

/* Orientación landscape en móviles */
@media (max-height: 480px) and (orientation: landscape) {
  .loader-modal {
    align-items: flex-start;
    padding-top: 20px;
    overflow-y: auto;
  }
  
  .loader-modal-content {
    padding: 10px 15px;
  }
  
  .loader-text h2 {
    font-size: 16px;
    margin-bottom: 5px;
  }
  
  .loader-text p {
    font-size: 11px;
    margin-bottom: 10px;
  }
}