sper mejoras de UI

nuxt4-app/app/components/comparativa/CosechasEvolucion.vue

@@ -180,6 +180,11 @@ const props = defineProps<Props>()
 // Obtener definiciones de cosechas
 const cosechasDisponibles = inject<any[]>('cosechasDisponibles', [])
 
+// Obtener configuración de estilos
+const estilosGraficas = inject<any>('estilosGraficas', ref({
+  coloresCosechas: ['#c08040', '#d99a56', '#8b6f47', '#a0826e', '#b89968', '#f0c07c']
+}))
+
 // Dimensiones del SVG
 const svgWidth = 900
 const svgHeight = 450
@@ -303,11 +308,35 @@ function getLinePath(puntos: Array<{ diaRelativo: number, valor: number }>): str
   return path
 }
 
-// Colores para las cosechas
-const cosechaColors = ['#c08040', '#d99a56', '#f0c07c', '#8b6f47', '#a0826e', '#b89968']
+// Mapeo de cosechas a índices fijos
+const cosechaColorMap: Record<string, number> = {
+  'cosecha-20-21': 0,
+  'cosecha-21-22': 1,
+  'cosecha-22-23': 2,
+  'cosecha-23-24': 3,
+  'cosecha-24-25': 4,
+  'cosecha-25-26': 5
+}
 
-function getCosechaColor(index: number): string {
-  return cosechaColors[index % cosechaColors.length]
+// Función para obtener color fijo de cosecha según su ID (no su orden de selección)
+function getCosechaColor(cosechaIdOrIndex: string | number): string {
+  const colores = estilosGraficas.value.coloresCosechas
+
+  // Si es un string, es un ID de cosecha
+  if (typeof cosechaIdOrIndex === 'string') {
+    const index = cosechaColorMap[cosechaIdOrIndex] ?? 0
+    return colores[index % colores.length]
+  }
+
+  // Si es un número, buscar el ID de la cosecha en evolucionCosechas
+  const cosecha = evolucionCosechas.value[cosechaIdOrIndex]
+  if (cosecha?.id) {
+    const index = cosechaColorMap[cosecha.id] ?? cosechaIdOrIndex
+    return colores[index % colores.length]
+  }
+
+  // Fallback al índice directo
+  return colores[cosechaIdOrIndex % colores.length]
 }
 
 function formatValue(value: number): string {