/* =================================================================== */
/*        LOADERS.CSS - v3.0 (Z-INDEX GOD MODE)
/* =================================================================== */

/* =================================================================== */
/*      1. CONTENEDOR MAESTRO
/* =================================================================== */

#loader-container {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    /* [CRÍTICO] Nivel máximo permitido por los navegadores para estar ENCIMA DE LA TV */
    z-index: 2147483647 !important; 
    pointer-events: none;
}

/* El fondo oscuro */
#loader-overlay {
    position: absolute;
    inset: 0;
    background: rgba(13, 27, 42, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none; 
}

/* ESTADO ACTIVO */
#loader-overlay.show, .loading-spinner-overlay.show {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    pointer-events: auto !important;
}

/* =================================================================== */
/*      2. CONTENIDO DEL LOADER
/* =================================================================== */

.loader-content {
    background: transparent;
    color: #FFF;
    padding: 30px;
    width: 90%;
    max-width: 350px;
    text-align: center;
    transform: scale(0.9);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
}

#loader-overlay.show .loader-content, .loading-spinner-overlay.show .loader-content {
    transform: scale(1);
    opacity: 1;
}

.loader-icon {
    font-size: 4rem;
    margin-bottom: 20px;
    color: #FFF;
    display: inline-block;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
}

#loader-text {
    font-size: 1.1rem;
    font-weight: 500;
    min-height: 3.5rem;
    color: #FFF;
    font-family: sans-serif;
}

/* Transiciones de texto */
#loader-text.fade-out { animation: fadeOutText 0.2s ease-out forwards; }
#loader-text.fade-in { animation: fadeInText 0.2s 0.1s ease-out forwards; }

@keyframes fadeInText { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeOutText { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-10px); } }

/* =================================================================== */
/*      3. SPINNNER BOOTSTRAP (Respaldo)
/* =================================================================== */

.loading-spinner-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background-color: #000;
    z-index: 2147483647 !important; /* También extremo */
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* =================================================================== */
/*      4. ANIMACIONES ESTÁNDAR
/* =================================================================== */

@keyframes hourglass-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.loader-icon.hourglass-animation { animation: hourglass-spin 2s infinite linear; }

@keyframes rocket-launch { 0% { transform: translateY(10px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(10px); } }
.loader-icon.rocket-animation { animation: rocket-launch 1s infinite ease-in-out; }

@keyframes sparkles { 0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; } 50% { transform: scale(1.3) rotate(15deg); opacity: 0.7; } }
.loader-icon.sparkles-animation { animation: sparkles 1.5s infinite; }

@keyframes fire-burn { 0% { transform: scale(1) rotate(0deg); color: #f1c40f; } 50% { transform: scale(1.1) rotate(5deg); color: #e74c3c; } 100% { transform: scale(1) rotate(0deg); color: #f1c40f; } }
.loader-icon.fire-burn-animation { animation: fire-burn 1s infinite alternate; }

/* ... (Puedes dejar el resto de animaciones aquí si las tenías) ... */


/* =================================================================== */
/*      5. EFECTO ESPECIAL: TV TURN ON (CRT) - ¡LA MAGIA!
/* =================================================================== */

/* Sobreescribimos el overlay solo para este tipo */
#loader-container[data-loader-type="tv-turn-on"] .loading-spinner-overlay,
#loader-container[data-loader-type="tv-turn-on"] #loader-overlay {
    background: #000 !important; /* Fondo negro sólido */
    animation: crt-turn-on 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
    transform-origin: center;
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* El contenido (icono y texto) aparece con glitch */
#loader-container[data-loader-type="tv-turn-on"] .loader-content {
    animation: crt-content-flicker 0.2s infinite;
    opacity: 0;
    animation-delay: 0.4s; 
    animation-fill-mode: forwards;
}

/* Icono TV vibrando */
#loader-container[data-loader-type="tv-turn-on"] .loader-icon {
    text-shadow: 2px 0 #ff00de, -2px 0 #00ffea;
    animation: tv-static-shake 0.5s infinite;
}

/* KEYFRAMES CRT */
@keyframes crt-turn-on {
    0% { transform: scale(0.001, 0.005); opacity: 0; background: #fff; }
    30% { transform: scale(1, 0.005); opacity: 1; background: #fff; }
    60% { transform: scale(1, 0.005); background: #fff; }
    100% { transform: scale(1, 1); background: #000; }
}

@keyframes crt-content-flicker {
    0% { opacity: 0.8; } 50% { opacity: 0.4; } 100% { opacity: 1; }
}

@keyframes tv-static-shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}