{{--
    Overlay local por módulo/página (NO cubre sidebar):
    - Se inyecta dentro de cada página (PanelsRenderHook::PAGE_START)
    - Se activa con wire:loading (request del componente de la página actual)
--}}

<style>
    /* Asegura que el overlay absoluto cubra todo el módulo. */
    .fi-page { position: relative; min-height: 100vh; }
</style>

<div
    wire:loading.delay
    aria-live="polite"
    aria-busy="true"
    class="absolute inset-0 z-50 hidden place-items-center bg-white/80 backdrop-blur-sm"
>
    <div class="w-full max-w-xs rounded-2xl bg-white px-6 py-6 shadow-lg ring-1 ring-gray-900/5">
        <div class="flex flex-col items-center gap-4">
            <img
                src="{{ asset('images/order-flow.png') }}"
                alt="Order Flow"
                class="h-14 w-14 object-contain"
                loading="eager"
            />

            <div class="flex items-center gap-3">
                <div
                    class="h-5 w-5 animate-spin rounded-full border-2 border-gray-200 border-t-gray-700"
                    aria-hidden="true"
                ></div>
                <div class="text-sm font-medium text-gray-900">Cargando…</div>
            </div>
        </div>
    </div>
</div>