Fix: corregir visualización del modal de detalle de operación

- Mover v-if al UCard completo para renderizado consistente
- Agregar configuración de UI con ancho max-w-2xl
- Remover v-if redundantes internos
- Seguir el patrón de otros modales que funcionan correctamente

nuxt4/app/app.vue

@@ -195,19 +195,29 @@
     <!-- Modal: Ver Trazabilidad -->
     <UModal
       v-model:open="showTrazabilidadModal"
-      scrollable
       :ui="{
-        content: 'w-[calc(100vw-2rem)] max-w-4xl rounded-lg shadow-lg ring ring-default max-h-[80vh]',
-        body: 'overflow-y-auto'
+        content: 'w-[calc(100vw-2rem)] max-w-4xl rounded-lg shadow-lg ring ring-default max-h-[80vh]'
       }"
     >
-      <template #content>
+      <template #header>
+        <div class="flex justify-between items-center">
+          <div>
+            <h3 class="text-xl font-bold">Trazabilidad de Lote</h3>
+            <p class="text-sm text-gray-500">Historial completo desde los ingresos iniciales</p>
+          </div>
+          <UButton
+            icon="i-heroicons-x-mark"
+            variant="ghost"
+            size="sm"
+            @click="showTrazabilidadModal = false"
+          />
+        </div>
+      </template>
+
       <LotesTrazabilidad
         v-if="trazabilidadLoteId"
         :lote-id="trazabilidadLoteId"
-          @close="showTrazabilidadModal = false"
       />
-      </template>
     </UModal>
 
     <!-- Modal: Crear Operación -->
@@ -224,21 +234,24 @@
     </UModal>
 
     <!-- Modal: Ver Detalle de Operación -->
-    <UModal v-model:open="showOperacionDetailModal">
+    <UModal
+      v-model:open="showOperacionDetailModal"
+      :ui="{ content: 'w-[calc(100vw-2rem)] max-w-2xl rounded-lg shadow-lg ring ring-default' }"
+    >
       <template #content>
-        <UCard>
+        <UCard v-if="selectedOperacion">
           <template #header>
             <div class="flex justify-between items-center">
               <div>
                 <h3 class="text-lg font-semibold">Detalle de Operación</h3>
-                <p class="text-sm text-gray-500" v-if="selectedOperacion">
+                <p class="text-sm text-gray-500">
                   {{ getOperacionTipoLabel(selectedOperacion.tipo) }} · {{ formatDate(selectedOperacion.fecha) }}
                 </p>
               </div>
               <UButton icon="i-heroicons-x-mark" variant="ghost" @click="closeOperacionDetailModal" />
             </div>
           </template>
-          <div v-if="selectedOperacion" class="space-y-3">
+          <div class="space-y-3">
             <div class="grid grid-cols-2 gap-3">
               <div>
                 <p class="text-xs uppercase text-gray-500">ID</p>
@@ -262,7 +275,6 @@
               </div>
             </div>
           </div>
-          <div v-else class="text-sm text-gray-500">No hay operación seleccionada.</div>
         </UCard>
       </template>
     </UModal>

nuxt4/app/components/lotes/Trazabilidad.vue

@@ -1,20 +1,4 @@
 <template>
-  <UCard>
-    <template #header>
-      <div class="flex justify-between items-center">
-        <div>
-          <h3 class="text-xl font-bold">Trazabilidad de Lote</h3>
-          <p class="text-sm text-gray-500">Historial completo desde los ingresos iniciales</p>
-        </div>
-        <UButton
-          icon="i-heroicons-x-mark"
-          variant="ghost"
-          size="sm"
-          @click="$emit('close')"
-        />
-      </div>
-    </template>
-
   <div v-if="loading" class="flex justify-center py-8">
     <UIcon name="i-heroicons-arrow-path" class="animate-spin w-8 h-8" />
   </div>
@@ -106,7 +90,6 @@
   <div v-else class="text-center py-8 text-gray-500">
     No se encontró información de trazabilidad
   </div>
-  </UCard>
 </template>
 
 <script setup lang="ts">
@@ -117,10 +100,6 @@ const props = defineProps<{
   loteId: string
 }>()
 
-const emit = defineEmits<{
-  close: []
-}>()
-
 const { fetchTrazabilidad, TIPOS_LOTE, TIPOS_OPERACION } = useLotes()
 
 const loading = ref(false)