From 70051d985ca4a12834ad2a488320407e95381e33 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Sat, 18 Oct 2025 16:00:43 -0600
Subject: [PATCH] Feat: Hacer chips ultra-compactos en ResumenMuestra
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Reducir font-size de chips de 0.75rem a 0.625rem (0.5625rem en mobile)
- Reducir padding de chips de 0.25/0.5rem a 0.15/0.35rem
- Reducir gaps: entre chips de 1rem a 0.5rem, en línea de 2rem a 1.5rem
- Reducir tamaño de puntaje final y nombre de muestra
- Abreviar todas las etiquetas de chips:
  * F/A (Fragancia/Aroma), Sab (Sabor), Gus (Gustos), Sen (Sensación)
  * Fra, Aro, Sb, S.R (Sabor Residual), Aci, Dul, Sn, Imp
  * NoUnif (No Uniformes), Defec (Defectuosas)
- Eliminar espacios en arrays join (coma sin espacio)
- Optimizar responsive para mobile aún más compacto
---
 nuxt4/app/components/cata/ResumenMuestra.vue | 77 ++++++++++++--------
 1 file changed, 46 insertions(+), 31 deletions(-)

diff --git a/nuxt4/app/components/cata/ResumenMuestra.vue b/nuxt4/app/components/cata/ResumenMuestra.vue
index 590bbe4..5168a8d 100644
--- a/nuxt4/app/components/cata/ResumenMuestra.vue
+++ b/nuxt4/app/components/cata/ResumenMuestra.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="resumen-muestra w-full">
     <!-- Primera línea: Número, nombre y puntaje -->
-    <div class="flex items-center gap-2 mb-2">
+    <div class="flex items-center gap-1.5 mb-1">
       <!-- Número de muestra -->
       <div class="muestra-numero cata-text font-bold flex-shrink-0">
         #{{ muestra.muestraId }}
@@ -9,102 +9,102 @@
 
       <!-- Nombre de muestra -->
       <div class="flex-1 min-w-0">
-        <div class="muestra-nombre cata-text font-semibold truncate text-sm">
+        <div class="muestra-nombre cata-text font-semibold truncate">
           {{ muestra.nombre }}
         </div>
       </div>
 
       <!-- Puntaje final -->
-      <div class="puntaje-final flex-shrink-0 px-2 py-1 rounded-md" :class="puntajeClass">
-        <span class="text-xs font-bold">{{ muestra.puntajeFinal }}</span>
+      <div class="puntaje-final flex-shrink-0 px-1.5 py-0.5 rounded" :class="puntajeClass">
+        <span class="font-bold">{{ muestra.puntajeFinal }}</span>
       </div>
     </div>
 
     <!-- Segunda línea: Chips informativos -->
-    <div class="chips-container flex flex-wrap gap-1">
+    <div class="chips-container flex flex-wrap gap-0.5">
       <!-- Fragancia/Aroma -->
       <div v-if="muestra.fraganciaAromaNotas.categorias.length > 0" class="chip">
-        <span class="chip-label">Frag/Aro:</span>
+        <span class="chip-label">F/A:</span>
         <span class="chip-value">{{ categoriasFragancia }}</span>
       </div>
 
       <!-- Sabor -->
       <div v-if="muestra.saborNotas.categorias.length > 0" class="chip">
-        <span class="chip-label">Sabor:</span>
+        <span class="chip-label">Sab:</span>
         <span class="chip-value">{{ categoriasSabor }}</span>
       </div>
 
       <!-- Gustos predominantes -->
       <div v-if="muestra.gustosPredominantes.length > 0" class="chip">
-        <span class="chip-label">Gustos:</span>
+        <span class="chip-label">Gus:</span>
         <span class="chip-value">{{ muestra.gustosPredominantes.join(', ') }}</span>
       </div>
 
       <!-- Sensación en boca -->
       <div v-if="muestra.sensacionEnBoca.length > 0" class="chip">
-        <span class="chip-label">Sensación:</span>
+        <span class="chip-label">Sen:</span>
         <span class="chip-value">{{ muestra.sensacionEnBoca.join(', ') }}</span>
       </div>
 
       <!-- Valores Descriptivo/Afectivo -->
       <div v-if="muestra.intensidades.fragancia.afectiva !== null || muestra.intensidades.fragancia.descriptiva !== null" class="chip">
-        <span class="chip-label">Fragancia:</span>
+        <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>
 
       <div v-if="muestra.intensidades.aroma.afectiva !== null || muestra.intensidades.aroma.descriptiva !== null" class="chip">
-        <span class="chip-label">Aroma:</span>
+        <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>
 
       <div v-if="muestra.intensidades.sabor.afectiva !== null || muestra.intensidades.sabor.descriptiva !== null" class="chip">
-        <span class="chip-label">Sabor:</span>
+        <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>
 
       <div v-if="muestra.intensidades.saborResidual.afectiva !== null || muestra.intensidades.saborResidual.descriptiva !== null" class="chip">
-        <span class="chip-label">S.Residual:</span>
+        <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>
 
       <div v-if="muestra.intensidades.acidez.afectiva !== null || muestra.intensidades.acidez.descriptiva !== null" class="chip">
-        <span class="chip-label">Acidez:</span>
+        <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>
 
       <div v-if="muestra.intensidades.dulzor.afectiva !== null || muestra.intensidades.dulzor.descriptiva !== null" class="chip">
-        <span class="chip-label">Dulzor:</span>
+        <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>
 
       <div v-if="muestra.intensidades.sensacionBoca.afectiva !== null || muestra.intensidades.sensacionBoca.descriptiva !== null" class="chip">
-        <span class="chip-label">Sensación:</span>
+        <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>
 
       <div v-if="muestra.intensidades.impresionGlobal.afectiva !== null || muestra.intensidades.impresionGlobal.descriptiva !== null" class="chip">
-        <span class="chip-label">Impresión:</span>
+        <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>
 
       <!-- Tazas no uniformes -->
       <div v-if="muestra.tazasNoUniformes.length > 0" class="chip chip-warning">
-        <span class="chip-label">No Uniformes:</span>
-        <span class="chip-value">{{ muestra.tazasNoUniformes.join(', ') }}</span>
+        <span class="chip-label">NoUnif:</span>
+        <span class="chip-value">{{ muestra.tazasNoUniformes.join(',') }}</span>
       </div>
 
       <!-- Tazas defectuosas -->
       <div v-if="muestra.tazasDefectuosas.length > 0" class="chip chip-error">
-        <span class="chip-label">Defectuosas:</span>
-        <span class="chip-value">{{ muestra.tazasDefectuosas.join(', ') }}</span>
+        <span class="chip-label">Defec:</span>
+        <span class="chip-value">{{ muestra.tazasDefectuosas.join(',') }}</span>
         <span v-if="muestra.defecto" class="chip-value">({{ muestra.defecto }})</span>
       </div>
     </div>
@@ -148,14 +148,19 @@ const puntajeClass = computed(() => {
 }
 
 .muestra-numero {
-  font-size: 1rem;
+  font-size: 0.875rem;
+}
+
+.muestra-nombre {
+  font-size: 0.8125rem;
 }
 
 /* Puntaje final */
 .puntaje-final {
   border: 1px solid;
-  min-width: 2.5rem;
+  min-width: 2rem;
   text-align: center;
+  font-size: 0.6875rem;
 }
 
 .puntaje-excelente {
@@ -190,16 +195,16 @@ const puntajeClass = computed(() => {
 
 /* Chips */
 .chips-container {
-  font-size: 0.75rem;
-  line-height: 1;
+  font-size: 0.625rem;
+  line-height: 1.1;
 }
 
 .chip {
   display: inline-flex;
   align-items: center;
-  gap: 0.25rem;
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.25rem;
+  gap: 0.15rem;
+  padding: 0.15rem 0.35rem;
+  border-radius: 0.2rem;
   background-color: color-mix(in srgb, var(--cata-primary) 10%, transparent);
   border: 1px solid color-mix(in srgb, var(--cata-primary) 30%, transparent);
 }
@@ -271,15 +276,25 @@ const puntajeClass = computed(() => {
 /* Responsive */
 @media (max-width: 640px) {
   .muestra-numero {
-    font-size: 0.875rem;
+    font-size: 0.8125rem;
+  }
+
+  .muestra-nombre {
+    font-size: 0.75rem;
+  }
+
+  .puntaje-final {
+    font-size: 0.625rem;
+    min-width: 1.75rem;
   }
 
   .chips-container {
-    font-size: 0.7rem;
+    font-size: 0.5625rem;
   }
 
   .chip {
-    padding: 0.2rem 0.4rem;
+    padding: 0.125rem 0.3rem;
+    gap: 0.125rem;
   }
 }
 </style>