Feat: Implementar paleta de colores por categoría en sliders

- Agregar composable useCategoryColors con 8 colores coordinados (light/dark)
- Colores por categoría: Fragancia (lavanda), Aroma (verde menta), Sabor (rojo),
  Sabor Residual (naranja), Acidez (amarillo), Dulzor (rosa), Sensación en Boca (azul),
  Impresión Global (turquesa)
- Eliminar hints de texto de SliderIntensidad (showDescription = false por defecto)
- Aplicar colores dinámicos a headers y sliders de cada categoría
- Aumentar font-weight de headers a 700 (bold)
- Los colores se adaptan automáticamente al tema light/dark

nuxt4/app/composables/useCategoryColors.ts

@@ -0,0 +1,81 @@
+/**
+ * Composable para gestionar colores de categorías de intensidades
+ * Define una paleta de 8 colores coordinados (con variantes light/dark)
+ */
+
+export type CategoriaIntensidad =
+  | 'fragancia'
+  | 'aroma'
+  | 'sabor'
+  | 'saborResidual'
+  | 'acidez'
+  | 'dulzor'
+  | 'sensacionBoca'
+  | 'impresionGlobal'
+
+interface ColorPalette {
+  light: string
+  dark: string
+}
+
+// Paleta de colores coordinados para cada categoría
+const CATEGORY_COLORS: Record<CategoriaIntensidad, ColorPalette> = {
+  fragancia: {
+    light: '#8B7AB8', // Lavanda
+    dark: '#B39DDB',
+  },
+  aroma: {
+    light: '#26A69A', // Verde Menta
+    dark: '#4DB6AC',
+  },
+  sabor: {
+    light: '#E53935', // Rojo Carmesí
+    dark: '#EF5350',
+  },
+  saborResidual: {
+    light: '#F57C00', // Naranja
+    dark: '#FF9800',
+  },
+  acidez: {
+    light: '#FDD835', // Amarillo Limón
+    dark: '#FFEB3B',
+  },
+  dulzor: {
+    light: '#EC407A', // Rosa Magenta
+    dark: '#F06292',
+  },
+  sensacionBoca: {
+    light: '#1E88E5', // Azul
+    dark: '#42A5F5',
+  },
+  impresionGlobal: {
+    light: '#00ACC1', // Turquesa
+    dark: '#26C6DA',
+  },
+}
+
+export const useCategoryColors = () => {
+  const colorMode = useColorMode()
+  const isDark = computed(() => colorMode.value === 'dark')
+
+  /**
+   * Obtiene el color de una categoría según el tema actual
+   */
+  const getCategoryColor = (category: CategoriaIntensidad): string => {
+    return isDark.value
+      ? CATEGORY_COLORS[category].dark
+      : CATEGORY_COLORS[category].light
+  }
+
+  /**
+   * Obtiene ambas variantes de color de una categoría
+   */
+  const getCategoryColorPalette = (category: CategoriaIntensidad): ColorPalette => {
+    return CATEGORY_COLORS[category]
+  }
+
+  return {
+    getCategoryColor,
+    getCategoryColorPalette,
+  }
+}

nuxt4/app/composables/useColorCustomization.ts

@@ -112,39 +112,65 @@ function hslToHex(h: number, s: number, l: number): string {
 }
 
 /**
- * Aplica el color personalizado a las variables CSS
+ * Aplica los colores personalizados a las variables CSS
  */
-function applyCustomColor(color: string, isDark: boolean) {
+function applyCustomColors(primary?: string, foreground?: string, background?: string) {
   if (import.meta.server) return
 
-  const hsl = hexToHSL(color)
+  // Aplicar color principal si se proporciona
+  if (primary) {
+    const hsl = hexToHSL(primary)
 
-  // Aplicar color principal en formato HEX
-  document.documentElement.style.setProperty('--cata-primary', color)
+    document.documentElement.style.setProperty('--cata-primary', primary)
 
-  // Generar variantes light y dark
-  const lightHsl = { ...hsl, l: Math.min(hsl.l + 15, 95) }
-  const darkHsl = { ...hsl, l: Math.max(hsl.l - 15, 10) }
+    // Generar variantes light y dark
+    const lightHsl = { ...hsl, l: Math.min(hsl.l + 15, 95) }
+    const darkHsl = { ...hsl, l: Math.max(hsl.l - 15, 10) }
 
-  const lightColor = hslToHex(lightHsl.h, lightHsl.s, lightHsl.l)
-  const darkColor = hslToHex(darkHsl.h, darkHsl.s, darkHsl.l)
+    const lightColor = hslToHex(lightHsl.h, lightHsl.s, lightHsl.l)
+    const darkColor = hslToHex(darkHsl.h, darkHsl.s, darkHsl.l)
 
-  document.documentElement.style.setProperty('--cata-primary-light', lightColor)
-  document.documentElement.style.setProperty('--cata-primary-dark', darkColor)
+    document.documentElement.style.setProperty('--cata-primary-light', lightColor)
+    document.documentElement.style.setProperty('--cata-primary-dark', darkColor)
 
-  // Aplicar paleta completa para Nuxt UI (en formato HSL)
-  const palette = generateColorPalette(color)
-  Object.entries(palette).forEach(([key, value]) => {
-    document.documentElement.style.setProperty(`--color-primary-${key}`, value)
-  })
+    // Aplicar paleta completa para Nuxt UI (en formato HSL)
+    const palette = generateColorPalette(primary)
+    Object.entries(palette).forEach(([key, value]) => {
+      document.documentElement.style.setProperty(`--color-primary-${key}`, value)
+    })
+  }
+
+  // Aplicar color de fuente si se proporciona
+  if (foreground) {
+    document.documentElement.style.setProperty('--cata-fg', foreground)
+  }
+
+  // Aplicar color de background si se proporciona
+  if (background) {
+    document.documentElement.style.setProperty('--cata-bg', background)
+  }
+}
+
+interface ThemeColors {
+  primary: string | null
+  foreground: string | null
+  background: string | null
 }
 
 /**
  * Colores por defecto según el tema
  */
 const DEFAULT_COLORS = {
-  light: '#4682B4', // SteelBlue
-  dark: '#00FF00',  // Verde terminal
+  light: {
+    primary: '#4682B4',
+    foreground: '#000000',
+    background: '#ffffff',
+  },
+  dark: {
+    primary: '#00FF00',
+    foreground: '#00FF00',
+    background: '#000000',
+  },
 }
 
 const STORAGE_KEY = 'riocata-custom-colors'
@@ -153,10 +179,13 @@ export const useColorCustomization = () => {
   const colorMode = useColorMode()
   const isDark = computed(() => colorMode.value === 'dark')
 
-  // Estado reactivo del color personalizado
-  const customColors = useState<{ light: string | null; dark: string | null }>(
+  // Estado reactivo de los colores personalizados
+  const customColors = useState<{ light: ThemeColors; dark: ThemeColors }>(
     'custom-colors',
-    () => ({ light: null, dark: null })
+    () => ({
+      light: { primary: null, foreground: null, background: null },
+      dark: { primary: null, foreground: null, background: null },
+    })
   )
 
   /**
@@ -190,31 +219,37 @@ export const useColorCustomization = () => {
   }
 
   /**
-   * Establece un color personalizado para el tema actual
+   * Establece colores personalizados para el tema actual
    */
-  const setCustomColor = (color: string) => {
+  const setCustomColors = (primary?: string, foreground?: string, background?: string) => {
     if (import.meta.server) return
 
     const theme = isDark.value ? 'dark' : 'light'
-    customColors.value[theme] = color
+
+    if (primary !== undefined) customColors.value[theme].primary = primary
+    if (foreground !== undefined) customColors.value[theme].foreground = foreground
+    if (background !== undefined) customColors.value[theme].background = background
+
     saveCustomColors()
-    applyCustomColor(color, isDark.value)
+    applyCustomColors(primary, foreground, background)
   }
 
   /**
-   * Resetea el color al valor por defecto del tema actual
+   * Resetea los colores al valor por defecto del tema actual
    */
-  const resetColor = () => {
+  const resetColors = () => {
     if (import.meta.server) return
 
     const theme = isDark.value ? 'dark' : 'light'
-    customColors.value[theme] = null
+    customColors.value[theme] = { primary: null, foreground: null, background: null }
     saveCustomColors()
 
     // Limpiar las variables CSS personalizadas para que vuelvan a los valores del CSS
     document.documentElement.style.removeProperty('--cata-primary')
     document.documentElement.style.removeProperty('--cata-primary-light')
     document.documentElement.style.removeProperty('--cata-primary-dark')
+    document.documentElement.style.removeProperty('--cata-fg')
+    document.documentElement.style.removeProperty('--cata-bg')
 
     // Limpiar paleta de Nuxt UI
     for (let i = 50; i <= 950; i += (i < 100 ? 50 : 100)) {
@@ -223,19 +258,24 @@ export const useColorCustomization = () => {
   }
 
   /**
-   * Obtiene el color actual (personalizado o por defecto)
+   * Obtiene los colores actuales (personalizados o por defecto)
    */
-  const getCurrentColor = computed(() => {
+  const getCurrentColors = computed(() => {
     const theme = isDark.value ? 'dark' : 'light'
-    return customColors.value[theme] || DEFAULT_COLORS[theme]
+    return {
+      primary: customColors.value[theme].primary || DEFAULT_COLORS[theme].primary,
+      foreground: customColors.value[theme].foreground || DEFAULT_COLORS[theme].foreground,
+      background: customColors.value[theme].background || DEFAULT_COLORS[theme].background,
+    }
   })
 
   /**
-   * Verifica si hay un color personalizado para el tema actual
+   * Verifica si hay colores personalizados para el tema actual
    */
-  const hasCustomColor = computed(() => {
+  const hasCustomColors = computed(() => {
     const theme = isDark.value ? 'dark' : 'light'
-    return customColors.value[theme] !== null
+    const colors = customColors.value[theme]
+    return colors.primary !== null || colors.foreground !== null || colors.background !== null
   })
 
   /**
@@ -248,26 +288,36 @@ export const useColorCustomization = () => {
 
     // Solo aplicar colores si hay colores personalizados guardados
     const theme = isDark.value ? 'dark' : 'light'
-    if (customColors.value[theme]) {
-      applyCustomColor(customColors.value[theme], isDark.value)
+    const colors = customColors.value[theme]
+    if (colors.primary || colors.foreground || colors.background) {
+      applyCustomColors(
+        colors.primary || undefined,
+        colors.foreground || undefined,
+        colors.background || undefined
+      )
     }
 
     // Observar cambios en el modo de color
     watch(isDark, (newIsDark) => {
       const theme = newIsDark ? 'dark' : 'light'
-      // Solo aplicar si hay color personalizado para este tema
-      if (customColors.value[theme]) {
-        applyCustomColor(customColors.value[theme], newIsDark)
+      const colors = customColors.value[theme]
+      // Solo aplicar si hay colores personalizados para este tema
+      if (colors.primary || colors.foreground || colors.background) {
+        applyCustomColors(
+          colors.primary || undefined,
+          colors.foreground || undefined,
+          colors.background || undefined
+        )
       }
     })
   }
 
   return {
     customColors: readonly(customColors),
-    getCurrentColor,
-    hasCustomColor,
-    setCustomColor,
-    resetColor,
+    getCurrentColors,
+    hasCustomColors,
+    setCustomColors,
+    resetColors,
     inicializar,
   }
 }