{{-- Semáforo de un requisito (kit ui-ctc): sigla en un círculo con el color de su estado.
     color: green (cumplido) | yellow (por vencer) | red (pendiente, con pulso) | gray (no aplica). titulo: texto del title. --}}
@props(['sigla', 'color' => 'gray', 'titulo' => null])
@php
    $clases = [
        'green'  => 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300',
        'yellow' => 'bg-amber-100 text-amber-700 dark:bg-amber-500/15 dark:text-amber-300',
        'red'    => 'bg-rose-100 text-rose-700 dark:bg-rose-500/15 dark:text-rose-300',
        'gray'   => 'bg-[var(--superficie-2)] text-[var(--texto-tenue)]',
    ][$color] ?? 'bg-[var(--superficie-2)] text-[var(--texto-tenue)]';
    $estado = ['green' => 'cumplido', 'yellow' => 'por vencer', 'red' => 'pendiente', 'gray' => 'no aplica'][$color] ?? '';
@endphp
<span {{ $attributes->merge(['class' => "relative inline-flex h-6 w-6 flex-none items-center justify-center rounded-full text-[10px] font-bold $clases"]) }}
      title="{{ $titulo ? $titulo . ': ' : '' }}{{ $estado }}" role="img" aria-label="{{ $titulo ?: $sigla }}: {{ $estado }}">
    @if ($color === 'red')<span class="absolute inset-0 animate-ping rounded-full bg-rose-400/40" aria-hidden="true"></span>@endif
    <span class="relative">{{ $sigla }}</span>
</span>