{{-- Campana de alertas del encabezado (tarea 3.6). Contador de no leídas y, al abrir, las últimas alertas del usuario
     en el grupo de la sesión. Colores: tokens del layout. --}}
<div class="relative" x-data="{ abierto: false }" x-on:keydown.escape.window="abierto = false" x-on:click.outside="abierto = false"
     wire:poll.120s.visible>
    <button type="button" x-on:click="abierto = !abierto; if (abierto) $wire.abrir()" :aria-expanded="abierto.toString()" aria-haspopup="true"
            aria-label="Alertas{{ $pendientes ? ': ' . $pendientes . ' sin leer' : '' }}" title="Alertas"
            class="relative flex h-10 w-10 items-center justify-center rounded-lg text-[var(--texto-suave)] hover:bg-[var(--nav-hover)] hover:text-[var(--texto)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--acento)]">
        <x-icono nombre="bell" class="h-[18px] w-[18px]" />
        @if ($pendientes)
            <span class="absolute right-1 top-1 flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-[var(--acento)] px-1 text-[10px] font-bold tabular-nums text-[var(--acento-contraste)]">{{ $pendientes > 99 ? '99+' : $pendientes }}</span>
        @endif
    </button>

    <div x-show="abierto" x-cloak x-transition.origin.top.right
         class="absolute right-0 z-50 mt-2 w-[22rem] max-w-[calc(100vw-2rem)] overflow-hidden rounded-xl border border-[var(--borde)] bg-[var(--superficie)] shadow-[var(--sombra-panel)]">
        <div class="flex items-center justify-between gap-2 border-b border-[var(--borde)] px-4 py-3">
            <p class="text-sm font-bold text-[var(--texto)]">Alertas</p>
            @if ($pendientes)
                <button type="button" wire:click="marcarTodas" class="text-[12px] font-semibold text-[var(--acento-texto)] hover:underline">Marcar todas como leídas</button>
            @endif
        </div>
        <div class="max-h-[26rem] overflow-y-auto">
            <div wire:loading.delay wire:target="abrir" class="px-4 py-6 text-center text-[13px] text-[var(--texto-suave)]">Cargando…</div>
            <div wire:loading.remove wire:target="abrir">
                @forelse ($alertas as $a)
                    <button type="button" wire:key="alerta-{{ $a->id }}" wire:click="ver({{ $a->id }})"
                            class="flex w-full gap-3 border-b border-[var(--borde)] px-4 py-3 text-left last:border-b-0 hover:bg-[var(--nav-hover)] focus:outline-none focus-visible:bg-[var(--nav-hover)]">
                        <span @class(['mt-1.5 h-2 w-2 flex-shrink-0 rounded-full', 'bg-[var(--acento)]' => !$a->leida, 'bg-transparent' => $a->leida]) aria-hidden="true"></span>
                        <span class="min-w-0 flex-1">
                            <span @class(['block text-[13px] text-[var(--texto)]', 'font-semibold' => !$a->leida])>{{ \App\Http\Livewire\Layout\CampanaAlertas::TITULOS[$a->tipo] ?? $a->tipo }}</span>
                            <span class="mt-0.5 line-clamp-3 block whitespace-pre-line text-[12px] text-[var(--texto-suave)]">{{ $a->mensaje }}</span>
                            <span class="mt-1 block text-[11px] text-[var(--texto-tenue)]">{{ \Carbon\Carbon::parse($a->created_at)->format('d/m/Y H:i') }}@if (!$a->leida)<span class="sr-only"> · sin leer</span>@endif</span>
                        </span>
                    </button>
                @empty
                    <div class="px-4 py-8 text-center text-[13px] text-[var(--texto-suave)]">
                        <x-icono nombre="bell-slash" class="mx-auto h-6 w-6 text-[var(--texto-tenue)]" />
                        <p class="mt-2">No tienes alertas.</p>
                    </div>
                @endforelse
            </div>
        </div>
    </div>
</div>