From 48e0d2f7dc7a1b133ab1c38b301da36a06a18fc4 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Sat, 18 Oct 2025 02:57:14 -0600
Subject: [PATCH] =?UTF-8?q?Feat:=20Reorganizar=20tabs=20y=20permitir=20sel?=
 =?UTF-8?q?ecci=C3=B3n=20m=C3=BAltiple=20de=20categor=C3=ADas=20en=20notas?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- **Nuevas tabs reorganizadas:**
  - Organoléptica: Selectores de familia de fragancia-aroma y sabor
  - Descriptiva/Afectiva: Todos los sliders de intensidad (incluye impresión global)
  - Defectos: Tazas no uniformes, defectuosas y tipo de defecto
  - Impresión Global: Vista completa con todos los componentes

- **Selector de categorías mejorado:**
  - Permitir selección múltiple de categorías padre
  - Las subcategorías son la unión de las subcategorías de los padres seleccionados
  - Permitir selección múltiple de subcategorías
  - Actualizar resumen visual de selección

- **Tipos actualizados:**
  - NotaSeleccionada ahora usa arrays para categorias y subcategorias
  - TabCatacion actualizado con las nuevas tabs
  - Funciones de actualización modificadas para trabajar con arrays

- **Correcciones TypeScript:**
  - Usar JSON.parse(JSON.stringify()) para crear copias mutables de arrays readonly
  - Resolver incompatibilidades de tipos entre readonly y mutable arrays
---
 .../app/components/cata/FormularioMuestra.vue | 441 ++++++++++++++----
 nuxt4/app/components/cata/SelectorFamilia.vue | 144 +++---
 nuxt4/app/composables/useCatacion.ts          |  42 +-
 nuxt4/app/pages/cata/sesion.vue               |  19 +-
 nuxt4/app/types/catacion.ts                   |  16 +-
 5 files changed, 481 insertions(+), 181 deletions(-)

diff --git a/nuxt4/app/components/cata/FormularioMuestra.vue b/nuxt4/app/components/cata/FormularioMuestra.vue
index 1f5d0cf..219e794 100644
--- a/nuxt4/app/components/cata/FormularioMuestra.vue
+++ b/nuxt4/app/components/cata/FormularioMuestra.vue
@@ -1,9 +1,36 @@
 <template>
   <div class="formulario-muestra p-4 space-y-6">
-    <!-- Tab 1: Fragancia y Aroma -->
-    <div v-if="tabActiva === 'fragancia-aroma'" class="tab-content cata-fade-in">
+    <!-- Tab 1: Organoléptica (solo selectores de familia) -->
+    <div v-if="tabActiva === 'organoleptica'" class="tab-content cata-fade-in">
       <h4 class="tab-section-title cata-text mb-4">
-        Fragancia y Aroma
+        Características Organolépticas
+      </h4>
+
+      <!-- Selector de Familia de Fragancia/Aroma -->
+      <div class="form-section">
+        <CataSelectorFamilia
+          tipo="fragancia-aroma"
+          label="Familia de Fragancia y Aroma"
+          :model-value="muestra.fraganciaAromaNotas"
+          @update:model-value="actualizarFraganciaAroma"
+        />
+      </div>
+
+      <!-- Selector de Familia de Sabor -->
+      <div class="form-section">
+        <CataSelectorFamilia
+          tipo="sabor"
+          label="Familia de Sabor"
+          :model-value="muestra.saborNotas"
+          @update:model-value="actualizarSabor"
+        />
+      </div>
+    </div>
+
+    <!-- Tab 2: Descriptiva/Afectiva (todos los sliders incluyendo impresión global) -->
+    <div v-if="tabActiva === 'descriptiva-afectiva'" class="tab-content cata-fade-in">
+      <h4 class="tab-section-title cata-text mb-4">
+        Intensidades Descriptivas y Afectivas
       </h4>
 
       <!-- Sliders de Fragancia -->
@@ -44,23 +71,6 @@
         </div>
       </div>
 
-      <!-- Selector de Familia de Fragancia/Aroma -->
-      <div class="form-section">
-        <CataSelectorFamilia
-          tipo="fragancia-aroma"
-          label="Familia de Fragancia y Aroma"
-          :model-value="muestra.fraganciaAromaNotas"
-          @update:model-value="actualizarFraganciaAroma"
-        />
-      </div>
-    </div>
-
-    <!-- Tab 2: Sabor -->
-    <div v-if="tabActiva === 'sabor'" class="tab-content cata-fade-in">
-      <h4 class="tab-section-title cata-text mb-4">
-        Sabor y Características
-      </h4>
-
       <!-- Sliders de Sabor -->
       <div class="form-section">
         <h5 class="form-section-title cata-text">Sabor</h5>
@@ -156,23 +166,6 @@
         </div>
       </div>
 
-      <!-- Selector de Familia de Sabor -->
-      <div class="form-section">
-        <CataSelectorFamilia
-          tipo="sabor"
-          label="Familia de Sabor"
-          :model-value="muestra.saborNotas"
-          @update:model-value="actualizarSabor"
-        />
-      </div>
-    </div>
-
-    <!-- Tab 3: Impresión Global -->
-    <div v-if="tabActiva === 'impresion-global'" class="tab-content cata-fade-in">
-      <h4 class="tab-section-title cata-text mb-4">
-        Impresión Global y Detalles Finales
-      </h4>
-
       <!-- Sliders de Impresión Global -->
       <div class="form-section">
         <h5 class="form-section-title cata-text">Impresión Global</h5>
@@ -191,6 +184,13 @@
           />
         </div>
       </div>
+    </div>
+
+    <!-- Tab 3: Defectos (tazas y defectos) -->
+    <div v-if="tabActiva === 'defectos'" class="tab-content cata-fade-in">
+      <h4 class="tab-section-title cata-text mb-4">
+        Defectos y Uniformidad
+      </h4>
 
       <!-- Tazas No Uniformes -->
       <div class="form-section">
@@ -232,66 +232,306 @@
           </button>
         </div>
       </div>
+    </div>
 
-      <!-- Sensaciones en Boca (selección múltiple) -->
-      <div class="form-section">
-        <label class="block text-sm font-medium mb-2 cata-text">
-          Sensaciones en la Boca (múltiples)
-        </label>
-        <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
-          <button
-            v-for="sensacion in sensacionesBoca"
-            :key="sensacion"
-            type="button"
-            :class="[
-              'cata-checkbox',
-              { 'cata-checkbox-checked': muestra.sensacionEnBoca.includes(sensacion) },
-            ]"
-            @click="toggleSensacionBoca(sensacion)"
-          >
-            <span class="cata-text text-sm">{{ sensacion }}</span>
-          </button>
+    <!-- Tab 4: Impresión Global (muestra TODOS los componentes) -->
+    <div v-if="tabActiva === 'impresion-global'" class="tab-content cata-fade-in">
+      <h4 class="tab-section-title cata-text mb-4">
+        Visión Global Completa
+      </h4>
+
+      <!-- Sección: Organoléptica -->
+      <div class="global-section mb-6 p-4 cata-outline-box rounded-lg">
+        <h5 class="global-section-title cata-text mb-4">Características Organolépticas</h5>
+
+        <!-- Selector de Familia de Fragancia/Aroma -->
+        <div class="form-section mb-4">
+          <CataSelectorFamilia
+            tipo="fragancia-aroma"
+            label="Familia de Fragancia y Aroma"
+            :model-value="muestra.fraganciaAromaNotas"
+            @update:model-value="actualizarFraganciaAroma"
+          />
+        </div>
+
+        <!-- Selector de Familia de Sabor -->
+        <div class="form-section">
+          <CataSelectorFamilia
+            tipo="sabor"
+            label="Familia de Sabor"
+            :model-value="muestra.saborNotas"
+            @update:model-value="actualizarSabor"
+          />
         </div>
       </div>
 
-      <!-- Gustos Predominantes (máx 2) -->
-      <div class="form-section">
-        <label class="block text-sm font-medium mb-2 cata-text">
-          Gustos Predominantes (mín 1, máx 2)
-        </label>
-        <div class="grid grid-cols-2 sm:grid-cols-5 gap-2">
-          <button
-            v-for="gusto in gustosPredominantes"
-            :key="gusto"
-            type="button"
-            :class="[
-              'cata-checkbox',
-              { 'cata-checkbox-checked': muestra.gustosPredominantes.includes(gusto) },
-            ]"
-            :disabled="!muestra.gustosPredominantes.includes(gusto) && muestra.gustosPredominantes.length >= 2"
-            @click="toggleGustoPredominante(gusto)"
-          >
-            <span class="cata-text">{{ gusto }}</span>
-          </button>
+      <!-- Sección: Intensidades -->
+      <div class="global-section mb-6 p-4 cata-outline-box rounded-lg">
+        <h5 class="global-section-title cata-text mb-4">Intensidades Descriptivas y Afectivas</h5>
+
+        <!-- Fragancia -->
+        <div class="form-section mb-4">
+          <h6 class="form-subsection-title cata-text">Fragancia</h6>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <CataSliderIntensidad
+              tipo="descriptiva"
+              label="Descriptiva"
+              :model-value="muestra.intensidades.fragancia.descriptiva"
+              @update:model-value="(v) => actualizarIntensidad('fragancia', 'descriptiva', v)"
+            />
+            <CataSliderIntensidad
+              tipo="afectiva"
+              label="Afectiva"
+              :model-value="muestra.intensidades.fragancia.afectiva"
+              @update:model-value="(v) => actualizarIntensidad('fragancia', 'afectiva', v)"
+            />
+          </div>
+        </div>
+
+        <!-- Aroma -->
+        <div class="form-section mb-4">
+          <h6 class="form-subsection-title cata-text">Aroma</h6>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <CataSliderIntensidad
+              tipo="descriptiva"
+              label="Descriptiva"
+              :model-value="muestra.intensidades.aroma.descriptiva"
+              @update:model-value="(v) => actualizarIntensidad('aroma', 'descriptiva', v)"
+            />
+            <CataSliderIntensidad
+              tipo="afectiva"
+              label="Afectiva"
+              :model-value="muestra.intensidades.aroma.afectiva"
+              @update:model-value="(v) => actualizarIntensidad('aroma', 'afectiva', v)"
+            />
+          </div>
+        </div>
+
+        <!-- Sabor -->
+        <div class="form-section mb-4">
+          <h6 class="form-subsection-title cata-text">Sabor</h6>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <CataSliderIntensidad
+              tipo="descriptiva"
+              label="Descriptiva"
+              :model-value="muestra.intensidades.sabor.descriptiva"
+              @update:model-value="(v) => actualizarIntensidad('sabor', 'descriptiva', v)"
+            />
+            <CataSliderIntensidad
+              tipo="afectiva"
+              label="Afectiva"
+              :model-value="muestra.intensidades.sabor.afectiva"
+              @update:model-value="(v) => actualizarIntensidad('sabor', 'afectiva', v)"
+            />
+          </div>
+        </div>
+
+        <!-- Sabor Residual -->
+        <div class="form-section mb-4">
+          <h6 class="form-subsection-title cata-text">Sabor Residual</h6>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <CataSliderIntensidad
+              tipo="descriptiva"
+              label="Descriptiva"
+              :model-value="muestra.intensidades.saborResidual.descriptiva"
+              @update:model-value="(v) => actualizarIntensidad('saborResidual', 'descriptiva', v)"
+            />
+            <CataSliderIntensidad
+              tipo="afectiva"
+              label="Afectiva"
+              :model-value="muestra.intensidades.saborResidual.afectiva"
+              @update:model-value="(v) => actualizarIntensidad('saborResidual', 'afectiva', v)"
+            />
+          </div>
+        </div>
+
+        <!-- Acidez -->
+        <div class="form-section mb-4">
+          <h6 class="form-subsection-title cata-text">Acidez</h6>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <CataSliderIntensidad
+              tipo="descriptiva"
+              label="Descriptiva"
+              :model-value="muestra.intensidades.acidez.descriptiva"
+              @update:model-value="(v) => actualizarIntensidad('acidez', 'descriptiva', v)"
+            />
+            <CataSliderIntensidad
+              tipo="afectiva"
+              label="Afectiva"
+              :model-value="muestra.intensidades.acidez.afectiva"
+              @update:model-value="(v) => actualizarIntensidad('acidez', 'afectiva', v)"
+            />
+          </div>
+        </div>
+
+        <!-- Dulzor -->
+        <div class="form-section mb-4">
+          <h6 class="form-subsection-title cata-text">Dulzor</h6>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <CataSliderIntensidad
+              tipo="descriptiva"
+              label="Descriptiva"
+              :model-value="muestra.intensidades.dulzor.descriptiva"
+              @update:model-value="(v) => actualizarIntensidad('dulzor', 'descriptiva', v)"
+            />
+            <CataSliderIntensidad
+              tipo="afectiva"
+              label="Afectiva"
+              :model-value="muestra.intensidades.dulzor.afectiva"
+              @update:model-value="(v) => actualizarIntensidad('dulzor', 'afectiva', v)"
+            />
+          </div>
+        </div>
+
+        <!-- Sensación en Boca -->
+        <div class="form-section mb-4">
+          <h6 class="form-subsection-title cata-text">Sensación en la Boca</h6>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <CataSliderIntensidad
+              tipo="descriptiva"
+              label="Descriptiva"
+              :model-value="muestra.intensidades.sensacionBoca.descriptiva"
+              @update:model-value="(v) => actualizarIntensidad('sensacionBoca', 'descriptiva', v)"
+            />
+            <CataSliderIntensidad
+              tipo="afectiva"
+              label="Afectiva"
+              :model-value="muestra.intensidades.sensacionBoca.afectiva"
+              @update:model-value="(v) => actualizarIntensidad('sensacionBoca', 'afectiva', v)"
+            />
+          </div>
+        </div>
+
+        <!-- Impresión Global -->
+        <div class="form-section">
+          <h6 class="form-subsection-title cata-text">Impresión Global</h6>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <CataSliderIntensidad
+              tipo="descriptiva"
+              label="Descriptiva"
+              :model-value="muestra.intensidades.impresionGlobal.descriptiva"
+              @update:model-value="(v) => actualizarIntensidad('impresionGlobal', 'descriptiva', v)"
+            />
+            <CataSliderIntensidad
+              tipo="afectiva"
+              label="Afectiva"
+              :model-value="muestra.intensidades.impresionGlobal.afectiva"
+              @update:model-value="(v) => actualizarIntensidad('impresionGlobal', 'afectiva', v)"
+            />
+          </div>
         </div>
       </div>
 
-      <!-- Otras Notas -->
-      <div class="form-section">
-        <label class="block text-sm font-medium mb-2 cata-text">
-          Otras Notas
-        </label>
-        <textarea
-          v-model="otrasNotasLocal"
-          class="cata-input w-full min-h-[100px] resize-y"
-          placeholder="Notas adicionales sobre el café, cuerpo, balance, etc..."
-          @blur="actualizarOtrasNotas"
-        />
+      <!-- Sección: Defectos -->
+      <div class="global-section mb-6 p-4 cata-outline-box rounded-lg">
+        <h5 class="global-section-title cata-text mb-4">Defectos y Uniformidad</h5>
+
+        <!-- Tazas No Uniformes -->
+        <div class="form-section mb-4">
+          <CataSelectorTazas
+            tipo="uniformes"
+            label="Tazas NO Uniformes"
+            :model-value="muestra.tazasNoUniformes"
+            @update:model-value="actualizarTazasNoUniformes"
+          />
+        </div>
+
+        <!-- Tazas Defectuosas -->
+        <div class="form-section mb-4">
+          <CataSelectorTazas
+            tipo="defectuosas"
+            label="Tazas Defectuosas"
+            :model-value="muestra.tazasDefectuosas"
+            @update:model-value="actualizarTazasDefectuosas"
+          />
+        </div>
+
+        <!-- Tipo de Defecto -->
+        <div v-if="muestra.tazasDefectuosas.length > 0" class="form-section">
+          <label class="block text-sm font-medium mb-2 cata-text">
+            Tipo de Defecto
+          </label>
+          <div class="grid grid-cols-2 sm:grid-cols-4 gap-2">
+            <button
+              v-for="tipo in tiposDefectos"
+              :key="tipo || 'ninguno'"
+              type="button"
+              :class="[
+                'cata-checkbox',
+                { 'cata-checkbox-checked': muestra.defecto === tipo },
+              ]"
+              @click="actualizarDefecto(tipo)"
+            >
+              <span class="cata-text">{{ tipo || 'Ninguno' }}</span>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Sección: Detalles Adicionales -->
+      <div class="global-section mb-6 p-4 cata-outline-box rounded-lg">
+        <h5 class="global-section-title cata-text mb-4">Detalles Adicionales</h5>
+
+        <!-- Sensaciones en Boca (selección múltiple) -->
+        <div class="form-section mb-4">
+          <label class="block text-sm font-medium mb-2 cata-text">
+            Sensaciones en la Boca (múltiples)
+          </label>
+          <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
+            <button
+              v-for="sensacion in sensacionesBoca"
+              :key="sensacion"
+              type="button"
+              :class="[
+                'cata-checkbox',
+                { 'cata-checkbox-checked': muestra.sensacionEnBoca.includes(sensacion) },
+              ]"
+              @click="toggleSensacionBoca(sensacion)"
+            >
+              <span class="cata-text text-sm">{{ sensacion }}</span>
+            </button>
+          </div>
+        </div>
+
+        <!-- Gustos Predominantes (máx 2) -->
+        <div class="form-section mb-4">
+          <label class="block text-sm font-medium mb-2 cata-text">
+            Gustos Predominantes (mín 1, máx 2)
+          </label>
+          <div class="grid grid-cols-2 sm:grid-cols-5 gap-2">
+            <button
+              v-for="gusto in gustosPredominantes"
+              :key="gusto"
+              type="button"
+              :class="[
+                'cata-checkbox',
+                { 'cata-checkbox-checked': muestra.gustosPredominantes.includes(gusto) },
+              ]"
+              :disabled="!muestra.gustosPredominantes.includes(gusto) && muestra.gustosPredominantes.length >= 2"
+              @click="toggleGustoPredominante(gusto)"
+            >
+              <span class="cata-text">{{ gusto }}</span>
+            </button>
+          </div>
+        </div>
+
+        <!-- Otras Notas -->
+        <div class="form-section">
+          <label class="block text-sm font-medium mb-2 cata-text">
+            Otras Notas
+          </label>
+          <textarea
+            v-model="otrasNotasLocal"
+            class="cata-input w-full min-h-[100px] resize-y"
+            placeholder="Notas adicionales sobre el café, cuerpo, balance, etc..."
+            @blur="actualizarOtrasNotas"
+          />
+        </div>
       </div>
 
       <!-- Puntaje Final (solo lectura) -->
-      <div class="form-section">
-        <div class="puntaje-final cata-outline-box p-4 rounded-md">
+      <div class="global-section p-4 cata-outline-box rounded-lg">
+        <div class="puntaje-final">
           <div class="flex items-baseline justify-between">
             <span class="text-sm cata-text opacity-75">Puntaje Final:</span>
             <span class="text-3xl font-bold cata-text">{{ muestra.puntajeFinal }}</span>
@@ -343,8 +583,8 @@ const { actualizarFraganciaAroma: actualizarFraganciaAromaCatacion } = useCataci
 const actualizarFraganciaAroma = async (nota: NotaSeleccionada) => {
   await actualizarFraganciaAromaCatacion(
     props.muestra.muestraId,
-    nota.categoria,
-    nota.subcategoria,
+    nota.categorias,
+    nota.subcategorias,
     nota.notaEspecifica
   )
 }
@@ -354,8 +594,8 @@ const { actualizarSabor: actualizarSaborCatacion } = useCatacion()
 const actualizarSabor = async (nota: NotaSeleccionada) => {
   await actualizarSaborCatacion(
     props.muestra.muestraId,
-    nota.categoria,
-    nota.subcategoria,
+    nota.categorias,
+    nota.subcategorias,
     nota.notaEspecifica
   )
 }
@@ -437,6 +677,14 @@ watch(() => props.muestra.otrasNotas, (newVal) => {
   border-color: color-mix(in srgb, var(--cata-primary) 30%, transparent);
 }
 
+.global-section-title {
+  font-size: 1rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  opacity: 0.9;
+}
+
 .form-section {
   display: flex;
   flex-direction: column;
@@ -451,6 +699,13 @@ watch(() => props.muestra.otrasNotas, (newVal) => {
   opacity: 0.75;
 }
 
+.form-subsection-title {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  opacity: 0.7;
+  margin-bottom: 0.5rem;
+}
+
 .puntaje-final {
   text-align: center;
 }
@@ -467,5 +722,9 @@ watch(() => props.muestra.otrasNotas, (newVal) => {
   .tab-section-title {
     font-size: 1rem;
   }
+
+  .global-section-title {
+    font-size: 0.9rem;
+  }
 }
 </style>
diff --git a/nuxt4/app/components/cata/SelectorFamilia.vue b/nuxt4/app/components/cata/SelectorFamilia.vue
index cc20a01..6ff95dd 100644
--- a/nuxt4/app/components/cata/SelectorFamilia.vue
+++ b/nuxt4/app/components/cata/SelectorFamilia.vue
@@ -6,9 +6,9 @@
       <span v-if="required" class="text-error">*</span>
     </label>
 
-    <!-- Nivel 1: Categorías principales -->
+    <!-- Nivel 1: Categorías principales (selección múltiple) -->
     <div class="nivel-container">
-      <h4 class="nivel-title cata-text">Categoría</h4>
+      <h4 class="nivel-title cata-text">Categorías (selección múltiple)</h4>
       <div class="categorias-grid">
         <button
           v-for="categoria in categoriasDisponibles"
@@ -18,16 +18,16 @@
             'categoria-item',
             'cata-checkbox',
             {
-              'cata-checkbox-checked': modelValue.categoria === categoria,
+              'cata-checkbox-checked': modelValue.categorias.includes(categoria),
               'disabled': disabled,
             },
           ]"
           :disabled="disabled"
-          @click="seleccionarCategoria(categoria)"
+          @click="toggleCategoria(categoria)"
         >
           <span class="categoria-text cata-text">{{ categoria }}</span>
           <UIcon
-            v-if="modelValue.categoria === categoria"
+            v-if="modelValue.categorias.includes(categoria)"
             name="i-lucide-check-circle"
             class="categoria-check"
           />
@@ -35,9 +35,9 @@
       </div>
     </div>
 
-    <!-- Nivel 2: Subcategorías (si aplica) -->
+    <!-- Nivel 2: Subcategorías (unión de todas las categorías seleccionadas, selección múltiple) -->
     <div v-if="subcategoriasDisponibles.length > 0" class="nivel-container mt-4">
-      <h4 class="nivel-title cata-text">Subcategoría</h4>
+      <h4 class="nivel-title cata-text">Subcategorías (selección múltiple)</h4>
       <div class="subcategorias-grid">
         <button
           v-for="subcategoria in subcategoriasDisponibles"
@@ -47,16 +47,16 @@
             'subcategoria-item',
             'cata-checkbox',
             {
-              'cata-checkbox-checked': modelValue.subcategoria === subcategoria,
+              'cata-checkbox-checked': modelValue.subcategorias.includes(subcategoria),
               'disabled': disabled,
             },
           ]"
           :disabled="disabled"
-          @click="seleccionarSubcategoria(subcategoria)"
+          @click="toggleSubcategoria(subcategoria)"
         >
           <span class="subcategoria-text cata-text">{{ subcategoria }}</span>
           <UIcon
-            v-if="modelValue.subcategoria === subcategoria"
+            v-if="modelValue.subcategorias.includes(subcategoria)"
             name="i-lucide-check"
             class="subcategoria-check"
           />
@@ -65,7 +65,7 @@
     </div>
 
     <!-- Nivel 3: Nota específica (input libre) -->
-    <div v-if="modelValue.categoria" class="nivel-container mt-4">
+    <div v-if="modelValue.categorias.length > 0" class="nivel-container mt-4">
       <h4 class="nivel-title cata-text">Nota Específica</h4>
       <input
         v-model="notaEspecificaLocal"
@@ -81,13 +81,13 @@
     <div v-if="seleccionCompleta" class="mt-4 p-3 cata-outline-box rounded-md">
       <p class="text-xs font-semibold cata-text mb-1">Selección actual:</p>
       <p class="text-sm cata-text">
-        {{ modelValue.categoria }}
-        <template v-if="modelValue.subcategoria">
-          → {{ modelValue.subcategoria }}
-        </template>
-        <template v-if="modelValue.notaEspecifica">
-          → <span class="font-semibold">{{ modelValue.notaEspecifica }}</span>
-        </template>
+        <span class="font-semibold">Categorías:</span> {{ modelValue.categorias.join(', ') }}
+      </p>
+      <p v-if="modelValue.subcategorias.length > 0" class="text-sm cata-text mt-1">
+        <span class="font-semibold">Subcategorías:</span> {{ modelValue.subcategorias.join(', ') }}
+      </p>
+      <p v-if="modelValue.notaEspecifica" class="text-sm cata-text mt-1">
+        <span class="font-semibold">Nota:</span> {{ modelValue.notaEspecifica }}
       </p>
     </div>
   </div>
@@ -134,62 +134,94 @@ const categoriasDisponibles = computed<CategoriaNotaPrincipal[]>(() => {
   return Object.keys(FAMILIAS_NOTAS_ESTRUCTURA) as CategoriaNotaPrincipal[]
 })
 
-// Subcategorías disponibles según la categoría seleccionada
+// Subcategorías disponibles (unión de todas las categorías seleccionadas)
 const subcategoriasDisponibles = computed<string[]>(() => {
-  if (!props.modelValue.categoria) return []
+  if (props.modelValue.categorias.length === 0) return []
 
-  const familia = FAMILIAS_NOTAS_ESTRUCTURA[props.modelValue.categoria as CategoriaNotaPrincipal]
-  if (!familia || typeof familia !== 'object') return []
+  const subcategoriasSet = new Set<string>()
 
-  return Object.keys(familia)
+  // Iterar sobre cada categoría seleccionada y agregar sus subcategorías
+  props.modelValue.categorias.forEach((categoria) => {
+    const familia = FAMILIAS_NOTAS_ESTRUCTURA[categoria as CategoriaNotaPrincipal]
+    if (familia && typeof familia === 'object') {
+      Object.keys(familia).forEach((subcategoria) => {
+        subcategoriasSet.add(subcategoria)
+      })
+    }
+  })
+
+  return Array.from(subcategoriasSet).sort()
 })
 
 // Verifica si la selección está completa
 const seleccionCompleta = computed(() => {
-  return props.modelValue.categoria !== null
+  return props.modelValue.categorias.length > 0
 })
 
-// Seleccionar categoría
-const seleccionarCategoria = (categoria: CategoriaNotaPrincipal) => {
+// Toggle categoría (agregar o quitar)
+const toggleCategoria = (categoria: CategoriaNotaPrincipal) => {
   if (props.disabled) return
 
-  // Si se selecciona la misma categoría, deseleccionar todo
-  if (props.modelValue.categoria === categoria) {
-    emit('update:modelValue', {
-      categoria: null,
-      subcategoria: null,
-      notaEspecifica: null,
-    })
-    notaEspecificaLocal.value = ''
-    return
+  const categorias = [...props.modelValue.categorias]
+  const index = categorias.indexOf(categoria)
+
+  if (index > -1) {
+    // Quitar categoría
+    categorias.splice(index, 1)
+
+    // Si ya no hay categorías, limpiar subcategorías también
+    if (categorias.length === 0) {
+      emit('update:modelValue', {
+        categorias: [],
+        subcategorias: [],
+        notaEspecifica: null,
+      })
+      notaEspecificaLocal.value = ''
+      return
+    }
+  } else {
+    // Agregar categoría
+    categorias.push(categoria)
   }
 
-  // Seleccionar nueva categoría y resetear subcategoría y nota
-  emit('update:modelValue', {
-    categoria,
-    subcategoria: null,
-    notaEspecifica: null,
+  // Filtrar subcategorías: mantener solo las que siguen siendo válidas
+  const subcategoriasValidas = new Set<string>()
+  categorias.forEach((cat) => {
+    const familia = FAMILIAS_NOTAS_ESTRUCTURA[cat as CategoriaNotaPrincipal]
+    if (familia && typeof familia === 'object') {
+      Object.keys(familia).forEach((sub) => subcategoriasValidas.add(sub))
+    }
   })
-  notaEspecificaLocal.value = ''
-}
 
-// Seleccionar subcategoría
-const seleccionarSubcategoria = (subcategoria: string) => {
-  if (props.disabled) return
+  const subcategoriasFiltradas = props.modelValue.subcategorias.filter((sub) =>
+    subcategoriasValidas.has(sub)
+  )
 
-  // Si se selecciona la misma subcategoría, deseleccionar
-  if (props.modelValue.subcategoria === subcategoria) {
-    emit('update:modelValue', {
-      ...props.modelValue,
-      subcategoria: null,
-    })
-    return
-  }
-
-  // Seleccionar nueva subcategoría
   emit('update:modelValue', {
     ...props.modelValue,
-    subcategoria,
+    categorias,
+    subcategorias: subcategoriasFiltradas,
+  })
+}
+
+// Toggle subcategoría (agregar o quitar)
+const toggleSubcategoria = (subcategoria: string) => {
+  if (props.disabled) return
+
+  const subcategorias = [...props.modelValue.subcategorias]
+  const index = subcategorias.indexOf(subcategoria)
+
+  if (index > -1) {
+    // Quitar subcategoría
+    subcategorias.splice(index, 1)
+  } else {
+    // Agregar subcategoría
+    subcategorias.push(subcategoria)
+  }
+
+  emit('update:modelValue', {
+    ...props.modelValue,
+    subcategorias,
   })
 }
 
diff --git a/nuxt4/app/composables/useCatacion.ts b/nuxt4/app/composables/useCatacion.ts
index 4e91809..fdc39a3 100644
--- a/nuxt4/app/composables/useCatacion.ts
+++ b/nuxt4/app/composables/useCatacion.ts
@@ -5,13 +5,13 @@
 import type { SesionCatacion, Muestra, IntensidadValor } from '~/types/catacion'
 import { crearSesionVacia, calcularPuntajeFinal } from '~/types/catacion'
 
-export type TabCatacion = 'fragancia-aroma' | 'sabor' | 'impresion-global'
+export type TabCatacion = 'organoleptica' | 'descriptiva-afectiva' | 'defectos' | 'impresion-global'
 
 export const useCatacion = () => {
   const { sesionActiva, cargando, error, guardar, actualizar, eliminar } = useIndexedDB()
 
   // Estado de la UI
-  const tabActiva = useState<TabCatacion>('tab-activa', () => 'fragancia-aroma')
+  const tabActiva = useState<TabCatacion>('tab-activa', () => 'organoleptica')
   const accordionAbierto = useState<string[]>('accordion-abierto', () => [])
 
   /**
@@ -22,7 +22,7 @@ export const useCatacion = () => {
       const nuevaSesion = crearSesionVacia(catador, cantidadMuestras)
       await guardar(nuevaSesion)
       // Resetear estado de UI
-      tabActiva.value = 'fragancia-aroma'
+      tabActiva.value = 'organoleptica'
       accordionAbierto.value = []
       return nuevaSesion
     } catch (err) {
@@ -131,12 +131,12 @@ export const useCatacion = () => {
    */
   const actualizarFraganciaAroma = async (
     muestraId: number,
-    categoria: string | null,
-    subcategoria: string | null,
+    categorias: string[],
+    subcategorias: string[],
     notaEspecifica: string | null
   ) => {
     await actualizarMuestra(muestraId, {
-      fraganciaAromaNotas: { categoria: categoria as any, subcategoria, notaEspecifica },
+      fraganciaAromaNotas: { categorias: categorias as any, subcategorias, notaEspecifica },
     })
   }
 
@@ -145,12 +145,12 @@ export const useCatacion = () => {
    */
   const actualizarSabor = async (
     muestraId: number,
-    categoria: string | null,
-    subcategoria: string | null,
+    categorias: string[],
+    subcategorias: string[],
     notaEspecifica: string | null
   ) => {
     await actualizarMuestra(muestraId, {
-      saborNotas: { categoria: categoria as any, subcategoria, notaEspecifica },
+      saborNotas: { categorias: categorias as any, subcategorias, notaEspecifica },
     })
   }
 
@@ -207,7 +207,9 @@ export const useCatacion = () => {
    */
   const obtenerMuestra = (muestraId: number): Muestra | null => {
     if (!sesionActiva.value) return null
-    return sesionActiva.value.muestras.find(m => m.muestraId === muestraId) || null
+    const muestra = sesionActiva.value.muestras.find(m => m.muestraId === muestraId)
+    if (!muestra) return null
+    return JSON.parse(JSON.stringify(muestra)) as Muestra
   }
 
   /**
@@ -219,11 +221,11 @@ export const useCatacion = () => {
       (intensidad) => intensidad.afectiva !== null
     )
 
-    // Verificar notas de fragancia/aroma
-    const fraganciaAromaCompleta = muestra.fraganciaAromaNotas.categoria !== null
+    // Verificar notas de fragancia/aroma (al menos una categoría)
+    const fraganciaAromaCompleta = muestra.fraganciaAromaNotas.categorias.length > 0
 
-    // Verificar notas de sabor
-    const saborCompleto = muestra.saborNotas.categoria !== null
+    // Verificar notas de sabor (al menos una categoría)
+    const saborCompleto = muestra.saborNotas.categorias.length > 0
 
     // Verificar gustos predominantes (mínimo 1, máximo 2)
     const gustosCompletos = muestra.gustosPredominantes.length >= 1 && muestra.gustosPredominantes.length <= 2
@@ -250,13 +252,13 @@ export const useCatacion = () => {
       (intensidad) => intensidad.descriptiva !== null
     ).length
 
-    // Notas fragancia/aroma
+    // Notas fragancia/aroma (al menos una categoría)
     total += 1
-    if (muestra.fraganciaAromaNotas.categoria) completados += 1
+    if (muestra.fraganciaAromaNotas.categorias.length > 0) completados += 1
 
-    // Notas sabor
+    // Notas sabor (al menos una categoría)
     total += 1
-    if (muestra.saborNotas.categoria) completados += 1
+    if (muestra.saborNotas.categorias.length > 0) completados += 1
 
     // Gustos predominantes
     total += 1
@@ -271,7 +273,7 @@ export const useCatacion = () => {
   const eliminarSesionActual = async () => {
     try {
       await eliminar()
-      tabActiva.value = 'fragancia-aroma'
+      tabActiva.value = 'organoleptica'
       accordionAbierto.value = []
     } catch (err) {
       console.error('Error al eliminar sesión:', err)
@@ -293,7 +295,7 @@ export const useCatacion = () => {
   const estadisticasSesion = computed(() => {
     if (!sesionActiva.value) return null
 
-    const muestras = sesionActiva.value.muestras
+    const muestras = JSON.parse(JSON.stringify(sesionActiva.value.muestras)) as Muestra[]
     const totalMuestras = muestras.length
     const muestrasCompletas = muestras.filter(esMuestraCompleta).length
     const promedioCompletitud = muestras.reduce((acc, m) => acc + porcentajeCompletitud(m), 0) / totalMuestras
diff --git a/nuxt4/app/pages/cata/sesion.vue b/nuxt4/app/pages/cata/sesion.vue
index a3336e3..ca73dcc 100644
--- a/nuxt4/app/pages/cata/sesion.vue
+++ b/nuxt4/app/pages/cata/sesion.vue
@@ -211,14 +211,19 @@ const toggleTheme = () => {
 // Definición de tabs
 const tabs = [
   {
-    value: 'fragancia-aroma' as TabCatacion,
-    label: 'Fragancia/Aroma',
+    value: 'organoleptica' as TabCatacion,
+    label: 'Organoléptica',
     icon: 'i-lucide-flower-2',
   },
   {
-    value: 'sabor' as TabCatacion,
-    label: 'Sabor',
-    icon: 'i-lucide-coffee',
+    value: 'descriptiva-afectiva' as TabCatacion,
+    label: 'Descriptiva/Afectiva',
+    icon: 'i-lucide-sliders-horizontal',
+  },
+  {
+    value: 'defectos' as TabCatacion,
+    label: 'Defectos',
+    icon: 'i-lucide-alert-triangle',
   },
   {
     value: 'impresion-global' as TabCatacion,
@@ -244,7 +249,9 @@ const obtenerMuestraPorValue = (value: string): Muestra | null => {
 
   // Extraer el ID de la muestra del value (formato: "muestra-{id}")
   const muestraId = parseInt(value.replace('muestra-', ''))
-  return sesionActiva.value.muestras.find(m => m.muestraId === muestraId) || null
+  const muestra = sesionActiva.value.muestras.find(m => m.muestraId === muestraId)
+  if (!muestra) return null
+  return JSON.parse(JSON.stringify(muestra)) as Muestra
 }
 
 // Inicializar al montar
diff --git a/nuxt4/app/types/catacion.ts b/nuxt4/app/types/catacion.ts
index fa54538..60903cb 100644
--- a/nuxt4/app/types/catacion.ts
+++ b/nuxt4/app/types/catacion.ts
@@ -73,10 +73,10 @@ export interface FamiliasNotas {
 }
 
 export interface NotaSeleccionada {
-  /** Categoría principal seleccionada */
-  categoria: CategoriaNotaPrincipal | null
-  /** Subcategoría seleccionada (si aplica) */
-  subcategoria: string | null
+  /** Categorías principales seleccionadas (múltiples) */
+  categorias: CategoriaNotaPrincipal[]
+  /** Subcategorías seleccionadas (múltiples, unión de subcategorías de categorías seleccionadas) */
+  subcategorias: string[]
   /** Nota específica seleccionada o escrita libremente */
   notaEspecifica: string | null
 }
@@ -177,13 +177,13 @@ export function crearMuestraVacia(id: number): Muestra {
       impresionGlobal: { descriptiva: null, afectiva: null },
     },
     fraganciaAromaNotas: {
-      categoria: null,
-      subcategoria: null,
+      categorias: [],
+      subcategorias: [],
       notaEspecifica: null,
     },
     saborNotas: {
-      categoria: null,
-      subcategoria: null,
+      categorias: [],
+      subcategorias: [],
       notaEspecifica: null,
     },
     tazasNoUniformes: [],