From 1eff0772ab77cfeebd885f689e43a16aec18756d Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Sun, 19 Oct 2025 04:14:40 -0600
Subject: [PATCH] =?UTF-8?q?Feat:=20Mejorar=20resumen=20de=20muestras=20con?=
 =?UTF-8?q?=20colores=20por=20categor=C3=ADa=20y=20secci=C3=B3n=20organol?=
 =?UTF-8?q?=C3=A9ptica?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Cambiar botón expandir a estilo texto (solo icono)
- Agregar colores específicos por categoría a iconos de intensidades
- Agregar sección de características organolépticas con notas
- Agregar sección de notas adicionales
- Cambiar badges de puntajes a solo outline (sin relleno)
- Respetar preferencias de color del usuario en badges excepto SCAA
- Corregir tipo de longPressTimer (ReturnType<typeof setTimeout>)
---
 nuxt4/app/components/cata/ResumenMuestra.vue  |  24 +-
 .../cata/ResumenMuestraExpandido.vue          | 206 +++++++++++++++++-
 nuxt4/app/pages/cata/sesion.vue               |  24 +-
 3 files changed, 218 insertions(+), 36 deletions(-)

diff --git a/nuxt4/app/components/cata/ResumenMuestra.vue b/nuxt4/app/components/cata/ResumenMuestra.vue
index cb6916c..cd474f5 100644
--- a/nuxt4/app/components/cata/ResumenMuestra.vue
+++ b/nuxt4/app/components/cata/ResumenMuestra.vue
@@ -229,38 +229,38 @@ const mostrarChipsDefectos = computed(() => {
 
 /* Sumatoria Afectiva - color neutro */
 .puntaje-sumatoria {
-  background-color: color-mix(in srgb, var(--cata-primary) 15%, transparent);
+  background-color: transparent;
   border-color: color-mix(in srgb, var(--cata-primary) 40%, transparent);
   color: var(--cata-text);
 }
 
 /* SCAA Score - colores según valor */
 .scaa-excelente {
-  background-color: color-mix(in srgb, #10b981 20%, transparent);
+  background-color: transparent;
   border-color: #10b981;
   color: #10b981;
 }
 
 .scaa-muy-bueno {
-  background-color: color-mix(in srgb, #3b82f6 20%, transparent);
+  background-color: transparent;
   border-color: #3b82f6;
   color: #3b82f6;
 }
 
 .scaa-bueno {
-  background-color: color-mix(in srgb, #f59e0b 20%, transparent);
+  background-color: transparent;
   border-color: #f59e0b;
   color: #f59e0b;
 }
 
 .scaa-regular {
-  background-color: color-mix(in srgb, #ef4444 20%, transparent);
+  background-color: transparent;
   border-color: #ef4444;
   color: #ef4444;
 }
 
 .scaa-bajo {
-  background-color: color-mix(in srgb, #6b7280 20%, transparent);
+  background-color: transparent;
   border-color: #6b7280;
   color: #6b7280;
 }
@@ -322,27 +322,27 @@ const mostrarChipsDefectos = computed(() => {
 
 /* Modo oscuro */
 .dark .puntaje-sumatoria {
-  background-color: color-mix(in srgb, var(--cata-primary) 20%, transparent);
+  background-color: transparent;
 }
 
 .dark .scaa-excelente {
-  background-color: color-mix(in srgb, #10b981 30%, transparent);
+  background-color: transparent;
 }
 
 .dark .scaa-muy-bueno {
-  background-color: color-mix(in srgb, #3b82f6 30%, transparent);
+  background-color: transparent;
 }
 
 .dark .scaa-bueno {
-  background-color: color-mix(in srgb, #f59e0b 30%, transparent);
+  background-color: transparent;
 }
 
 .dark .scaa-regular {
-  background-color: color-mix(in srgb, #ef4444 30%, transparent);
+  background-color: transparent;
 }
 
 .dark .scaa-bajo {
-  background-color: color-mix(in srgb, #6b7280 30%, transparent);
+  background-color: transparent;
 }
 
 .dark .chip {
diff --git a/nuxt4/app/components/cata/ResumenMuestraExpandido.vue b/nuxt4/app/components/cata/ResumenMuestraExpandido.vue
index 03e8b1c..cbdbba5 100644
--- a/nuxt4/app/components/cata/ResumenMuestraExpandido.vue
+++ b/nuxt4/app/components/cata/ResumenMuestraExpandido.vue
@@ -26,7 +26,7 @@
       <h4 class="seccion-titulo">Valores Afectivos</h4>
       <div class="intensidades-grid">
         <div v-if="muestra.intensidades.fragancia.afectiva !== null" class="intensidad-item">
-          <UIcon :name="getCategoryIcon('fragancia')" class="intensidad-icon" />
+          <UIcon :name="getCategoryIcon('fragancia')" class="intensidad-icon" :style="{ color: getCategoryColor('fragancia') }" />
           <div class="intensidad-info">
             <div class="intensidad-nombre">Fragancia</div>
             <div class="intensidad-valor">{{ muestra.intensidades.fragancia.afectiva }}</div>
@@ -34,7 +34,7 @@
         </div>
 
         <div v-if="muestra.intensidades.aroma.afectiva !== null" class="intensidad-item">
-          <UIcon :name="getCategoryIcon('aroma')" class="intensidad-icon" />
+          <UIcon :name="getCategoryIcon('aroma')" class="intensidad-icon" :style="{ color: getCategoryColor('aroma') }" />
           <div class="intensidad-info">
             <div class="intensidad-nombre">Aroma</div>
             <div class="intensidad-valor">{{ muestra.intensidades.aroma.afectiva }}</div>
@@ -42,7 +42,7 @@
         </div>
 
         <div v-if="muestra.intensidades.sabor.afectiva !== null" class="intensidad-item">
-          <UIcon :name="getCategoryIcon('sabor')" class="intensidad-icon" />
+          <UIcon :name="getCategoryIcon('sabor')" class="intensidad-icon" :style="{ color: getCategoryColor('sabor') }" />
           <div class="intensidad-info">
             <div class="intensidad-nombre">Sabor</div>
             <div class="intensidad-valor">{{ muestra.intensidades.sabor.afectiva }}</div>
@@ -50,7 +50,7 @@
         </div>
 
         <div v-if="muestra.intensidades.saborResidual.afectiva !== null" class="intensidad-item">
-          <UIcon :name="getCategoryIcon('saborResidual')" class="intensidad-icon" />
+          <UIcon :name="getCategoryIcon('saborResidual')" class="intensidad-icon" :style="{ color: getCategoryColor('saborResidual') }" />
           <div class="intensidad-info">
             <div class="intensidad-nombre">Sabor Residual</div>
             <div class="intensidad-valor">{{ muestra.intensidades.saborResidual.afectiva }}</div>
@@ -58,7 +58,7 @@
         </div>
 
         <div v-if="muestra.intensidades.acidez.afectiva !== null" class="intensidad-item">
-          <UIcon :name="getCategoryIcon('acidez')" class="intensidad-icon" />
+          <UIcon :name="getCategoryIcon('acidez')" class="intensidad-icon" :style="{ color: getCategoryColor('acidez') }" />
           <div class="intensidad-info">
             <div class="intensidad-nombre">Acidez</div>
             <div class="intensidad-valor">{{ muestra.intensidades.acidez.afectiva }}</div>
@@ -66,7 +66,7 @@
         </div>
 
         <div v-if="muestra.intensidades.dulzor.afectiva !== null" class="intensidad-item">
-          <UIcon :name="getCategoryIcon('dulzor')" class="intensidad-icon" />
+          <UIcon :name="getCategoryIcon('dulzor')" class="intensidad-icon" :style="{ color: getCategoryColor('dulzor') }" />
           <div class="intensidad-info">
             <div class="intensidad-nombre">Dulzor</div>
             <div class="intensidad-valor">{{ muestra.intensidades.dulzor.afectiva }}</div>
@@ -74,7 +74,7 @@
         </div>
 
         <div v-if="muestra.intensidades.sensacionBoca.afectiva !== null" class="intensidad-item">
-          <UIcon :name="getCategoryIcon('sensacionBoca')" class="intensidad-icon" />
+          <UIcon :name="getCategoryIcon('sensacionBoca')" class="intensidad-icon" :style="{ color: getCategoryColor('sensacionBoca') }" />
           <div class="intensidad-info">
             <div class="intensidad-nombre">Sensación en Boca</div>
             <div class="intensidad-valor">{{ muestra.intensidades.sensacionBoca.afectiva }}</div>
@@ -82,7 +82,7 @@
         </div>
 
         <div v-if="muestra.intensidades.impresionGlobal.afectiva !== null" class="intensidad-item">
-          <UIcon :name="getCategoryIcon('impresionGlobal')" class="intensidad-icon" />
+          <UIcon :name="getCategoryIcon('impresionGlobal')" class="intensidad-icon" :style="{ color: getCategoryColor('impresionGlobal') }" />
           <div class="intensidad-info">
             <div class="intensidad-nombre">Impresión Global</div>
             <div class="intensidad-valor">{{ muestra.intensidades.impresionGlobal.afectiva }}</div>
@@ -91,6 +91,74 @@
       </div>
     </div>
 
+    <!-- Características Organolépticas (si existen) -->
+    <div v-if="hasOrganolepticData" class="seccion">
+      <h4 class="seccion-titulo">Características Organolépticas</h4>
+      <div class="organoleptica-grid">
+        <!-- Fragancia/Aroma Notas -->
+        <div v-if="muestra.fraganciaAromaNotas.categorias.length > 0" class="organoleptica-item">
+          <div class="organoleptica-label">
+            <UIcon name="i-lucide-flower-2" class="organoleptica-icon" />
+            Fragancia/Aroma
+          </div>
+          <div class="organoleptica-contenido">
+            <div class="categorias-list">
+              <span v-for="cat in muestra.fraganciaAromaNotas.categorias" :key="cat" class="categoria-chip">
+                {{ cat }}
+              </span>
+            </div>
+            <div v-if="muestra.fraganciaAromaNotas.notaEspecifica" class="notas-texto">
+              {{ muestra.fraganciaAromaNotas.notaEspecifica }}
+            </div>
+          </div>
+        </div>
+
+        <!-- Sabor Notas -->
+        <div v-if="muestra.saborNotas.categorias.length > 0" class="organoleptica-item">
+          <div class="organoleptica-label">
+            <UIcon name="i-lucide-candy" class="organoleptica-icon" />
+            Sabor
+          </div>
+          <div class="organoleptica-contenido">
+            <div class="categorias-list">
+              <span v-for="cat in muestra.saborNotas.categorias" :key="cat" class="categoria-chip">
+                {{ cat }}
+              </span>
+            </div>
+            <div v-if="muestra.saborNotas.notaEspecifica" class="notas-texto">
+              {{ muestra.saborNotas.notaEspecifica }}
+            </div>
+          </div>
+        </div>
+
+        <!-- Gustos Predominantes -->
+        <div v-if="muestra.gustosPredominantes.length > 0" class="organoleptica-item">
+          <div class="organoleptica-label">
+            <UIcon name="i-lucide-sparkles" class="organoleptica-icon" />
+            Gustos Predominantes
+          </div>
+          <div class="organoleptica-contenido">
+            <div class="categorias-list">
+              <span v-for="gusto in muestra.gustosPredominantes" :key="gusto" class="categoria-chip">
+                {{ gusto }}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Sensación en Boca -->
+        <div v-if="muestra.sensacionEnBoca" class="organoleptica-item">
+          <div class="organoleptica-label">
+            <UIcon name="i-lucide-droplets" class="organoleptica-icon" />
+            Sensación en Boca
+          </div>
+          <div class="organoleptica-contenido">
+            <div class="sensacion-valor">{{ muestra.sensacionEnBoca }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <!-- Defectos (si existen) -->
     <div v-if="muestra.tazasNoUniformes.length > 0 || muestra.tazasDefectuosas.length > 0" class="seccion">
       <h4 class="seccion-titulo">Penalizaciones</h4>
@@ -115,6 +183,14 @@
         </div>
       </div>
     </div>
+
+    <!-- Notas Adicionales (si existen) -->
+    <div v-if="muestra.otrasNotas" class="seccion">
+      <h4 class="seccion-titulo">Notas Adicionales</h4>
+      <div class="notas-adicionales-box">
+        <p class="notas-adicionales-texto">{{ muestra.otrasNotas }}</p>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -156,6 +232,29 @@ const getCategoryIcon = (category: string): string => {
   }
   return icons[category] || 'i-lucide-circle'
 }
+
+// Función para obtener el color de cada categoría
+const getCategoryColor = (category: string): string => {
+  const colors: Record<string, string> = {
+    fragancia: '#8B7AB8',
+    aroma: '#26A69A',
+    sabor: '#E53935',
+    saborResidual: '#F57C00',
+    acidez: '#FDD835',
+    dulzor: '#EC407A',
+    sensacionBoca: '#1E88E5',
+    impresionGlobal: '#00ACC1',
+  }
+  return colors[category] || 'var(--cata-primary)'
+}
+
+// Verificar si hay datos organolépticos
+const hasOrganolepticData = computed(() => {
+  return props.muestra.fraganciaAromaNotas.categorias.length > 0 ||
+    props.muestra.saborNotas.categorias.length > 0 ||
+    props.muestra.gustosPredominantes.length > 0 ||
+    props.muestra.sensacionEnBoca
+})
 </script>
 
 <style scoped>
@@ -361,6 +460,85 @@ const getCategoryIcon = (category: string): string => {
   color: #ef4444;
 }
 
+/* Organoléptica */
+.organoleptica-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.organoleptica-item {
+  padding: 1rem;
+  border-radius: 0.5rem;
+  background-color: color-mix(in srgb, var(--cata-primary) 10%, transparent);
+  border: 1px solid color-mix(in srgb, var(--cata-primary) 30%, transparent);
+}
+
+.organoleptica-label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-weight: 600;
+  margin-bottom: 0.75rem;
+  font-size: 0.875rem;
+  opacity: 0.9;
+}
+
+.organoleptica-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  color: var(--cata-primary);
+}
+
+.organoleptica-contenido {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.categorias-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.categoria-chip {
+  padding: 0.375rem 0.75rem;
+  border-radius: 0.375rem;
+  background-color: color-mix(in srgb, var(--cata-primary) 20%, transparent);
+  border: 1px solid color-mix(in srgb, var(--cata-primary) 40%, transparent);
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.notas-texto {
+  font-size: 0.875rem;
+  opacity: 0.85;
+  line-height: 1.5;
+  font-style: italic;
+}
+
+.sensacion-valor {
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+/* Notas Adicionales */
+.notas-adicionales-box {
+  padding: 1rem;
+  border-radius: 0.5rem;
+  background-color: color-mix(in srgb, var(--cata-primary) 10%, transparent);
+  border: 1px solid color-mix(in srgb, var(--cata-primary) 30%, transparent);
+}
+
+.notas-adicionales-texto {
+  font-size: 0.875rem;
+  line-height: 1.6;
+  margin: 0;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
 /* Modo oscuro */
 .dark .puntaje-sumatoria {
   background-color: color-mix(in srgb, var(--cata-primary) 20%, transparent);
@@ -398,6 +576,18 @@ const getCategoryIcon = (category: string): string => {
   background-color: color-mix(in srgb, #ef4444 20%, transparent);
 }
 
+.dark .organoleptica-item {
+  background-color: color-mix(in srgb, var(--cata-primary) 15%, transparent);
+}
+
+.dark .categoria-chip {
+  background-color: color-mix(in srgb, var(--cata-primary) 25%, transparent);
+}
+
+.dark .notas-adicionales-box {
+  background-color: color-mix(in srgb, var(--cata-primary) 15%, transparent);
+}
+
 /* Responsive */
 @media (max-width: 640px) {
   .resumen-expandido {
diff --git a/nuxt4/app/pages/cata/sesion.vue b/nuxt4/app/pages/cata/sesion.vue
index c2ed150..5c1b900 100644
--- a/nuxt4/app/pages/cata/sesion.vue
+++ b/nuxt4/app/pages/cata/sesion.vue
@@ -416,7 +416,7 @@ const abrirVistaExpandida = (muestra: Muestra) => {
 }
 
 // Long press en móvil
-let longPressTimer: NodeJS.Timeout | null = null
+let longPressTimer: ReturnType<typeof setTimeout> | null = null
 const LONG_PRESS_DURATION = 500 // ms
 
 const onTouchStart = (event: TouchEvent, muestra: Muestra) => {
@@ -599,34 +599,26 @@ onMounted(() => {
 
 .boton-expandir {
   flex-shrink: 0;
-  padding: 0.5rem;
-  border-radius: 0.375rem;
-  background-color: color-mix(in srgb, var(--cata-primary) 10%, transparent);
-  border: 1px solid color-mix(in srgb, var(--cata-primary) 30%, transparent);
+  padding: 0.25rem;
+  background: none;
+  border: none;
   color: var(--cata-primary);
-  transition: all 0.2s ease;
   cursor: pointer;
   align-items: center;
   justify-content: center;
+  transition: all 0.2s ease;
+  opacity: 0.7;
 }
 
 .boton-expandir:hover {
-  background-color: color-mix(in srgb, var(--cata-primary) 20%, transparent);
-  transform: scale(1.05);
+  opacity: 1;
+  transform: scale(1.1);
 }
 
 .boton-expandir:active {
   transform: scale(0.95);
 }
 
-.dark .boton-expandir {
-  background-color: color-mix(in srgb, var(--cata-primary) 15%, transparent);
-}
-
-.dark .boton-expandir:hover {
-  background-color: color-mix(in srgb, var(--cata-primary) 25%, transparent);
-}
-
 /* Floating action button */
 .floating-action {
   position: fixed;