- 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
- Reducir tamaño de iconos de 1.5rem a 1rem en SelectorIntensidad
- Reducir espaciado entre iconos y padding del contenedor
- Cambiar gap de grids de sliders de 4 a 2
- Implementar filtrado restrictivo por tipo (descriptiva/afectiva) y categoría
- Agregar computed properties individuales para cada slider
- Cuando se selecciona "Afectiva" + "Sensación en la Boca", solo se muestra ese slider específico
Limpia la UI del selector de intensidad para una experiencia más minimalista:
- Eliminado atributo title que mostraba tooltips con el valor
- Eliminada sección completa de indicadores numéricos (min/valor/max)
- El componente ahora solo muestra los iconos interactivos
- Mantiene toda la funcionalidad (selección, hover, deselección)
La interfaz es ahora más limpia y el usuario puede confiar en el feedback visual de los iconos activos para conocer el valor seleccionado.
Crea nuevo componente SelectorIntensidad que reemplaza los sliders tradicionales por un selector tipo "rating" con iconos clicables:
Características del nuevo componente:
- Usa círculos (circle/circle-dot) para intensidad descriptiva
- Usa corazones (heart) para intensidad afectiva
- Los iconos se llenan hasta el valor seleccionado
- Efecto hover para preview
- Mismo rango: descriptiva (1-10), afectiva (1-15)
- Click en mismo valor lo deselecciona (vuelve a null)
- Soporte para colores personalizados
- Efectos de glow en modo oscuro
- Responsive (iconos más pequeños en móvil)
Cambios técnicos:
- Nuevo archivo: app/components/cata/SelectorIntensidad.vue
- Modificado: app/components/cata/FormularioMuestra.vue
- Reemplazado CataSliderIntensidad por CataSelectorIntensidad (global)
- Mantiene la misma interfaz de props y eventos que SliderIntensidad
