From cec471bc3234785821c4e5534d48da0fc5f978f3 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Sun, 19 Oct 2025 00:34:44 -0600
Subject: [PATCH] Fix: Mejorar comportamiento de selectores de puntaje en
 Descriptiva/Afectiva
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Evitar deselección al presionar el mismo corazón/círculo ya seleccionado
- Cambiar iconos de corazón de Lucide a Heroicons para mejor distinción visual
  - No seleccionado: i-heroicons-heart (outline)
  - Seleccionado: i-heroicons-heart-solid (relleno)
- Eliminar clase CSS icono-filled innecesaria
---
 .../components/cata/SelectorIntensidad.vue    | 20 +++++++------------
 1 file changed, 7 insertions(+), 13 deletions(-)

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);