{{-- Filtro aplicado (kit ui-ctc). El botón de quitar recibe los atributos (wire:click="limpiarFiltro('…')"). --}}
@props(['etiqueta', 'valor'])
<span class="inline-flex h-7 items-center gap-1.5 rounded-full bg-[var(--acento-suave)] pl-2.5 pr-1 text-[12px] font-medium text-[var(--acento-texto)]">
    <span class="text-[var(--texto-suave)]">{{ $etiqueta }}:</span>{{ $valor }}
    <button type="button" aria-label="Quitar el filtro {{ $etiqueta }}" title="Quitar"
            {{ $attributes->merge(['class' => 'flex h-[18px] w-[18px] items-center justify-center rounded-full hover:bg-[var(--acento-borde)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--acento)]']) }}>
        <x-icono nombre="x-mark" variante="m" class="h-3 w-3" />
    </button>
</span>