{{-- Encabezado de columna ordenable (kit ui-ctc), dentro de un <th>. Props: etiqueta, activo (bool), direccion (ASC|DESC).
     La acción va en los atributos (wire:click="ordenar('campo')"). --}}
@props(['etiqueta', 'activo' => false, 'direccion' => 'ASC'])
<button type="button" {{ $attributes->merge(['class' => 'inline-flex items-center gap-1 uppercase tracking-[inherit] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--acento)] ' . ($activo ? 'text-[var(--acento-texto)]' : 'hover:text-[var(--texto)]')]) }}
        aria-label="Ordenar por {{ $etiqueta }}">
    {{ $etiqueta }}
    <x-icono :nombre="$activo ? ($direccion === 'DESC' ? 'arrow-down' : 'arrow-up') : 'arrows-up-down'" variante="m" class="h-3.5 w-3.5" />
</button>