From fcb321887c6ebfba445c663364aa881c80351baa Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Fri, 31 Oct 2025 10:56:01 -0600
Subject: [PATCH] Fix: Reemplazar colores hardcodeados por variables del
 sistema de temas
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Agregadas nuevas variables CSS --brand-cosecha-2, --brand-cosecha-3, --brand-cosecha-4 para gráficas
- Reemplazado --brand-bg-secondary (no existía) por --brand-surface en todos los componentes
- Actualizados arrays de colores en componentes de comparativa de cosechas
- Eliminados colores RGB/hex hardcodeados en tooltips y badges
- Todos los componentes ahora respetan el sistema de temas dinámico
---
 nuxt4-app/app/assets/css/main.css             |  5 +++
 .../comparativa/CosechasEvolucion.vue         | 10 +++---
 .../comparativa/CosechasHeatmap.vue           | 35 +++++++++----------
 .../comparativa/CosechasPorTipo.vue           |  2 +-
 .../comparativa/CosechasTotales.vue           |  2 +-
 .../app/components/ingresos/TopClientes.vue   |  2 +-
 .../metabase/MetabaseCardDisplay.vue          |  2 +-
 nuxt4-app/app/pages/comparativa-cosechas.vue  |  2 +-
 nuxt4-app/app/pages/metabase-debug.vue        |  2 +-
 9 files changed, 33 insertions(+), 29 deletions(-)

diff --git a/nuxt4-app/app/assets/css/main.css b/nuxt4-app/app/assets/css/main.css
index cf48ae2..34f2c5b 100644
--- a/nuxt4-app/app/assets/css/main.css
+++ b/nuxt4-app/app/assets/css/main.css
@@ -29,6 +29,11 @@
   --brand-text: #fef9f0;
   --brand-text-muted: #d8c7a6;
 
+  /* Colores intermedios para gráficas de cosechas */
+  --brand-cosecha-2: #8b6f47;     /* Tono café intermedio 1 */
+  --brand-cosecha-3: #a0826e;     /* Tono café intermedio 2 */
+  --brand-cosecha-4: #b89968;     /* Tono café intermedio 3 */
+
   /* Colores para tipos de café */
   --coffee-uva: #a855f7;      /* Purple - Café Uva */
   --coffee-oreado: #f97316;   /* Orange - Café Oreado */
diff --git a/nuxt4-app/app/components/comparativa/CosechasEvolucion.vue b/nuxt4-app/app/components/comparativa/CosechasEvolucion.vue
index eac4891..9ef918c 100644
--- a/nuxt4-app/app/components/comparativa/CosechasEvolucion.vue
+++ b/nuxt4-app/app/components/comparativa/CosechasEvolucion.vue
@@ -14,7 +14,7 @@
               class="px-3 py-1 rounded text-xs transition-all"
               :class="metrica === 'acumulado'
                 ? 'bg-[var(--brand-primary-strong)] text-[var(--brand-bg)]'
-                : 'bg-[var(--brand-bg-secondary)] text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]'"
+                : 'bg-[var(--brand-surface)] text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]'"
             >
               Acumulado
             </button>
@@ -23,7 +23,7 @@
               class="px-3 py-1 rounded text-xs transition-all"
               :class="metrica === 'diario'
                 ? 'bg-[var(--brand-primary-strong)] text-[var(--brand-bg)]'
-                : 'bg-[var(--brand-bg-secondary)] text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]'"
+                : 'bg-[var(--brand-surface)] text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]'"
             >
               Diario
             </button>
@@ -36,7 +36,7 @@
               class="px-3 py-1 rounded text-xs transition-all"
               :class="tipoSeleccionado === 'todos'
                 ? 'bg-[var(--brand-primary-strong)] text-[var(--brand-bg)]'
-                : 'bg-[var(--brand-bg-secondary)] text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]'"
+                : 'bg-[var(--brand-surface)] text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]'"
             >
               Todos
             </button>
@@ -47,7 +47,7 @@
               class="px-3 py-1 rounded text-xs transition-all capitalize"
               :class="tipoSeleccionado === tipo
                 ? 'bg-[var(--brand-primary-strong)] text-[var(--brand-bg)]'
-                : 'bg-[var(--brand-bg-secondary)] text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]'"
+                : 'bg-[var(--brand-surface)] text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]'"
             >
               {{ tipo }}
             </button>
@@ -182,7 +182,7 @@ const cosechasDisponibles = inject<any[]>('cosechasDisponibles', [])
 
 // Obtener configuración de estilos
 const estilosGraficas = inject<any>('estilosGraficas', ref({
-  coloresCosechas: ['var(--brand-primary-strong)', 'var(--brand-primary)', '#8b6f47', '#a0826e', '#b89968', 'var(--brand-accent)']
+  coloresCosechas: ['var(--brand-primary-strong)', 'var(--brand-primary)', 'var(--brand-cosecha-2)', 'var(--brand-cosecha-3)', 'var(--brand-cosecha-4)', 'var(--brand-accent)']
 }))
 
 // Dimensiones del SVG
diff --git a/nuxt4-app/app/components/comparativa/CosechasHeatmap.vue b/nuxt4-app/app/components/comparativa/CosechasHeatmap.vue
index ac46d17..e02e378 100644
--- a/nuxt4-app/app/components/comparativa/CosechasHeatmap.vue
+++ b/nuxt4-app/app/components/comparativa/CosechasHeatmap.vue
@@ -14,7 +14,7 @@
           <div class="flex items-center gap-2">
             <!-- Controles de Zoom -->
             <div
-              class="flex items-center gap-1 px-2 py-1 rounded-lg border border-[var(--brand-border)] bg-[var(--brand-bg-secondary)]"
+              class="flex items-center gap-1 px-2 py-1 rounded-lg border border-[var(--brand-border)] bg-[var(--brand-surface)]"
               title="También puedes usar Ctrl+Rueda del mouse para zoom"
             >
               <UButton
@@ -67,7 +67,7 @@
               class="px-3 py-1 rounded text-xs transition-all"
               :class="vistaMode === 'heatmap'
                 ? 'bg-[var(--brand-primary-strong)] text-[var(--brand-bg)]'
-                : 'bg-[var(--brand-bg-secondary)] text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]'"
+                : 'bg-[var(--brand-surface)] text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]'"
             >
               Heatmap
             </button>
@@ -76,7 +76,7 @@
               class="px-3 py-1 rounded text-xs transition-all"
               :class="vistaMode === 'barras'
                 ? 'bg-[var(--brand-primary-strong)] text-[var(--brand-bg)]'
-                : 'bg-[var(--brand-bg-secondary)] text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]'"
+                : 'bg-[var(--brand-surface)] text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]'"
             >
               Barras
             </button>
@@ -127,7 +127,7 @@
               class="px-3 py-1 rounded text-xs transition-all"
               :class="metrica === 'total_peso_seco'
                 ? 'bg-[var(--brand-primary-strong)] text-[var(--brand-bg)]'
-                : 'bg-[var(--brand-bg-secondary)] text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]'"
+                : 'bg-[var(--brand-surface)] text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]'"
             >
               Peso Seco (qq)
             </button>
@@ -136,7 +136,7 @@
               class="px-3 py-1 rounded text-xs transition-all"
               :class="metrica === 'peso_neto_uva'
                 ? 'bg-[var(--brand-primary-strong)] text-[var(--brand-bg)]'
-                : 'bg-[var(--brand-bg-secondary)] text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]'"
+                : 'bg-[var(--brand-surface)] text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]'"
             >
               Peso Neto Uva (qq)
             </button>
@@ -145,7 +145,7 @@
               class="px-3 py-1 rounded text-xs transition-all"
               :class="metrica === 'peso_neto_verde'
                 ? 'bg-[var(--brand-primary-strong)] text-[var(--brand-bg)]'
-                : 'bg-[var(--brand-bg-secondary)] text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]'"
+                : 'bg-[var(--brand-surface)] text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]'"
             >
               Peso Neto Verde (qq)
             </button>
@@ -154,7 +154,7 @@
               class="px-3 py-1 rounded text-xs transition-all"
               :class="metrica === 'sacos_total_dia'
                 ? 'bg-[var(--brand-primary-strong)] text-[var(--brand-bg)]'
-                : 'bg-[var(--brand-bg-secondary)] text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]'"
+                : 'bg-[var(--brand-surface)] text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]'"
             >
               Sacos Total
             </button>
@@ -163,7 +163,7 @@
               class="px-3 py-1 rounded text-xs transition-all"
               :class="metrica === 'total_lempiras_uva'
                 ? 'bg-[var(--brand-primary-strong)] text-[var(--brand-bg)]'
-                : 'bg-[var(--brand-bg-secondary)] text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]'"
+                : 'bg-[var(--brand-surface)] text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]'"
             >
               Lempiras Uva
             </button>
@@ -172,7 +172,7 @@
               class="px-3 py-1 rounded text-xs transition-all"
               :class="metrica === 'total_lempiras_verde'
                 ? 'bg-[var(--brand-primary-strong)] text-[var(--brand-bg)]'
-                : 'bg-[var(--brand-bg-secondary)] text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]'"
+                : 'bg-[var(--brand-surface)] text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]'"
             >
               Lempiras Verde
             </button>
@@ -181,7 +181,7 @@
               class="px-3 py-1 rounded text-xs transition-all"
               :class="metrica === 'total_lempiras_mojado_oreado'
                 ? 'bg-[var(--brand-primary-strong)] text-[var(--brand-bg)]'
-                : 'bg-[var(--brand-bg-secondary)] text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]'"
+                : 'bg-[var(--brand-surface)] text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]'"
             >
               Lempiras Mojado+Oreado
             </button>
@@ -195,7 +195,7 @@
         <!-- Vista Heatmap -->
         <template v-if="vistaMode === 'heatmap'">
           <!-- Leyenda de totales -->
-          <div class="flex items-center gap-3 mb-3 px-2 py-2 rounded-lg bg-[var(--brand-bg-secondary)]/50 border border-[var(--brand-border)]/30">
+          <div class="flex items-center gap-3 mb-3 px-2 py-2 rounded-lg bg-[var(--brand-surface)]/50 border border-[var(--brand-border)]/30">
             <span class="text-[10px] text-[var(--brand-text-muted)] uppercase font-semibold">Leyenda:</span>
             <div class="flex items-center gap-1.5">
               <div class="w-2 h-2 rounded-full bg-[var(--brand-primary-strong)]"></div>
@@ -213,7 +213,7 @@
             <div
               v-for="(cosecha, index) in datosCosechas"
               :key="cosecha.id"
-              class="flex flex-col items-center gap-1 p-2 rounded-lg bg-[var(--brand-bg-secondary)]"
+              class="flex flex-col items-center gap-1 p-2 rounded-lg bg-[var(--brand-surface)]"
               :style="{ width: `${cellWidth}px` }"
             >
               <div class="text-xs font-semibold text-[var(--brand-text)]">
@@ -311,7 +311,7 @@
         <!-- Vista Barras -->
         <template v-else-if="vistaMode === 'barras'">
           <!-- Leyenda de totales -->
-          <div class="flex items-center gap-3 mb-3 px-2 py-2 rounded-lg bg-[var(--brand-bg-secondary)]/50 border border-[var(--brand-border)]/30">
+          <div class="flex items-center gap-3 mb-3 px-2 py-2 rounded-lg bg-[var(--brand-surface)]/50 border border-[var(--brand-border)]/30">
             <span class="text-[10px] text-[var(--brand-text-muted)] uppercase font-semibold">Leyenda:</span>
             <div class="flex items-center gap-1.5">
               <div class="w-2 h-2 rounded-full bg-[var(--brand-primary-strong)]"></div>
@@ -329,7 +329,7 @@
             <div
               v-for="(cosecha, index) in datosCosechas"
               :key="cosecha.id"
-              class="flex flex-col items-center gap-1 p-2 rounded-lg bg-[var(--brand-bg-secondary)]"
+              class="flex flex-col items-center gap-1 p-2 rounded-lg bg-[var(--brand-surface)]"
               :style="{ width: `${barMaxWidth}px` }"
             >
               <div class="text-xs font-semibold" :style="{ color: getCosechaColor(cosecha.id) }">
@@ -430,11 +430,10 @@
           <div
             v-if="tooltipVisible"
             class="fixed z-50 px-3 py-2 text-xs rounded-lg border pointer-events-none shadow-lg opacity-100"
-            :class="'bg-[var(--brand-bg-secondary)] border-[var(--brand-border)] text-[var(--brand-text)]'"
+            :class="'bg-[var(--brand-surface)] border-[var(--brand-border)] text-[var(--brand-text)]'"
             :style="{
               left: `${tooltipX}px`,
               top: `${tooltipY}px`,
-              backgroundColor: 'rgb(29, 26, 19)',
               opacity: 1
             }"
           >
@@ -499,7 +498,7 @@
             <div
               v-for="(cosecha, index) in datosCosechas"
               :key="`comp-${cosecha.id}`"
-              class="flex flex-col gap-2 p-4 rounded-lg border border-[var(--brand-border)] bg-[var(--brand-bg-secondary)]"
+              class="flex flex-col gap-2 p-4 rounded-lg border border-[var(--brand-border)] bg-[var(--brand-surface)]"
             >
               <!-- Header de la cosecha -->
               <div class="flex items-center justify-between">
@@ -577,7 +576,7 @@ const cosechasDisponibles = inject<any[]>('cosechasDisponibles', [])
 
 // Obtener configuración de estilos
 const estilosGraficas = inject<any>('estilosGraficas', ref({
-  coloresCosechas: ['var(--brand-primary-strong)', 'var(--brand-primary)', '#8b6f47', '#a0826e', '#b89968', 'var(--brand-accent)'],
+  coloresCosechas: ['var(--brand-primary-strong)', 'var(--brand-primary)', 'var(--brand-cosecha-2)', 'var(--brand-cosecha-3)', 'var(--brand-cosecha-4)', 'var(--brand-accent)'],
   anchoCelda: 80,
   altoCelda: 6,
   anchoMaxBarra: 300,
diff --git a/nuxt4-app/app/components/comparativa/CosechasPorTipo.vue b/nuxt4-app/app/components/comparativa/CosechasPorTipo.vue
index bc494b2..b75a5a6 100644
--- a/nuxt4-app/app/components/comparativa/CosechasPorTipo.vue
+++ b/nuxt4-app/app/components/comparativa/CosechasPorTipo.vue
@@ -190,7 +190,7 @@ const cosechasDisponibles = inject<any[]>('cosechasDisponibles', [])
 
 // Obtener configuración de estilos
 const estilosGraficas = inject<any>('estilosGraficas', ref({
-  coloresCosechas: ['var(--brand-primary-strong)', 'var(--brand-primary)', '#8b6f47', '#a0826e', '#b89968', 'var(--brand-accent)']
+  coloresCosechas: ['var(--brand-primary-strong)', 'var(--brand-primary)', 'var(--brand-cosecha-2)', 'var(--brand-cosecha-3)', 'var(--brand-cosecha-4)', 'var(--brand-accent)']
 }))
 
 // Dimensiones del SVG
diff --git a/nuxt4-app/app/components/comparativa/CosechasTotales.vue b/nuxt4-app/app/components/comparativa/CosechasTotales.vue
index 4ace7e4..d010ad8 100644
--- a/nuxt4-app/app/components/comparativa/CosechasTotales.vue
+++ b/nuxt4-app/app/components/comparativa/CosechasTotales.vue
@@ -173,7 +173,7 @@ const cosechasDisponibles = inject<any[]>('cosechasDisponibles', [])
 
 // Obtener configuración de estilos
 const estilosGraficas = inject<any>('estilosGraficas', ref({
-  coloresCosechas: ['var(--brand-primary-strong)', 'var(--brand-primary)', '#8b6f47', '#a0826e', '#b89968', 'var(--brand-accent)']
+  coloresCosechas: ['var(--brand-primary-strong)', 'var(--brand-primary)', 'var(--brand-cosecha-2)', 'var(--brand-cosecha-3)', 'var(--brand-cosecha-4)', 'var(--brand-accent)']
 }))
 
 // Dimensiones del SVG
diff --git a/nuxt4-app/app/components/ingresos/TopClientes.vue b/nuxt4-app/app/components/ingresos/TopClientes.vue
index 72f3997..2b68694 100644
--- a/nuxt4-app/app/components/ingresos/TopClientes.vue
+++ b/nuxt4-app/app/components/ingresos/TopClientes.vue
@@ -109,7 +109,7 @@
       <div
         v-for="(item, index) in topClientes"
         :key="item.cliente.id"
-        class="flex items-center gap-4 p-3 rounded-lg border border-[var(--brand-border)] bg-gradient-to-r from-[var(--brand-bg-secondary)] to-transparent hover:border-[var(--brand-primary)]/30 transition-all"
+        class="flex items-center gap-4 p-3 rounded-lg border border-[var(--brand-border)] bg-gradient-to-r from-[var(--brand-surface)] to-transparent hover:border-[var(--brand-primary)]/30 transition-all"
       >
         <!-- Ranking Badge -->
         <div
diff --git a/nuxt4-app/app/components/metabase/MetabaseCardDisplay.vue b/nuxt4-app/app/components/metabase/MetabaseCardDisplay.vue
index cb1f69d..968dce1 100644
--- a/nuxt4-app/app/components/metabase/MetabaseCardDisplay.vue
+++ b/nuxt4-app/app/components/metabase/MetabaseCardDisplay.vue
@@ -155,7 +155,7 @@
 
         <!-- Empty State -->
         <div v-if="!queryResult.data?.rows || queryResult.data.rows.length === 0" class="p-8 text-center rounded-lg border border-[var(--brand-border)] bg-[var(--brand-surface)]">
-          <div class="mx-auto w-16 h-16 mb-4 flex items-center justify-center bg-[#3a2a16] rounded-full">
+          <div class="mx-auto w-16 h-16 mb-4 flex items-center justify-center bg-[var(--brand-primary-strong)]/10 rounded-full">
             <svg class="w-8 h-8 text-[var(--brand-text-muted)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
             </svg>
diff --git a/nuxt4-app/app/pages/comparativa-cosechas.vue b/nuxt4-app/app/pages/comparativa-cosechas.vue
index 672f706..751a94f 100644
--- a/nuxt4-app/app/pages/comparativa-cosechas.vue
+++ b/nuxt4-app/app/pages/comparativa-cosechas.vue
@@ -193,7 +193,7 @@ const cosechasDisponibles = ref([
 
 // Configuración de estilos para las gráficas
 const estilosGraficas = ref({
-  coloresCosechas: ['var(--brand-primary-strong)', 'var(--brand-primary)', '#8b6f47', '#a0826e', '#b89968', 'var(--brand-accent)'],
+  coloresCosechas: ['var(--brand-primary-strong)', 'var(--brand-primary)', 'var(--brand-cosecha-2)', 'var(--brand-cosecha-3)', 'var(--brand-cosecha-4)', 'var(--brand-accent)'],
   anchoCelda: 80,
   altoCelda: 6,
   anchoMaxBarra: 300,
diff --git a/nuxt4-app/app/pages/metabase-debug.vue b/nuxt4-app/app/pages/metabase-debug.vue
index 8aed2ed..de9a8b0 100644
--- a/nuxt4-app/app/pages/metabase-debug.vue
+++ b/nuxt4-app/app/pages/metabase-debug.vue
@@ -82,7 +82,7 @@
           root: 'space-y-4',
           list: 'bg-[var(--brand-surface)]',
           indicator: 'bg-[var(--brand-primary-strong)] z-10',
-          trigger: 'relative data-[state=active]:text-[var(--brand-bg)] data-[state=active]:hover:text-black data-[state=inactive]:text-[var(--brand-text-muted)] data-[state=inactive]:bg-transparent data-[state=inactive]:hover:text-[var(--brand-text)] data-[state=inactive]:hover:bg-[#2a1f14]/50 focus-visible:ring-2 focus-visible:ring-[var(--brand-primary-strong)] transition-colors duration-200',
+          trigger: 'relative data-[state=active]:text-[var(--brand-bg)] data-[state=active]:hover:text-black data-[state=inactive]:text-[var(--brand-text-muted)] data-[state=inactive]:bg-transparent data-[state=inactive]:hover:text-[var(--brand-text)] data-[state=inactive]:hover:bg-[var(--brand-surface)]/50 focus-visible:ring-2 focus-visible:ring-[var(--brand-primary-strong)] transition-colors duration-200',
           label: 'font-medium text-sm relative z-20',
           leadingIcon: 'relative z-20 data-[state=active]:text-[var(--brand-bg)] data-[state=inactive]:text-[var(--brand-text-muted)] transition-colors duration-200',
           content: 'py-4'