From d13d804b77d862d4de4797fe95130b990fa4f6ec Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Fri, 31 Oct 2025 09:59:52 -0600
Subject: [PATCH] =?UTF-8?q?Feat:=20Aplicar=20colores=20del=20sistema=20de?=
 =?UTF-8?q?=20temas=20a=20componentes=20de=20m=C3=A9tricas?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- MetricCard: Actualizar variantes danger/warning/info para usar variables --coffee-*
  * danger ahora usa var(--coffee-uva) para métricas de café Uva
  * info ahora usa var(--coffee-mojado) para métricas de café Mojado
  * warning ahora usa var(--coffee-oreado) para métricas de café Oreado
  * Usar color-mix para crear transparencias en bordes (30%)

- TotalesIngresoCompra: Cards personalizadas de Uva usan var(--coffee-uva)
  * Total Uva Ingresada, Pagada y en Depósito con color dinámico
  * Bordes con 30% de opacidad usando color-mix

- TotalesMonetarios: Card de Precio Promedio Ponderado Uva usa var(--coffee-uva)

- TotalesVerde: Todas las métricas usan var(--coffee-verde) con variaciones
  * 6 cards con diferentes tonalidades de verde usando color-mix
  * Mezclas con white para crear variaciones más claras
  * Una mezcla con cyan (#20d5ff) para variación distintiva

Los valores numéricos de cada tipo de café ahora reflejan dinámicamente
los colores del tema seleccionado, mejorando la identidad visual.
---
 nuxt4-app/app/components/MetricCard.vue       |  8 ++--
 .../ingresos/TotalesIngresoCompra.vue         | 24 ++++++++--
 .../components/ingresos/TotalesMonetarios.vue |  8 +++-
 .../app/components/ingresos/TotalesVerde.vue  | 48 ++++++++++++++++---
 4 files changed, 74 insertions(+), 14 deletions(-)

diff --git a/nuxt4-app/app/components/MetricCard.vue b/nuxt4-app/app/components/MetricCard.vue
index cbbc43e..f6340e9 100644
--- a/nuxt4-app/app/components/MetricCard.vue
+++ b/nuxt4-app/app/components/MetricCard.vue
@@ -31,10 +31,10 @@ const variantClasses = computed(() => {
   const variants = {
     default: 'bg-[var(--brand-surface)] border-[var(--brand-border)] text-[var(--brand-text)]',
     primary: 'bg-[var(--brand-surface)] border-[var(--brand-primary-strong)] text-[var(--brand-primary)]',
-    success: 'bg-[var(--brand-surface)] border-green-600/30 text-green-400',
-    danger: 'bg-[var(--brand-surface)] border-red-600/30 text-red-400',
-    warning: 'bg-[var(--brand-surface)] border-yellow-600/30 text-yellow-400',
-    info: 'bg-[var(--brand-surface)] border-cyan-600/30 text-cyan-400'
+    success: 'bg-[var(--brand-surface)] border-[color:color-mix(in_srgb,var(--brand-success),transparent_70%)] text-[var(--brand-success)]',
+    danger: 'bg-[var(--brand-surface)] border-[color:color-mix(in_srgb,var(--coffee-uva),transparent_70%)] text-[var(--coffee-uva)]',
+    warning: 'bg-[var(--brand-surface)] border-[color:color-mix(in_srgb,var(--coffee-oreado),transparent_70%)] text-[var(--coffee-oreado)]',
+    info: 'bg-[var(--brand-surface)] border-[color:color-mix(in_srgb,var(--coffee-mojado),transparent_70%)] text-[var(--coffee-mojado)]'
   }
   return variants[props.variant]
 })
diff --git a/nuxt4-app/app/components/ingresos/TotalesIngresoCompra.vue b/nuxt4-app/app/components/ingresos/TotalesIngresoCompra.vue
index 1dcd8b3..3e8d704 100644
--- a/nuxt4-app/app/components/ingresos/TotalesIngresoCompra.vue
+++ b/nuxt4-app/app/components/ingresos/TotalesIngresoCompra.vue
@@ -11,7 +11,13 @@
           Totales Generales (Pagado + Pendiente)
         </h3>
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-          <div class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)] border-red-600/40 text-red-400">
+          <div
+            class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)]"
+            :style="{
+              borderColor: 'color-mix(in srgb, var(--coffee-uva) 30%, transparent)',
+              color: 'var(--coffee-uva)'
+            }"
+          >
             <div class="flex items-center justify-between mb-1">
               <span class="text-xs uppercase tracking-wide opacity-80">Total Uva Ingresada</span>
               <UButton
@@ -54,7 +60,13 @@
           Solo Pagados
         </h3>
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-          <div class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)] border-red-600/40 text-red-400">
+          <div
+            class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)]"
+            :style="{
+              borderColor: 'color-mix(in srgb, var(--coffee-uva) 30%, transparent)',
+              color: 'var(--coffee-uva)'
+            }"
+          >
             <div class="flex items-center justify-between mb-1">
               <span class="text-xs uppercase tracking-wide opacity-80">Total Uva Pagada</span>
               <UButton
@@ -97,7 +109,13 @@
           Inventario en Depósito
         </h3>
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-          <div class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)] border-red-600/40 text-red-400">
+          <div
+            class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)]"
+            :style="{
+              borderColor: 'color-mix(in srgb, var(--coffee-uva) 30%, transparent)',
+              color: 'var(--coffee-uva)'
+            }"
+          >
             <div class="flex items-center justify-between mb-1">
               <span class="text-xs uppercase tracking-wide opacity-80">Total Uva en Depósito</span>
               <UButton
diff --git a/nuxt4-app/app/components/ingresos/TotalesMonetarios.vue b/nuxt4-app/app/components/ingresos/TotalesMonetarios.vue
index 22ff9a9..28537ec 100644
--- a/nuxt4-app/app/components/ingresos/TotalesMonetarios.vue
+++ b/nuxt4-app/app/components/ingresos/TotalesMonetarios.vue
@@ -40,7 +40,13 @@
           Precios Promedio Ponderados
         </h3>
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-          <div class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)] border-red-600/40 text-red-400">
+          <div
+            class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)]"
+            :style="{
+              borderColor: 'color-mix(in srgb, var(--coffee-uva) 30%, transparent)',
+              color: 'var(--coffee-uva)'
+            }"
+          >
             <div class="flex items-center justify-between mb-1">
               <span class="text-xs uppercase tracking-wide opacity-80">Precio Promedio Ponderado Uva</span>
               <UButton
diff --git a/nuxt4-app/app/components/ingresos/TotalesVerde.vue b/nuxt4-app/app/components/ingresos/TotalesVerde.vue
index 2aa3d0e..76ef12d 100644
--- a/nuxt4-app/app/components/ingresos/TotalesVerde.vue
+++ b/nuxt4-app/app/components/ingresos/TotalesVerde.vue
@@ -5,7 +5,13 @@
     </template>
 
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-      <div class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)] border-green-700/40 text-green-300">
+      <div
+        class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)]"
+        :style="{
+          borderColor: 'color-mix(in srgb, var(--coffee-verde) 40%, transparent)',
+          color: 'color-mix(in srgb, var(--coffee-verde) 90%, white)'
+        }"
+      >
         <div class="flex flex-col">
           <span class="text-xs uppercase tracking-wide opacity-80 mb-1">Total Lb Neto de Verde</span>
           <div class="flex items-baseline gap-2">
@@ -14,7 +20,13 @@
           </div>
         </div>
       </div>
-      <div class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)] border-green-600/40 text-green-400">
+      <div
+        class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)]"
+        :style="{
+          borderColor: 'color-mix(in srgb, var(--coffee-verde) 35%, transparent)',
+          color: 'var(--coffee-verde)'
+        }"
+      >
         <div class="flex flex-col">
           <span class="text-xs uppercase tracking-wide opacity-80 mb-1">Precio Promedio Ponderado Pagado</span>
           <div class="flex items-baseline gap-2">
@@ -23,7 +35,13 @@
           </div>
         </div>
       </div>
-      <div class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)] border-green-500/40 text-green-500">
+      <div
+        class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)]"
+        :style="{
+          borderColor: 'color-mix(in srgb, var(--coffee-verde) 30%, transparent)',
+          color: 'color-mix(in srgb, var(--coffee-verde) 110%, white)'
+        }"
+      >
         <div class="flex flex-col">
           <span class="text-xs uppercase tracking-wide opacity-80 mb-1">Total Lb Neto de Verde en Depósito</span>
           <div class="flex items-baseline gap-2">
@@ -32,7 +50,13 @@
           </div>
         </div>
       </div>
-      <div class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)] border-emerald-600/40 text-emerald-400">
+      <div
+        class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)]"
+        :style="{
+          borderColor: 'color-mix(in srgb, var(--coffee-verde) 35%, transparent)',
+          color: 'color-mix(in srgb, var(--coffee-verde) 95%, white)'
+        }"
+      >
         <div class="flex flex-col">
           <span class="text-xs uppercase tracking-wide opacity-80 mb-1">Inversión en Verde Hasta la Fecha</span>
           <div class="flex items-baseline gap-2">
@@ -40,7 +64,13 @@
           </div>
         </div>
       </div>
-      <div class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)] border-lime-600/40 text-lime-400">
+      <div
+        class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)]"
+        :style="{
+          borderColor: 'color-mix(in srgb, var(--coffee-verde) 38%, transparent)',
+          color: 'color-mix(in srgb, var(--coffee-verde) 105%, white)'
+        }"
+      >
         <div class="flex flex-col">
           <span class="text-xs uppercase tracking-wide opacity-80 mb-1">Inversión Restante a Realizar en Verde</span>
           <div class="flex items-baseline gap-2">
@@ -48,7 +78,13 @@
           </div>
         </div>
       </div>
-      <div class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)] border-teal-600/40 text-teal-400">
+      <div
+        class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)]"
+        :style="{
+          borderColor: 'color-mix(in srgb, var(--coffee-verde) 32%, transparent)',
+          color: 'color-mix(in srgb, var(--coffee-verde) 100%, #20d5ff)'
+        }"
+      >
         <div class="flex flex-col">
           <span class="text-xs uppercase tracking-wide opacity-80 mb-1">Total Lb Neto Comprado de Verde</span>
           <div class="flex items-baseline gap-2">