- Cambiar de type='multiple' a type='single' (solo un item abierto a la vez)
- Todos los accordions pueden estar cerrados (collapsible: true por defecto)
- Actualizar estado accordionAbierto de string[] a string | undefined
- Actualizar lógica toggleCollapseAll para modo single
- Agregar border-t al content del accordion para mejor separación visual
- Actualizar títulos del botón flotante: 'Abrir primera muestra' / 'Cerrar muestra abierta'
- Alinear puntaje final a la derecha en ResumenMuestra (ml-auto)
- Cambiar estilo de accordion: underline simple sin gap entre items
- Ajustar ancho 100% en móviles sin padding lateral (px-0 sm:px-4)
- Eliminar headers redundantes en tabs específicas:
* Organoléptica: eliminar 'Características Organolépticas'
* Descriptiva/Afectiva: eliminar 'Intensidades Descriptivas y Afectivas'
* Defectos: eliminar 'Defectos y Uniformidad'
- Mantener headers en tab Impresión Global para mejor navegación
- Agregar función getCategoryIcon() en FormularioMuestra y ResumenMuestra
- Iconos Lucide para cada categoría:
* fragancia: flower-2, aroma: wind, sabor: candy
* saborResidual: timer, acidez: citrus, dulzor: cookie
* sensacionBoca: droplets, impresionGlobal: star
- Actualizar todos los títulos de sección con iconos
- Modificar chips de ResumenMuestra para mostrar solo icono + valor descriptivo
- Eliminar valores afectivos y emojis de chips
- Agregar estilos CSS para .chip-icon
- Agregar prop tabActiva a ResumenMuestra.vue
- Implementar computed properties para filtrado:
* mostrarChipsOrganolepticos (organoleptica + impresion-global)
* mostrarChipsIntensidades (descriptiva-afectiva + impresion-global)
* mostrarChipsDefectos (defectos + impresion-global)
- Envolver grupos de chips con template v-if según filtrado
- Pasar prop :tab-activa desde sesion.vue a ResumenMuestra
- En impresion-global se muestran TODOS los chips
- En otras tabs solo chips pertinentes a esa categoría
- Reducir font-size de chips de 0.75rem a 0.625rem (0.5625rem en mobile)
- Reducir padding de chips de 0.25/0.5rem a 0.15/0.35rem
- Reducir gaps: entre chips de 1rem a 0.5rem, en línea de 2rem a 1.5rem
- Reducir tamaño de puntaje final y nombre de muestra
- Abreviar todas las etiquetas de chips:
* F/A (Fragancia/Aroma), Sab (Sabor), Gus (Gustos), Sen (Sensación)
* Fra, Aro, Sb, S.R (Sabor Residual), Aci, Dul, Sn, Imp
* NoUnif (No Uniformes), Defec (Defectuosas)
- Eliminar espacios en arrays join (coma sin espacio)
- Optimizar responsive para mobile aún más compacto
- Cambiar 'cuerpo' por 'sensacionBoca' (propiedad correcta del tipo)
- Cambiar 'balance' por 'impresionGlobal' (propiedad correcta del tipo)
- Las propiedades ahora coinciden con la interfaz Intensidades definida en catacion.ts
- Agregar puntaje final con badge color-coded según rangos
- Agregar chips para categorías organolépticas (fragancia/aroma, sabor, gustos, sensación)
- Agregar chips para todos los valores de intensidad (afectiva ❤️ y descriptiva 📊)
- Agregar chips condicionales para tazas no uniformes (warning)
- Agregar chips condicionales para tazas defectuosas con tipo de defecto (error)
- Layout de dos líneas: header con #/nombre/puntaje y chips informativos
- Diseño compacto y responsive
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
Implementa la funcionalidad para que las subcategorías seleccionadas persistan:
- Entre cambios de tabs (cada tab mantiene sus propias subcategorías)
- Entre refrescos de página (guardado en localStorage)
Cambios técnicos:
- Modificado useCatacion.ts para guardar subcategorías por tab en lugar de array global
- Agregada función actualizarSubcategorias() que persiste en localStorage
- subcategoriasActivas ahora es computed basado en la tab activa
- Removida limpieza de subcategorías al cambiar de tab en sesion.vue
- Actualizado toggleSubcategoria para usar la nueva función de persistencia
- Mover sección Sensaciones en Boca de Impresión Global a Organoléptica
- Mover sección Gustos Predominantes de Impresión Global a Organoléptica
- Agregar v-if mostrarSensacionBocaOrganoleptica para filtrado por subcategoría
- Agregar v-if mostrarGustosPredominantes para filtrado por subcategoría
- Renombrar Detalles Adicionales a Notas Adicionales en Impresión Global
- Cambiar subcategoriaActiva a subcategoriasActivas (array) para permitir selección múltiple
- Agregar flex-wrap a barra de subcategorías en lugar de scroll horizontal
- Implementar toggleSubcategoria para agregar/quitar subcategorías
- Pasar subcategoriasActivas a FormularioMuestra como prop
- Agregar helpers deberMostrarSeccion para filtrar inputs
- Aplicar v-if a todas las secciones según subcategorías activas
- Botón Limpiar Todo para resetear filtros
- No activar cargando.value durante actualizar() en useIndexedDB
- Evitar que el loading spinner desmonte todo el formulario al guardar
- Mantener UI fluida durante actualizaciones en tiempo real
- Usar toRaw() + JSON.parse/stringify para deep clone sin Proxies
- No modificar modificadoEn en objeto reactivo, solo en copia
- Evitar re-renderizados innecesarios manteniendo referencias estables
- Reducir padding del botón de p-3 a p-2 (más compacto)
- Reducir tamaño del icono de w-6 h-6 a w-5 h-5
- Agregar flex items-center justify-center para centrar el icono
- Eliminar shadow con glow de color
- Usar fondo sólido con var(--cata-bg) en lugar de transparente
- Aplicar sombra simple con rgba (sin color del tema)
- Eliminar ajustes responsive de padding innecesarios
- Mejorar z-index para que se sobreponga correctamente a elementos
- Agregar clonación en saveSession() y updateSession()
- Mantener mutaciones directas en el estado reactivo
- Resolver error DataCloneError al guardar objetos reactivos en IndexedDB
- Modificar useIndexedDB para no reemplazar sesionActiva en actualizar()
- Modificar useCatacion para mutar directamente las propiedades
- Eliminar todas las clonaciones con JSON.parse/stringify
- Mantener referencias de objetos estables para Vue reactivity
- Mover botón Finalizar Sesión del flotante al header
- Cambiar botón flotante para colapsar/expandir todos los acordiones
- Agregar opción Finalizar Sesión al menú desplegable móvil
- Implementar función toggleCollapseAll para control de acordiones
- Agregar computed todosColapsados para estado de acordiones
- Usar iconos maximize-2/minimize-2 según estado
- Hacer botón flotante circular para mejor identificación
- Arreglar hover de acordiones para usar color personalizado
- Agregar estilos :deep() para .accordion-trigger:hover
- Usar color-mix con var(--cata-primary) en hover
- Aplicar 5% opacidad en modo claro, 10% en modo oscuro
- Remover JSON.parse(JSON.stringify()) de accordionItems computed
- Remover clonación innecesaria en obtenerMuestraPorValue
- Pasar referencias directas en lugar de copias profundas
- Los accordiones ahora mantienen su estado sin parpadeos
- Mejora significativa en la fluidez de la interfaz
El problema era que al clonar las muestras en cada render, Vue detectaba
objetos "nuevos" y re-montaba completamente los componentes accordion,
causando un efecto visual de parpadeo cada vez que se actualizaba un valor.
- Agregar validación completa en loadCustomColors para detectar formato incompatible
- Proteger setCustomColors asegurando que la estructura existe antes de asignar
- Validar estructura en getCurrentColors y retornar defaults si no existe
- Validar estructura en hasCustomColors y retornar false si no existe
- Validar estructura en inicializar antes de aplicar colores
- Limpiar localStorage automáticamente si detecta formato antiguo o corrupto
Soluciona error: TypeError Cannot create property 'primary' on string
cuando localStorage contiene datos de versión anterior
- Modificar useColorCustomization para manejar tres colores (primary, foreground, background)
- Actualizar interfaz ThemeColors con los tres colores
- Agregar selectores de color para fuente y fondo en el modal
- Implementar vista previa con los tres colores aplicados
- Actualizar funciones setCustomColors y resetColors para manejar múltiples colores
- Mantener almacenamiento separado por tema (light/dark)
- Aplicar colores a variables --cata-fg y --cata-bg además de --cata-primary
- Agregar composable useCategoryColors con 8 colores coordinados (light/dark)
- Colores por categoría: Fragancia (lavanda), Aroma (verde menta), Sabor (rojo),
Sabor Residual (naranja), Acidez (amarillo), Dulzor (rosa), Sensación en Boca (azul),
Impresión Global (turquesa)
- Eliminar hints de texto de SliderIntensidad (showDescription = false por defecto)
- Aplicar colores dinámicos a headers y sliders de cada categoría
- Aumentar font-weight de headers a 700 (bold)
- Los colores se adaptan automáticamente al tema light/dark
- Aplicar colores en formato HEX (no HSL sin prefijo)
- Solo modificar variables existentes (--cata-primary, --cata-primary-light, --cata-primary-dark)
- Eliminar sobrescritura de variables inexistentes (--cata-border, --cata-muted)
- Solo aplicar colores si hay personalización guardada (no sobrescribir por defecto)
- Limpiar variables CSS al resetear en lugar de aplicar colores por defecto
- Agregar función hslToHex para conversión correcta de colores
- Restaurar funcionamiento de bordes y efectos hover
- Mover trigger button al slot default de UModal
- Usar props title y description directamente en UModal
- Usar slots #body y #footer para el contenido del modal
- Mantener v-model:open para control de estado
- Eliminar wrapper div duplicado
- Seguir estructura correcta de Nuxt UI v4
- Crear composable useColorCustomization para manejar colores personalizados
- Agregar botón de paleta en CataUserInfo para acceder al color picker
- Implementar modal con selector de color (input color + text)
- Guardar preferencias en localStorage por tema (light/dark)
- Generar paleta de gradientes automáticamente desde color base
- Aplicar colores dinámicamente a variables CSS
- Incluir vista previa del color en el modal
- Botón para restablecer al color por defecto
- Persistencia de colores entre sesiones
- Inicialización automática en app.vue
- **Nuevas tabs reorganizadas:**
- Organoléptica: Selectores de familia de fragancia-aroma y sabor
- Descriptiva/Afectiva: Todos los sliders de intensidad (incluye impresión global)
- Defectos: Tazas no uniformes, defectuosas y tipo de defecto
- Impresión Global: Vista completa con todos los componentes
- **Selector de categorías mejorado:**
- Permitir selección múltiple de categorías padre
- Las subcategorías son la unión de las subcategorías de los padres seleccionados
- Permitir selección múltiple de subcategorías
- Actualizar resumen visual de selección
- **Tipos actualizados:**
- NotaSeleccionada ahora usa arrays para categorias y subcategorias
- TabCatacion actualizado con las nuevas tabs
- Funciones de actualización modificadas para trabajar con arrays
- **Correcciones TypeScript:**
- Usar JSON.parse(JSON.stringify()) para crear copias mutables de arrays readonly
- Resolver incompatibilidades de tipos entre readonly y mutable arrays
- Agregar clases flex items-center justify-center al botón de descarga
- Cambiar hidden sm:block por hidden sm:flex (coherente con flex)
- Ahora el botón tiene el mismo tamaño que los demás
- Archivo: app/pages/cata/sesion.vue:48
PROBLEMA ENCONTRADO: Los toasts seguían con estilo por defecto
CAUSA RAÍZ:
- En Nuxt UI v4 la clave de configuración es 'toast' no 'notification'
- Estaba usando 'notification:' en app.config.ts
- Por eso los estilos personalizados nunca se aplicaban
SOLUCIÓN:
- Cambiar 'notification:' por 'toast:' en app.config.ts
- Ahora las clases CSS personalizadas sí se aplicarán
- Los toasts usarán el estilo outline/terminal del sistema
- Cambiar de slot #body a #content
- Agregar debug para ver qué contiene item cuando no tiene muestra
- Esto ayudará a entender qué datos recibe el slot
PROBLEMA: Toasts usaban estilos por defecto de Nuxt UI que no se acoplaban al diseño outline/terminal
SOLUCIÓN:
- Cambiar app.config.ts para usar clases CSS personalizadas en lugar de sintaxis arbitraria de Tailwind
- Agregar estilos CSS completos en main.css usando variables del sistema (--cata-bg, --cata-fg, --cata-primary)
- Implementar todas las variantes (primary, success, error, warning, info, neutral)
ESTILOS APLICADOS:
- Fondo: var(--cata-bg) en claro, negro 95% opaco en oscuro
- Bordes: outline usando var(--cata-primary) con opacidades
- Texto: fuente monospace en modo oscuro con text-shadow
- Iconos: colores específicos por tipo con drop-shadow en oscuro
- Efectos glow: sombras sutiles en modo oscuro según tipo
- IMPORTANTE: Usar !important para sobrescribir estilos de Nuxt UI
- Simplificar uso de slots del accordion usando #body para el contenido
- Remover v-for innecesario en templates de slots
- Remover propiedad slot de accordionItems
- Esto permite que el contenido se renderice correctamente cuando se expande el accordion
- Importar tipo Muestra correctamente
- Remover tipo AccordionItem no usado
- Tipar muestra como Muestra en accordionItems
- Permitir inferencia de tipo del computed
- Aumentar opacidad del texto de 60% a 80% en hover
- Mostrar borde inferior sutil (30% opacity) en hover
- Agregar text-shadow suave en modo oscuro
- Solo afecta tabs inactivas (no las activas)
- Transiciones específicas: color, border-color, text-shadow
- CERO cambios de tamaño o desplazamiento, solo colores
- Usar parámetro { item } en slot personalizado del FormularioMuestra
- Pasar item.muestra en lugar de la muestra del v-for
- Esto asegura que se use la muestra clonada del accordionItems
- Quitar border-width en hover que causaba crecimiento del botón
- Cambiar solo border-color en hover (de 50% a 70% opacity)
- Modificar transition para solo animar propiedades de color
- CERO cambios de tamaño o desplazamiento, solo colores
- Quitar efecto scale on hover/active de todos los botones cata-button
- Quitar efecto hover:scale del avatar en UserInfo
- Rediseñar toasts con estilo outline/terminal 100% acoplado al sistema
- Toasts usan variables CSS del sistema (--cata-bg, --cata-fg, --cata-primary)
- Texto con fuente mono y text-shadow en modo oscuro
- Efectos glow sutiles en modo oscuro según tipo de notificación
- Bordes outline coherentes con diseño del sistema de catación
- Rediseñar layout para ser más compacto y horizontal
- Usar badges de indicadores para mostrar valores afectivos de intensidades
- Mostrar progreso con barra visual en desktop
- Eliminar información redundante y simplificar estructura
- Mejorar responsive design para mobile
- Eliminar CataResumenMuestra.vue y CataFormularioMuestra.vue duplicados
- Usar componentes existentes en components/cata/ que ya se auto-registran como CataResumenMuestra y CataFormularioMuestra
- Resolver conflicto de nombres en Nuxt que impedía el build
- Crear componente CataResumenMuestra para mostrar resumen de cada muestra en el header del accordion
- Crear componente CataFormularioMuestra para mostrar formulario de edición de intensidades por tab
- Corregir uso de slots en UAccordion para mostrar correctamente el contenido
- Usar slot #default para customizar el header con CataResumenMuestra
- Usar slots personalizados por muestra para el body con CataFormularioMuestra
- Agregar estilos mejorados para los items del accordion
- Crear componente CataUserInfo con estilo mobile-first del sistema de catación
- Mover "/" para redirigir automáticamente a /cata
- Incluir información del usuario en página de catación
- Mantener estilo consistente con diseño outline/terminal del sistema
- Optimizar componente de usuario para mobile (compacto y funcional)
