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]',
+        content: 'w-[calc(100vw-2rem)] max-w-4xl rounded-lg shadow-lg ring ring-default max-h-[80vh]'
-        body: 'overflow-y-auto'
       }"
     >
-      <template #content>
+      <template #header>
-        <LotesTrazabilidad
+        <div class="flex justify-between items-center">
-          v-if="trazabilidadLoteId"
+          <div>
-          :lote-id="trazabilidadLoteId"
+            <h3 class="text-xl font-bold">Trazabilidad de Lote</h3>
-          @close="showTrazabilidadModal = false"
+            <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"
+      />
     </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,25 +1,9 @@
 <template>
-  <UCard>
+  <div v-if="loading" class="flex justify-center py-8">
-    <template #header>
+    <UIcon name="i-heroicons-arrow-path" class="animate-spin w-8 h-8" />
-      <div class="flex justify-between items-center">
+  </div>
-        <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">
+  <div v-else-if="trazabilidad" class="space-y-6">
-      <UIcon name="i-heroicons-arrow-path" class="animate-spin w-8 h-8" />
-    </div>
-
-    <div v-else-if="trazabilidad" class="space-y-6">
       <!-- Estadísticas -->
       <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
         <div class="rounded-xl border border-gray-200 dark:border-slate-800 bg-white/80 dark:bg-slate-900/70 p-4 shadow-sm">
@@ -93,20 +77,19 @@
         </div>
       </div>
 
-      <!-- Leyenda -->
+    <!-- Leyenda -->
-      <div class="pt-4 border-t">
+    <div class="pt-4 border-t">
-        <p class="text-xs text-gray-500">
+      <p class="text-xs text-gray-500">
-          <UIcon name="i-heroicons-information-circle" class="w-4 h-4 inline" />
+        <UIcon name="i-heroicons-information-circle" class="w-4 h-4 inline" />
-          Los lotes se muestran desde el más reciente (nivel 0) hasta los ingresos iniciales.
+        Los lotes se muestran desde el más reciente (nivel 0) hasta los ingresos iniciales.
-          La profundidad indica cuántos pasos atrás se encuentra cada lote en la cadena de trazabilidad.
+        La profundidad indica cuántos pasos atrás se encuentra cada lote en la cadena de trazabilidad.
-        </p>
+      </p>
-      </div>
     </div>
+  </div>
 
-    <div v-else class="text-center py-8 text-gray-500">
+  <div v-else class="text-center py-8 text-gray-500">
-      No se encontró información de trazabilidad
+    No se encontró información de trazabilidad
-    </div>
+  </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)