Fix: Actualizar implementación de UModal a Nuxt UI v4

- Cambiar v-model a v-model:open según API de v4
- Agregar slot #content requerido en todos los modales
- Corregir prop :ui para anchos personalizados (content en lugar de width)
- Aplicar clases correctas del tema para max-w-3xl y max-w-4xl

nuxt4/app/app.vue

@@ -117,39 +117,53 @@
     </UContainer>
 
     <!-- Modal: Crear/Editar Lote -->
-    <UModal v-model="showLoteFormModal">
-      <LotesLoteForm
-        :lote="selectedLote"
-        @cancel="closeLoteFormModal"
-        @success="handleLoteFormSuccess"
-      />
+    <UModal v-model:open="showLoteFormModal">
+      <template #content>
+        <LotesLoteForm
+          :lote="selectedLote"
+          @cancel="closeLoteFormModal"
+          @success="handleLoteFormSuccess"
+        />
+      </template>
     </UModal>
 
     <!-- Modal: Ver Detalle de Lote -->
-    <UModal v-model="showLoteDetailModal">
-      <LotesLoteCard
-        v-if="selectedLote"
-        :lote="selectedLote"
-        @edit="handleEditLoteFromDetail"
-        @trazabilidad="handleViewTrazabilidadFromDetail"
-      />
+    <UModal v-model:open="showLoteDetailModal">
+      <template #content>
+        <LotesLoteCard
+          v-if="selectedLote"
+          :lote="selectedLote"
+          @edit="handleEditLoteFromDetail"
+          @trazabilidad="handleViewTrazabilidadFromDetail"
+        />
+      </template>
     </UModal>
 
     <!-- Modal: Ver Trazabilidad -->
-    <UModal v-model="showTrazabilidadModal" :ui="{ width: 'max-w-4xl' }">
-      <LotesTrazabilidadTree
-        v-if="trazabilidadLoteId"
-        :lote-id="trazabilidadLoteId"
-        @close="showTrazabilidadModal = false"
-      />
+    <UModal
+      v-model:open="showTrazabilidadModal"
+      :ui="{ content: 'w-[calc(100vw-2rem)] max-w-4xl rounded-lg shadow-lg ring ring-default' }"
+    >
+      <template #content>
+        <LotesTrazabilidadTree
+          v-if="trazabilidadLoteId"
+          :lote-id="trazabilidadLoteId"
+          @close="showTrazabilidadModal = false"
+        />
+      </template>
     </UModal>
 
     <!-- Modal: Crear Operación -->
-    <UModal v-model="showCreateOperacionModal" :ui="{ width: 'max-w-3xl' }">
-      <OperacionesOperacionForm
-        @cancel="showCreateOperacionModal = false"
-        @success="handleOperacionFormSuccess"
-      />
+    <UModal
+      v-model:open="showCreateOperacionModal"
+      :ui="{ content: 'w-[calc(100vw-2rem)] max-w-3xl rounded-lg shadow-lg ring ring-default' }"
+    >
+      <template #content>
+        <OperacionesOperacionForm
+          @cancel="showCreateOperacionModal = false"
+          @success="handleOperacionFormSuccess"
+        />
+      </template>
     </UModal>
   </UApp>
 </template>