{{-- Línea de tiempo del DO (seguimiento-imp/{do}, seguimiento-exp/{do}): etapas registradas, de la más reciente a la más
     antigua. Un clic abre el detalle de la etapa. Parámetros: $feeds, $editable (bool: el usuario puede registrar, editar y
     eliminar actividades; solo importación, usuarios con operación E). Kit ui-ctc. --}}
@php $hoy = new DateTime(); @endphp
<ol role="list" class="space-y-1">
    @foreach ($feeds as $feed)
        @php
            $futura = new DateTime($feed->fecha) > $hoy;
            $delCliente = ! empty($feed->aplicaEdicion);
        @endphp
        <li wire:key="feed-{{ $loop->index }}-{{ $feed->id }}" x-data="{ abierto: false }" class="relative flex gap-3">
            @unless ($loop->last)<span class="absolute bottom-[-4px] left-[11px] top-7 w-px bg-[var(--borde)]" aria-hidden="true"></span>@endunless
            <span class="relative mt-1.5 flex h-6 w-6 flex-none items-center justify-center rounded-full bg-[var(--superficie)]">
                @if ($loop->first)
                    <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-[var(--acento)] opacity-30"></span>
                    <x-icono nombre="check-circle" variante="s" class="relative h-6 w-6 text-[var(--acento)]" />
                @elseif ($futura)
                    <x-icono nombre="calendar-days" class="h-5 w-5 text-amber-600 dark:text-amber-400" /><span class="sr-only">Fecha programada</span>
                @else
                    <span class="h-2 w-2 rounded-full bg-[var(--superficie-2)] ring-1 ring-[var(--borde-fuerte)]"></span>
                @endif
            </span>
            <div class="min-w-0 flex-1">
                <button type="button" x-on:click="abierto = !abierto" :aria-expanded="abierto"
                        class="flex w-full items-start gap-2 rounded-lg px-2 py-1.5 text-left hover:bg-[var(--nav-hover)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--acento)]">
                    <span class="min-w-0 flex-1">
                        <span class="block text-[13px] font-semibold leading-snug text-[var(--texto)]">{{ $feed->etapa }}</span>
                        <span class="mt-0.5 flex flex-wrap items-center gap-1.5 text-[12px] tabular-nums text-[var(--texto-suave)]">
                            {{ $feed->fecha }}
                            @if ($delCliente)<x-etiqueta variante="acento" class="!px-1.5 !py-0 !text-[11px]">Cliente</x-etiqueta>@endif
                        </span>
                    </span>
                    <x-icono nombre="chevron-right" variante="m" class="mt-0.5 h-4 w-4 flex-none text-[var(--texto-tenue)] transition-transform" ::class="abierto && 'rotate-90'" />
                </button>
                <div x-show="abierto" x-cloak class="mx-2 mb-2 mt-1 space-y-1.5 rounded-lg border border-[var(--borde)] bg-[var(--superficie-2)] p-3 text-[12.5px] text-[var(--texto)]">
                    <p class="font-semibold">{{ $feed->codigo }} · {{ $feed->etapa }}</p>
                    <p class="tabular-nums text-[var(--texto-suave)]">Fecha {{ $feed->fecha }}{{ ! empty($feed->hora) ? ' · ' . $feed->hora : '' }}</p>
                    @if (! empty($feed->descripcion))<p class="whitespace-pre-line">{{ $feed->descripcion }}</p>@endif
                    @if ($delCliente && $editable)
                        <p class="italic text-[var(--texto-tenue)]">Esta actividad puede ser editada.</p>
                        <div class="flex gap-2 pt-1">
                            <x-secondary-button class="!h-8" wire:click="consultarEtapa({{ \Illuminate\Support\Js::from($feed->id) }})" x-on:click="$dispatch('abrir-actividad')">
                                <x-icono nombre="pencil-square" class="h-4 w-4" /> Editar
                            </x-secondary-button>
                            <x-secondary-button class="!h-8 text-rose-700 dark:text-rose-300" wire:click="confirmarEliminarActividad({{ \Illuminate\Support\Js::from($feed->id) }})">
                                <x-icono nombre="trash" class="h-4 w-4" /> Eliminar
                            </x-secondary-button>
                        </div>
                    @endif
                </div>
            </div>
        </li>
    @endforeach
</ol>