diff --git a/nuxt4/app/components/cata/SelectorIntensidad.vue b/nuxt4/app/components/cata/SelectorIntensidad.vue
index 03425a0..1a0fbef 100644
--- a/nuxt4/app/components/cata/SelectorIntensidad.vue
+++ b/nuxt4/app/components/cata/SelectorIntensidad.vue
@@ -30,11 +30,10 @@
         <!-- Icono para afectiva: corazón -->
         <UIcon
           v-else
-          name="i-lucide-heart"
+          :name="(modelValue !== null && valor <= modelValue) || (valorHover !== null && valor <= valorHover)
+            ? 'i-heroicons-heart-solid'
+            : 'i-heroicons-heart'"
           class="icono"
-          :class="{
-            'icono-filled': (modelValue !== null && valor <= modelValue) || (valorHover !== null && valor <= valorHover)
-          }"
         />
       </button>
     </div>
@@ -99,12 +98,12 @@ const tipoDescription = computed(() => {
 const handleClick = (valor: number) => {
   if (props.disabled) return
 
-  // Si clickean el mismo valor, lo deseleccionan (vuelve a null)
+  // Si clickean el mismo valor, no hace nada (mantiene el valor)
   if (props.modelValue === valor) {
-    emit('update:modelValue', null)
-  } else {
-    emit('update:modelValue', valor)
+    return
   }
+
+  emit('update:modelValue', valor)
 }
 
 // Estilo dinámico para el color personalizado
@@ -182,11 +181,6 @@ const customColorStyle = computed(() => {
   color: var(--cata-primary);
 }
 
-/* Fill para corazones activos */
-.icono-filled {
-  fill: currentColor;
-}
-
 /* Color personalizado */
 .selector-intensidad[style*="--selector-custom-color"] .icono-descriptiva .icono {
   color: color-mix(in srgb, var(--selector-custom-color) 40%, transparent);