Implementación completa de vista detallada para muestras:
Componentes nuevos:
- ResumenMuestraExpandido: Vista no compacta con valores claramente visibles
- ModalResumenExpandido: Modal reutilizable para mostrar vista expandida
Integraciones:
- Calculadora SCAA: Usa vista expandida en paso 3
- Página de sesión:
* Long press en móvil (500ms) en header del accordion
* Botón expandir en desktop cerca del título
* Vibración háptica en móvil al activar
Características:
- Grid responsivo de intensidades afectivas
- Puntajes destacados (Σ y SCAA) con colores según valor
- Visualización clara de penalizaciones
- Diseño adaptativo móvil/desktop
Implementado flujo de asignación rápida reutilizable en modo calculadora
para la página principal, permitiendo calcular SCAA Score sin sesión.
Cambios:
- ModalAsignacionRapida: Nuevo modo 'calculadora' con paso 3
- Paso 3 incluye ResumenMuestra y penalizaciones configurables
- Función generadora de muestra genérica para vista previa
- Botón "Calculadora SCAA" en página principal
- Navegación mejorada entre pasos (Volver/Continuar)
CAMBIOS EN OVERLAY:
1. Blur más agresivo:
- Antes: blur(10px)
- Ahora: blur(16px)
- Efecto mucho más pronunciado
2. Opacidad aumentada:
- Antes: 0.90 (90%)
- Ahora: 0.95 (95%)
- Fondo casi completamente opaco
ESTILOS PERSONALIZADOS PARA UInputNumber:
1. Input principal:
- background-color: var(--cata-bg)
- color: var(--cata-text)
- border-color: var(--cata-primary) con transparencia
2. Estado focus:
- border-color: var(--cata-primary) sólido
- box-shadow con color primario
- En dark mode: glow effect adicional
3. Placeholder:
- color: var(--cata-text) al 50% de opacidad
- Respeta el color del texto del usuario
4. Botones +/-:
- color: var(--cata-primary)
- Hover: opacity 0.8
- Active: scale 0.95 (feedback táctil)
5. Modo oscuro:
- Border más visible (40% de primary)
- Box-shadow con glow effect en focus
RESULTADO:
- UInputNumber ahora respeta completamente los colores del usuario
- Overlay con blur muy pronunciado para mejor enfoque
- Consistencia visual con el resto de la aplicación
CAMBIOS:
1. Blur aumentado de 4px a 10px:
- Antes: backdrop-filter: blur(4px)
- Ahora: backdrop-filter: blur(10px)
- Efecto más agresivo en el fondo
2. Opacidad aumentada de 0.85 a 0.90:
- Fondo ligeramente más oscuro
- Mejor enfoque en el modal
3. Compatibilidad mejorada:
- Agregado -webkit-backdrop-filter para WebKit
- Mejor soporte en Safari y navegadores basados en Chromium
RESULTADO:
El modal ahora tiene un efecto de blur medianamente agresivo
que ayuda a enfocar la atención en el contenido del modal.
CAMBIOS PRINCIPALES:
1. Reemplazar inputs normales por UInputNumber:
- Ahora tienen botones +/- integrados
- Mejor UX con controles visuales
- Validación automática de min/max/step
2. Configuración de cada input:
- Sumatoria Afectiva: step="1" (8-72)
- SCAA Score: step="0.25" (58.00-100.00)
- SCAA con format-options para 2 decimales
3. Doble sistema de handlers:
a) Para botones +/- (@update:model-value):
- onSumatoriaChangeFromButtons()
- onScaaChangeFromButtons()
- Sincronización AUTOMÁTICA e INMEDIATA
- No espera blur, actualiza al instante
b) Para escritura manual (@blur):
- onSumatoriaBlur()
- onScaaBlur()
- Validación solo al perder foco
- Permite edición libre
4. Sincronización bidireccional:
- Modificar Sumatoria → actualiza SCAA
- Modificar SCAA → actualiza Sumatoria
- Funciona con botones +/- Y con escritura manual
BENEFICIOS:
✅ Botones +/- funcionan de 1 en 1 y 0.25 en 0.25
✅ Sincronización automática al usar botones
✅ Edición manual sigue funcionando (solo valida en blur)
✅ Mejor UX con controles visuales
✅ SCAA Score muestra siempre 2 decimales
PROBLEMAS RESUELTOS:
1. Inputs actualizaban en cada tecla (@input):
- Impedía borrar números (ej: no se podía borrar el 9)
- Hacía malabares para cambiar valores
2. Rango incorrecto de Sumatoria Afectiva:
- Era 9-90 pero debería ser 8-72
- 8 categorías × 1 punto mínimo = 8
- 8 categorías × 9 puntos máximo = 72
SOLUCIONES:
1. Cambio de eventos:
- @input → @blur en ambos inputs
- Ahora solo actualiza al perder el foco
- Permite editar libremente (borrar, reescribir)
2. Rangos corregidos:
- Sumatoria Afectiva: 8-72 (antes 9-90)
- SCAA Score: 58.00-100.00 (antes 58.75-112.00)
- Valor por defecto: 40 (antes 45)
3. Validaciones mejoradas:
- No valida mientras se escribe
- Solo valida al perder foco (blur)
- Maneja valores inválidos (NaN, null) reseteando a 40
- Permite borrar y reescribir sin restricciones
BENEFICIOS:
- Ahora se puede borrar el 9 sin problemas
- Se puede escribir cualquier número sin interferencias
- La sincronización ocurre solo al terminar de editar
PROBLEMA:
El SCAA Score debe moverse en steps de 0.25 (no aceptar
cualquier valor decimal racional).
SOLUCIÓN:
1. Nueva función en catacion.ts:
- redondearA025(): Redondea al múltiplo de 0.25 más cercano
- Math.round(valor / 0.25) * 0.25
2. Aplicado en todas las funciones de SCAA:
- calcularSCAA(): redondea el resultado final
- sumatoriaAfectivaASCAA(): redondea la conversión
3. ModalAsignacionRapida.vue:
- Input step cambiado de 0.01 a 0.25
- onScaaChange(): redondea el valor ingresado
- Placeholder actualizado: 58.75-112.00
VALORES VÁLIDOS:
Ahora el SCAA Score solo puede tener valores como:
- 85.00, 85.25, 85.50, 85.75, 86.00, etc.
- Nunca valores como 85.17 o 85.33
La visualización con .toFixed(2) sigue mostrando 2 decimales
correctamente.
- Reemplazar texto "Target:" por icono de diana (i-lucide-target)
- Mostrar icono con color primario + puntaje deseado
- Más visual e intuitivo
- Igualar opacidad de badges descriptivo y afectivo
- Cambiar todos los badges descriptivos de opacity: 0.4 a 0.7
- Ahora ambos badges tienen la misma tonalidad/visibilidad
- Aplica en todas las categorías (Fragancia, Aroma, Sabor, etc.)
- Hacer badges de filtro rectangulares
- Cambiar border-radius de subcategoria-chip de 9999px a 0.375rem
- Consistencia visual con el resto de badges y botones rectangulares
- Aplica a filtros de subcategorías debajo de tabs
- Cambiar color del backdrop/overlay del modal
- Usar color de fondo del usuario (var(--cata-bg))
- Aplicar opacidad de 0.85
- Mantener blur de 4px para efecto de profundidad
- Agregar puntaje target en footer del paso 2
- Mostrar "Target: [puntaje]" alineado a la izquierda
- Botones (Cancelar/Aplicar) alineados a la derecha
- Usar justify-between para distribución espaciada
- Mejorar experiencia visual con colores personalizados del usuario
- Eliminar componente BotonNubeCaustica.vue (ya no necesario)
- Reemplazar botón especial por botón estándar con clase cata-button
- Arreglar estilos del modal para respetar colores personalizados del usuario
- Aplicar clases cata-bg a content, header, body y footer
- Aplicar clase cata-text al título mediante slot personalizado
- Aplicar clase cata-outline-box al content para bordes consistentes
- Agregar backdrop-blur-sm al overlay
- Mantener consistencia visual con el resto de la aplicación
- Agregar watcher que resetea el estado cuando el modal se abre
- Asegurar que puntajeDeseado siempre inicie en 40
- Eliminar setTimeout del método cerrar() (ya no necesario)
- Soluciona problema donde el botón Continuar no funcionaba con valor 40
- Eliminar descripción del modal
- Simplificar paso 1: solo input sin textos explicativos
- Simplificar paso 2: subtítulo compacto con [icono] + "Sobresale"/"Palidece" + x/t
- Eliminar texto de contador duplicado
- Eliminar sección de resumen de distribución
- Interfaz más limpia y directa
- Categorías que sobresalen: flecha arriba (i-heroicons-arrow-up-circle-solid)
- Categorías que palidecen: flecha abajo (i-heroicons-arrow-down-circle-solid)
- Mantener color del icono según el color de cada categoría
- Actualizar ModalAsignacionRapida a sintaxis correcta de Nuxt UI v4
- Usar v-model:open en lugar de v-model
- Usar slots #body y #footer directamente
- Eliminar UCard (deprecado)
- Aplicar clases cata-* para mantener consistencia con el resto de la app
- Usar cata-text para textos
- Usar cata-button para botones
- Usar cata-input para inputs
- Usar cata-outline-box para bordes
- Respetar colores personalizados del usuario mediante variables CSS
- selected-category usa var(--cata-primary)
- Soporte para modo oscuro con efectos de sombra
- Eliminar icono de estrella/rayo del BotonNubeCaustica
- Simplificar diseño dejando solo la nube con patrones cáusticos
- Eliminar animación sparkle asociada
- Integrar modal correctamente en FormularioMuestra
- Mover botón dentro del slot por defecto del modal
- Eliminar modal duplicado del template
- Crear ModalAsignacionRapida.vue con lógica de distribución por múltiplos de 8
- Input numérico (8-80) para puntaje total deseado
- Cálculo automático del múltiplo de 8 más cercano
- Si múltiplo < valor: permite seleccionar categorías que sobresalen (+1)
- Si múltiplo > valor: permite seleccionar categorías que palidecen (-1)
- Si múltiplo = valor: asignación directa sin ajustes
- Crear BotonNubeCaustica.vue con diseño especial
- Forma de nube usando SVG path
- Animación de patrones de luz cáustica con gradientes animados
- Efectos de brillo y ondas al hacer hover
- Icono de rayo mágico con animación sparkle
- Integrar funcionalidad en FormularioMuestra.vue
- Ubicar botón en esquina superior izquierda de sección Descriptiva/Afectiva
- Aplicar puntajes calculados a todas las categorías descriptivas
- Actualizar puntaje final automáticamente
- Corregir comentario: "Suma de valores descriptivos" (era "afectivos")
