{{-- Lista de las pantallas de catálogo (kit ui-ctc): barra con título, conteo y leyenda; tabla con cabecera fija y
     paginación. El slot es el contenido de la tabla (<thead> y <tbody>).
     Props: titulo; total (n.º de registros); paginador (LengthAwarePaginator, opcional); livewire (bool: paginación de
     Livewire); leyendaInactivo (bool: muestra la convención de color de los registros inactivos). Slot opcional: acciones. --}}
@props(['titulo', 'total' => null, 'paginador' => null, 'livewire' => false, 'leyendaInactivo' => true])
<section {{ $attributes->merge(['class' => 'min-w-0 overflow-hidden rounded-xl border border-[var(--borde)] bg-[var(--superficie)]']) }}>
    <div class="flex flex-wrap items-center justify-between gap-3 border-b border-[var(--borde)] px-5 py-3">
        <h2 class="flex items-center gap-2 text-[14px] font-bold text-[var(--texto)]">
            {{ $titulo }}
            @if ($total !== null)<span class="rounded-full bg-[var(--superficie-2)] px-2 py-0.5 text-[11px] font-bold tabular-nums text-[var(--texto-suave)]">{{ number_format($total, 0, ',', '.') }}</span>@endif
        </h2>
        <div class="flex flex-wrap items-center gap-3 text-[12px] text-[var(--texto-suave)]">
            @if ($leyendaInactivo)
                <span class="flex items-center gap-1.5"><span class="h-2.5 w-2.5 rounded-sm border border-amber-500 bg-amber-500/20"></span>Inactivo</span>
            @endif
            @if ($livewire)
                <span wire:loading.delay class="flex items-center gap-1.5 whitespace-nowrap text-[var(--acento-texto)]" role="status">
                    <x-icono nombre="arrow-path" class="h-4 w-4 animate-spin" /> Consultando…
                </span>
            @endif
            {{ $acciones ?? '' }}
        </div>
    </div>
    <div class="ctc-tabla-caja">
        <table class="ctc-tabla">{{ $slot }}</table>
    </div>
    {{-- Íconos de x-catalogo.acciones; dentro de la lista para que lleguen también en las respuestas de Livewire. --}}
    <x-icono-simbolos :nombres="['o:pencil-square', 'o:trash']" />

    @if ($paginador && $paginador->hasPages())
        <div class="border-t border-[var(--borde)] px-5 py-3">{{ $paginador->links($livewire ? 'vendor.pagination.ctc-livewire' : 'vendor.pagination.ctc') }}</div>
    @endif
</section>