{{-- Búsqueda de las pantallas de catálogo (kit ui-ctc).
     Con accion (URL) es un formulario que envía "nombre" (txtBuscar) por GET: la ruta …srh acepta GET y POST, y el
     paginador lleva la búsqueda en sus enlaces (appends), así que la página 2 funciona y la URL se puede guardar. Con modelo (propiedad
     Livewire) busca mientras se escribe. limpiar: URL que quita la búsqueda (solo con accion y si hay valor).
     Slot opcional: acciones a la derecha (Excel…). --}}
@props(['accion' => null, 'metodo' => 'GET', 'nombre' => 'txtBuscar', 'valor' => null, 'modelo' => null, 'placeholder' => 'Buscar', 'limpiar' => null, 'requerido' => false])
<section {{ $attributes->merge(['class' => 'rounded-xl border border-[var(--borde)] bg-[var(--superficie)] px-5 py-4']) }}>
    @if ($accion)<form method="{{ strtoupper($metodo) === 'GET' ? 'get' : 'post' }}" action="{{ $accion }}" accept-charset="utf-8">@if (strtoupper($metodo) !== 'GET') @csrf @endif @endif
    <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 ($modelo) wire:model.live.debounce.300ms="{{ $modelo }}" @else name="{{ $nombre }}" value="{{ $valor }}" @endif
                   @if ($requerido) required @endif 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-4 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)]">
        </div>
        @if ($accion)
            <button type="submit" 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)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--acento)] focus-visible:ring-offset-2">
                <x-icono nombre="magnifying-glass" class="h-[18px] w-[18px]" /> Buscar
            </button>
            @if ($limpiar && (string) $valor !== '')
                <a href="{{ $limpiar }}" 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)]">
                    <x-icono nombre="x-mark" class="h-[18px] w-[18px]" /> Limpiar
                </a>
            @endif
        @endif
        {{ $slot }}
    </div>
    @if ($accion)</form>@endif
</section>