mejoras UI 4

nuxt4/app/app.vue

@@ -150,7 +150,11 @@
     <!-- Modal: Ver Trazabilidad -->
     <UModal
       v-model:open="showTrazabilidadModal"
-      :ui="{ content: 'w-[calc(100vw-2rem)] max-w-4xl rounded-lg shadow-lg ring ring-default max-h-[80vh] overflow-y-auto' }"
+      scrollable
+      :ui="{
+        content: 'w-[calc(100vw-2rem)] max-w-4xl rounded-lg shadow-lg ring ring-default max-h-[80vh]',
+        body: 'overflow-y-auto'
+      }"
     >
       <template #content>
         <LotesTrazabilidad
@@ -173,6 +177,17 @@
         />
       </template>
     </UModal>
+
+    <!-- Modal: Ver Detalle de Operación -->
+    <UModal v-model:open="showOperacionDetailModal">
+      <template #content>
+        <OperacionesCard
+          v-if="selectedOperacion"
+          :operacion="selectedOperacion"
+          @close="closeOperacionDetailModal"
+        />
+      </template>
+    </UModal>
   </UApp>
 </template>
 
@@ -194,9 +209,11 @@ const showLoteDetailModal = ref(false)
 const showTrazabilidadModal = ref(false)
 const showCreateLoteModal = ref(false)
 const showCreateOperacionModal = ref(false)
+const showOperacionDetailModal = ref(false)
 
 // Estados de datos
 const selectedLote = ref<Lote | null>(null)
+const selectedOperacion = ref<Operacion | null>(null)
 const trazabilidadLoteId = ref<string | null>(null)
 
 // Handlers para Lotes
@@ -240,8 +257,8 @@ const handleLoteFormSuccess = () => {
 
 // Handlers para Operaciones
 const handleViewOperacion = (operacion: Operacion) => {
-  // TODO: Implementar vista de detalle de operación si es necesario
+  selectedOperacion.value = operacion
-  console.log('Ver operación:', operacion)
+  showOperacionDetailModal.value = true
 }
 
 const handleOperacionFormSuccess = () => {
@@ -249,6 +266,15 @@ const handleOperacionFormSuccess = () => {
   // Las tablas se recargarán automáticamente
 }
 
+const closeOperacionDetailModal = () => {
+  showOperacionDetailModal.value = false
+  selectedOperacion.value = null
+}
+const closeOperacionDetailModal = () => {
+  showOperacionDetailModal.value = false
+  selectedOperacion.value = null
+}
+
 // ⚠️⚠️⚠️ FUNCIONES DE DEBUG - TEMPORALES ⚠️⚠️⚠️
 // NO ELIMINAR SIN CONSULTAR A DARIO/DRAGANEL/NUCLEO000
 const resettingDB = ref(false)

nuxt4/app/components/lotes/Card.vue

@@ -55,8 +55,10 @@
 
       <div v-if="lote.meta" class="pt-4 border-t">
         <p class="text-sm text-gray-500 mb-2">Información Adicional</p>
-        <UCard class="bg-gray-50">
+        <UCard class="bg-gray-50 dark:bg-slate-900/70 border border-gray-200 dark:border-slate-800">
-          <pre class="text-xs overflow-x-auto">{{ JSON.stringify(lote.meta, null, 2) }}</pre>
+          <pre class="text-xs overflow-x-auto text-gray-800 dark:text-slate-200 whitespace-pre-wrap">
+{{ JSON.stringify(lote.meta, null, 2) }}
+          </pre>
         </UCard>
       </div>
     </div>

nuxt4/app/components/lotes/Trazabilidad.vue

@@ -21,20 +21,20 @@
 
     <div v-else-if="trazabilidad" class="space-y-6">
       <!-- Estadísticas -->
-      <div class="grid grid-cols-3 gap-4 p-4 bg-gray-50 rounded-lg">
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-        <div class="text-center">
+        <div class="rounded-xl border border-gray-200 dark:border-slate-800 bg-white/80 dark:bg-slate-900/70 p-4 shadow-sm">
-          <p class="text-2xl font-bold text-blue-600">{{ trazabilidad.estadisticas.total_ancestros }}</p>
+          <p class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">Lotes ancestros</p>
-          <p class="text-sm text-gray-600">Lotes ancestros</p>
+          <p class="text-3xl font-semibold text-blue-600 dark:text-cyan-300">{{ trazabilidad.estadisticas.total_ancestros }}</p>
         </div>
-        <div class="text-center">
+        <div class="rounded-xl border border-gray-200 dark:border-slate-800 bg-white/80 dark:bg-slate-900/70 p-4 shadow-sm">
-          <p class="text-2xl font-bold text-green-600">{{ trazabilidad.estadisticas.profundidad_maxima }}</p>
+          <p class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">Niveles de profundidad</p>
-          <p class="text-sm text-gray-600">Niveles de profundidad</p>
+          <p class="text-3xl font-semibold text-green-600 dark:text-emerald-300">{{ trazabilidad.estadisticas.profundidad_maxima }}</p>
         </div>
-        <div class="text-center">
+        <div class="rounded-xl border border-gray-200 dark:border-slate-800 bg-white/80 dark:bg-slate-900/70 p-4 shadow-sm">
-          <p class="text-2xl font-bold text-orange-600">
+          <p class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">Kilos iniciales</p>
+          <p class="text-3xl font-semibold text-orange-600 dark:text-amber-300">
             {{ trazabilidad.estadisticas.kg_iniciales.toLocaleString('es-AR') }} kg
           </p>
-          <p class="text-sm text-gray-600">Kilos iniciales</p>
         </div>
       </div>
 
@@ -44,11 +44,11 @@
       <!-- Árbol de Trazabilidad (texto) -->
       <div class="space-y-2">
         <h4 class="font-semibold text-lg">Historial</h4>
-        <div class="space-y-1">
+        <div class="space-y-2">
           <div
             v-for="(item, index) in sortedHistorial"
             :key="index"
-            class="flex items-start gap-3 p-3 rounded-lg hover:bg-gray-50 transition-colors"
+            class="flex items-start gap-3 p-3 rounded-lg border border-gray-100 dark:border-slate-800 bg-white/80 dark:bg-slate-900/60 hover:border-primary/40 transition-colors"
             :class="{
               'bg-blue-50': item.profundidad === 0,
               'border-l-4 border-blue-500': item.profundidad === 0,

nuxt4/app/components/lotes/TrazabilidadGraph.vue

@@ -53,16 +53,26 @@
 
         <!-- Aristas -->
         <g stroke="url(#edgeGradient)" stroke-width="2.5" stroke-linecap="round">
+          <template v-for="edge in edges" :key="`${edge.from}-${edge.to}`">
+            <!-- tramo vertical -->
             <line
-            v-for="edge in edges"
-            :key="`${edge.from}-${edge.to}`"
               :x1="edge.fromPos.x"
               :y1="edge.fromPos.y"
+              :x2="edge.fromPos.x"
+              :y2="edge.midPos.y"
+              class="transition-opacity duration-200"
+              :opacity="0.9"
+            />
+            <!-- tramo horizontal -->
+            <line
+              :x1="edge.fromPos.x"
+              :y1="edge.midPos.y"
               :x2="edge.toPos.x"
               :y2="edge.toPos.y"
               class="transition-opacity duration-200"
               :opacity="0.9"
             />
+          </template>
         </g>
 
         <!-- Nodos -->
@@ -208,6 +218,7 @@ const edges = computed(() => {
     to: string
     fromPos: { x: number; y: number }
     toPos: { x: number; y: number }
+    midPos: { x: number; y: number }
   }[] = []
 
   for (const row of props.historial) {
@@ -220,6 +231,7 @@ const edges = computed(() => {
         to: toNode.id,
         fromPos: { x: fromNode.x, y: fromNode.y + nodeBox.height / 2 },
         toPos: { x: toNode.x, y: toNode.y - nodeBox.height / 2 },
+        midPos: { x: fromNode.x, y: (fromNode.y + toNode.y) / 2 },
       })
     }
   }