From b1aa431549aa53d836068be2401a380660568954 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Sat, 18 Oct 2025 16:14:11 -0600
Subject: [PATCH] =?UTF-8?q?Feat:=20Agregar=20iconos=20a=20categor=C3=ADas?=
 =?UTF-8?q?=20de=20intensidad=20y=20simplificar=20chips=20de=20resumen?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Agregar función getCategoryIcon() en FormularioMuestra y ResumenMuestra
- Iconos Lucide para cada categoría:
  * fragancia: flower-2, aroma: wind, sabor: candy
  * saborResidual: timer, acidez: citrus, dulzor: cookie
  * sensacionBoca: droplets, impresionGlobal: star
- Actualizar todos los títulos de sección con iconos
- Modificar chips de ResumenMuestra para mostrar solo icono + valor descriptivo
- Eliminar valores afectivos y emojis de chips
- Agregar estilos CSS para .chip-icon
---
 .../app/components/cata/FormularioMuestra.vue | 95 +++++++++++++++----
 nuxt4/app/components/cata/ResumenMuestra.vue  | 81 +++++++++-------
 2 files changed, 127 insertions(+), 49 deletions(-)

diff --git a/nuxt4/app/components/cata/FormularioMuestra.vue b/nuxt4/app/components/cata/FormularioMuestra.vue
index 99a60c1..2a48760 100644
--- a/nuxt4/app/components/cata/FormularioMuestra.vue
+++ b/nuxt4/app/components/cata/FormularioMuestra.vue
@@ -79,7 +79,10 @@
       <!-- Sliders de Fragancia -->
       <div v-if="mostrarFraganciaSlider" class="form-section">
         <div class="flex items-center justify-between mb-3">
-          <h5 class="form-section-title cata-text" :style="{ color: getCategoryColor('fragancia') }">Fragancia</h5>
+          <h5 class="form-section-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('fragancia') }">
+            <UIcon :name="getCategoryIcon('fragancia')" class="w-5 h-5" />
+            Fragancia
+          </h5>
           <div class="flex gap-2">
             <UBadge :style="{ backgroundColor: getCategoryColor('fragancia'), opacity: 0.4 }" class="text-xs">
               📊 {{ muestra.intensidades.fragancia.descriptiva ?? '-' }}
@@ -108,7 +111,10 @@
       <!-- Sliders de Aroma -->
       <div v-if="mostrarAromaSlider" class="form-section">
         <div class="flex items-center justify-between mb-3">
-          <h5 class="form-section-title cata-text" :style="{ color: getCategoryColor('aroma') }">Aroma</h5>
+          <h5 class="form-section-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('aroma') }">
+            <UIcon :name="getCategoryIcon('aroma')" class="w-5 h-5" />
+            Aroma
+          </h5>
           <div class="flex gap-2">
             <UBadge :style="{ backgroundColor: getCategoryColor('aroma'), opacity: 0.4 }" class="text-xs">
               📊 {{ muestra.intensidades.aroma.descriptiva ?? '-' }}
@@ -137,7 +143,10 @@
       <!-- Sliders de Sabor -->
       <div v-if="mostrarSaborSlider" class="form-section">
         <div class="flex items-center justify-between mb-3">
-          <h5 class="form-section-title cata-text" :style="{ color: getCategoryColor('sabor') }">Sabor</h5>
+          <h5 class="form-section-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('sabor') }">
+            <UIcon :name="getCategoryIcon('sabor')" class="w-5 h-5" />
+            Sabor
+          </h5>
           <div class="flex gap-2">
             <UBadge :style="{ backgroundColor: getCategoryColor('sabor'), opacity: 0.4 }" class="text-xs">
               📊 {{ muestra.intensidades.sabor.descriptiva ?? '-' }}
@@ -166,7 +175,10 @@
       <!-- Sliders de Sabor Residual -->
       <div v-if="mostrarSaborResidualSlider" class="form-section">
         <div class="flex items-center justify-between mb-3">
-          <h5 class="form-section-title cata-text" :style="{ color: getCategoryColor('saborResidual') }">Sabor Residual</h5>
+          <h5 class="form-section-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('saborResidual') }">
+            <UIcon :name="getCategoryIcon('saborResidual')" class="w-5 h-5" />
+            Sabor Residual
+          </h5>
           <div class="flex gap-2">
             <UBadge :style="{ backgroundColor: getCategoryColor('saborResidual'), opacity: 0.4 }" class="text-xs">
               📊 {{ muestra.intensidades.saborResidual.descriptiva ?? '-' }}
@@ -195,7 +207,10 @@
       <!-- Sliders de Acidez -->
       <div v-if="mostrarAcidezSlider" class="form-section">
         <div class="flex items-center justify-between mb-3">
-          <h5 class="form-section-title cata-text" :style="{ color: getCategoryColor('acidez') }">Acidez</h5>
+          <h5 class="form-section-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('acidez') }">
+            <UIcon :name="getCategoryIcon('acidez')" class="w-5 h-5" />
+            Acidez
+          </h5>
           <div class="flex gap-2">
             <UBadge :style="{ backgroundColor: getCategoryColor('acidez'), opacity: 0.4 }" class="text-xs">
               📊 {{ muestra.intensidades.acidez.descriptiva ?? '-' }}
@@ -224,7 +239,10 @@
       <!-- Sliders de Dulzor -->
       <div v-if="mostrarDulzorSlider" class="form-section">
         <div class="flex items-center justify-between mb-3">
-          <h5 class="form-section-title cata-text" :style="{ color: getCategoryColor('dulzor') }">Dulzor</h5>
+          <h5 class="form-section-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('dulzor') }">
+            <UIcon :name="getCategoryIcon('dulzor')" class="w-5 h-5" />
+            Dulzor
+          </h5>
           <div class="flex gap-2">
             <UBadge :style="{ backgroundColor: getCategoryColor('dulzor'), opacity: 0.4 }" class="text-xs">
               📊 {{ muestra.intensidades.dulzor.descriptiva ?? '-' }}
@@ -253,7 +271,10 @@
       <!-- Sliders de Sensación en Boca -->
       <div v-if="mostrarSensacionBocaSlider" class="form-section">
         <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>
+          <h5 class="form-section-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('sensacionBoca') }">
+            <UIcon :name="getCategoryIcon('sensacionBoca')" class="w-5 h-5" />
+            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 ?? '-' }}
@@ -282,7 +303,10 @@
       <!-- Sliders de Impresión Global -->
       <div v-if="mostrarImpresionGlobalSlider" class="form-section">
         <div class="flex items-center justify-between mb-3">
-          <h5 class="form-section-title cata-text" :style="{ color: getCategoryColor('impresionGlobal') }">Impresión Global</h5>
+          <h5 class="form-section-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('impresionGlobal') }">
+            <UIcon :name="getCategoryIcon('impresionGlobal')" class="w-5 h-5" />
+            Impresión Global
+          </h5>
           <div class="flex gap-2">
             <UBadge :style="{ backgroundColor: getCategoryColor('impresionGlobal'), opacity: 0.4 }" class="text-xs">
               📊 {{ muestra.intensidades.impresionGlobal.descriptiva ?? '-' }}
@@ -395,7 +419,10 @@
         <!-- Fragancia -->
         <div class="form-section mb-4">
           <div class="flex items-center justify-between mb-3">
-            <h6 class="form-subsection-title cata-text" :style="{ color: getCategoryColor('fragancia') }">Fragancia</h6>
+            <h6 class="form-subsection-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('fragancia') }">
+              <UIcon :name="getCategoryIcon('fragancia')" class="w-5 h-5" />
+              Fragancia
+            </h6>
             <div class="flex gap-2">
               <UBadge :style="{ backgroundColor: getCategoryColor('fragancia'), opacity: 0.4 }" class="text-xs">
                 📊 {{ muestra.intensidades.fragancia.descriptiva ?? '-' }}
@@ -424,7 +451,10 @@
         <!-- Aroma -->
         <div class="form-section mb-4">
           <div class="flex items-center justify-between mb-3">
-            <h6 class="form-subsection-title cata-text" :style="{ color: getCategoryColor('aroma') }">Aroma</h6>
+            <h6 class="form-subsection-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('aroma') }">
+              <UIcon :name="getCategoryIcon('aroma')" class="w-5 h-5" />
+              Aroma
+            </h6>
             <div class="flex gap-2">
               <UBadge :style="{ backgroundColor: getCategoryColor('aroma'), opacity: 0.4 }" class="text-xs">
                 📊 {{ muestra.intensidades.aroma.descriptiva ?? '-' }}
@@ -453,7 +483,10 @@
         <!-- Sabor -->
         <div class="form-section mb-4">
           <div class="flex items-center justify-between mb-3">
-            <h6 class="form-subsection-title cata-text" :style="{ color: getCategoryColor('sabor') }">Sabor</h6>
+            <h6 class="form-subsection-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('sabor') }">
+              <UIcon :name="getCategoryIcon('sabor')" class="w-5 h-5" />
+              Sabor
+            </h6>
             <div class="flex gap-2">
               <UBadge :style="{ backgroundColor: getCategoryColor('sabor'), opacity: 0.4 }" class="text-xs">
                 📊 {{ muestra.intensidades.sabor.descriptiva ?? '-' }}
@@ -482,7 +515,10 @@
         <!-- Sabor Residual -->
         <div class="form-section mb-4">
           <div class="flex items-center justify-between mb-3">
-            <h6 class="form-subsection-title cata-text" :style="{ color: getCategoryColor('saborResidual') }">Sabor Residual</h6>
+            <h6 class="form-subsection-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('saborResidual') }">
+              <UIcon :name="getCategoryIcon('saborResidual')" class="w-5 h-5" />
+              Sabor Residual
+            </h6>
             <div class="flex gap-2">
               <UBadge :style="{ backgroundColor: getCategoryColor('saborResidual'), opacity: 0.4 }" class="text-xs">
                 📊 {{ muestra.intensidades.saborResidual.descriptiva ?? '-' }}
@@ -511,7 +547,10 @@
         <!-- Acidez -->
         <div class="form-section mb-4">
           <div class="flex items-center justify-between mb-3">
-            <h6 class="form-subsection-title cata-text" :style="{ color: getCategoryColor('acidez') }">Acidez</h6>
+            <h6 class="form-subsection-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('acidez') }">
+              <UIcon :name="getCategoryIcon('acidez')" class="w-5 h-5" />
+              Acidez
+            </h6>
             <div class="flex gap-2">
               <UBadge :style="{ backgroundColor: getCategoryColor('acidez'), opacity: 0.4 }" class="text-xs">
                 📊 {{ muestra.intensidades.acidez.descriptiva ?? '-' }}
@@ -540,7 +579,10 @@
         <!-- Dulzor -->
         <div class="form-section mb-4">
           <div class="flex items-center justify-between mb-3">
-            <h6 class="form-subsection-title cata-text" :style="{ color: getCategoryColor('dulzor') }">Dulzor</h6>
+            <h6 class="form-subsection-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('dulzor') }">
+              <UIcon :name="getCategoryIcon('dulzor')" class="w-5 h-5" />
+              Dulzor
+            </h6>
             <div class="flex gap-2">
               <UBadge :style="{ backgroundColor: getCategoryColor('dulzor'), opacity: 0.4 }" class="text-xs">
                 📊 {{ muestra.intensidades.dulzor.descriptiva ?? '-' }}
@@ -569,7 +611,10 @@
         <!-- Sensación en Boca -->
         <div class="form-section mb-4">
           <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>
+            <h6 class="form-subsection-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('sensacionBoca') }">
+              <UIcon :name="getCategoryIcon('sensacionBoca')" class="w-5 h-5" />
+              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 ?? '-' }}
@@ -598,7 +643,10 @@
         <!-- Impresión Global -->
         <div class="form-section">
           <div class="flex items-center justify-between mb-3">
-            <h6 class="form-subsection-title cata-text" :style="{ color: getCategoryColor('impresionGlobal') }">Impresión Global</h6>
+            <h6 class="form-subsection-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('impresionGlobal') }">
+              <UIcon :name="getCategoryIcon('impresionGlobal')" class="w-5 h-5" />
+              Impresión Global
+            </h6>
             <div class="flex gap-2">
               <UBadge :style="{ backgroundColor: getCategoryColor('impresionGlobal'), opacity: 0.4 }" class="text-xs">
                 📊 {{ muestra.intensidades.impresionGlobal.descriptiva ?? '-' }}
@@ -726,6 +774,21 @@ const props = withDefaults(defineProps<FormularioMuestraProps>(), {
 const { actualizarIntensidad: actualizarIntensidadCatacion } = useCatacion()
 const { getCategoryColor } = useCategoryColors()
 
+// Función para obtener el icono de cada categoría
+const getCategoryIcon = (category: string): string => {
+  const icons: Record<string, string> = {
+    fragancia: 'i-lucide-flower-2',
+    aroma: 'i-lucide-wind',
+    sabor: 'i-lucide-candy',
+    saborResidual: 'i-lucide-timer',
+    acidez: 'i-lucide-citrus',
+    dulzor: 'i-lucide-cookie',
+    sensacionBoca: 'i-lucide-droplets',
+    impresionGlobal: 'i-lucide-star',
+  }
+  return icons[category] || 'i-lucide-circle'
+}
+
 // Listas para los selectores
 const sensacionesBoca = SENSACIONES_BOCA
 const gustosPredominantes = GUSTOS_PREDOMINANTES
diff --git a/nuxt4/app/components/cata/ResumenMuestra.vue b/nuxt4/app/components/cata/ResumenMuestra.vue
index dacdaea..0c1f5bc 100644
--- a/nuxt4/app/components/cata/ResumenMuestra.vue
+++ b/nuxt4/app/components/cata/ResumenMuestra.vue
@@ -49,54 +49,46 @@
         </div>
       </template>
 
-      <!-- Chips Intensidades (Descriptiva/Afectiva) -->
+      <!-- Chips Intensidades (solo Descriptiva con icono) -->
       <template v-if="mostrarChipsIntensidades">
-        <div v-if="muestra.intensidades.fragancia.afectiva !== null || muestra.intensidades.fragancia.descriptiva !== null" class="chip">
-          <span class="chip-label">Fra:</span>
-          <span v-if="muestra.intensidades.fragancia.afectiva !== null" class="chip-value">{{ muestra.intensidades.fragancia.afectiva }}❤️</span>
-          <span v-if="muestra.intensidades.fragancia.descriptiva !== null" class="chip-value">{{ muestra.intensidades.fragancia.descriptiva }}📊</span>
+        <div v-if="muestra.intensidades.fragancia.descriptiva !== null" class="chip chip-intensidad">
+          <UIcon :name="getCategoryIcon('fragancia')" class="chip-icon" />
+          <span class="chip-value">{{ muestra.intensidades.fragancia.descriptiva }}</span>
         </div>
 
-        <div v-if="muestra.intensidades.aroma.afectiva !== null || muestra.intensidades.aroma.descriptiva !== null" class="chip">
-          <span class="chip-label">Aro:</span>
-          <span v-if="muestra.intensidades.aroma.afectiva !== null" class="chip-value">{{ muestra.intensidades.aroma.afectiva }}❤️</span>
-          <span v-if="muestra.intensidades.aroma.descriptiva !== null" class="chip-value">{{ muestra.intensidades.aroma.descriptiva }}📊</span>
+        <div v-if="muestra.intensidades.aroma.descriptiva !== null" class="chip chip-intensidad">
+          <UIcon :name="getCategoryIcon('aroma')" class="chip-icon" />
+          <span class="chip-value">{{ muestra.intensidades.aroma.descriptiva }}</span>
         </div>
 
-        <div v-if="muestra.intensidades.sabor.afectiva !== null || muestra.intensidades.sabor.descriptiva !== null" class="chip">
-          <span class="chip-label">Sb:</span>
-          <span v-if="muestra.intensidades.sabor.afectiva !== null" class="chip-value">{{ muestra.intensidades.sabor.afectiva }}❤️</span>
-          <span v-if="muestra.intensidades.sabor.descriptiva !== null" class="chip-value">{{ muestra.intensidades.sabor.descriptiva }}📊</span>
+        <div v-if="muestra.intensidades.sabor.descriptiva !== null" class="chip chip-intensidad">
+          <UIcon :name="getCategoryIcon('sabor')" class="chip-icon" />
+          <span class="chip-value">{{ muestra.intensidades.sabor.descriptiva }}</span>
         </div>
 
-        <div v-if="muestra.intensidades.saborResidual.afectiva !== null || muestra.intensidades.saborResidual.descriptiva !== null" class="chip">
-          <span class="chip-label">S.R:</span>
-          <span v-if="muestra.intensidades.saborResidual.afectiva !== null" class="chip-value">{{ muestra.intensidades.saborResidual.afectiva }}❤️</span>
-          <span v-if="muestra.intensidades.saborResidual.descriptiva !== null" class="chip-value">{{ muestra.intensidades.saborResidual.descriptiva }}📊</span>
+        <div v-if="muestra.intensidades.saborResidual.descriptiva !== null" class="chip chip-intensidad">
+          <UIcon :name="getCategoryIcon('saborResidual')" class="chip-icon" />
+          <span class="chip-value">{{ muestra.intensidades.saborResidual.descriptiva }}</span>
         </div>
 
-        <div v-if="muestra.intensidades.acidez.afectiva !== null || muestra.intensidades.acidez.descriptiva !== null" class="chip">
-          <span class="chip-label">Aci:</span>
-          <span v-if="muestra.intensidades.acidez.afectiva !== null" class="chip-value">{{ muestra.intensidades.acidez.afectiva }}❤️</span>
-          <span v-if="muestra.intensidades.acidez.descriptiva !== null" class="chip-value">{{ muestra.intensidades.acidez.descriptiva }}📊</span>
+        <div v-if="muestra.intensidades.acidez.descriptiva !== null" class="chip chip-intensidad">
+          <UIcon :name="getCategoryIcon('acidez')" class="chip-icon" />
+          <span class="chip-value">{{ muestra.intensidades.acidez.descriptiva }}</span>
         </div>
 
-        <div v-if="muestra.intensidades.dulzor.afectiva !== null || muestra.intensidades.dulzor.descriptiva !== null" class="chip">
-          <span class="chip-label">Dul:</span>
-          <span v-if="muestra.intensidades.dulzor.afectiva !== null" class="chip-value">{{ muestra.intensidades.dulzor.afectiva }}❤️</span>
-          <span v-if="muestra.intensidades.dulzor.descriptiva !== null" class="chip-value">{{ muestra.intensidades.dulzor.descriptiva }}📊</span>
+        <div v-if="muestra.intensidades.dulzor.descriptiva !== null" class="chip chip-intensidad">
+          <UIcon :name="getCategoryIcon('dulzor')" class="chip-icon" />
+          <span class="chip-value">{{ muestra.intensidades.dulzor.descriptiva }}</span>
         </div>
 
-        <div v-if="muestra.intensidades.sensacionBoca.afectiva !== null || muestra.intensidades.sensacionBoca.descriptiva !== null" class="chip">
-          <span class="chip-label">Sn:</span>
-          <span v-if="muestra.intensidades.sensacionBoca.afectiva !== null" class="chip-value">{{ muestra.intensidades.sensacionBoca.afectiva }}❤️</span>
-          <span v-if="muestra.intensidades.sensacionBoca.descriptiva !== null" class="chip-value">{{ muestra.intensidades.sensacionBoca.descriptiva }}📊</span>
+        <div v-if="muestra.intensidades.sensacionBoca.descriptiva !== null" class="chip chip-intensidad">
+          <UIcon :name="getCategoryIcon('sensacionBoca')" class="chip-icon" />
+          <span class="chip-value">{{ muestra.intensidades.sensacionBoca.descriptiva }}</span>
         </div>
 
-        <div v-if="muestra.intensidades.impresionGlobal.afectiva !== null || muestra.intensidades.impresionGlobal.descriptiva !== null" class="chip">
-          <span class="chip-label">Imp:</span>
-          <span v-if="muestra.intensidades.impresionGlobal.afectiva !== null" class="chip-value">{{ muestra.intensidades.impresionGlobal.afectiva }}❤️</span>
-          <span v-if="muestra.intensidades.impresionGlobal.descriptiva !== null" class="chip-value">{{ muestra.intensidades.impresionGlobal.descriptiva }}📊</span>
+        <div v-if="muestra.intensidades.impresionGlobal.descriptiva !== null" class="chip chip-intensidad">
+          <UIcon :name="getCategoryIcon('impresionGlobal')" class="chip-icon" />
+          <span class="chip-value">{{ muestra.intensidades.impresionGlobal.descriptiva }}</span>
         </div>
       </template>
 
@@ -154,6 +146,21 @@ const puntajeClass = computed(() => {
   return 'puntaje-bajo'
 })
 
+// Función para obtener el icono de cada categoría
+const getCategoryIcon = (category: string): string => {
+  const icons: Record<string, string> = {
+    fragancia: 'i-lucide-flower-2',
+    aroma: 'i-lucide-wind',
+    sabor: 'i-lucide-candy',
+    saborResidual: 'i-lucide-timer',
+    acidez: 'i-lucide-citrus',
+    dulzor: 'i-lucide-cookie',
+    sensacionBoca: 'i-lucide-droplets',
+    impresionGlobal: 'i-lucide-star',
+  }
+  return icons[category] || 'i-lucide-circle'
+}
+
 // Determinar qué chips mostrar según la tab activa
 const mostrarChipsOrganolepticos = computed(() => {
   return props.tabActiva === 'organoleptica' || props.tabActiva === 'impresion-global'
@@ -235,6 +242,14 @@ const mostrarChipsDefectos = computed(() => {
   border: 1px solid color-mix(in srgb, var(--cata-primary) 30%, transparent);
 }
 
+.chip-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+  flex-shrink: 0;
+  color: var(--cata-primary);
+  opacity: 0.9;
+}
+
 .chip-label {
   font-weight: 600;
   opacity: 0.75;