Fix: Validar estructura de datos de colores personalizados

- Agregar validación completa en loadCustomColors para detectar formato incompatible
- Proteger setCustomColors asegurando que la estructura existe antes de asignar
- Validar estructura en getCurrentColors y retornar defaults si no existe
- Validar estructura en hasCustomColors y retornar false si no existe
- Validar estructura en inicializar antes de aplicar colores
- Limpiar localStorage automáticamente si detecta formato antiguo o corrupto

Soluciona error: TypeError Cannot create property 'primary' on string
cuando localStorage contiene datos de versión anterior

nuxt4/app/components/cata/FormularioMuestra.vue

@@ -35,18 +35,26 @@
 
       <!-- Sliders de Fragancia -->
       <div class="form-section">
-        <h5 class="form-section-title cata-text" :style="{ color: getCategoryColor('fragancia') }">Fragancia</h5>
+        <div class="flex items-center justify-between mb-3">
+          <h5 class="form-section-title cata-text" :style="{ color: getCategoryColor('fragancia') }">Fragancia</h5>
+          <div class="flex gap-2">
+            <UBadge :style="{ backgroundColor: getCategoryColor('fragancia'), opacity: 0.4 }" class="text-xs">
+              📊 {{ muestra.intensidades.fragancia.descriptiva ?? '-' }}
+            </UBadge>
+            <UBadge :style="{ backgroundColor: getCategoryColor('fragancia'), opacity: 0.7 }" class="text-xs">
+              ❤️ {{ muestra.intensidades.fragancia.afectiva ?? '-' }}
+            </UBadge>
+          </div>
+        </div>
         <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)"
@@ -56,18 +64,26 @@
 
       <!-- Sliders de Aroma -->
       <div class="form-section">
-        <h5 class="form-section-title cata-text" :style="{ color: getCategoryColor('aroma') }">Aroma</h5>
+        <div class="flex items-center justify-between mb-3">
+          <h5 class="form-section-title cata-text" :style="{ color: getCategoryColor('aroma') }">Aroma</h5>
+          <div class="flex gap-2">
+            <UBadge :style="{ backgroundColor: getCategoryColor('aroma'), opacity: 0.4 }" class="text-xs">
+              📊 {{ muestra.intensidades.aroma.descriptiva ?? '-' }}
+            </UBadge>
+            <UBadge :style="{ backgroundColor: getCategoryColor('aroma'), opacity: 0.7 }" class="text-xs">
+              ❤️ {{ muestra.intensidades.aroma.afectiva ?? '-' }}
+            </UBadge>
+          </div>
+        </div>
         <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)"
@@ -77,18 +93,26 @@
 
       <!-- Sliders de Sabor -->
       <div class="form-section">
-        <h5 class="form-section-title cata-text" :style="{ color: getCategoryColor('sabor') }">Sabor</h5>
+        <div class="flex items-center justify-between mb-3">
+          <h5 class="form-section-title cata-text" :style="{ color: getCategoryColor('sabor') }">Sabor</h5>
+          <div class="flex gap-2">
+            <UBadge :style="{ backgroundColor: getCategoryColor('sabor'), opacity: 0.4 }" class="text-xs">
+              📊 {{ muestra.intensidades.sabor.descriptiva ?? '-' }}
+            </UBadge>
+            <UBadge :style="{ backgroundColor: getCategoryColor('sabor'), opacity: 0.7 }" class="text-xs">
+              ❤️ {{ muestra.intensidades.sabor.afectiva ?? '-' }}
+            </UBadge>
+          </div>
+        </div>
         <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)"
@@ -98,18 +122,26 @@
 
       <!-- Sliders de Sabor Residual -->
       <div class="form-section">
-        <h5 class="form-section-title cata-text" :style="{ color: getCategoryColor('saborResidual') }">Sabor Residual</h5>
+        <div class="flex items-center justify-between mb-3">
+          <h5 class="form-section-title cata-text" :style="{ color: getCategoryColor('saborResidual') }">Sabor Residual</h5>
+          <div class="flex gap-2">
+            <UBadge :style="{ backgroundColor: getCategoryColor('saborResidual'), opacity: 0.4 }" class="text-xs">
+              📊 {{ muestra.intensidades.saborResidual.descriptiva ?? '-' }}
+            </UBadge>
+            <UBadge :style="{ backgroundColor: getCategoryColor('saborResidual'), opacity: 0.7 }" class="text-xs">
+              ❤️ {{ muestra.intensidades.saborResidual.afectiva ?? '-' }}
+            </UBadge>
+          </div>
+        </div>
         <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)"
@@ -119,18 +151,26 @@
 
       <!-- Sliders de Acidez -->
       <div class="form-section">
-        <h5 class="form-section-title cata-text" :style="{ color: getCategoryColor('acidez') }">Acidez</h5>
+        <div class="flex items-center justify-between mb-3">
+          <h5 class="form-section-title cata-text" :style="{ color: getCategoryColor('acidez') }">Acidez</h5>
+          <div class="flex gap-2">
+            <UBadge :style="{ backgroundColor: getCategoryColor('acidez'), opacity: 0.4 }" class="text-xs">
+              📊 {{ muestra.intensidades.acidez.descriptiva ?? '-' }}
+            </UBadge>
+            <UBadge :style="{ backgroundColor: getCategoryColor('acidez'), opacity: 0.7 }" class="text-xs">
+              ❤️ {{ muestra.intensidades.acidez.afectiva ?? '-' }}
+            </UBadge>
+          </div>
+        </div>
         <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)"
@@ -140,18 +180,26 @@
 
       <!-- Sliders de Dulzor -->
       <div class="form-section">
-        <h5 class="form-section-title cata-text" :style="{ color: getCategoryColor('dulzor') }">Dulzor</h5>
+        <div class="flex items-center justify-between mb-3">
+          <h5 class="form-section-title cata-text" :style="{ color: getCategoryColor('dulzor') }">Dulzor</h5>
+          <div class="flex gap-2">
+            <UBadge :style="{ backgroundColor: getCategoryColor('dulzor'), opacity: 0.4 }" class="text-xs">
+              📊 {{ muestra.intensidades.dulzor.descriptiva ?? '-' }}
+            </UBadge>
+            <UBadge :style="{ backgroundColor: getCategoryColor('dulzor'), opacity: 0.7 }" class="text-xs">
+              ❤️ {{ muestra.intensidades.dulzor.afectiva ?? '-' }}
+            </UBadge>
+          </div>
+        </div>
         <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)"
@@ -161,18 +209,26 @@
 
       <!-- Sliders de Sensación en Boca -->
       <div class="form-section">
-        <h5 class="form-section-title cata-text" :style="{ color: getCategoryColor('sensacionBoca') }">Sensación en la Boca</h5>
+        <div class="flex items-center justify-between mb-3">
+          <h5 class="form-section-title cata-text" :style="{ color: getCategoryColor('sensacionBoca') }">Sensación en la Boca</h5>
+          <div class="flex gap-2">
+            <UBadge :style="{ backgroundColor: getCategoryColor('sensacionBoca'), opacity: 0.4 }" class="text-xs">
+              📊 {{ muestra.intensidades.sensacionBoca.descriptiva ?? '-' }}
+            </UBadge>
+            <UBadge :style="{ backgroundColor: getCategoryColor('sensacionBoca'), opacity: 0.7 }" class="text-xs">
+              ❤️ {{ muestra.intensidades.sensacionBoca.afectiva ?? '-' }}
+            </UBadge>
+          </div>
+        </div>
         <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)"
@@ -182,18 +238,26 @@
 
       <!-- Sliders de Impresión Global -->
       <div class="form-section">
-        <h5 class="form-section-title cata-text" :style="{ color: getCategoryColor('impresionGlobal') }">Impresión Global</h5>
+        <div class="flex items-center justify-between mb-3">
+          <h5 class="form-section-title cata-text" :style="{ color: getCategoryColor('impresionGlobal') }">Impresión Global</h5>
+          <div class="flex gap-2">
+            <UBadge :style="{ backgroundColor: getCategoryColor('impresionGlobal'), opacity: 0.4 }" class="text-xs">
+              📊 {{ muestra.intensidades.impresionGlobal.descriptiva ?? '-' }}
+            </UBadge>
+            <UBadge :style="{ backgroundColor: getCategoryColor('impresionGlobal'), opacity: 0.7 }" class="text-xs">
+              ❤️ {{ muestra.intensidades.impresionGlobal.afectiva ?? '-' }}
+            </UBadge>
+          </div>
+        </div>
         <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)"
@@ -287,18 +351,26 @@
 
         <!-- Fragancia -->
         <div class="form-section mb-4">
-          <h6 class="form-subsection-title cata-text" :style="{ color: getCategoryColor('fragancia') }">Fragancia</h6>
+          <div class="flex items-center justify-between mb-3">
+            <h6 class="form-subsection-title cata-text" :style="{ color: getCategoryColor('fragancia') }">Fragancia</h6>
+            <div class="flex gap-2">
+              <UBadge :style="{ backgroundColor: getCategoryColor('fragancia'), opacity: 0.4 }" class="text-xs">
+                📊 {{ muestra.intensidades.fragancia.descriptiva ?? '-' }}
+              </UBadge>
+              <UBadge :style="{ backgroundColor: getCategoryColor('fragancia'), opacity: 0.7 }" class="text-xs">
+                ❤️ {{ muestra.intensidades.fragancia.afectiva ?? '-' }}
+              </UBadge>
+            </div>
+          </div>
           <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)"
@@ -308,18 +380,26 @@
 
         <!-- Aroma -->
         <div class="form-section mb-4">
-          <h6 class="form-subsection-title cata-text" :style="{ color: getCategoryColor('aroma') }">Aroma</h6>
+          <div class="flex items-center justify-between mb-3">
+            <h6 class="form-subsection-title cata-text" :style="{ color: getCategoryColor('aroma') }">Aroma</h6>
+            <div class="flex gap-2">
+              <UBadge :style="{ backgroundColor: getCategoryColor('aroma'), opacity: 0.4 }" class="text-xs">
+                📊 {{ muestra.intensidades.aroma.descriptiva ?? '-' }}
+              </UBadge>
+              <UBadge :style="{ backgroundColor: getCategoryColor('aroma'), opacity: 0.7 }" class="text-xs">
+                ❤️ {{ muestra.intensidades.aroma.afectiva ?? '-' }}
+              </UBadge>
+            </div>
+          </div>
           <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)"
@@ -329,18 +409,26 @@
 
         <!-- Sabor -->
         <div class="form-section mb-4">
-          <h6 class="form-subsection-title cata-text" :style="{ color: getCategoryColor('sabor') }">Sabor</h6>
+          <div class="flex items-center justify-between mb-3">
+            <h6 class="form-subsection-title cata-text" :style="{ color: getCategoryColor('sabor') }">Sabor</h6>
+            <div class="flex gap-2">
+              <UBadge :style="{ backgroundColor: getCategoryColor('sabor'), opacity: 0.4 }" class="text-xs">
+                📊 {{ muestra.intensidades.sabor.descriptiva ?? '-' }}
+              </UBadge>
+              <UBadge :style="{ backgroundColor: getCategoryColor('sabor'), opacity: 0.7 }" class="text-xs">
+                ❤️ {{ muestra.intensidades.sabor.afectiva ?? '-' }}
+              </UBadge>
+            </div>
+          </div>
           <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)"
@@ -350,18 +438,26 @@
 
         <!-- Sabor Residual -->
         <div class="form-section mb-4">
-          <h6 class="form-subsection-title cata-text" :style="{ color: getCategoryColor('saborResidual') }">Sabor Residual</h6>
+          <div class="flex items-center justify-between mb-3">
+            <h6 class="form-subsection-title cata-text" :style="{ color: getCategoryColor('saborResidual') }">Sabor Residual</h6>
+            <div class="flex gap-2">
+              <UBadge :style="{ backgroundColor: getCategoryColor('saborResidual'), opacity: 0.4 }" class="text-xs">
+                📊 {{ muestra.intensidades.saborResidual.descriptiva ?? '-' }}
+              </UBadge>
+              <UBadge :style="{ backgroundColor: getCategoryColor('saborResidual'), opacity: 0.7 }" class="text-xs">
+                ❤️ {{ muestra.intensidades.saborResidual.afectiva ?? '-' }}
+              </UBadge>
+            </div>
+          </div>
           <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)"
@@ -371,18 +467,26 @@
 
         <!-- Acidez -->
         <div class="form-section mb-4">
-          <h6 class="form-subsection-title cata-text" :style="{ color: getCategoryColor('acidez') }">Acidez</h6>
+          <div class="flex items-center justify-between mb-3">
+            <h6 class="form-subsection-title cata-text" :style="{ color: getCategoryColor('acidez') }">Acidez</h6>
+            <div class="flex gap-2">
+              <UBadge :style="{ backgroundColor: getCategoryColor('acidez'), opacity: 0.4 }" class="text-xs">
+                📊 {{ muestra.intensidades.acidez.descriptiva ?? '-' }}
+              </UBadge>
+              <UBadge :style="{ backgroundColor: getCategoryColor('acidez'), opacity: 0.7 }" class="text-xs">
+                ❤️ {{ muestra.intensidades.acidez.afectiva ?? '-' }}
+              </UBadge>
+            </div>
+          </div>
           <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)"
@@ -392,18 +496,26 @@
 
         <!-- Dulzor -->
         <div class="form-section mb-4">
-          <h6 class="form-subsection-title cata-text" :style="{ color: getCategoryColor('dulzor') }">Dulzor</h6>
+          <div class="flex items-center justify-between mb-3">
+            <h6 class="form-subsection-title cata-text" :style="{ color: getCategoryColor('dulzor') }">Dulzor</h6>
+            <div class="flex gap-2">
+              <UBadge :style="{ backgroundColor: getCategoryColor('dulzor'), opacity: 0.4 }" class="text-xs">
+                📊 {{ muestra.intensidades.dulzor.descriptiva ?? '-' }}
+              </UBadge>
+              <UBadge :style="{ backgroundColor: getCategoryColor('dulzor'), opacity: 0.7 }" class="text-xs">
+                ❤️ {{ muestra.intensidades.dulzor.afectiva ?? '-' }}
+              </UBadge>
+            </div>
+          </div>
           <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)"
@@ -413,18 +525,26 @@
 
         <!-- Sensación en Boca -->
         <div class="form-section mb-4">
-          <h6 class="form-subsection-title cata-text" :style="{ color: getCategoryColor('sensacionBoca') }">Sensación en la Boca</h6>
+          <div class="flex items-center justify-between mb-3">
+            <h6 class="form-subsection-title cata-text" :style="{ color: getCategoryColor('sensacionBoca') }">Sensación en la Boca</h6>
+            <div class="flex gap-2">
+              <UBadge :style="{ backgroundColor: getCategoryColor('sensacionBoca'), opacity: 0.4 }" class="text-xs">
+                📊 {{ muestra.intensidades.sensacionBoca.descriptiva ?? '-' }}
+              </UBadge>
+              <UBadge :style="{ backgroundColor: getCategoryColor('sensacionBoca'), opacity: 0.7 }" class="text-xs">
+                ❤️ {{ muestra.intensidades.sensacionBoca.afectiva ?? '-' }}
+              </UBadge>
+            </div>
+          </div>
           <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)"
@@ -434,18 +554,26 @@
 
         <!-- Impresión Global -->
         <div class="form-section">
-          <h6 class="form-subsection-title cata-text" :style="{ color: getCategoryColor('impresionGlobal') }">Impresión Global</h6>
+          <div class="flex items-center justify-between mb-3">
+            <h6 class="form-subsection-title cata-text" :style="{ color: getCategoryColor('impresionGlobal') }">Impresión Global</h6>
+            <div class="flex gap-2">
+              <UBadge :style="{ backgroundColor: getCategoryColor('impresionGlobal'), opacity: 0.4 }" class="text-xs">
+                📊 {{ muestra.intensidades.impresionGlobal.descriptiva ?? '-' }}
+              </UBadge>
+              <UBadge :style="{ backgroundColor: getCategoryColor('impresionGlobal'), opacity: 0.7 }" class="text-xs">
+                ❤️ {{ muestra.intensidades.impresionGlobal.afectiva ?? '-' }}
+              </UBadge>
+            </div>
+          </div>
           <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)"

nuxt4/app/components/cata/SliderIntensidad.vue

@@ -1,15 +1,5 @@
 <template>
   <div class="slider-intensidad cata-fade-in" :style="customColorStyle">
-    <!-- Label -->
-    <label
-      v-if="label"
-      :for="inputId"
-      class="block text-sm font-medium mb-2 cata-text"
-    >
-      {{ label }}
-      <span v-if="required" class="text-error">*</span>
-    </label>
-
     <!-- Slider Container -->
     <div class="relative">
       <USlider
@@ -95,14 +85,31 @@ const tooltipConfig = computed<boolean | TooltipProps>(() => ({
 }))
 
 // Configuración UI personalizada del slider
-const sliderUi = computed(() => ({
-  root: 'cata-slider-root',
-  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 ${props.color ? 'cata-slider-thumb-custom' : ''}`,
-}))
+const sliderUi = computed(() => {
+  const baseClasses = {
+    root: 'cata-slider-root',
+    track: `cata-slider-track ${props.color ? 'cata-slider-track-custom' : ''}`,
+    thumb: `cata-slider-thumb ${props.color ? 'cata-slider-thumb-custom' : ''} ${props.tipo === 'descriptiva' ? 'cata-slider-thumb-descriptivo' : 'cata-slider-thumb-afectivo'}`,
+  }
+
+  // Si hay color personalizado, usamos una clase custom para el range
+  if (props.color) {
+    return {
+      ...baseClasses,
+      range: props.tipo === 'descriptiva'
+        ? 'cata-slider-range-custom cata-slider-range-descriptivo'
+        : 'cata-slider-range-custom cata-slider-range-afectivo',
+    }
+  }
+
+  // Si no hay color personalizado, usamos las clases por defecto
+  return {
+    ...baseClasses,
+    range: props.tipo === 'descriptiva'
+      ? 'bg-primary/20 dark:bg-primary/30'
+      : 'bg-primary/40 dark:bg-primary/50',
+  }
+})
 
 // Manejar cambio de valor
 const handleChange = (value: number | number[] | undefined) => {
@@ -146,20 +153,53 @@ const customColorStyle = computed(() => {
   border-color: color-mix(in srgb, var(--slider-custom-color) 50%, transparent);
 }
 
+/* Range (parte rellenada) con color personalizado */
+:deep(.cata-slider-range-custom) {
+  background-color: var(--slider-custom-color);
+  border-radius: 9999px;
+}
+
+/* Diferentes opacidades para descriptivo vs afectivo */
+:deep(.cata-slider-range-descriptivo) {
+  opacity: 0.4;
+}
+
+:deep(.cata-slider-range-afectivo) {
+  opacity: 0.7;
+}
+
 :deep(.cata-slider-thumb) {
-  width: 1.25rem;
-  height: 1.25rem;
+  width: 1.75rem;
+  height: 1.75rem;
   border-radius: 9999px;
   background-color: var(--cata-bg);
   border: 2px solid var(--cata-primary);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   transition: all 0.2s ease;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
 }
 
 :deep(.cata-slider-thumb-custom) {
   border-color: var(--slider-custom-color);
 }
 
+/* Iconos para diferenciar descriptivo de afectivo */
+:deep(.cata-slider-thumb-descriptivo::before) {
+  content: '📊';
+  position: absolute;
+  font-size: 0.65rem;
+}
+
+:deep(.cata-slider-thumb-afectivo::before) {
+  content: '❤️';
+  position: absolute;
+  font-size: 0.65rem;
+}
+
 :deep(.cata-slider-thumb:hover) {
   transform: scale(1.1);
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);

nuxt4/app/composables/useColorCustomization.ts

@@ -198,10 +198,27 @@ export const useColorCustomization = () => {
       const stored = localStorage.getItem(STORAGE_KEY)
       if (stored) {
         const colors = JSON.parse(stored)
-        customColors.value = colors
+
+        // Validar estructura de datos
+        if (
+          colors &&
+          typeof colors === 'object' &&
+          colors.light &&
+          typeof colors.light === 'object' &&
+          colors.dark &&
+          typeof colors.dark === 'object'
+        ) {
+          customColors.value = colors
+        } else {
+          // Datos corruptos o formato antiguo, resetear
+          console.warn('Formato de colores incompatible, reseteando...')
+          localStorage.removeItem(STORAGE_KEY)
+        }
       }
     } catch (error) {
       console.error('Error al cargar colores personalizados:', error)
+      // En caso de error, limpiar localStorage
+      localStorage.removeItem(STORAGE_KEY)
     }
   }
 
@@ -226,6 +243,11 @@ export const useColorCustomization = () => {
 
     const theme = isDark.value ? 'dark' : 'light'
 
+    // Asegurar que la estructura existe
+    if (!customColors.value[theme] || typeof customColors.value[theme] !== 'object') {
+      customColors.value[theme] = { primary: null, foreground: null, background: null }
+    }
+
     if (primary !== undefined) customColors.value[theme].primary = primary
     if (foreground !== undefined) customColors.value[theme].foreground = foreground
     if (background !== undefined) customColors.value[theme].background = background
@@ -262,10 +284,17 @@ export const useColorCustomization = () => {
    */
   const getCurrentColors = computed(() => {
     const theme = isDark.value ? 'dark' : 'light'
+    const colors = customColors.value[theme]
+
+    // Validar que la estructura existe
+    if (!colors || typeof colors !== 'object') {
+      return 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,
+      primary: colors.primary || DEFAULT_COLORS[theme].primary,
+      foreground: colors.foreground || DEFAULT_COLORS[theme].foreground,
+      background: colors.background || DEFAULT_COLORS[theme].background,
     }
   })
 
@@ -275,6 +304,12 @@ export const useColorCustomization = () => {
   const hasCustomColors = computed(() => {
     const theme = isDark.value ? 'dark' : 'light'
     const colors = customColors.value[theme]
+
+    // Validar que la estructura existe
+    if (!colors || typeof colors !== 'object') {
+      return false
+    }
+
     return colors.primary !== null || colors.foreground !== null || colors.background !== null
   })
 
@@ -289,7 +324,7 @@ export const useColorCustomization = () => {
     // Solo aplicar colores si hay colores personalizados guardados
     const theme = isDark.value ? 'dark' : 'light'
     const colors = customColors.value[theme]
-    if (colors.primary || colors.foreground || colors.background) {
+    if (colors && typeof colors === 'object' && (colors.primary || colors.foreground || colors.background)) {
       applyCustomColors(
         colors.primary || undefined,
         colors.foreground || undefined,
@@ -302,7 +337,7 @@ export const useColorCustomization = () => {
       const theme = newIsDark ? 'dark' : 'light'
       const colors = customColors.value[theme]
       // Solo aplicar si hay colores personalizados para este tema
-      if (colors.primary || colors.foreground || colors.background) {
+      if (colors && typeof colors === 'object' && (colors.primary || colors.foreground || colors.background)) {
         applyCustomColors(
           colors.primary || undefined,
           colors.foreground || undefined,