{{-- Barra de búsqueda del kit ui-ctc: campo con lupa y "Enter", botón Filtros (con conteo y despliegue) y botón
     Consultar. Props: modelo (propiedad Livewire del texto), accion (método que consulta), placeholder,
     activos (n.º de filtros aplicados), abierto (filtros desplegados al cargar), vivo (busca mientras se escribe).
     Slots: filtros (rejilla de campos, opcional), chips (filtros aplicados, opcional), ayuda (opcional). --}}
@props(['modelo', 'accion', 'placeholder' => 'Buscar', 'activos' => 0, 'abierto' => false, 'vivo' => false])
<section {{ $attributes->merge(['class' => 'space-y-3.5 rounded-xl border border-[var(--borde)] bg-[var(--superficie)] px-5 py-4']) }}
         x-data="{ filtros: @js((bool) $abierto) }">
    <div class="flex flex-wrap gap-2.5">
        <div class="relative min-w-[16rem] flex-1">
            <x-icono nombre="magnifying-glass" class="pointer-events-none absolute left-3.5 top-1/2 h-5 w-5 -translate-y-1/2 text-[var(--texto-tenue)]" />
            <input type="search" @if ($vivo) wire:model.live.debounce.300ms="{{ $modelo }}" @else wire:model="{{ $modelo }}" @endif wire:keydown.enter="{{ $accion }}" placeholder="{{ $placeholder }}" aria-label="{{ $placeholder }}"
                   class="form-input block h-11 w-full rounded-[10px] border-[var(--borde-fuerte)] bg-[var(--superficie-3)] pl-11 pr-20 text-[14px] text-[var(--texto)] placeholder:text-[var(--texto-tenue)]
                          focus:border-[var(--acento)] focus:bg-[var(--superficie)] focus:ring-[3px] focus:ring-[var(--acento-suave)]">
            <kbd class="pointer-events-none absolute right-3 top-1/2 hidden -translate-y-1/2 rounded border border-b-2 border-[var(--borde-fuerte)] bg-[var(--superficie)] px-1.5 py-px font-sans text-[11px] text-[var(--texto-suave)] sm:block">Enter</kbd>
        </div>
        @isset($filtros)
            <button type="button" x-on:click="filtros = !filtros" :aria-expanded="filtros"
                    class="inline-flex h-11 items-center gap-2 rounded-[10px] border border-[var(--borde-fuerte)] bg-[var(--superficie)] px-4 text-[14px] font-medium text-[var(--texto)] hover:bg-[var(--nav-hover)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--acento)]">
                <x-icono nombre="adjustments-horizontal" class="h-[18px] w-[18px]" />
                Filtros
                @if ($activos > 0)
                    <span class="flex h-5 min-w-5 items-center justify-center rounded-full bg-[var(--acento-suave)] px-1.5 text-[11px] font-bold text-[var(--acento-texto)]">{{ $activos }}</span>
                @endif
                <x-icono nombre="chevron-down" variante="m" class="h-4 w-4 text-[var(--texto-tenue)] transition" x-bind:class="filtros && 'rotate-180'" />
            </button>
        @endisset
        <button type="button" wire:click="{{ $accion }}" wire:loading.attr="disabled"
                class="inline-flex h-11 items-center gap-2 rounded-[10px] bg-[var(--acento)] px-5 text-[14px] font-semibold text-[var(--acento-contraste)] hover:bg-[var(--acento-hover)] active:bg-[var(--acento-activo)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--acento)] focus-visible:ring-offset-2 disabled:opacity-60">
            <x-icono nombre="magnifying-glass" variante="m" class="h-4 w-4" />
            Consultar
        </button>
    </div>
    @isset($ayuda)<p class="text-[12px] text-[var(--texto-tenue)]">{{ $ayuda }}</p>@endisset
    @isset($filtros)
        <div x-show="filtros" x-cloak class="grid gap-x-4 gap-y-3.5 border-t border-dashed border-[var(--borde-fuerte)] pt-3.5 [grid-template-columns:repeat(auto-fill,minmax(200px,1fr))]">
            {{ $filtros }}
        </div>
    @endisset
    @isset($chips)
        @if (trim($chips) !== '')
            <div class="flex flex-wrap items-center gap-2">{{ $chips }}</div>
        @endif
    @endisset
</section>