{{-- Pestaña subrayada del kit ui-ctc (listas y detalles). Activa por servidor (activa) o por Alpine
     (alpine="pestana === 'otros'"). Props: etiqueta, conteo (opcional; conteoAlpine si sale de una expresión Alpine),
     icono (Heroicons, opcional), tamano (normal|chica). --}}
@props(['etiqueta', 'conteo' => null, 'conteoAlpine' => null, 'icono' => null, 'activa' => false, 'alpine' => null, 'tamano' => 'normal'])
@php
    $on = 'font-semibold text-[var(--acento-texto)] border-[var(--acento)]';
    $off = 'font-medium text-[var(--texto-suave)] border-transparent hover:text-[var(--texto)]';
    $badgeOn = 'bg-[var(--acento-suave)] text-[var(--acento-texto)]';
    $badgeOff = 'bg-[var(--superficie-2)] text-[var(--texto-suave)]';
    $alto = $tamano === 'chica' ? 'pb-2.5 pt-3 text-[13px]' : 'pb-3.5 pt-4 text-[14px]';
@endphp
<button type="button" role="tab"
    @if ($alpine) x-bind:aria-selected="{{ $alpine }}" x-bind:class="({{ $alpine }}) ? @js($on) : @js($off)" @else aria-selected="{{ $activa ? 'true' : 'false' }}" @endif
    {{ $attributes->merge(['class' => "-mb-px inline-flex items-center gap-2 whitespace-nowrap border-b-2 px-2.5 $alto focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--acento)] " . ($alpine ? '' : ($activa ? $on : $off))]) }}>
    @if ($icono)<x-icono :nombre="$icono" class="h-[18px] w-[18px]" />@endif
    {{ $etiqueta }}
    @if ($conteoAlpine)
        <span class="rounded-full px-2 py-0.5 text-[11px] font-bold tabular-nums" x-text="{{ $conteoAlpine }}"
              x-bind:class="({{ $alpine ?: 'false' }}) ? @js($badgeOn) : @js($badgeOff)"></span>
    @elseif ($conteo !== null)
        <span class="rounded-full px-2 py-0.5 text-[11px] font-bold tabular-nums"
              @if ($alpine) x-bind:class="({{ $alpine }}) ? @js($badgeOn) : @js($badgeOff)" @else class="{{ $activa ? $badgeOn : $badgeOff }}" @endif>{{ is_int($conteo) ? number_format($conteo, 0, ',', '.') : $conteo }}</span>
    @endif
</button>