Docs: Actualizar documentación completa del sistema de temas v2.1

- Actualizado THEME_SYSTEM.md con nuevas variables --brand-cosecha-2/3/4
- Documentadas implementaciones CSS con color-mix() en todas las clases
- Agregada sección 'Mejoras Recientes (v2.1)' en THEME_SYSTEM.md
- Actualizada descripción de Surface en settings.vue (cards grandes, tooltips)
- Mejorada sección 'Alcance del Sistema de Temas' con ejemplos de clases CSS
- Agregado tip sobre cards grandes usando color-mix()
- Versión actualizada a 2.1 | Fecha: 2025-10-31

Todos los componentes ahora responden completamente a cambios de tema

nuxt4-app/app/pages/settings.vue

@@ -777,7 +777,7 @@ watch(() => theme.value, (newTheme) => {
                     <div class="w-6 h-6 rounded border-2 border-[var(--brand-border)] mt-0.5" :style="{ backgroundColor: theme.surface }"></div>
                     <div class="flex-1">
                       <p class="text-sm font-medium text-[var(--brand-text)]">Fondo Secundario (Surface)</p>
-                      <p class="text-xs text-[var(--brand-text-muted)]">Usado en cards, modales y elementos elevados</p>
+                      <p class="text-xs text-[var(--brand-text-muted)]">Usado en cards grandes, modales, tooltips y elementos elevados</p>
                     </div>
                   </div>
 
@@ -904,6 +904,12 @@ watch(() => theme.value, (newTheme) => {
                       <strong class="text-[var(--brand-text)]">Resetear:</strong> Si no te gusta el resultado, usa "Restaurar por defecto" para volver al tema Café original
                     </p>
                   </div>
+                  <div class="flex items-start gap-2">
+                    <UIcon name="i-lucide-lightbulb" class="size-4 text-[var(--brand-accent)] mt-0.5" />
+                    <p class="text-sm text-[var(--brand-text-muted)]">
+                      <strong class="text-[var(--brand-text)]">Cards grandes:</strong> Las cards de "Filtros", "Panorama" y otras ahora responden completamente al tema gracias a color-mix() con variables CSS
+                    </p>
+                  </div>
                 </div>
               </div>
 
@@ -917,11 +923,22 @@ watch(() => theme.value, (newTheme) => {
                     <p class="text-sm font-medium text-[var(--brand-text)] mb-1">
                       Alcance del Sistema de Temas
                     </p>
-                    <p class="text-xs text-[var(--brand-text-muted)] leading-relaxed">
+                    <p class="text-xs text-[var(--brand-text-muted)] leading-relaxed mb-2">
                       El tema se aplica a <strong class="text-[var(--brand-text)]">toda la aplicación</strong>: sidebar,
-                      menús, tablas, cards, gráficas, botones, inputs y más. Los únicos colores que NO cambian son
+                      menús, tablas, cards grandes (Filtros, Panorama, etc.), gráficas de comparativa de cosechas,
-                      los semánticos (estados de éxito/error/advertencia) y los identificadores de tipos de café
+                      botones, inputs, tooltips y más.
-                      (Uva/Oreado/Mojado/Verde) que mantienen sus colores específicos para mejor identificación.
+                    </p>
+                    <p class="text-xs text-[var(--brand-text-muted)] leading-relaxed mb-2">
+                      <strong class="text-[var(--brand-text)]">Clases CSS que responden:</strong>
+                      <code class="text-[var(--brand-accent)] bg-[var(--brand-accent)]/10 px-1 rounded">.brand-card</code>,
+                      <code class="text-[var(--brand-accent)] bg-[var(--brand-accent)]/10 px-1 rounded">.brand-shell</code>,
+                      <code class="text-[var(--brand-accent)] bg-[var(--brand-accent)]/10 px-1 rounded">.brand-table</code>,
+                      <code class="text-[var(--brand-accent)] bg-[var(--brand-accent)]/10 px-1 rounded">.brand-chip</code> y más.
+                    </p>
+                    <p class="text-xs text-[var(--brand-text-muted)] leading-relaxed">
+                      Los únicos colores que NO cambian son los semánticos (estados de éxito/error/advertencia) y
+                      los identificadores de tipos de café (Uva/Oreado/Mojado/Verde) que mantienen sus colores
+                      específicos para mejor identificación visual.
                     </p>
                   </div>
                 </div>

nuxt4-app/docs/THEME_SYSTEM.md

@@ -1,7 +1,7 @@
 # Sistema de Temas - Analítica Núcleo
 
 > **Documentación definitiva del sistema de temas personalizable**
-> Versión: 2.0 | Última actualización: 2025-10-30
+> Versión: 2.1 | Última actualización: 2025-10-31
 
 ## Índice
 
@@ -75,6 +75,18 @@ Estas variables controlan la apariencia general de la aplicación:
 | `--brand-text` | Texto principal (alta legibilidad) | `#fef9f0` |
 | `--brand-text-muted` | Texto secundario, descripciones | `#d8c7a6` |
 
+### Variables Intermedias para Gráficas (`--brand-cosecha-*`)
+
+Estas variables se usan en las gráficas de comparativa de cosechas para diferenciar visualmente múltiples series:
+
+| Variable | Uso | Ejemplo de valor |
+|----------|-----|------------------|
+| `--brand-cosecha-2` | Tono intermedio 1 para gráficas de cosechas | `#8b6f47` |
+| `--brand-cosecha-3` | Tono intermedio 2 para gráficas de cosechas | `#a0826e` |
+| `--brand-cosecha-4` | Tono intermedio 3 para gráficas de cosechas | `#b89968` |
+
+> **Nota:** Estas variables se ajustan automáticamente cuando cambias el tema, manteniendo la armonía visual con los colores primarios.
+
 ### Variables de Tipos de Café (`--coffee-*`)
 
 Estas variables se usan para identificar visualmente los tipos de café en gráficas y tablas:
@@ -179,8 +191,10 @@ Estas variables se usan para indicar estados de pago en tablas y badges:
 
 ## Clases Utilitarias
 
+⚠️ **IMPORTANTE:** Todas las clases utilitarias ahora usan `color-mix()` y variables CSS dinámicas. Esto significa que **todas** responden automáticamente a los cambios de tema.
+
 ### `.brand-shell`
-Contenedor principal con gradiente radial.
+Contenedor principal con gradiente radial dinámico.
 
 ```vue
 <div class="brand-shell">
@@ -188,8 +202,19 @@ Contenedor principal con gradiente radial.
 </div>
 ```
 
+**Implementación CSS:**
+```css
+.brand-shell {
+  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);
+}
+```
+
 ### `.brand-card`
-Tarjetas con estilos consistentes (gradiente, borde, sombra).
+Tarjetas con estilos consistentes (gradiente, borde, sombra). **Ahora completamente dinámicas.**
 
 ```vue
 <div class="brand-card">
@@ -198,6 +223,17 @@ Tarjetas con estilos consistentes (gradiente, borde, sombra).
 </div>
 ```
 
+**Implementación CSS:**
+```css
+.brand-card {
+  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`
 Divisor horizontal decorativo.
 
@@ -205,6 +241,13 @@ Divisor horizontal decorativo.
 <div class="brand-divider"></div>
 ```
 
+**Implementación CSS:**
+```css
+.brand-divider {
+  border-top: 1px solid color-mix(in srgb, var(--brand-primary) 16%, transparent);
+}
+```
+
 ### `.brand-section-title`
 Títulos de sección con color primario.
 
@@ -213,13 +256,28 @@ Títulos de sección con color primario.
 ```
 
 ### `.brand-chip` / `.brand-pill`
-Tags o badges pequeños.
+Tags o badges pequeños con estilos dinámicos.
 
 ```vue
 <span class="brand-chip">Estado</span>
 <span class="brand-pill">Badge</span>
 ```
 
+**Implementación CSS:**
+```css
+.brand-chip {
+  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-pill {
+  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);
+}
+```
+
 ### `.brand-badge`
 Badge con fondo primario sólido.
 
@@ -228,7 +286,7 @@ Badge con fondo primario sólido.
 ```
 
 ### `.brand-table`
-Estilos para tablas.
+Estilos para tablas con hover dinámico.
 
 ```vue
 <table class="brand-table">
@@ -237,6 +295,19 @@ Estilos para tablas.
 </table>
 ```
 
+**Implementación CSS:**
+```css
+.brand-table thead {
+  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:hover {
+  background: color-mix(in srgb, var(--brand-accent) 6%, transparent);
+}
+```
+
 ---
 
 ## Composable useTheme()
@@ -778,8 +849,25 @@ text-[var(--status-anulado)]    <!-- Gray - Anulado -->
 - **Usa el composable** `useTheme()` para manipulación programática
 - **Consulta este documento** ante cualquier duda sobre colores
 
+## Mejoras Recientes (v2.1)
+
+✅ **Todas las clases CSS ahora son completamente dinámicas**
+- Las cards grandes (`.brand-card`) responden a cambios de tema
+- Los gradientes de fondo (`.brand-shell`) se ajustan automáticamente
+- Todas las clases utilitarias usan `color-mix()` con variables CSS
+
+✅ **Nuevas variables para gráficas**
+- `--brand-cosecha-2`, `--brand-cosecha-3`, `--brand-cosecha-4`
+- Colores intermedios que mantienen armonía con el tema activo
+- Usadas en gráficas de comparativa de cosechas
+
+✅ **Eliminación de colores hardcodeados**
+- Ya no existe `--brand-bg-secondary` (ahora usa `--brand-surface`)
+- Todos los colores RGB/hex hardcodeados fueron reemplazados
+- El background de `html/body` ahora usa `var(--brand-bg)`
+
 ---
 
 **Mantenido por:** Claude Code para Núcleo Río Frío
-**Versión del sistema:** 2.0
+**Versión del sistema:** 2.1
-**Última revisión:** 2025-10-30
+**Última revisión:** 2025-10-31