{{-- Header --}}
 <div class="mb-3">
    <div class="lg:flex lg:justify-between py-3">
        <div class="text-xl font-semibold text-base-content">
            Gestión de Usuarios
        </div>
    </div>
    <div class="flex flex-wrap justify-between items-center gap-4">
        <!-- Contenedor de los botones -->
        <div class="flex flex-wrap gap-2 max-sm:grid max-sm:grid-cols-2 max-sm:w-full">
            @can('usuarios.create')
            <div>
                @livewire('crear-usuario')
            </div>
            @endcan
            <div>
                <x-button label="Exportar" icon='o-arrow-up-tray'
                    class="btn-outline btn-sm w-full sm:w-auto h-full sm:h-8" disabled />
            </div>
        </div>
        <!-- Input del buscador -->
        <div class="w-full sm:w-auto max-sm:mt-2">
            <x-input icon="o-magnifying-glass" wire:model.live.debounce.500ms="search"
                label="Buscar registro..." inline autocomplete="off" placeholder='Buscar registro...' />
        </div>
    </div>
</div>