diff --git a/nuxt4/app/components/cata/SelectorFamilia.vue b/nuxt4/app/components/cata/SelectorFamilia.vue
index f6fad5f..5b0798e 100644
--- a/nuxt4/app/components/cata/SelectorFamilia.vue
+++ b/nuxt4/app/components/cata/SelectorFamilia.vue
@@ -29,6 +29,7 @@
             <UIcon
               :name="categoriaIconos[categoria]"
               class="categoria-icon"
+              :style="{ color: categoriaColores[categoria] }"
             />
             <span class="categoria-text cata-text">{{ categoria }}</span>
           </div>
@@ -134,6 +135,19 @@ const categoriaIconos: Record<CategoriaNotaPrincipal, string> = {
   Dulce: 'i-lucide-candy',
 }
 
+// Mapeo de colores para cada categoría
+const categoriaColores: Record<CategoriaNotaPrincipal, string> = {
+  Floral: '#E91E63', // Rosa/Magenta
+  Afrutado: '#FF5722', // Rojo-Naranja
+  'Ácido/Fermentado': '#CDDC39', // Lima/Amarillo verdoso
+  'Verde Vegetal': '#4CAF50', // Verde
+  Otro: '#9E9E9E', // Gris
+  Tostado: '#FF6F00', // Naranja oscuro/Ámbar
+  'Nueces/Cacao': '#795548', // Marrón
+  Especias: '#FFC107', // Ámbar/Dorado
+  Dulce: '#EC407A', // Rosa/Fucsia
+}
+
 // Categorías principales disponibles
 const categoriasDisponibles = computed<CategoriaNotaPrincipal[]>(() => {
   return Object.keys(FAMILIAS_NOTAS_ESTRUCTURA) as CategoriaNotaPrincipal[]
@@ -299,12 +313,13 @@ watch(() => props.modelValue.notaEspecifica, (newVal) => {
   width: 1.25rem;
   height: 1.25rem;
   flex-shrink: 0;
-  opacity: 0.75;
+  opacity: 0.7;
+  transition: opacity 0.2s ease;
 }
 
 .categoria-item.cata-checkbox-checked .categoria-icon {
   opacity: 1;
-  color: var(--cata-primary);
+  filter: brightness(1.1) saturate(1.2);
 }
 
 .categoria-text {