{{-- Las dos prórrogas de un RIM (kit ui-ctc): usada, cuadro relleno ámbar; disponible, borde punteado. --}}
@props(['prorrogas', 'fechaProrroga' => null, 'fechaProrroga2' => null])
@php
    $usada = 'border-amber-400 bg-amber-100 text-amber-800 dark:border-amber-500/60 dark:bg-amber-500/20 dark:text-amber-200';
    $libre = 'border-dashed border-[var(--borde-fuerte)] text-[var(--texto-tenue)]';
@endphp
<div class="flex items-center gap-1.5">
    <span class="flex h-6 w-6 items-center justify-center rounded-md border text-[11px] font-bold {{ $prorrogas['p1'] ? $usada : $libre }}"
          title="{{ $prorrogas['p1'] ? 'Prórroga 1: ' . \App\Http\Clases\Rim\FormatoRim::fecha($fechaProrroga) : 'Prórroga 1 sin usar' }}">1</span>
    <span class="flex h-6 w-6 items-center justify-center rounded-md border text-[11px] font-bold {{ $prorrogas['p2'] ? $usada : $libre }}"
          title="{{ $prorrogas['p2'] ? 'Prórroga 2: ' . \App\Http\Clases\Rim\FormatoRim::fecha($fechaProrroga2) : 'Prórroga 2 sin usar' }}">2</span>
    <span class="ml-1 whitespace-nowrap text-[12px] text-[var(--texto-suave)]">{{ $prorrogas['texto'] }}</span>
</div>