{{-- Paginación de componentes Livewire (WithPagination) con tokens. Gemela de vendor.pagination.ctc, con
     wire:click en vez de enlaces. Uso: $coleccion->links('vendor.pagination.ctc-livewire') --}}
@if ($paginator->hasPages())
    @php
        $pagina = $paginator->getPageName();
        $item = 'inline-flex h-8 min-w-8 items-center justify-center rounded-md px-2 tabular-nums';
    @endphp
    <nav role="navigation" aria-label="Paginación" class="flex flex-wrap items-center justify-between gap-3 text-[12px]">
        <p class="text-[12px] text-[var(--texto-suave)]">
            Mostrando <span class="font-semibold text-[var(--texto)]">{{ number_format($paginator->firstItem(), 0, ',', '.') }}–{{ number_format($paginator->lastItem(), 0, ',', '.') }}</span>
            @if (method_exists($paginator, 'total')) de <span class="font-semibold text-[var(--texto)]">{{ number_format($paginator->total(), 0, ',', '.') }}</span>@endif
        </p>
        <ul class="flex flex-wrap items-center gap-1">
            <li>
                @if ($paginator->onFirstPage())
                    <span class="{{ $item }} border border-[var(--borde)] text-[var(--texto-tenue)]" aria-disabled="true" aria-label="Anterior"><x-icono nombre="chevron-left" variante="m" /></span>
                @else
                    <button type="button" wire:click="previousPage('{{ $pagina }}')" wire:loading.attr="disabled" aria-label="Anterior" class="{{ $item }} border border-[var(--borde-fuerte)] bg-[var(--superficie)] text-[var(--texto)] hover:bg-[var(--nav-hover)]"><x-icono nombre="chevron-left" variante="m" /></button>
                @endif
            </li>
            @foreach ($elements as $element)
                @if (is_string($element))
                    <li><span class="{{ $item }} text-[var(--texto-tenue)]">{{ $element }}</span></li>
                @endif
                @if (is_array($element))
                    @foreach ($element as $page => $url)
                        <li wire:key="{{ $pagina }}-{{ $page }}">
                            @if ($page == $paginator->currentPage())
                                <span aria-current="page" class="{{ $item }} bg-[var(--acento)] font-semibold text-[var(--acento-contraste)]">{{ $page }}</span>
                            @else
                                <button type="button" wire:click="gotoPage({{ $page }}, '{{ $pagina }}')" wire:loading.attr="disabled" class="{{ $item }} border border-[var(--borde-fuerte)] bg-[var(--superficie)] text-[var(--texto)] hover:bg-[var(--nav-hover)]">{{ $page }}</button>
                            @endif
                        </li>
                    @endforeach
                @endif
            @endforeach
            <li>
                @if ($paginator->hasMorePages())
                    <button type="button" wire:click="nextPage('{{ $pagina }}')" wire:loading.attr="disabled" aria-label="Siguiente" class="{{ $item }} border border-[var(--borde-fuerte)] bg-[var(--superficie)] text-[var(--texto)] hover:bg-[var(--nav-hover)]"><x-icono nombre="chevron-right" variante="m" /></button>
                @else
                    <span class="{{ $item }} border border-[var(--borde)] text-[var(--texto-tenue)]" aria-disabled="true" aria-label="Siguiente"><x-icono nombre="chevron-right" variante="m" /></span>
                @endif
            </li>
        </ul>
    </nav>
@endif