{{-- Tops de las órdenes de compra (kit ui-ctc). Cada lista se despliega con su botón, como antes. --}}
<div class="grid gap-3 md:grid-cols-3">
	@foreach (['Top productos por pedidos' => $topProducts, 'Top exportadores por pedidos' => $topExporters, 'Top órdenes por valor total' => $topOrders] as $tituloTop => $opciones)
		<section x-data="{ abierta: false }" class="overflow-hidden rounded-xl border border-[var(--borde)] bg-[var(--superficie)]">
			<button type="button" x-on:click="abierta = !abierta" :aria-expanded="abierta"
				class="flex w-full items-center justify-between gap-3 px-4 py-3 text-left hover:bg-[var(--nav-hover)] focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--acento)]">
				<h2 class="text-[14px] font-bold text-[var(--texto)]">{{ $tituloTop }}</h2>
				<x-icono nombre="chevron-down" variante="m" class="h-4 w-4 text-[var(--texto-tenue)] transition-transform" x-bind:class="abierta && 'rotate-180'" />
			</button>
			<ol x-show="abierta" x-cloak class="divide-y divide-[var(--borde)] border-t border-[var(--borde)] px-4">
				@forelse ($opciones as $opcion)
					<li class="flex items-center justify-between gap-4 py-2 text-[12.5px]">
						<span class="min-w-0 truncate" title="{{ $opcion['titulo'] }}"><span class="text-[var(--texto-tenue)]">{{ $loop->iteration }}.</span> {{ $opcion['titulo'] }}</span>
						<span class="flex-none font-semibold tabular-nums">{{ number_format($opcion['total']) }}</span>
					</li>
				@empty
					<li class="py-3 text-[12.5px] text-[var(--texto-suave)]">No hay elementos para mostrar.</li>
				@endforelse
			</ol>
		</section>
	@endforeach
</div>