{{-- Totales por medio de transporte frente al periodo anterior (kit ui-ctc). Compartido por
     dashboard.importaciones-totale-stats y dashboard.exportaciones-totale-stats. $data: medio, total, total_ant,
     diferencia, p_diferencia y svg (ícono del medio, fijo en el componente). --}}
<div class="relative">
    <p wire:loading.flex class="absolute right-0 top-0 items-center gap-1.5 text-[12px] text-[var(--texto-suave)]" role="status"><x-icono nombre="arrow-path" class="h-3.5 w-3.5 animate-spin" /> Consultando…</p>
    @if (count($data) > 0)
        <div class="grid gap-3 [grid-template-columns:repeat(auto-fit,minmax(190px,1fr))]">
            @foreach ($data as $item)
                @php $sube = $item['diferencia'] >= 0; @endphp
                <div class="rounded-xl border border-[var(--borde)] bg-[var(--superficie)] p-4 shadow-sm">
                    <div class="flex items-center gap-3">
                        <span class="flex h-10 w-10 flex-none items-center justify-center rounded-lg bg-[var(--acento)] text-[var(--acento-contraste)] [&_svg]:h-5 [&_svg]:w-5">{!! $item['svg'] !!}</span>
                        <p class="min-w-0 truncate text-[11px] font-semibold uppercase tracking-[0.06em] text-[var(--texto-suave)]">{{ $item['medio'] }}</p>
                    </div>
                    <div class="mt-3 flex items-baseline gap-2">
                        <span class="text-[28px] font-bold leading-none tabular-nums text-[var(--texto)]">{{ $item['total'] }}</span>
                        <span class="inline-flex items-center gap-0.5 rounded-full px-2 py-0.5 text-[12px] font-semibold tabular-nums
                                     {{ $sube ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-300' : 'bg-rose-50 text-rose-700 dark:bg-rose-500/10 dark:text-rose-300' }}">
                            <x-icono :nombre="$sube ? 'arrow-up' : 'arrow-down'" variante="m" class="h-3.5 w-3.5" />
                            <span class="sr-only">{{ $sube ? 'Aumentó' : 'Disminuyó' }}</span>{{ $item['p_diferencia'] }}%
                        </span>
                    </div>
                    <p class="mt-2 text-[12px] text-[var(--texto-tenue)]">Periodo anterior: <span class="font-semibold tabular-nums text-[var(--texto-suave)]">{{ $item['total_ant'] }}</span></p>
                </div>
            @endforeach
        </div>
    @else
        <p class="py-4 text-[13px] text-[var(--texto-suave)]">{{ $sinDatos }}</p>
    @endif
</div>