{{-- Paginación del layout nuevo con tokens. Uso: $coleccion->links('vendor.pagination.ctc') --}}
@if ($paginator->hasPages())
    <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>
        @php $item = 'inline-flex h-8 min-w-8 items-center justify-center rounded-md px-2 tabular-nums'; @endphp
        <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
                    <a href="{{ $paginator->previousPageUrl() }}" rel="prev" 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" /></a>
                @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>
                            @if ($page == $paginator->currentPage())
                                <span aria-current="page" class="{{ $item }} bg-[var(--acento)] font-semibold text-[var(--acento-contraste)]">{{ $page }}</span>
                            @else
                                <a href="{{ $url }}" class="{{ $item }} border border-[var(--borde-fuerte)] bg-[var(--superficie)] text-[var(--texto)] hover:bg-[var(--nav-hover)]">{{ $page }}</a>
                            @endif
                        </li>
                    @endforeach
                @endif
            @endforeach
            <li>
                @if ($paginator->hasMorePages())
                    <a href="{{ $paginator->nextPageUrl() }}" rel="next" 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" /></a>
                @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