mejoras UI 4

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">
-          <pre class="text-xs overflow-x-auto">{{ JSON.stringify(lote.meta, null, 2) }}</pre>
+        <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 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="text-center">
-          <p class="text-2xl font-bold text-blue-600">{{ trazabilidad.estadisticas.total_ancestros }}</p>
-          <p class="text-sm text-gray-600">Lotes ancestros</p>
+      <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">
+          <p class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">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">
-          <p class="text-2xl font-bold text-green-600">{{ trazabilidad.estadisticas.profundidad_maxima }}</p>
-          <p class="text-sm text-gray-600">Niveles de profundidad</p>
+        <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-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">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">
-          <p class="text-2xl font-bold text-orange-600">
+        <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-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">
-          <line
-            v-for="edge in edges"
-            :key="`${edge.from}-${edge.to}`"
-            :x1="edge.fromPos.x"
-            :y1="edge.fromPos.y"
-            :x2="edge.toPos.x"
-            :y2="edge.toPos.y"
-            class="transition-opacity duration-200"
-            :opacity="0.9"
-          />
+          <template v-for="edge in edges" :key="`${edge.from}-${edge.to}`">
+            <!-- tramo vertical -->
+            <line
+              :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 },
       })
     }
   }