Fix: Corregir implementación de InputMenu según documentación oficial

Correcciones aplicadas:
- Usar ignore-filter para control manual del filtrado
- Implementar label-key y value-key correctamente
- Usar slot #item-label en lugar de #item para personalización
- Usar slot #empty para mensajes cuando no hay resultados
- Mapear items a formato InputMenuItem con label y value
- Usar clases de Nuxt UI (text-muted) en lugar de variables CSS
- Simplificar lógica eliminando control manual del estado open

Funcionalidad:
- Filtrado solo se activa con mínimo 4 caracteres
- Búsqueda por nombre y cédula
- Selección múltiple con tags visuales
- Formato de cédula mantenido

nuxt4-app/app/components/ClienteMultiSelector.vue

@@ -4,29 +4,39 @@
     <UInputMenu
       v-model="selectedClientes"
       v-model:search-term="searchQuery"
-      v-model:open="isMenuOpen"
       :items="filteredItems"
       :loading="loading"
       multiple
-      icon="i-lucide-search"
-      placeholder="Buscar clientes por nombre o cédula (mínimo 4 caracteres)..."
+      label-key="name"
       value-key="id"
+      icon="i-lucide-search"
+      placeholder="Buscar clientes por nombre o cédula..."
+      ignore-filter
     >
-      <template #item="{ item }">
-        <div class="flex-1 min-w-0">
-          <div class="font-medium truncate">
-            {{ item.name }}
-          </div>
-          <div class="text-xs text-[var(--brand-text-muted)]">
-            <span v-if="item.cedula">{{ formatCedula(item.cedula) }}</span>
+      <template #item-label="{ item }">
+        <div class="flex flex-col gap-0.5">
+          <span class="font-medium">{{ item.name }}</span>
+          <span v-if="item.cedula" class="text-xs text-muted">
+            {{ formatCedula(item.cedula) }}
+          </span>
         </div>
+      </template>
+
+      <template #empty>
+        <div class="text-center py-2">
+          <span v-if="searchQuery.length < 4" class="text-muted text-sm">
+            Escribe al menos 4 caracteres para buscar
+          </span>
+          <span v-else class="text-muted text-sm">
+            No se encontraron clientes
+          </span>
         </div>
       </template>
     </UInputMenu>
 
     <!-- Selected count and clear all -->
     <div v-if="selectedClientes.length > 0" class="flex items-center justify-between text-sm">
-      <span class="text-[var(--brand-text-muted)]">
+      <span class="text-muted">
         {{ selectedClientes.length }} cliente{{ selectedClientes.length !== 1 ? 's' : '' }} seleccionado{{ selectedClientes.length !== 1 ? 's' : '' }}
       </span>
       <UButton
@@ -42,6 +52,8 @@
 </template>
 
 <script setup lang="ts">
+import type { InputMenuItem } from '@nuxt/ui'
+
 interface Cliente {
   id: number
   name: string
@@ -61,7 +73,6 @@ const emit = defineEmits<{
 const clientes = ref<Cliente[]>([])
 const loading = ref(false)
 const searchQuery = ref('')
-const isMenuOpen = ref(false)
 
 // Computed - Sync with props
 const selectedClientes = computed({
@@ -74,7 +85,7 @@ const selectedClientes = computed({
 })
 
 // Computed - Filter items based on search (min 4 characters)
-const filteredItems = computed(() => {
+const filteredItems = computed((): InputMenuItem[] => {
   const query = searchQuery.value.trim()
 
   // Only show items if search has at least 4 characters
@@ -84,19 +95,18 @@ const filteredItems = computed(() => {
 
   const lowerQuery = query.toLowerCase()
 
-  return clientes.value.filter(c =>
+  return clientes.value
+    .filter(c =>
       c.name.toLowerCase().includes(lowerQuery) ||
       c.cedula?.includes(query)
     )
-})
-
-// Watch searchQuery to control menu opening
-watch(searchQuery, (newValue) => {
-  if (newValue.trim().length >= 4 && filteredItems.value.length > 0) {
-    isMenuOpen.value = true
-  } else {
-    isMenuOpen.value = false
-  }
+    .map(c => ({
+      id: c.id,
+      name: c.name,
+      cedula: c.cedula,
+      label: c.name,
+      value: c.id
+    }))
 })
 
 // Methods