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/components/cata/FormularioMuestra.vue

@@ -35,18 +35,20 @@
 
       <!-- Sliders de Fragancia -->
       <div class="form-section">
-        <h5 class="form-section-title cata-text">Fragancia</h5>
+        <h5 class="form-section-title cata-text" :style="{ color: getCategoryColor('fragancia') }">Fragancia</h5>
         <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
           <CataSliderIntensidad
             tipo="descriptiva"
             label="Descriptiva"
             :model-value="muestra.intensidades.fragancia.descriptiva"
+            :color="getCategoryColor('fragancia')"
             @update:model-value="(v) => actualizarIntensidad('fragancia', 'descriptiva', v)"
           />
           <CataSliderIntensidad
             tipo="afectiva"
             label="Afectiva"
             :model-value="muestra.intensidades.fragancia.afectiva"
+            :color="getCategoryColor('fragancia')"
             @update:model-value="(v) => actualizarIntensidad('fragancia', 'afectiva', v)"
           />
         </div>
@@ -54,18 +56,20 @@
 
       <!-- Sliders de Aroma -->
       <div class="form-section">
-        <h5 class="form-section-title cata-text">Aroma</h5>
+        <h5 class="form-section-title cata-text" :style="{ color: getCategoryColor('aroma') }">Aroma</h5>
         <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
           <CataSliderIntensidad
             tipo="descriptiva"
             label="Descriptiva"
             :model-value="muestra.intensidades.aroma.descriptiva"
+            :color="getCategoryColor('aroma')"
             @update:model-value="(v) => actualizarIntensidad('aroma', 'descriptiva', v)"
           />
           <CataSliderIntensidad
             tipo="afectiva"
             label="Afectiva"
             :model-value="muestra.intensidades.aroma.afectiva"
+            :color="getCategoryColor('aroma')"
             @update:model-value="(v) => actualizarIntensidad('aroma', 'afectiva', v)"
           />
         </div>
@@ -73,18 +77,20 @@
 
       <!-- Sliders de Sabor -->
       <div class="form-section">
-        <h5 class="form-section-title cata-text">Sabor</h5>
+        <h5 class="form-section-title cata-text" :style="{ color: getCategoryColor('sabor') }">Sabor</h5>
         <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
           <CataSliderIntensidad
             tipo="descriptiva"
             label="Descriptiva"
             :model-value="muestra.intensidades.sabor.descriptiva"
+            :color="getCategoryColor('sabor')"
             @update:model-value="(v) => actualizarIntensidad('sabor', 'descriptiva', v)"
           />
           <CataSliderIntensidad
             tipo="afectiva"
             label="Afectiva"
             :model-value="muestra.intensidades.sabor.afectiva"
+            :color="getCategoryColor('sabor')"
             @update:model-value="(v) => actualizarIntensidad('sabor', 'afectiva', v)"
           />
         </div>
@@ -92,18 +98,20 @@
 
       <!-- Sliders de Sabor Residual -->
       <div class="form-section">
-        <h5 class="form-section-title cata-text">Sabor Residual</h5>
+        <h5 class="form-section-title cata-text" :style="{ color: getCategoryColor('saborResidual') }">Sabor Residual</h5>
         <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
           <CataSliderIntensidad
             tipo="descriptiva"
             label="Descriptiva"
             :model-value="muestra.intensidades.saborResidual.descriptiva"
+            :color="getCategoryColor('saborResidual')"
             @update:model-value="(v) => actualizarIntensidad('saborResidual', 'descriptiva', v)"
           />
           <CataSliderIntensidad
             tipo="afectiva"
             label="Afectiva"
             :model-value="muestra.intensidades.saborResidual.afectiva"
+            :color="getCategoryColor('saborResidual')"
             @update:model-value="(v) => actualizarIntensidad('saborResidual', 'afectiva', v)"
           />
         </div>
@@ -111,18 +119,20 @@
 
       <!-- Sliders de Acidez -->
       <div class="form-section">
-        <h5 class="form-section-title cata-text">Acidez</h5>
+        <h5 class="form-section-title cata-text" :style="{ color: getCategoryColor('acidez') }">Acidez</h5>
         <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
           <CataSliderIntensidad
             tipo="descriptiva"
             label="Descriptiva"
             :model-value="muestra.intensidades.acidez.descriptiva"
+            :color="getCategoryColor('acidez')"
             @update:model-value="(v) => actualizarIntensidad('acidez', 'descriptiva', v)"
           />
           <CataSliderIntensidad
             tipo="afectiva"
             label="Afectiva"
             :model-value="muestra.intensidades.acidez.afectiva"
+            :color="getCategoryColor('acidez')"
             @update:model-value="(v) => actualizarIntensidad('acidez', 'afectiva', v)"
           />
         </div>
@@ -130,18 +140,20 @@
 
       <!-- Sliders de Dulzor -->
       <div class="form-section">
-        <h5 class="form-section-title cata-text">Dulzor</h5>
+        <h5 class="form-section-title cata-text" :style="{ color: getCategoryColor('dulzor') }">Dulzor</h5>
         <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
           <CataSliderIntensidad
             tipo="descriptiva"
             label="Descriptiva"
             :model-value="muestra.intensidades.dulzor.descriptiva"
+            :color="getCategoryColor('dulzor')"
             @update:model-value="(v) => actualizarIntensidad('dulzor', 'descriptiva', v)"
           />
           <CataSliderIntensidad
             tipo="afectiva"
             label="Afectiva"
             :model-value="muestra.intensidades.dulzor.afectiva"
+            :color="getCategoryColor('dulzor')"
             @update:model-value="(v) => actualizarIntensidad('dulzor', 'afectiva', v)"
           />
         </div>
@@ -149,18 +161,20 @@
 
       <!-- Sliders de Sensación en Boca -->
       <div class="form-section">
-        <h5 class="form-section-title cata-text">Sensación en la Boca</h5>
+        <h5 class="form-section-title cata-text" :style="{ color: getCategoryColor('sensacionBoca') }">Sensación en la Boca</h5>
         <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
           <CataSliderIntensidad
             tipo="descriptiva"
             label="Descriptiva"
             :model-value="muestra.intensidades.sensacionBoca.descriptiva"
+            :color="getCategoryColor('sensacionBoca')"
             @update:model-value="(v) => actualizarIntensidad('sensacionBoca', 'descriptiva', v)"
           />
           <CataSliderIntensidad
             tipo="afectiva"
             label="Afectiva"
             :model-value="muestra.intensidades.sensacionBoca.afectiva"
+            :color="getCategoryColor('sensacionBoca')"
             @update:model-value="(v) => actualizarIntensidad('sensacionBoca', 'afectiva', v)"
           />
         </div>
@@ -168,18 +182,20 @@
 
       <!-- Sliders de Impresión Global -->
       <div class="form-section">
-        <h5 class="form-section-title cata-text">Impresión Global</h5>
+        <h5 class="form-section-title cata-text" :style="{ color: getCategoryColor('impresionGlobal') }">Impresión Global</h5>
         <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
           <CataSliderIntensidad
             tipo="descriptiva"
             label="Descriptiva"
             :model-value="muestra.intensidades.impresionGlobal.descriptiva"
+            :color="getCategoryColor('impresionGlobal')"
             @update:model-value="(v) => actualizarIntensidad('impresionGlobal', 'descriptiva', v)"
           />
           <CataSliderIntensidad
             tipo="afectiva"
             label="Afectiva"
             :model-value="muestra.intensidades.impresionGlobal.afectiva"
+            :color="getCategoryColor('impresionGlobal')"
             @update:model-value="(v) => actualizarIntensidad('impresionGlobal', 'afectiva', v)"
           />
         </div>
@@ -271,18 +287,20 @@
 
         <!-- Fragancia -->
         <div class="form-section mb-4">
-          <h6 class="form-subsection-title cata-text">Fragancia</h6>
+          <h6 class="form-subsection-title cata-text" :style="{ color: getCategoryColor('fragancia') }">Fragancia</h6>
           <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
             <CataSliderIntensidad
               tipo="descriptiva"
               label="Descriptiva"
               :model-value="muestra.intensidades.fragancia.descriptiva"
+              :color="getCategoryColor('fragancia')"
               @update:model-value="(v) => actualizarIntensidad('fragancia', 'descriptiva', v)"
             />
             <CataSliderIntensidad
               tipo="afectiva"
               label="Afectiva"
               :model-value="muestra.intensidades.fragancia.afectiva"
+              :color="getCategoryColor('fragancia')"
               @update:model-value="(v) => actualizarIntensidad('fragancia', 'afectiva', v)"
             />
           </div>
@@ -290,18 +308,20 @@
 
         <!-- Aroma -->
         <div class="form-section mb-4">
-          <h6 class="form-subsection-title cata-text">Aroma</h6>
+          <h6 class="form-subsection-title cata-text" :style="{ color: getCategoryColor('aroma') }">Aroma</h6>
           <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
             <CataSliderIntensidad
               tipo="descriptiva"
               label="Descriptiva"
               :model-value="muestra.intensidades.aroma.descriptiva"
+              :color="getCategoryColor('aroma')"
               @update:model-value="(v) => actualizarIntensidad('aroma', 'descriptiva', v)"
             />
             <CataSliderIntensidad
               tipo="afectiva"
               label="Afectiva"
               :model-value="muestra.intensidades.aroma.afectiva"
+              :color="getCategoryColor('aroma')"
               @update:model-value="(v) => actualizarIntensidad('aroma', 'afectiva', v)"
             />
           </div>
@@ -309,18 +329,20 @@
 
         <!-- Sabor -->
         <div class="form-section mb-4">
-          <h6 class="form-subsection-title cata-text">Sabor</h6>
+          <h6 class="form-subsection-title cata-text" :style="{ color: getCategoryColor('sabor') }">Sabor</h6>
           <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
             <CataSliderIntensidad
               tipo="descriptiva"
               label="Descriptiva"
               :model-value="muestra.intensidades.sabor.descriptiva"
+              :color="getCategoryColor('sabor')"
               @update:model-value="(v) => actualizarIntensidad('sabor', 'descriptiva', v)"
             />
             <CataSliderIntensidad
               tipo="afectiva"
               label="Afectiva"
               :model-value="muestra.intensidades.sabor.afectiva"
+              :color="getCategoryColor('sabor')"
               @update:model-value="(v) => actualizarIntensidad('sabor', 'afectiva', v)"
             />
           </div>
@@ -328,18 +350,20 @@
 
         <!-- Sabor Residual -->
         <div class="form-section mb-4">
-          <h6 class="form-subsection-title cata-text">Sabor Residual</h6>
+          <h6 class="form-subsection-title cata-text" :style="{ color: getCategoryColor('saborResidual') }">Sabor Residual</h6>
           <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
             <CataSliderIntensidad
               tipo="descriptiva"
               label="Descriptiva"
               :model-value="muestra.intensidades.saborResidual.descriptiva"
+              :color="getCategoryColor('saborResidual')"
               @update:model-value="(v) => actualizarIntensidad('saborResidual', 'descriptiva', v)"
             />
             <CataSliderIntensidad
               tipo="afectiva"
               label="Afectiva"
               :model-value="muestra.intensidades.saborResidual.afectiva"
+              :color="getCategoryColor('saborResidual')"
               @update:model-value="(v) => actualizarIntensidad('saborResidual', 'afectiva', v)"
             />
           </div>
@@ -347,18 +371,20 @@
 
         <!-- Acidez -->
         <div class="form-section mb-4">
-          <h6 class="form-subsection-title cata-text">Acidez</h6>
+          <h6 class="form-subsection-title cata-text" :style="{ color: getCategoryColor('acidez') }">Acidez</h6>
           <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
             <CataSliderIntensidad
               tipo="descriptiva"
               label="Descriptiva"
               :model-value="muestra.intensidades.acidez.descriptiva"
+              :color="getCategoryColor('acidez')"
               @update:model-value="(v) => actualizarIntensidad('acidez', 'descriptiva', v)"
             />
             <CataSliderIntensidad
               tipo="afectiva"
               label="Afectiva"
               :model-value="muestra.intensidades.acidez.afectiva"
+              :color="getCategoryColor('acidez')"
               @update:model-value="(v) => actualizarIntensidad('acidez', 'afectiva', v)"
             />
           </div>
@@ -366,18 +392,20 @@
 
         <!-- Dulzor -->
         <div class="form-section mb-4">
-          <h6 class="form-subsection-title cata-text">Dulzor</h6>
+          <h6 class="form-subsection-title cata-text" :style="{ color: getCategoryColor('dulzor') }">Dulzor</h6>
           <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
             <CataSliderIntensidad
               tipo="descriptiva"
               label="Descriptiva"
               :model-value="muestra.intensidades.dulzor.descriptiva"
+              :color="getCategoryColor('dulzor')"
               @update:model-value="(v) => actualizarIntensidad('dulzor', 'descriptiva', v)"
             />
             <CataSliderIntensidad
               tipo="afectiva"
               label="Afectiva"
               :model-value="muestra.intensidades.dulzor.afectiva"
+              :color="getCategoryColor('dulzor')"
               @update:model-value="(v) => actualizarIntensidad('dulzor', 'afectiva', v)"
             />
           </div>
@@ -385,18 +413,20 @@
 
         <!-- Sensación en Boca -->
         <div class="form-section mb-4">
-          <h6 class="form-subsection-title cata-text">Sensación en la Boca</h6>
+          <h6 class="form-subsection-title cata-text" :style="{ color: getCategoryColor('sensacionBoca') }">Sensación en la Boca</h6>
           <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
             <CataSliderIntensidad
               tipo="descriptiva"
               label="Descriptiva"
               :model-value="muestra.intensidades.sensacionBoca.descriptiva"
+              :color="getCategoryColor('sensacionBoca')"
               @update:model-value="(v) => actualizarIntensidad('sensacionBoca', 'descriptiva', v)"
             />
             <CataSliderIntensidad
               tipo="afectiva"
               label="Afectiva"
               :model-value="muestra.intensidades.sensacionBoca.afectiva"
+              :color="getCategoryColor('sensacionBoca')"
               @update:model-value="(v) => actualizarIntensidad('sensacionBoca', 'afectiva', v)"
             />
           </div>
@@ -404,18 +434,20 @@
 
         <!-- Impresión Global -->
         <div class="form-section">
-          <h6 class="form-subsection-title cata-text">Impresión Global</h6>
+          <h6 class="form-subsection-title cata-text" :style="{ color: getCategoryColor('impresionGlobal') }">Impresión Global</h6>
           <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
             <CataSliderIntensidad
               tipo="descriptiva"
               label="Descriptiva"
               :model-value="muestra.intensidades.impresionGlobal.descriptiva"
+              :color="getCategoryColor('impresionGlobal')"
               @update:model-value="(v) => actualizarIntensidad('impresionGlobal', 'descriptiva', v)"
             />
             <CataSliderIntensidad
               tipo="afectiva"
               label="Afectiva"
               :model-value="muestra.intensidades.impresionGlobal.afectiva"
+              :color="getCategoryColor('impresionGlobal')"
               @update:model-value="(v) => actualizarIntensidad('impresionGlobal', 'afectiva', v)"
             />
           </div>
@@ -560,6 +592,7 @@ interface FormularioMuestraProps {
 const props = defineProps<FormularioMuestraProps>()
 
 const { actualizarIntensidad: actualizarIntensidadCatacion } = useCatacion()
+const { getCategoryColor } = useCategoryColors()
 
 // Listas para los selectores
 const sensacionesBoca = SENSACIONES_BOCA
@@ -693,16 +726,14 @@ watch(() => props.muestra.otrasNotas, (newVal) => {
 
 .form-section-title {
   font-size: 0.875rem;
-  font-weight: 600;
+  font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  opacity: 0.75;
 }
 
 .form-subsection-title {
   font-size: 0.8125rem;
-  font-weight: 600;
-  opacity: 0.7;
+  font-weight: 700;
   margin-bottom: 0.5rem;
 }
 

nuxt4/app/components/cata/SliderIntensidad.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="slider-intensidad cata-fade-in">
+  <div class="slider-intensidad cata-fade-in" :style="customColorStyle">
     <!-- Label -->
     <label
       v-if="label"
@@ -59,12 +59,14 @@ interface SliderIntensidadProps {
   required?: boolean
   /** Mostrar descripción del tipo */
   showDescription?: boolean
+  /** Color personalizado para el slider */
+  color?: string
 }
 
 const props = withDefaults(defineProps<SliderIntensidadProps>(), {
   disabled: false,
   required: false,
-  showDescription: true,
+  showDescription: false,
 })
 
 const emit = defineEmits<{
@@ -95,11 +97,11 @@ const tooltipConfig = computed<boolean | TooltipProps>(() => ({
 // Configuración UI personalizada del slider
 const sliderUi = computed(() => ({
   root: 'cata-slider-root',
-  track: 'cata-slider-track',
+  track: `cata-slider-track ${props.color ? 'cata-slider-track-custom' : ''}`,
   range: props.tipo === 'descriptiva'
     ? 'bg-primary/20 dark:bg-primary/30'
     : 'bg-primary/40 dark:bg-primary/50',
-  thumb: 'cata-slider-thumb',
+  thumb: `cata-slider-thumb ${props.color ? 'cata-slider-thumb-custom' : ''}`,
 }))
 
 // Manejar cambio de valor
@@ -111,6 +113,14 @@ const handleChange = (value: number | number[] | undefined) => {
   const newValue = Array.isArray(value) ? (value[0] ?? null) : value
   emit('update:modelValue', newValue)
 }
+
+// Estilo dinámico para el color personalizado
+const customColorStyle = computed(() => {
+  if (!props.color) return {}
+  return {
+    '--slider-custom-color': props.color,
+  }
+})
 </script>
 
 <style scoped>
@@ -132,6 +142,10 @@ const handleChange = (value: number | number[] | undefined) => {
   border-color: color-mix(in srgb, var(--cata-primary) 50%, transparent);
 }
 
+:deep(.cata-slider-track-custom) {
+  border-color: color-mix(in srgb, var(--slider-custom-color) 50%, transparent);
+}
+
 :deep(.cata-slider-thumb) {
   width: 1.25rem;
   height: 1.25rem;
@@ -142,6 +156,10 @@ const handleChange = (value: number | number[] | undefined) => {
   transition: all 0.2s ease;
 }
 
+:deep(.cata-slider-thumb-custom) {
+  border-color: var(--slider-custom-color);
+}
+
 :deep(.cata-slider-thumb:hover) {
   transform: scale(1.1);
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
@@ -155,10 +173,18 @@ const handleChange = (value: number | number[] | undefined) => {
   box-shadow: 0 0 6px var(--cata-primary);
 }
 
+.dark :deep(.cata-slider-thumb-custom) {
+  box-shadow: 0 0 6px var(--slider-custom-color);
+}
+
 .dark :deep(.cata-slider-thumb:hover) {
   box-shadow: 0 0 12px var(--cata-primary);
 }
 
+.dark :deep(.cata-slider-thumb-custom:hover) {
+  box-shadow: 0 0 12px var(--slider-custom-color);
+}
+
 /* Animación de fade in */
 .slider-intensidad.cata-fade-in {
   animation: cata-fade-in 0.3s ease-out;