{{-- Splash de carga inicial: visible hasta que el DOM esté listo --}}
<div id="rifasoft-splash"
     class="fixed inset-0 z-[9999] flex flex-col items-center justify-center bg-brand-gradient transition-opacity duration-500">
    <div class="relative">
        <div class="absolute inset-0 bg-white/30 rounded-full blur-2xl animate-pulse"></div>
        <img src="{{ asset('favicon.png') }}" alt="RifaSoft"
             class="relative h-24 w-24 object-contain drop-shadow-2xl animate-bounce">
    </div>
    <div class="mt-8 flex items-center gap-2">
        <span class="text-white font-bold text-xl tracking-wider">RifaSoft</span>
    </div>
    <div class="mt-6 flex gap-1.5">
        <span class="w-2 h-2 bg-white rounded-full animate-bounce" style="animation-delay: 0ms"></span>
        <span class="w-2 h-2 bg-white rounded-full animate-bounce" style="animation-delay: 150ms"></span>
        <span class="w-2 h-2 bg-white rounded-full animate-bounce" style="animation-delay: 300ms"></span>
    </div>
</div>

{{-- Toaster Livewire: hidden por defecto, sólo aparece con .delay para evitar flashes en requests cortos --}}
<div id="livewire-toaster"
     wire:loading.delay.flex
     style="display: none;"
     class="fixed top-4 right-4 z-50 items-center gap-3 bg-white shadow-xl rounded-2xl px-4 py-3 ring-1 ring-gray-100 pointer-events-none">
    <div class="relative h-8 w-8">
        <div class="absolute inset-0 rounded-full border-2 border-brand-100"></div>
        <div class="absolute inset-0 rounded-full border-2 border-transparent border-t-brand-500 animate-spin"></div>
        <img src="{{ asset('favicon.png') }}" class="absolute inset-1 h-6 w-6 object-contain">
    </div>
    <span class="text-sm font-medium text-gray-700">Procesando…</span>
</div>

<script>
    (function () {
        // Splash: oculta cuando termina de cargar
        const hideSplash = () => {
            const splash = document.getElementById('rifasoft-splash');
            if (!splash) return;
            splash.style.opacity = '0';
            setTimeout(() => splash.remove(), 500);
        };
        if (document.readyState === 'complete') {
            setTimeout(hideSplash, 300);
        } else {
            window.addEventListener('load', () => setTimeout(hideSplash, 300));
        }

        // Failsafe: si el toaster Livewire queda colgado más de 8 segundos, fuerza ocultarlo
        let stuckTimer = null;
        const observer = new MutationObserver(() => {
            const t = document.getElementById('livewire-toaster');
            if (!t) return;
            const visible = window.getComputedStyle(t).display !== 'none';
            if (visible) {
                if (stuckTimer) return;
                stuckTimer = setTimeout(() => {
                    t.style.display = 'none';
                    stuckTimer = null;
                }, 8000);
            } else if (stuckTimer) {
                clearTimeout(stuckTimer);
                stuckTimer = null;
            }
        });
        const startObserver = () => {
            const t = document.getElementById('livewire-toaster');
            if (t) observer.observe(t, { attributes: true, attributeFilter: ['style', 'class'] });
        };
        if (document.readyState !== 'loading') startObserver();
        else document.addEventListener('DOMContentLoaded', startObserver);

        // En cada navegación de Livewire, asegura que el toaster vuelva a estar oculto
        document.addEventListener('livewire:navigated', () => {
            const t = document.getElementById('livewire-toaster');
            if (t) t.style.display = 'none';
        });
    })();
</script>