{{-- Embudo del ciclo de vida (kit ui-ctc): un indicador por fase; clic filtra por la fase y otro clic lo quita.
     Las fases se derivan en PurchaseOrderV2::derivarFase(), no se guardan. --}}
@php
    $paleta = ['sin_confirmar' => '#64748B', 'sin_embarcar' => 'var(--acento)', 'en_transito' => '#B4740A', 'con_arribo' => '#1F7A4D'];
@endphp
<section class="space-y-2.5">
    <div class="flex flex-wrap items-center justify-between gap-2">
        <h2 class="text-[11px] font-semibold uppercase tracking-[0.12em] text-[var(--texto-suave)]">Ciclo de la orden de compra</h2>
        <p class="text-[12px] text-[var(--texto-suave)]">Conversión total del embudo <b class="font-bold text-[var(--texto)]">{{ $stats['conversion'] ?? 0 }}%</b></p>
    </div>
    <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
        @foreach ($stats['fases'] ?? [] as $clave => $fase)
            <x-indicador :titulo="$fase['titulo']" :valor="$fase['conteo']" :total="$stats['total'] ?? null" :porcentaje="$fase['pct']"
                         :color="$paleta[$clave]" :activo="$filtroFase === $clave" :ayuda="strip_tags($fase['contexto'])" :ayuda-aviso="$fase['alerta']"
                         wire:click="filtrarFase('{{ $clave }}')" wire:key="fase-{{ $clave }}" title="Filtrar por {{ $fase['titulo'] }}" />
        @endforeach
    </div>
</section>