/* ==========================================
   ESTILOS DEL LOADER GIGANTE
   ========================================== */

/* 1. La Pantalla Completa */
#global-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0f172a;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

/* 2. Contenedor Central (MÁS GRANDE) */
.loader-content {
    position: relative;
    width: 250px; /* AUMENTADO de 150px */
    height: 250px; /* AUMENTADO de 150px */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 3. El Logo (MÁS GRANDE y ajustado) */
.loader-logo {
    width: 130px; /* AUMENTADO de 80px */
    height: auto;
    position: relative;
    z-index: 2;
    filter: brightness(0) invert(1);
    animation: logoBreathe 2s ease-in-out infinite;
}

@keyframes logoBreathe {
    0%, 100% {
        transform: scale(1);
        filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(34, 211, 238, 0.4));
    }

    50% {
        transform: scale(1.1);
        filter: brightness(0) invert(1) drop-shadow(0 0 30px rgba(34, 211, 238, 0.9));
    }
}

/* 4. Los "Rayitos" (Anillos de Energía MÁS GRANDES) */
.electric-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid transparent;
}
/* Anillo 1: Cyan Rápido */
.ring-1 {
    border-top: 5px solid #22d3ee; /* Borde más grueso */
    box-shadow: 0 0 25px #22d3ee; /* Sombra más grande */
    animation: spinRay 1.5s linear infinite;
}
/* Anillo 2: Púrpura Medio (Ajustado al nuevo tamaño) */
.ring-2 {
    width: 200px;
    height: 200px; /* Ajustado proporcionalmente */
    top: 25px;
    left: 25px;
    border-right: 5px solid #a855f7;
    box-shadow: 0 0 25px #a855f7;
    animation: spinRay 2s linear infinite reverse;
}
/* Anillo 3: Blanco Lento */
.ring-3 {
    width: 100%;
    height: 100%;
    border-bottom: 2px solid rgba(255,255,255,0.5);
    animation: spinRay 3s linear infinite;
}

@keyframes spinRay {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 5. Fondo de Chispas (NORMALES + GRANDES) */
.loader-sparks {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.l-spark {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fff;
    opacity: 0;
    animation: floatUpLoader linear infinite;
}
/* CLASE PARA PARTÍCULAS GRANDES */
.l-spark-large {
    width: 12px;
    height: 12px; /* Mucho más grandes */
    filter: blur(1px); /* Un poco de desenfoque para realismo */
}

/* Partículas Normales */
.l-spark.s1 {
    left: 10%;
    animation-duration: 4s;
    background: #22d3ee;
    box-shadow: 0 0 10px #22d3ee;
}

.l-spark.s2 {
    left: 30%;
    animation-duration: 6s;
    animation-delay: 1s;
    background: #a855f7;
}

.l-spark.s3 {
    left: 50%;
    animation-duration: 5s;
    animation-delay: 2s;
    background: #fff;
}

.l-spark.s4 {
    left: 70%;
    animation-duration: 7s;
    animation-delay: 0.5s;
    background: #22d3ee;
}

.l-spark.s5 {
    left: 90%;
    animation-duration: 5s;
    animation-delay: 1.5s;
    background: #f59e0b;
}

/* NUEVAS Partículas Grandes (Más lentas y dramáticas) */
.l-spark.s6 {
    left: 15%;
    animation-duration: 8s;
    animation-delay: 0s;
    background: #22d3ee;
    box-shadow: 0 0 20px #22d3ee;
}

.l-spark.s7 {
    left: 35%;
    animation-duration: 10s;
    animation-delay: 2s;
    background: #a855f7;
    box-shadow: 0 0 20px #a855f7;
}

.l-spark.s8 {
    left: 55%;
    animation-duration: 9s;
    animation-delay: 1s;
    background: #fff;
    box-shadow: 0 0 15px #fff;
}

.l-spark.s9 {
    left: 75%;
    animation-duration: 11s;
    animation-delay: 3s;
    background: #22d3ee;
    box-shadow: 0 0 20px #22d3ee;
}

.l-spark.s10 {
    left: 95%;
    animation-duration: 12s;
    animation-delay: 0.5s;
    background: #f59e0b;
    box-shadow: 0 0 20px #f59e0b;
}

@keyframes floatUpLoader {
    0% {
        transform: translateY(110vh) scale(0.5);
        opacity: 0;
    }

    20% {
        opacity: 0.8;
    }

    80% {
        opacity: 0.6;
    }

    100% {
        transform: translateY(-10vh) scale(1.2);
        opacity: 0;
    }
}

/* Clase para ocultar */
.loader-hidden {
    opacity: 0;
    visibility: hidden;
}