From 7ba16e99bf8ade62925e790446e5286ce059267b Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Sun, 19 Oct 2025 01:31:35 -0600
Subject: [PATCH] Refactor: Mejorar badges y chips de la interfaz
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Reemplazar texto "Target:" por icono de diana (i-lucide-target)
  - Mostrar icono con color primario + puntaje deseado
  - Más visual e intuitivo

- Igualar opacidad de badges descriptivo y afectivo
  - Cambiar todos los badges descriptivos de opacity: 0.4 a 0.7
  - Ahora ambos badges tienen la misma tonalidad/visibilidad
  - Aplica en todas las categorías (Fragancia, Aroma, Sabor, etc.)

- Hacer badges de filtro rectangulares
  - Cambiar border-radius de subcategoria-chip de 9999px a 0.375rem
  - Consistencia visual con el resto de badges y botones rectangulares
  - Aplica a filtros de subcategorías debajo de tabs
---
 .../app/components/cata/FormularioMuestra.vue | 32 +++++++++----------
 .../components/cata/ModalAsignacionRapida.vue |  5 +--
 nuxt4/app/pages/cata/sesion.vue               |  2 +-
 3 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/nuxt4/app/components/cata/FormularioMuestra.vue b/nuxt4/app/components/cata/FormularioMuestra.vue
index b04ffa9..5164c97 100644
--- a/nuxt4/app/components/cata/FormularioMuestra.vue
+++ b/nuxt4/app/components/cata/FormularioMuestra.vue
@@ -91,7 +91,7 @@
             Fragancia
           </h5>
           <div class="flex gap-2">
-            <UBadge :style="{ backgroundColor: getCategoryColor('fragancia'), opacity: 0.4 }" class="text-xs">
+            <UBadge :style="{ backgroundColor: getCategoryColor('fragancia'), opacity: 0.7 }" class="text-xs">
               📊 {{ muestra.intensidades.fragancia.descriptiva ?? '-' }}
             </UBadge>
             <UBadge :style="{ backgroundColor: getCategoryColor('fragancia'), opacity: 0.7 }" class="text-xs">
@@ -125,7 +125,7 @@
             Aroma
           </h5>
           <div class="flex gap-2">
-            <UBadge :style="{ backgroundColor: getCategoryColor('aroma'), opacity: 0.4 }" class="text-xs">
+            <UBadge :style="{ backgroundColor: getCategoryColor('aroma'), opacity: 0.7 }" class="text-xs">
               📊 {{ muestra.intensidades.aroma.descriptiva ?? '-' }}
             </UBadge>
             <UBadge :style="{ backgroundColor: getCategoryColor('aroma'), opacity: 0.7 }" class="text-xs">
@@ -159,7 +159,7 @@
             Sabor
           </h5>
           <div class="flex gap-2">
-            <UBadge :style="{ backgroundColor: getCategoryColor('sabor'), opacity: 0.4 }" class="text-xs">
+            <UBadge :style="{ backgroundColor: getCategoryColor('sabor'), opacity: 0.7 }" class="text-xs">
               📊 {{ muestra.intensidades.sabor.descriptiva ?? '-' }}
             </UBadge>
             <UBadge :style="{ backgroundColor: getCategoryColor('sabor'), opacity: 0.7 }" class="text-xs">
@@ -193,7 +193,7 @@
             Sabor Residual
           </h5>
           <div class="flex gap-2">
-            <UBadge :style="{ backgroundColor: getCategoryColor('saborResidual'), opacity: 0.4 }" class="text-xs">
+            <UBadge :style="{ backgroundColor: getCategoryColor('saborResidual'), opacity: 0.7 }" class="text-xs">
               📊 {{ muestra.intensidades.saborResidual.descriptiva ?? '-' }}
             </UBadge>
             <UBadge :style="{ backgroundColor: getCategoryColor('saborResidual'), opacity: 0.7 }" class="text-xs">
@@ -227,7 +227,7 @@
             Acidez
           </h5>
           <div class="flex gap-2">
-            <UBadge :style="{ backgroundColor: getCategoryColor('acidez'), opacity: 0.4 }" class="text-xs">
+            <UBadge :style="{ backgroundColor: getCategoryColor('acidez'), opacity: 0.7 }" class="text-xs">
               📊 {{ muestra.intensidades.acidez.descriptiva ?? '-' }}
             </UBadge>
             <UBadge :style="{ backgroundColor: getCategoryColor('acidez'), opacity: 0.7 }" class="text-xs">
@@ -261,7 +261,7 @@
             Dulzor
           </h5>
           <div class="flex gap-2">
-            <UBadge :style="{ backgroundColor: getCategoryColor('dulzor'), opacity: 0.4 }" class="text-xs">
+            <UBadge :style="{ backgroundColor: getCategoryColor('dulzor'), opacity: 0.7 }" class="text-xs">
               📊 {{ muestra.intensidades.dulzor.descriptiva ?? '-' }}
             </UBadge>
             <UBadge :style="{ backgroundColor: getCategoryColor('dulzor'), opacity: 0.7 }" class="text-xs">
@@ -295,7 +295,7 @@
             Sensación en la Boca
           </h5>
           <div class="flex gap-2">
-            <UBadge :style="{ backgroundColor: getCategoryColor('sensacionBoca'), opacity: 0.4 }" class="text-xs">
+            <UBadge :style="{ backgroundColor: getCategoryColor('sensacionBoca'), opacity: 0.7 }" class="text-xs">
               📊 {{ muestra.intensidades.sensacionBoca.descriptiva ?? '-' }}
             </UBadge>
             <UBadge :style="{ backgroundColor: getCategoryColor('sensacionBoca'), opacity: 0.7 }" class="text-xs">
@@ -329,7 +329,7 @@
             Impresión Global
           </h5>
           <div class="flex gap-2">
-            <UBadge :style="{ backgroundColor: getCategoryColor('impresionGlobal'), opacity: 0.4 }" class="text-xs">
+            <UBadge :style="{ backgroundColor: getCategoryColor('impresionGlobal'), opacity: 0.7 }" class="text-xs">
               📊 {{ muestra.intensidades.impresionGlobal.descriptiva ?? '-' }}
             </UBadge>
             <UBadge :style="{ backgroundColor: getCategoryColor('impresionGlobal'), opacity: 0.7 }" class="text-xs">
@@ -488,7 +488,7 @@
               Fragancia
             </h6>
             <div class="flex gap-2">
-              <UBadge :style="{ backgroundColor: getCategoryColor('fragancia'), opacity: 0.4 }" class="text-xs">
+              <UBadge :style="{ backgroundColor: getCategoryColor('fragancia'), opacity: 0.7 }" class="text-xs">
                 📊 {{ muestra.intensidades.fragancia.descriptiva ?? '-' }}
               </UBadge>
               <UBadge :style="{ backgroundColor: getCategoryColor('fragancia'), opacity: 0.7 }" class="text-xs">
@@ -520,7 +520,7 @@
               Aroma
             </h6>
             <div class="flex gap-2">
-              <UBadge :style="{ backgroundColor: getCategoryColor('aroma'), opacity: 0.4 }" class="text-xs">
+              <UBadge :style="{ backgroundColor: getCategoryColor('aroma'), opacity: 0.7 }" class="text-xs">
                 📊 {{ muestra.intensidades.aroma.descriptiva ?? '-' }}
               </UBadge>
               <UBadge :style="{ backgroundColor: getCategoryColor('aroma'), opacity: 0.7 }" class="text-xs">
@@ -552,7 +552,7 @@
               Sabor
             </h6>
             <div class="flex gap-2">
-              <UBadge :style="{ backgroundColor: getCategoryColor('sabor'), opacity: 0.4 }" class="text-xs">
+              <UBadge :style="{ backgroundColor: getCategoryColor('sabor'), opacity: 0.7 }" class="text-xs">
                 📊 {{ muestra.intensidades.sabor.descriptiva ?? '-' }}
               </UBadge>
               <UBadge :style="{ backgroundColor: getCategoryColor('sabor'), opacity: 0.7 }" class="text-xs">
@@ -584,7 +584,7 @@
               Sabor Residual
             </h6>
             <div class="flex gap-2">
-              <UBadge :style="{ backgroundColor: getCategoryColor('saborResidual'), opacity: 0.4 }" class="text-xs">
+              <UBadge :style="{ backgroundColor: getCategoryColor('saborResidual'), opacity: 0.7 }" class="text-xs">
                 📊 {{ muestra.intensidades.saborResidual.descriptiva ?? '-' }}
               </UBadge>
               <UBadge :style="{ backgroundColor: getCategoryColor('saborResidual'), opacity: 0.7 }" class="text-xs">
@@ -616,7 +616,7 @@
               Acidez
             </h6>
             <div class="flex gap-2">
-              <UBadge :style="{ backgroundColor: getCategoryColor('acidez'), opacity: 0.4 }" class="text-xs">
+              <UBadge :style="{ backgroundColor: getCategoryColor('acidez'), opacity: 0.7 }" class="text-xs">
                 📊 {{ muestra.intensidades.acidez.descriptiva ?? '-' }}
               </UBadge>
               <UBadge :style="{ backgroundColor: getCategoryColor('acidez'), opacity: 0.7 }" class="text-xs">
@@ -648,7 +648,7 @@
               Dulzor
             </h6>
             <div class="flex gap-2">
-              <UBadge :style="{ backgroundColor: getCategoryColor('dulzor'), opacity: 0.4 }" class="text-xs">
+              <UBadge :style="{ backgroundColor: getCategoryColor('dulzor'), opacity: 0.7 }" class="text-xs">
                 📊 {{ muestra.intensidades.dulzor.descriptiva ?? '-' }}
               </UBadge>
               <UBadge :style="{ backgroundColor: getCategoryColor('dulzor'), opacity: 0.7 }" class="text-xs">
@@ -680,7 +680,7 @@
               Sensación en la Boca
             </h6>
             <div class="flex gap-2">
-              <UBadge :style="{ backgroundColor: getCategoryColor('sensacionBoca'), opacity: 0.4 }" class="text-xs">
+              <UBadge :style="{ backgroundColor: getCategoryColor('sensacionBoca'), opacity: 0.7 }" class="text-xs">
                 📊 {{ muestra.intensidades.sensacionBoca.descriptiva ?? '-' }}
               </UBadge>
               <UBadge :style="{ backgroundColor: getCategoryColor('sensacionBoca'), opacity: 0.7 }" class="text-xs">
@@ -712,7 +712,7 @@
               Impresión Global
             </h6>
             <div class="flex gap-2">
-              <UBadge :style="{ backgroundColor: getCategoryColor('impresionGlobal'), opacity: 0.4 }" class="text-xs">
+              <UBadge :style="{ backgroundColor: getCategoryColor('impresionGlobal'), opacity: 0.7 }" class="text-xs">
                 📊 {{ muestra.intensidades.impresionGlobal.descriptiva ?? '-' }}
               </UBadge>
               <UBadge :style="{ backgroundColor: getCategoryColor('impresionGlobal'), opacity: 0.7 }" class="text-xs">
diff --git a/nuxt4/app/components/cata/ModalAsignacionRapida.vue b/nuxt4/app/components/cata/ModalAsignacionRapida.vue
index faaa57f..c74a389 100644
--- a/nuxt4/app/components/cata/ModalAsignacionRapida.vue
+++ b/nuxt4/app/components/cata/ModalAsignacionRapida.vue
@@ -79,8 +79,9 @@
     <template #footer>
       <div class="flex items-center justify-between w-full">
         <!-- Puntaje target a la izquierda -->
-        <div v-if="paso === 2" class="cata-text font-semibold">
-          Target: {{ puntajeDeseado }}
+        <div v-if="paso === 2" class="flex items-center gap-2 cata-text font-semibold">
+          <UIcon name="i-lucide-target" class="w-5 h-5" :style="{ color: 'var(--cata-primary)' }" />
+          <span>{{ puntajeDeseado }}</span>
         </div>
         <div v-else></div>
 
diff --git a/nuxt4/app/pages/cata/sesion.vue b/nuxt4/app/pages/cata/sesion.vue
index c421bad..28c8572 100644
--- a/nuxt4/app/pages/cata/sesion.vue
+++ b/nuxt4/app/pages/cata/sesion.vue
@@ -491,7 +491,7 @@ onMounted(() => {
 .subcategoria-chip {
   font-size: 0.75rem;
   padding: 0.25rem 0.75rem;
-  border-radius: 9999px;
+  border-radius: 0.375rem;
   white-space: nowrap;
   transition: all 0.2s;
   background-color: color-mix(in srgb, var(--cata-primary) 10%, transparent);