From 99a2137daa0c0f16f3f2dfe4e2207734726f3aa1 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Sat, 22 Nov 2025 01:57:19 -0600
Subject: [PATCH] mejoras UI 3

---
 nuxt4/app/app.vue                             |  2 +-
 nuxt4/app/components/lotes/Table.vue          |  4 +--
 .../components/lotes/TrazabilidadGraph.vue    | 26 +++++++++++++++++--
 3 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/nuxt4/app/app.vue b/nuxt4/app/app.vue
index 93eef57..c6a36e6 100644
--- a/nuxt4/app/app.vue
+++ b/nuxt4/app/app.vue
@@ -150,7 +150,7 @@
     <!-- Modal: Ver Trazabilidad -->
     <UModal
       v-model:open="showTrazabilidadModal"
-      :ui="{ content: 'w-[calc(100vw-2rem)] max-w-4xl rounded-lg shadow-lg ring ring-default' }"
+      :ui="{ content: 'w-[calc(100vw-2rem)] max-w-4xl rounded-lg shadow-lg ring ring-default max-h-[80vh] overflow-y-auto' }"
     >
       <template #content>
         <LotesTrazabilidad
diff --git a/nuxt4/app/components/lotes/Table.vue b/nuxt4/app/components/lotes/Table.vue
index a0064b5..ce2d3eb 100644
--- a/nuxt4/app/components/lotes/Table.vue
+++ b/nuxt4/app/components/lotes/Table.vue
@@ -120,9 +120,9 @@ console.log('🟢 LotesTable: useLotes() completado')
 
 const lotes = ref<Lote[]>([])
 const loading = ref(false)
-const filtroTipo = ref('')
+const filtroTipo = ref<string | null>(null)
 const selectOptions = computed(() => [
-  { value: '', label: 'Todos los tipos' },
+  { value: null, label: 'Todos los tipos' },
   ...TIPOS_LOTE,
 ])
 const error = ref<string | null>(null)
diff --git a/nuxt4/app/components/lotes/TrazabilidadGraph.vue b/nuxt4/app/components/lotes/TrazabilidadGraph.vue
index 7bef951..693ed1d 100644
--- a/nuxt4/app/components/lotes/TrazabilidadGraph.vue
+++ b/nuxt4/app/components/lotes/TrazabilidadGraph.vue
@@ -29,17 +29,26 @@
           </linearGradient>
         </defs>
 
-        <!-- Grid horizontal por nivel -->
+        <!-- Grid horizontal y vertical -->
         <g stroke="#e2e8f0" stroke-width="1" :stroke-opacity="colorMode === 'dark' ? 0.1 : 0.35">
           <line
             v-for="depth in depthLines"
-            :key="depth"
+            :key="`h-${depth}`"
             :x1="0"
             :x2="svgWidth"
             :y1="paddingY + depth * levelGap"
             :y2="paddingY + depth * levelGap"
             stroke-dasharray="4 4"
           />
+          <line
+            v-for="x in verticalGrid"
+            :key="`v-${x}`"
+            :x1="x"
+            :x2="x"
+            y1="0"
+            :y2="svgHeight"
+            stroke-dasharray="6 6"
+          />
         </g>
 
         <!-- Aristas -->
@@ -236,6 +245,19 @@ const depthLines = computed(() => {
   return Array.from({ length: maxDepth + 1 }, (_, i) => i)
 })
 
+const verticalGrid = computed(() => {
+  if (!nodes.value.length) return []
+  const xs = nodes.value.map((n) => n.x)
+  const minX = Math.min(...xs)
+  const maxX = Math.max(...xs)
+  const step = 180
+  const coords: number[] = []
+  for (let x = minX - step; x <= maxX + step; x += step) {
+    coords.push(x)
+  }
+  return coords
+})
+
 const getNodeFill = (tipo: string): string => {
   const palette: Record<string, string> = {
     uva: colorMode.value === 'dark' ? '#4c1d95' : '#F3E8FF',