From 61c37a97b8ec0ac30801ac00bcba8a94ad54e767 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Fri, 31 Oct 2025 09:49:49 -0600
Subject: [PATCH] =?UTF-8?q?Fix:=20Corregir=20aplicaci=C3=B3n=20del=20siste?=
 =?UTF-8?q?ma=20de=20temas=20en=20componentes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Cambiar botones de confirmación (Guardar/Importar) en settings para usar --brand-success
- Actualizar color de tab activa en sidebar de --brand-primary a --brand-success
- Reemplazar colores hardcoded por variables CSS en badges de tipos de café:
  * VistaTablaIngresos: Usar var(--coffee-uva/verde/mojado/oreado)
  * informe-ingresos: Aplicar variables --coffee-* y --status-*
- Cambiar text-green-400 por text-[var(--brand-success)] en panorama
- Quitar badge de mantenimiento de Comparativa Cosechas

Todos los cambios siguen las reglas de THEME_SYSTEM.md para garantizar
que los colores respondan correctamente a los cambios de tema del usuario.
---
 nuxt4-app/app/components/app/AppSidebar.vue   |  5 +-
 .../ingresos/VistaTablaIngresos.vue           | 29 +++++--
 nuxt4-app/app/pages/informe-ingresos.vue      | 82 ++++++++++++-------
 nuxt4-app/app/pages/panorama.vue              |  2 +-
 nuxt4-app/app/pages/settings.vue              |  8 +-
 5 files changed, 82 insertions(+), 44 deletions(-)

diff --git a/nuxt4-app/app/components/app/AppSidebar.vue b/nuxt4-app/app/components/app/AppSidebar.vue
index ad6235b..0f6d23a 100644
--- a/nuxt4-app/app/components/app/AppSidebar.vue
+++ b/nuxt4-app/app/components/app/AppSidebar.vue
@@ -51,7 +51,7 @@
         :ui="{
           item: {
             base: 'text-[var(--brand-text-muted)] hover:text-[var(--brand-primary)] hover:bg-[var(--brand-primary)]/10',
-            active: 'bg-[var(--brand-primary)]/15 text-[var(--brand-primary)] border-l-2 border-[var(--brand-primary)] font-medium',
+            active: 'bg-[var(--brand-success)]/15 text-[var(--brand-success)] border-l-2 border-[var(--brand-success)] font-medium',
             inactive: 'border-l-2 border-transparent'
           }
         }"
@@ -300,8 +300,7 @@ const navigationPrimary = computed<NavigationMenuItem[]>(() => [
     label: 'Comparativa Cosechas',
     icon: 'i-lucide-calendar-range',
     to: '/comparativa-cosechas',
-    active: route.path === '/comparativa-cosechas',
-    badge: { label: 'Mantenimiento', color: 'amber' }
+    active: route.path === '/comparativa-cosechas'
   },
   {
     label: 'Explorador de datos',
diff --git a/nuxt4-app/app/components/ingresos/VistaTablaIngresos.vue b/nuxt4-app/app/components/ingresos/VistaTablaIngresos.vue
index 644e985..14c4b63 100644
--- a/nuxt4-app/app/components/ingresos/VistaTablaIngresos.vue
+++ b/nuxt4-app/app/components/ingresos/VistaTablaIngresos.vue
@@ -394,34 +394,45 @@ function formatCellValue(value: unknown, column: string, row: any, depth: number
     })
   }
 
-  // tipo - badge con colores especiales y gradientes
+  // tipo - badge con colores especiales usando variables CSS del tema
   if (column === 'tipo' && typeof value === 'string') {
-    const tipoConfig: Record<string, { class: string, icon: string }> = {
+    const tipoConfig: Record<string, { bgColor: string, textColor: string, icon: string }> = {
       'uva': {
-        class: 'bg-gradient-to-r from-red-600 via-red-500 to-yellow-600 text-white font-semibold shadow-md',
+        bgColor: 'var(--coffee-uva)',
+        textColor: 'white',
         icon: 'i-lucide-grape'
       },
       'verde': {
-        class: 'bg-gradient-to-r from-green-600 via-green-500 to-yellow-500 text-white font-semibold shadow-md',
+        bgColor: 'var(--coffee-verde)',
+        textColor: 'white',
         icon: 'i-lucide-leaf'
       },
       'mojado': {
-        class: 'bg-gradient-to-r from-cyan-400 via-blue-300 to-stone-100 text-gray-800 font-semibold shadow-md',
+        bgColor: 'var(--coffee-mojado)',
+        textColor: 'white',
         icon: 'i-lucide-droplet'
       },
       'oreado': {
-        class: 'bg-gradient-to-r from-yellow-700 via-amber-300 to-stone-50 text-gray-800 font-semibold shadow-md',
+        bgColor: 'var(--coffee-oreado)',
+        textColor: 'white',
         icon: 'i-lucide-wind'
       },
       'seco': {
-        class: 'bg-gradient-to-r from-stone-400 to-stone-200 text-gray-800 font-semibold shadow-md',
+        bgColor: '#9ca3af',
+        textColor: 'white',
         icon: 'i-lucide-sun'
       }
     }
 
-    const config = tipoConfig[value.toLowerCase()] || { class: 'bg-gray-500 text-white', icon: 'i-lucide-circle' }
+    const config = tipoConfig[value.toLowerCase()] || { bgColor: '#6b7280', textColor: 'white', icon: 'i-lucide-circle' }
 
-    return h('div', { class: 'inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full ' + config.class }, [
+    return h('div', {
+      class: 'inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full font-semibold shadow-md',
+      style: {
+        backgroundColor: config.bgColor,
+        color: config.textColor
+      }
+    }, [
       h(UIcon, { name: config.icon, class: 'w-4 h-4' }),
       h('span', {}, upperFirst(value))
     ])
diff --git a/nuxt4-app/app/pages/informe-ingresos.vue b/nuxt4-app/app/pages/informe-ingresos.vue
index 8469bf1..ca9f355 100644
--- a/nuxt4-app/app/pages/informe-ingresos.vue
+++ b/nuxt4-app/app/pages/informe-ingresos.vue
@@ -446,14 +446,17 @@
                 </td>
                 <td class="py-2 px-2 text-[var(--brand-text)]">{{ ingreso.cliente_nombre || '-' }}</td>
                 <td class="py-2 px-2">
-                  <span :class="[
-                    'inline-flex px-2 py-0.5 rounded text-xs font-medium',
-                    ingreso.tipo === 'uva' ? 'bg-purple-500/20 text-purple-300' :
-                    ingreso.tipo === 'verde' ? 'bg-green-500/20 text-green-300' :
-                    ingreso.tipo === 'mojado' ? 'bg-blue-500/20 text-blue-300' :
-                    ingreso.tipo === 'oreado' ? 'bg-yellow-500/20 text-yellow-300' :
-                    'bg-gray-500/20 text-gray-300'
-                  ]">
+                  <span
+                    class="inline-flex px-2 py-0.5 rounded text-xs font-medium"
+                    :style="{
+                      backgroundColor: ingreso.tipo === 'uva' ? 'var(--coffee-uva)' :
+                                      ingreso.tipo === 'verde' ? 'var(--coffee-verde)' :
+                                      ingreso.tipo === 'mojado' ? 'var(--coffee-mojado)' :
+                                      ingreso.tipo === 'oreado' ? 'var(--coffee-oreado)' :
+                                      '#6b7280',
+                      color: 'white'
+                    }"
+                  >
                     {{ ingreso.tipo || '-' }}
                   </span>
                 </td>
@@ -467,13 +470,23 @@
                   L {{ ingreso.total_a_pagar ? ingreso.total_a_pagar.toFixed(2) : '-' }}
                 </td>
                 <td class="py-2 px-2 text-center">
-                  <span :class="[
-                    'inline-flex px-2 py-0.5 rounded text-xs font-medium',
-                    ingreso.estado === 'pagado' ? 'bg-green-500/20 text-green-300' :
-                    ingreso.estado === 'pendiente' ? 'bg-yellow-500/20 text-yellow-300' :
-                    ingreso.estado === 'anulado' ? 'bg-red-500/20 text-red-300' :
-                    'bg-gray-500/20 text-gray-300'
-                  ]">
+                  <span
+                    class="inline-flex px-2 py-0.5 rounded text-xs font-medium border"
+                    :style="{
+                      color: ingreso.estado === 'pagado' ? 'var(--status-pagado)' :
+                            ingreso.estado === 'pendiente' ? 'var(--status-pendiente)' :
+                            ingreso.estado === 'anulado' ? 'var(--status-anulado)' :
+                            '#9ca3af',
+                      backgroundColor: ingreso.estado === 'pagado' ? 'rgb(from var(--status-pagado) r g b / 0.1)' :
+                                      ingreso.estado === 'pendiente' ? 'rgb(from var(--status-pendiente) r g b / 0.1)' :
+                                      ingreso.estado === 'anulado' ? 'rgb(from var(--status-anulado) r g b / 0.1)' :
+                                      'rgb(156 163 175 / 0.1)',
+                      borderColor: ingreso.estado === 'pagado' ? 'rgb(from var(--status-pagado) r g b / 0.3)' :
+                                  ingreso.estado === 'pendiente' ? 'rgb(from var(--status-pendiente) r g b / 0.3)' :
+                                  ingreso.estado === 'anulado' ? 'rgb(from var(--status-anulado) r g b / 0.3)' :
+                                  'rgb(156 163 175 / 0.3)'
+                    }"
+                  >
                     {{ ingreso.estado || '-' }}
                   </span>
                 </td>
@@ -615,24 +628,35 @@
                       {{ punto.fecha_grupo ? new Date(punto.fecha_grupo).toLocaleDateString('es-ES') : '-' }}
                     </td>
                     <td class="py-2 px-2">
-                      <span :class="[
-                        'inline-flex px-2 py-0.5 rounded text-xs font-medium',
-                        punto.tipo === 'uva' ? 'bg-purple-500/20 text-purple-300' :
-                        punto.tipo === 'verde' ? 'bg-green-500/20 text-green-300' :
-                        punto.tipo === 'mojado' ? 'bg-blue-500/20 text-blue-300' :
-                        punto.tipo === 'oreado' ? 'bg-yellow-500/20 text-yellow-300' :
-                        'bg-gray-500/20 text-gray-300'
-                      ]">
+                      <span
+                        class="inline-flex px-2 py-0.5 rounded text-xs font-medium"
+                        :style="{
+                          backgroundColor: punto.tipo === 'uva' ? 'var(--coffee-uva)' :
+                                          punto.tipo === 'verde' ? 'var(--coffee-verde)' :
+                                          punto.tipo === 'mojado' ? 'var(--coffee-mojado)' :
+                                          punto.tipo === 'oreado' ? 'var(--coffee-oreado)' :
+                                          '#6b7280',
+                          color: 'white'
+                        }"
+                      >
                         {{ punto.tipo || '-' }}
                       </span>
                     </td>
                     <td class="py-2 px-2">
-                      <span :class="[
-                        'inline-flex px-2 py-0.5 rounded text-xs font-medium',
-                        punto.estado === 'pagado' ? 'bg-green-500/20 text-green-300' :
-                        punto.estado === 'pendiente' ? 'bg-yellow-500/20 text-yellow-300' :
-                        'bg-gray-500/20 text-gray-300'
-                      ]">
+                      <span
+                        class="inline-flex px-2 py-0.5 rounded text-xs font-medium border"
+                        :style="{
+                          color: punto.estado === 'pagado' ? 'var(--status-pagado)' :
+                                punto.estado === 'pendiente' ? 'var(--status-pendiente)' :
+                                '#9ca3af',
+                          backgroundColor: punto.estado === 'pagado' ? 'rgb(from var(--status-pagado) r g b / 0.1)' :
+                                          punto.estado === 'pendiente' ? 'rgb(from var(--status-pendiente) r g b / 0.1)' :
+                                          'rgb(156 163 175 / 0.1)',
+                          borderColor: punto.estado === 'pagado' ? 'rgb(from var(--status-pagado) r g b / 0.3)' :
+                                      punto.estado === 'pendiente' ? 'rgb(from var(--status-pendiente) r g b / 0.3)' :
+                                      'rgb(156 163 175 / 0.3)'
+                        }"
+                      >
                         {{ punto.estado || '-' }}
                       </span>
                     </td>
diff --git a/nuxt4-app/app/pages/panorama.vue b/nuxt4-app/app/pages/panorama.vue
index 4ac070d..4c4ef2b 100644
--- a/nuxt4-app/app/pages/panorama.vue
+++ b/nuxt4-app/app/pages/panorama.vue
@@ -224,7 +224,7 @@
           </div>
           <div class="rounded-lg border border-[var(--brand-border)] bg-[var(--brand-surface)] px-6 py-4">
             <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Total Rechazos</div>
-            <div class="text-3xl font-bold text-green-400">
+            <div class="text-3xl font-bold text-[var(--brand-success)]">
               {{ formatCurrency(data.financieros.total_rechazos) }}
             </div>
           </div>
diff --git a/nuxt4-app/app/pages/settings.vue b/nuxt4-app/app/pages/settings.vue
index 0887697..1a2b3a7 100644
--- a/nuxt4-app/app/pages/settings.vue
+++ b/nuxt4-app/app/pages/settings.vue
@@ -610,9 +610,11 @@ watch(() => theme.value, (newTheme) => {
                     Restaurar por defecto
                   </UButton>
                   <UButton
-                    color="primary"
                     icon="i-lucide-save"
                     @click="handleSaveTheme"
+                    :ui="{
+                      base: 'bg-[var(--brand-success)] text-white border border-[var(--brand-success)] hover:bg-[var(--brand-success)]/90 hover:border-[var(--brand-success)] shadow-sm disabled:opacity-50 disabled:cursor-not-allowed'
+                    }"
                   >
                     Guardar cambios
                   </UButton>
@@ -666,8 +668,10 @@ watch(() => theme.value, (newTheme) => {
                   Cancelar
                 </UButton>
                 <UButton
-                  color="primary"
                   @click="handleImportTheme"
+                  :ui="{
+                    base: 'bg-[var(--brand-success)] text-white border border-[var(--brand-success)] hover:bg-[var(--brand-success)]/90 hover:border-[var(--brand-success)] shadow-sm disabled:opacity-50 disabled:cursor-not-allowed'
+                  }"
                 >
                   Importar
                 </UButton>