From b1f008ab2666dd973a1beb33d330a854c64cd42b Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Sun, 19 Oct 2025 02:31:44 -0600
Subject: [PATCH] Feat: Mostrar SCAA Score en header de acordeones
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CAMBIOS EN ResumenMuestra.vue:

1. Header de acordeón ahora muestra DOS puntajes:
   - Sumatoria Afectiva (Σ): suma de valores afectivos (1-9)
   - SCAA Score: score calculado con fórmula completa

2. Layout:
   - Ambos badges alineados a la derecha
   - Centrados verticalmente en el header
   - Sumatoria con color neutro (primary)
   - SCAA con colores según valor (excelente/muy-bueno/bueno/regular/bajo)

3. Badges compactos:
   - Label abreviado: "Σ" para Sumatoria, "SCAA" para SCAA Score
   - Valores con 2 decimales para SCAA
   - Responsive: se ajustan en mobile

4. Colores según SCAA Score:
   - ≥90: Verde (excelente)
   - ≥85: Azul (muy bueno)
   - ≥80: Naranja (bueno)
   - ≥70: Rojo (regular)
   - <70: Gris (bajo)
---
 nuxt4/app/components/cata/ResumenMuestra.vue | 107 ++++++++++++++-----
 1 file changed, 80 insertions(+), 27 deletions(-)

diff --git a/nuxt4/app/components/cata/ResumenMuestra.vue b/nuxt4/app/components/cata/ResumenMuestra.vue
index 3ca2c6f..19564a1 100644
--- a/nuxt4/app/components/cata/ResumenMuestra.vue
+++ b/nuxt4/app/components/cata/ResumenMuestra.vue
@@ -14,9 +14,19 @@
         </div>
       </div>
 
-      <!-- Puntaje final - alineado a la derecha -->
-      <div class="puntaje-final flex-shrink-0 px-2 py-0.5 rounded ml-auto" :class="puntajeClass">
-        <span class="font-bold">{{ muestra.puntajeFinal }}</span>
+      <!-- Puntajes - alineados a la derecha -->
+      <div class="puntajes-container flex items-center gap-1 flex-shrink-0 ml-auto">
+        <!-- Sumatoria Afectiva -->
+        <div class="puntaje-badge puntaje-sumatoria px-2 py-0.5 rounded">
+          <span class="puntaje-label">Σ</span>
+          <span class="font-bold">{{ sumatoriaAfectiva }}</span>
+        </div>
+
+        <!-- SCAA Score -->
+        <div class="puntaje-badge puntaje-scaa px-2 py-0.5 rounded" :class="scaaClass">
+          <span class="puntaje-label">SCAA</span>
+          <span class="font-bold">{{ scaaScore.toFixed(2) }}</span>
+        </div>
       </div>
     </div>
 
@@ -114,6 +124,7 @@
 <script setup lang="ts">
 import type { Muestra } from '~/types/catacion'
 import type { TabCatacion } from '~/composables/useCatacion'
+import { calcularSumatoriaAfectiva, calcularSCAA } from '~/types/catacion'
 
 interface ResumenMuestraProps {
   /** Muestra a mostrar */
@@ -126,6 +137,10 @@ const props = withDefaults(defineProps<ResumenMuestraProps>(), {
   tabActiva: 'impresion-global',
 })
 
+// Cálculos de puntajes
+const sumatoriaAfectiva = computed(() => calcularSumatoriaAfectiva(props.muestra))
+const scaaScore = computed(() => calcularSCAA(props.muestra))
+
 // Formatear categorías de fragancia/aroma
 const categoriasFragancia = computed(() => {
   return props.muestra.fraganciaAromaNotas.categorias.slice(0, 2).join(', ')
@@ -136,14 +151,14 @@ const categoriasSabor = computed(() => {
   return props.muestra.saborNotas.categorias.slice(0, 2).join(', ')
 })
 
-// Clase CSS para el puntaje final basado en el valor
-const puntajeClass = computed(() => {
-  const puntaje = props.muestra.puntajeFinal
-  if (puntaje >= 90) return 'puntaje-excelente'
-  if (puntaje >= 85) return 'puntaje-muy-bueno'
-  if (puntaje >= 80) return 'puntaje-bueno'
-  if (puntaje >= 70) return 'puntaje-regular'
-  return 'puntaje-bajo'
+// Clase CSS para el SCAA Score basado en el valor
+const scaaClass = computed(() => {
+  const scaa = scaaScore.value
+  if (scaa >= 90) return 'scaa-excelente'
+  if (scaa >= 85) return 'scaa-muy-bueno'
+  if (scaa >= 80) return 'scaa-bueno'
+  if (scaa >= 70) return 'scaa-regular'
+  return 'scaa-bajo'
 })
 
 // Función para obtener el icono de cada categoría
@@ -188,39 +203,63 @@ const mostrarChipsDefectos = computed(() => {
   font-size: 0.8125rem;
 }
 
-/* Puntaje final */
-.puntaje-final {
+/* Puntajes */
+.puntajes-container {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.puntaje-badge {
   border: 1px solid;
   min-width: 2rem;
   text-align: center;
-  font-size: 0.6875rem;
+  font-size: 0.625rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  justify-content: center;
 }
 
-.puntaje-excelente {
+.puntaje-label {
+  font-size: 0.5625rem;
+  opacity: 0.75;
+  font-weight: 600;
+}
+
+/* Sumatoria Afectiva - color neutro */
+.puntaje-sumatoria {
+  background-color: color-mix(in srgb, var(--cata-primary) 15%, 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);
   border-color: #10b981;
   color: #10b981;
 }
 
-.puntaje-muy-bueno {
+.scaa-muy-bueno {
   background-color: color-mix(in srgb, #3b82f6 20%, transparent);
   border-color: #3b82f6;
   color: #3b82f6;
 }
 
-.puntaje-bueno {
+.scaa-bueno {
   background-color: color-mix(in srgb, #f59e0b 20%, transparent);
   border-color: #f59e0b;
   color: #f59e0b;
 }
 
-.puntaje-regular {
+.scaa-regular {
   background-color: color-mix(in srgb, #ef4444 20%, transparent);
   border-color: #ef4444;
   color: #ef4444;
 }
 
-.puntaje-bajo {
+.scaa-bajo {
   background-color: color-mix(in srgb, #6b7280 20%, transparent);
   border-color: #6b7280;
   color: #6b7280;
@@ -282,23 +321,27 @@ const mostrarChipsDefectos = computed(() => {
 }
 
 /* Modo oscuro */
-.dark .puntaje-excelente {
+.dark .puntaje-sumatoria {
+  background-color: color-mix(in srgb, var(--cata-primary) 20%, transparent);
+}
+
+.dark .scaa-excelente {
   background-color: color-mix(in srgb, #10b981 30%, transparent);
 }
 
-.dark .puntaje-muy-bueno {
+.dark .scaa-muy-bueno {
   background-color: color-mix(in srgb, #3b82f6 30%, transparent);
 }
 
-.dark .puntaje-bueno {
+.dark .scaa-bueno {
   background-color: color-mix(in srgb, #f59e0b 30%, transparent);
 }
 
-.dark .puntaje-regular {
+.dark .scaa-regular {
   background-color: color-mix(in srgb, #ef4444 30%, transparent);
 }
 
-.dark .puntaje-bajo {
+.dark .scaa-bajo {
   background-color: color-mix(in srgb, #6b7280 30%, transparent);
 }
 
@@ -324,9 +367,19 @@ const mostrarChipsDefectos = computed(() => {
     font-size: 0.75rem;
   }
 
-  .puntaje-final {
-    font-size: 0.625rem;
-    min-width: 1.75rem;
+  .puntajes-container {
+    gap: 0.125rem;
+  }
+
+  .puntaje-badge {
+    font-size: 0.5625rem;
+    min-width: 1.5rem;
+    gap: 0.125rem;
+    padding: 0.125rem 0.25rem;
+  }
+
+  .puntaje-label {
+    font-size: 0.5rem;
   }
 
   .chips-container {