/* Loader Silicio - Estilos Externos - Version 5.6 */

/* Animaciones críticas del loader */
@keyframes backgroundPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.7; }
}

@keyframes logoGlow {
    0% { transform: scale(1); filter: drop-shadow(0 0 20px rgba(0, 255, 136, 0.8)); }
    100% { transform: scale(1.05); filter: drop-shadow(0 0 30px rgba(0, 255, 136, 0.8)); }
}

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

@keyframes subtitlePulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

@keyframes contentFadeIn {
    0% { opacity: 0; transform: translateY(50px) scale(0.8); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes messageFade {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 0.8; transform: translateY(0); }
}

@keyframes waveMove {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes loaderFadeOut {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.1); }
}

/* Bloquear scroll durante el loader */
body.loading {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    touch-action: none !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Ocultar contenido principal durante el loader */
body.loading .navbar,
body.loading .chess-layout,
body.loading .academia-section,
body.loading .nivel-intermedio-section,
body.loading .coaching-section,
body.loading .contacto-section,
body.loading .footer {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Ocultar solo el contenido de la sección hero, no la sección completa */
body.loading .hero {
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Mostrar contenido cuando termine el loader */
body.loaded .navbar,
body.loaded .chess-layout,
body.loaded .academia-section,
body.loaded .nivel-intermedio-section,
body.loaded .coaching-section,
body.loaded .contacto-section,
body.loaded .footer {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    animation: contentFadeIn 0.8s ease-out;
}

/* Mostrar la sección hero cuando termine el loader */
body.loaded .hero {
    visibility: visible !important;
    opacity: 1 !important;
    animation: contentFadeIn 0.8s ease-out;
}

/* Restaurar scroll cuando termine el loader */
body.loaded {
    overflow: auto !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    touch-action: auto !important;
    -webkit-overflow-scrolling: auto !important;
}

/* Prevenir scroll en dispositivos móviles durante el loader */
@media (max-width: 768px) {
    body.loading {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        overflow: hidden !important;
        touch-action: none !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: none !important;
        -webkit-overscroll-behavior: none !important;
    }
    
    #loader-silicio {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        touch-action: none !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: none !important;
        -webkit-overscroll-behavior: none !important;
    }
}

/* Estilos del loader */
#loader-silicio {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(135deg, #000000 0%, #0a1a0a 50%, #000000 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
    touch-action: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: none;
    -webkit-overscroll-behavior: none;
}

#loader-silicio.fade-out {
    animation: loaderFadeOut 0.8s ease-in-out forwards;
}

.loader-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 80%, rgba(0, 255, 136, 0.15) 0%, transparent 50%), 
                radial-gradient(circle at 80% 20%, rgba(255, 170, 0, 0.12) 0%, transparent 50%), 
                radial-gradient(circle at 40% 40%, rgba(255, 0, 120, 0.08) 0%, transparent 50%);
    animation: backgroundPulse 4s ease-in-out infinite;
}

.loader-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.loader-sparkles {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.loader-waves {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background: linear-gradient(180deg, transparent, rgba(199, 0, 57, 0.2));
    overflow: hidden;
}

.wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 120px;
    background: url('data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1200 120\'%3E%3Cpath d=\'M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z\' fill=\'%23c70039\' fill-opacity=\'0.3\'/%3E%3C/svg%3E') repeat-x;
    animation: waveMove 4s ease-in-out infinite;
    filter: drop-shadow(0 0 10px rgba(199, 0, 57, 0.3));
}

.wave:nth-child(2) {
    animation-delay: -2s;
    opacity: 0.7;
    transform: scaleY(0.8);
}

.loader-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
    animation: contentFadeIn 1s ease-out;
}

.loader-logo {
    position: relative;
    width: 120px;
    height: 120px;
    margin-bottom: 40px;
    animation: logoGlow 2s ease-in-out infinite alternate;
}


.loader-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #00ff88;
    margin-bottom: 10px;
    text-align: center;
    text-shadow: 0 0 20px #00ff88, 0 0 40px #00ff88, 0 0 60px #00ff88;
    animation: titleShimmer 3s ease-in-out infinite;
}

.loader-subtitle {
    font-size: 1.1rem;
    color: #00ff88;
    margin-bottom: 40px;
    text-align: center;
    opacity: 0.9;
    animation: subtitlePulse 2s ease-in-out infinite;
}

.loader-progress-container {
    width: 300px;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    margin-bottom: 20px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}


.loader-percentage {
    font-size: 1rem;
    color: #ffffff;
    font-weight: 600;
    text-align: center;
    margin-bottom: 30px;
    opacity: 0.9;
}

.loader-message {
    font-size: 0.9rem;
    color: #00ff88;
    text-align: center;
    min-height: 20px;
    opacity: 0.8;
    animation: messageFade 0.5s ease-in-out;
}

/* Responsive */
@media (max-width: 768px) {
    .loader-title { 
        font-size: 2rem !important; 
    }
    .loader-logo { 
        width: 100px !important; 
        height: 100px !important; 
        margin-bottom: 30px !important; 
    }
    .loader-progress-container { 
        width: 250px !important; 
    }
    .loader-subtitle { 
        font-size: 1rem !important; 
    }
}

@media (max-width: 480px) {
    .loader-title { 
        font-size: 1.8rem !important; 
    }
    .loader-logo { 
        width: 80px !important; 
        height: 80px !important; 
        margin-bottom: 25px !important; 
    }
    .loader-progress-container { 
        width: 200px !important; 
    }
    .loader-subtitle { 
        font-size: 0.9rem !important; 
    }
}

/* ===== ESTILOS ESPECÍFICOS DEL LOADER INLINE ===== */
/* Estilos que estaban inline en el HTML, ahora movidos al CSS externo */

/* Contenedor principal del loader */
#loader-silicio {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: linear-gradient(135deg, #000000 0%, #1a0000 50%, #000000 100%) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 9999 !important;
    overflow: hidden !important;
    font-family: 'Inter', sans-serif !important;
}

/* Fondo del loader - SIN COLORES POR DEFECTO */
.loader-background {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    animation: backgroundPulse 4s ease-in-out infinite !important;
}

/* Partículas y efectos */
.loader-particles {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
}

.loader-sparkles {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
}

/* Ondas del loader - SIN COLORES POR DEFECTO */
.loader-waves {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 120px !important;
    background: transparent !important;
    overflow: hidden !important;
}

.wave {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 200% !important;
    height: 120px !important;
    background: transparent !important;
    animation: waveMove 4s ease-in-out infinite !important;
    filter: none !important;
}

.wave:nth-child(2) {
    animation-delay: -2s !important;
    opacity: 0.7 !important;
    transform: scaleY(0.8) !important;
}

/* Contenido del loader */
.loader-content {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    z-index: 10 !important;
    animation: contentFadeIn 1s ease-out !important;
}

/* Logo del loader */
.loader-logo {
    position: relative !important;
    width: 120px !important;
    height: 120px !important;
    margin-bottom: 40px !important;
    animation: logoGlow 2s ease-in-out infinite alternate !important;
}

.loader-logo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Título del loader - SIN COLORES POR DEFECTO */
.loader-title {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-bottom: 10px !important;
    text-align: center !important;
    background: transparent !important;
    background-size: 200% 200% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: titleShimmer 3s ease-in-out infinite !important;
    text-shadow: none !important;
}

/* Subtítulo del loader - SIN COLORES POR DEFECTO */
.loader-subtitle {
    font-size: 1.1rem !important;
    color: #ffffff !important;
    margin-bottom: 40px !important;
    text-align: center !important;
    opacity: 0.9 !important;
    animation: subtitlePulse 2s ease-in-out infinite !important;
}

/* Contenedor de progreso */
.loader-progress-container {
    width: 300px !important;
    height: 6px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    position: relative !important;
    margin-bottom: 20px !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Barra de progreso - SIN COLORES POR DEFECTO */
.loader-progress-bar {
    height: 100% !important;
    background: transparent !important;
    border-radius: 10px !important;
    position: relative !important;
    width: 0%;
    transition: width 0.3s ease !important;
    box-shadow: none !important;
}

/* Porcentaje del loader */
.loader-percentage {
    font-size: 1rem !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    text-align: center !important;
    margin-bottom: 30px !important;
    opacity: 0.9 !important;
}

/* Mensaje del loader - SIN COLORES POR DEFECTO */
.loader-message {
    font-size: 0.9rem !important;
    color: #ffffff !important;
    text-align: center !important;
    min-height: 20px !important;
    opacity: 0.8 !important;
    animation: messageFade 0.5s ease-in-out !important;
}

/* ===== TEMAS DE COLOR POR PÁGINA ===== */

/* TEMA ROJO - Index (Página Principal) - SOBRESCRIBE ESTILOS POR DEFECTO */
body.index-theme #loader-silicio .loader-background {
    background: radial-gradient(circle at 20% 80%, rgba(255, 0, 102, 0.15) 0%, transparent 50%), 
                radial-gradient(circle at 80% 20%, rgba(255, 102, 0, 0.12) 0%, transparent 50%), 
                radial-gradient(circle at 40% 40%, rgba(255, 0, 0, 0.08) 0%, transparent 50%) !important;
}

body.index-theme .loader-waves {
    background: linear-gradient(180deg, transparent, rgba(255, 0, 102, 0.2)) !important;
}

body.index-theme .wave {
    background: url('data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1200 120\'%3E%3Cpath d=\'M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z\' fill=\'%23ff0066\' fill-opacity=\'0.3\'/%3E%3C/svg%3E') repeat-x !important;
    filter: drop-shadow(0 0 10px rgba(255, 0, 102, 0.3)) !important;
}

body.index-theme .loader-title {
    color: #ff0066 !important;
    background: linear-gradient(45deg, #ff0066, #ff6600, #ff0066) !important;
    background-size: 200% 200% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-shadow: 0 0 20px #ff0066, 0 0 40px #ff0066, 0 0 60px #ff0066 !important;
}

body.index-theme .loader-subtitle {
    color: #ff6600 !important;
}

body.index-theme .loader-progress-bar {
    background: linear-gradient(90deg, #ff0066, #ff6600) !important;
    box-shadow: 0 0 20px rgba(255, 0, 102, 0.8) !important;
}

body.index-theme .loader-message {
    color: #ff6600 !important;
}

body.index-theme .loader-logo img {
    filter: drop-shadow(0 0 30px rgba(255, 0, 102, 1)) drop-shadow(0 0 60px rgba(255, 0, 102, 0.8)) drop-shadow(0 0 90px rgba(255, 0, 102, 0.6)) !important;
    box-shadow: 0 0 30px rgba(255, 0, 102, 1), 0 0 60px rgba(255, 0, 102, 0.8), 0 0 90px rgba(255, 0, 102, 0.6) !important;
}

/* TEMA VERDE - Reyes de Silicio */
body.reyesdesilicio-theme #loader-silicio .loader-background {
    background: radial-gradient(circle at 20% 80%, rgba(0, 255, 136, 0.15) 0%, transparent 50%), 
                radial-gradient(circle at 80% 20%, rgba(0, 212, 255, 0.12) 0%, transparent 50%), 
                radial-gradient(circle at 40% 40%, rgba(255, 170, 0, 0.08) 0%, transparent 50%) !important;
}

body.reyesdesilicio-theme .loader-waves {
    background: linear-gradient(180deg, transparent, rgba(0, 255, 136, 0.2)) !important;
}

body.reyesdesilicio-theme .wave {
    background: url('data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1200 120\'%3E%3Cpath d=\'M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z\' fill=\'%2300ff88\' fill-opacity=\'0.3\'/%3E%3C/svg%3E') repeat-x !important;
    filter: drop-shadow(0 0 10px rgba(0, 255, 136, 0.3)) !important;
}

body.reyesdesilicio-theme .loader-title {
    color: #00ff88 !important;
    background: linear-gradient(45deg, #00ff88, #00d4ff, #00ff88) !important;
    background-size: 200% 200% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-shadow: 0 0 20px #00ff88, 0 0 40px #00ff88, 0 0 60px #00ff88 !important;
}

body.reyesdesilicio-theme .loader-subtitle {
    color: #00ff88 !important;
}

body.reyesdesilicio-theme .loader-progress-bar {
    background: linear-gradient(90deg, #00ff88, #00d4ff, #ffaa00) !important;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.8) !important;
}

body.reyesdesilicio-theme .loader-message {
    color: #00ff88 !important;
}

body.reyesdesilicio-theme .loader-logo img {
    filter: drop-shadow(0 0 30px rgba(0, 255, 136, 1)) drop-shadow(0 0 60px rgba(0, 255, 136, 0.8)) drop-shadow(0 0 90px rgba(0, 255, 136, 0.6)) !important;
    box-shadow: 0 0 30px rgba(0, 255, 136, 1), 0 0 60px rgba(0, 255, 136, 0.8), 0 0 90px rgba(0, 255, 136, 0.6) !important;
}

/* TEMA AMARILLO - Viaje de Campeones */
body.viajedecampeones-theme #loader-silicio .loader-background {
    background: radial-gradient(circle at 20% 80%, rgba(255, 206, 0, 0.15) 0%, transparent 50%), 
                radial-gradient(circle at 80% 20%, rgba(255, 165, 0, 0.12) 0%, transparent 50%), 
                radial-gradient(circle at 40% 40%, rgba(255, 215, 0, 0.08) 0%, transparent 50%) !important;
}

body.viajedecampeones-theme .loader-waves {
    background: linear-gradient(180deg, transparent, rgba(255, 206, 0, 0.2)) !important;
}

body.viajedecampeones-theme .wave {
    background: url('data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1200 120\'%3E%3Cpath d=\'M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z\' fill=\'%23ffce00\' fill-opacity=\'0.3\'/%3E%3C/svg%3E') repeat-x !important;
    filter: drop-shadow(0 0 10px rgba(255, 206, 0, 0.3)) !important;
}

body.viajedecampeones-theme .loader-title {
    color: #ffce00 !important;
    background: linear-gradient(45deg, #ffce00, #ffa500, #ffce00) !important;
    background-size: 200% 200% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-shadow: 0 0 20px #ffce00, 0 0 40px #ffce00, 0 0 60px #ffce00 !important;
}

body.viajedecampeones-theme .loader-subtitle {
    color: #ffce00 !important;
}

body.viajedecampeones-theme .loader-progress-bar {
    background: linear-gradient(90deg, #ffce00, #ffa500, #ffd700) !important;
    box-shadow: 0 0 20px rgba(255, 206, 0, 0.8) !important;
}

body.viajedecampeones-theme .loader-message {
    color: #ffce00 !important;
}

body.viajedecampeones-theme .loader-logo img {
    filter: drop-shadow(0 0 30px rgba(255, 206, 0, 1)) drop-shadow(0 0 60px rgba(255, 206, 0, 0.8)) drop-shadow(0 0 90px rgba(255, 206, 0, 0.6)) !important;
    box-shadow: 0 0 30px rgba(255, 206, 0, 1), 0 0 60px rgba(255, 206, 0, 0.8), 0 0 90px rgba(255, 206, 0, 0.6) !important;
}