mejoras UI 3

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)

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',