/* =================================================================== */
/*        MÓDULO DE ESTILOS PARA LOADERS v2.0 (CON ANIMACIONES)        */
/* =================================================================== */

#loader-container {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 9999; /* Máxima prioridad */
    pointer-events: none; /* No interfiere con clics */
}

#loader-overlay {
    position: absolute;
    inset: 0;
    background: rgba(13, 27, 42, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: auto;
}

#loader-overlay.show {
    opacity: 1;
    visibility: visible;
}

.loader-content {
    background: transparent;
    color: #FFF;
    padding: 30px 40px;
    border-radius: var(--border-radius-large);
    text-align: center;
    width: 90%;
    max-width: 350px;
    transform: scale(0.9);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

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

.loader-icon {
    font-size: 4rem;
    margin-bottom: 25px;
    color: #FFF;
    display: inline-block;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

#loader-text {
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.5;
    min-height: 3.3rem;
    color: #FFF;
}

/* === ANIMACIONES PARA CAMBIO DE TEXTO === */
@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); }
}
#loader-text.fade-out { animation: fadeOutText 0.25s ease-out forwards; }
#loader-text.fade-in { animation: fadeInText 0.25s 0.25s ease-out forwards; }

/* === ANIMACIONES PARA ÍCONOS DE PAGOS === */
@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 puzzle-fit { 0% { transform: rotate(0deg); } 25% { transform: rotate(-15deg); } 75% { transform: rotate(15deg); } 100% { transform: rotate(0deg); } }
.loader-icon.puzzle-animation { animation: puzzle-fit 1.5s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55); }

@keyframes calendar-check { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.loader-icon.calendar-animation { animation: calendar-check 1.5s infinite; }

@keyframes brain-pulse { 0% { text-shadow: 0 0 10px #fff; } 50% { text-shadow: 0 0 25px #00e5ff; } 100% { text-shadow: 0 0 10px #fff; } }
.loader-icon.brain-animation { animation: brain-pulse 1.5s infinite; }

/* === ANIMACIONES PARA NUEVOS LOADERS DE UI === */

@keyframes door-swing { 0% { transform: perspective(1200px) rotateY(0deg); } 50% { transform: perspective(1200px) rotateY(-25deg); } 100% { transform: perspective(1200px) rotateY(0deg); } }
.loader-icon.door-animation { animation: door-swing 2s infinite ease-in-out; }

@keyframes key-turn { 0% { transform: rotate(0deg); } 50% { transform: rotate(-20deg); } 100% { transform: rotate(0deg); } }
.loader-icon.key-animation { animation: key-turn 1s infinite ease-in-out; }

@keyframes heart-beat { 0%, 100% { transform: scale(1); color: #e74c3c; } 50% { transform: scale(1.2); color: #ff7675; } }
.loader-icon.heart-beat-animation { animation: heart-beat 1.2s infinite; }

@keyframes typing-dots { 0%, 20% { content: '.'; } 40%, 60% { content: '..'; } 80%, 100% { content: '...'; } }
.loader-icon.comments-typing-animation { position: relative; }
.loader-icon.comments-typing-animation::after { content: '.'; animation: typing-dots 1.5s infinite; position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); font-size: 3rem; }

@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 reply-arrow { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-10px); } }
.loader-icon.reply-arrow-animation { animation: reply-arrow 1s infinite ease-in-out; }

@keyframes user-plus-pop { 0%, 100% { transform: scale(1); } 20% { transform: scale(1.1); } 40% { transform: scale(0.95); } 60% { transform: scale(1.05); } 80% { transform: scale(0.98); } }
.loader-icon.user-plus-animation { animation: user-plus-pop 1.8s 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; }

@keyframes post-stack { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } }
.loader-icon.post-stack-animation { animation: post-stack 2s infinite cubic-bezier(0.5, 0, 0.5, 1); }

@keyframes binoculars-swivel { 0% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } 100% { transform: rotate(-5deg); } }
.loader-icon.binoculars-animation { animation: binoculars-swivel 1.5s infinite ease-in-out; }

@keyframes users-wave { 0% { transform: skewX(0deg); } 50% { transform: skewX(-10deg); } 100% { transform: skewX(0deg); } }
.loader-icon.users-animation { animation: users-wave 2s infinite ease-in-out; }
/* FIX: Ocultar spinner de carga inicial si se queda pegado */
#initial-loading-overlay:not(.show) {
    display: none !important;
}
/* Asegurar que desaparezca cuando la app carga */
body.logged-in #initial-loading-overlay,
body.auth-page #initial-loading-overlay {
    display: none !important;
}