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">