{{-- Estado actual del DO (seguimiento-imp/{do}, seguimiento-exp/{do}). El componente da el estado y un nombre de color de
     Tailwind (orange, yellow…); aquí se traduce a hex para x-etiqueta, sin armar clases con variables. Kit ui-ctc. --}}
@php
    $hex = ['orange' => '#f97316', 'yellow' => '#eab308', 'green' => '#22c55e', 'blue' => '#3b82f6', 'cyan' => '#06b6d4', 'purple' => '#a855f7', 'gray' => '#6b7280'];
    $color = $hex[$statusHoy['colorStatus']] ?? null;
@endphp
<div class="flex items-center gap-3 rounded-xl border border-[var(--borde)] bg-[var(--superficie)] px-4 py-3"
     @if ($color) style="box-shadow: inset 4px 0 0 {{ $color }}" @endif>
    <x-icono nombre="map-pin" variante="s" class="h-5 w-5 text-[var(--texto-tenue)]" />
    <div class="min-w-0 flex-1">
        <p class="text-[11px] font-semibold uppercase tracking-[0.06em] text-[var(--texto-suave)]">Estado actual del proceso</p>
        <p class="mt-1">
            @if ($statusHoy['status'] !== '')
                <x-etiqueta :color="$color" class="uppercase">{{ $statusHoy['status'] }}</x-etiqueta>
            @else
                <span class="text-[13px] text-[var(--texto-tenue)]">Sin estado</span>
            @endif
        </p>
    </div>
</div>