Feat: Agregar iconos representativos a categorías de familia y eliminar cuadro de selección actual

nuxt4/app/components/cata/SelectorFamilia.vue

@@ -25,7 +25,13 @@
           :disabled="disabled"
           @click="toggleCategoria(categoria)"
         >
-          <span class="categoria-text cata-text">{{ categoria }}</span>
+          <div class="categoria-content">
+            <UIcon
+              :name="categoriaIconos[categoria]"
+              class="categoria-icon"
+            />
+            <span class="categoria-text cata-text">{{ categoria }}</span>
+          </div>
           <UIcon
             v-if="modelValue.categorias.includes(categoria)"
             name="i-lucide-check-circle"
@@ -76,20 +82,6 @@
         @blur="actualizarNotaEspecifica"
       >
     </div>
-
-    <!-- Resumen de selección -->
-    <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">
-        <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>
 </template>
 
@@ -129,6 +121,19 @@ const notaPlaceholder = computed(() => {
     : 'Ej: Fresa, Chocolate, Canela...'
 })
 
+// Mapeo de iconos para cada categoría
+const categoriaIconos: Record<CategoriaNotaPrincipal, string> = {
+  Floral: 'i-lucide-flower-2',
+  Afrutado: 'i-lucide-apple',
+  'Ácido/Fermentado': 'i-lucide-flask-conical',
+  'Verde Vegetal': 'i-lucide-leaf',
+  Otro: 'i-lucide-circle-help',
+  Tostado: 'i-lucide-flame',
+  'Nueces/Cacao': 'i-lucide-shell',
+  Especias: 'i-lucide-sparkles',
+  Dulce: 'i-lucide-candy',
+}
+
 // Categorías principales disponibles
 const categoriasDisponibles = computed<CategoriaNotaPrincipal[]>(() => {
   return Object.keys(FAMILIAS_NOTAS_ESTRUCTURA) as CategoriaNotaPrincipal[]
@@ -153,11 +158,6 @@ const subcategoriasDisponibles = computed<string[]>(() => {
   return Array.from(subcategoriasSet).sort()
 })
 
-// Verifica si la selección está completa
-const seleccionCompleta = computed(() => {
-  return props.modelValue.categorias.length > 0
-})
-
 // Toggle categoría (agregar o quitar)
 const toggleCategoria = (categoria: CategoriaNotaPrincipal) => {
   if (props.disabled) return
@@ -288,10 +288,28 @@ watch(() => props.modelValue.notaEspecifica, (newVal) => {
   box-shadow: 0 0 0 2px var(--cata-primary);
 }
 
+.categoria-content {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex: 1 1 0%;
+}
+
+.categoria-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
+  opacity: 0.75;
+}
+
+.categoria-item.cata-checkbox-checked .categoria-icon {
+  opacity: 1;
+  color: var(--cata-primary);
+}
+
 .categoria-text {
   font-size: 0.875rem;
   font-weight: 500;
-  flex: 1 1 0%;
   text-align: left;
 }
 
@@ -369,6 +387,15 @@ watch(() => props.modelValue.notaEspecifica, (newVal) => {
     padding: 0.625rem;
   }
 
+  .categoria-content {
+    gap: 0.375rem;
+  }
+
+  .categoria-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+
   .categoria-text {
     font-size: 0.75rem;
   }