Fix: Corregir uso de UModal según API de Nuxt UI v4

- Usar v-model:open en lugar de v-model
- Usar slot #content para contenido personalizado
- Usar slots #body/#footer para estructura predefinida
- Corregir modal de imagen fullscreen
- Corregir modal de selector de emojis

app/components/messages/ReactionPicker.vue

@@ -23,29 +23,24 @@
   </div>
 
   <!-- Full emoji picker modal -->
-  <UModal v-model="showFullPicker">
+  <UModal v-model:open="showFullPicker" title="Elegir reacción" :ui="{ footer: 'justify-end' }">
-    <template #default>
+    <template #body>
-      <div class="p-4 bg-[var(--wa-surface)]">
+      <div class="grid grid-cols-8 gap-2 max-h-64 overflow-y-auto">
-        <h3 class="text-lg font-semibold mb-4 text-[var(--wa-text)]">Elegir reaccion</h3>
+        <button
-
+          v-for="emoji in allEmojis"
-        <div class="grid grid-cols-8 gap-2 max-h-64 overflow-y-auto">
+          :key="emoji"
-          <button
+          class="w-10 h-10 flex items-center justify-center text-2xl hover:bg-[var(--wa-bg-light)] rounded transition-transform hover:scale-110"
-            v-for="emoji in allEmojis"
+          @click="selectReaction(emoji); showFullPicker = false"
-            :key="emoji"
+        >
-            class="w-10 h-10 flex items-center justify-center text-2xl hover:bg-[var(--wa-bg-light)] rounded transition-transform hover:scale-110"
+          {{ emoji }}
-            @click="selectReaction(emoji); showFullPicker = false"
+        </button>
-          >
-            {{ emoji }}
-          </button>
-        </div>
-
-        <div class="mt-4 flex justify-end">
-          <UButton variant="ghost" @click="showFullPicker = false">
-            Cancelar
-          </UButton>
-        </div>
       </div>
     </template>
+    <template #footer>
+      <UButton variant="ghost" color="neutral" @click="showFullPicker = false">
+        Cancelar
+      </UButton>
+    </template>
   </UModal>
 </template>
 

app/components/messages/content/MessageImage.vue

@@ -88,11 +88,10 @@
   </div>
 
   <!-- Fullscreen modal -->
-  <UModal v-model="showFullscreen" :ui="{ width: 'max-w-[95vw]' }">
+  <UModal v-model:open="showFullscreen" :close="false" :ui="{ content: 'max-w-[95vw] bg-black' }">
-    <template #default>
+    <template #content>
-      <div class="relative bg-black flex items-center justify-center min-h-[50vh]">
+      <div class="relative flex items-center justify-center min-h-[50vh]">
         <img
-          v-if="showFullscreen"
           :src="imageUrl"
           :alt="'Imagen'"
           class="max-w-full max-h-[90vh] object-contain"