From 867903d76e9560cd360319d472b99db5db1ddd9e Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Fri, 31 Oct 2025 11:05:15 -0600
Subject: [PATCH] Fix: Actualizar clases utilitarias CSS para usar variables
 del sistema de temas

- Reemplazados colores RGB hardcodeados en .brand-card con color-mix()
- Actualizado .brand-shell para usar var(--brand-accent) y var(--brand-primary-strong)
- Actualizado .brand-divider para usar var(--brand-primary)
- Actualizado .brand-chip para usar var(--brand-accent)
- Actualizado .brand-pill para usar var(--brand-primary)
- Actualizado .brand-table para usar var(--brand-surface) y var(--brand-bg)
- Actualizado background de html/body para usar var(--brand-bg)

Ahora todas las cards y contenedores grandes responden a cambios de tema
---
 nuxt4-app/app/assets/css/main.css | 32 ++++++++++++++++++-------------
 1 file changed, 19 insertions(+), 13 deletions(-)

diff --git a/nuxt4-app/app/assets/css/main.css b/nuxt4-app/app/assets/css/main.css
index 34f2c5b..7d49257 100644
--- a/nuxt4-app/app/assets/css/main.css
+++ b/nuxt4-app/app/assets/css/main.css
@@ -80,36 +80,42 @@ html,
 body {
   margin: 0 !important;
   padding: 0 !important;
-  background-color: #1b1209 !important;
+  background-color: var(--brand-bg) !important;
   color: var(--brand-text);
   min-height: 100vh;
 }
 
 .brand-shell {
-  background: radial-gradient(circle at 20% 20%, rgba(255, 224, 160, 0.08), transparent 55%),
-    radial-gradient(circle at 80% 10%, rgba(192, 128, 64, 0.08), transparent 45%),
+  background: radial-gradient(circle at 20% 20%,
+      color-mix(in srgb, var(--brand-accent) 8%, transparent), transparent 55%),
+    radial-gradient(circle at 80% 10%,
+      color-mix(in srgb, var(--brand-primary-strong) 8%, transparent), transparent 45%),
     var(--brand-bg);
   min-height: 100vh;
 }
 
 .brand-card {
-  background: linear-gradient(145deg, rgba(20, 16, 11, 0.95), rgba(31, 24, 15, 0.85));
-  border: 1px solid rgba(224, 192, 128, 0.12);
-  box-shadow: 0 12px 40px rgba(12, 8, 4, 0.55);
+  background: linear-gradient(145deg,
+    color-mix(in srgb, var(--brand-bg) 95%, transparent),
+    color-mix(in srgb, var(--brand-surface) 85%, transparent));
+  border: 1px solid color-mix(in srgb, var(--brand-primary) 12%, transparent);
+  box-shadow: 0 12px 40px color-mix(in srgb, var(--brand-bg) 55%, transparent);
 }
 
 .brand-divider {
-  border-top: 1px solid rgba(224, 192, 128, 0.16);
+  border-top: 1px solid color-mix(in srgb, var(--brand-primary) 16%, transparent);
 }
 
 .brand-chip {
-  background: rgba(255, 224, 160, 0.08);
-  border: 1px solid rgba(255, 224, 160, 0.18);
+  background: color-mix(in srgb, var(--brand-accent) 8%, transparent);
+  border: 1px solid color-mix(in srgb, var(--brand-accent) 18%, transparent);
   color: var(--brand-accent);
 }
 
 .brand-table thead {
-  background: linear-gradient(90deg, rgba(32, 24, 15, 0.95), rgba(24, 18, 11, 0.95));
+  background: linear-gradient(90deg,
+    color-mix(in srgb, var(--brand-surface) 95%, transparent),
+    color-mix(in srgb, var(--brand-bg) 95%, transparent));
 }
 
 .brand-table tbody tr {
@@ -117,12 +123,12 @@ body {
 }
 
 .brand-table tbody tr:hover {
-  background: rgba(255, 224, 160, 0.06);
+  background: color-mix(in srgb, var(--brand-accent) 6%, transparent);
 }
 
 .brand-pill {
-  background: rgba(224, 192, 128, 0.14);
-  border: 1px solid rgba(224, 192, 128, 0.28);
+  background: color-mix(in srgb, var(--brand-primary) 14%, transparent);
+  border: 1px solid color-mix(in srgb, var(--brand-primary) 28%, transparent);
   color: var(--brand-primary);
 }