From 6c9ad356b1bc91d06450e8f7e7da3a9d0f563262 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Sun, 19 Oct 2025 01:01:55 -0600
Subject: [PATCH] Fix: Actualizar modal a sintaxis Nuxt UI v4 y aplicar estilos
 consistentes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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
---
 .../app/components/cata/BotonNubeCaustica.vue |  27 ----
 .../app/components/cata/FormularioMuestra.vue |  17 +--
 .../components/cata/ModalAsignacionRapida.vue | 138 ++++++++++--------
 3 files changed, 84 insertions(+), 98 deletions(-)

diff --git a/nuxt4/app/components/cata/BotonNubeCaustica.vue b/nuxt4/app/components/cata/BotonNubeCaustica.vue
index e422fb4..8fa7b52 100644
--- a/nuxt4/app/components/cata/BotonNubeCaustica.vue
+++ b/nuxt4/app/components/cata/BotonNubeCaustica.vue
@@ -112,16 +112,6 @@
         fill="url(#caustic-pattern)"
         class="caustic-layer"
       />
-
-      <!-- Icono central (rayo mágico) -->
-      <g transform="translate(50, 30)">
-        <path
-          d="M 0,-8 L 2,-2 L 8,-3 L 3,1 L 4,7 L 0,3 L -4,7 L -3,1 L -8,-3 L -2,-2 Z"
-          fill="white"
-          opacity="0.9"
-          class="icono-rayo"
-        />
-      </g>
     </svg>
 
     <!-- Texto del botón -->
@@ -192,23 +182,6 @@ defineEmits<{
   }
 }
 
-/* Animación del icono */
-.icono-rayo {
-  animation: sparkle 2s ease-in-out infinite;
-  transform-origin: center;
-}
-
-@keyframes sparkle {
-  0%, 100% {
-    opacity: 0.8;
-    transform: scale(1) rotate(0deg);
-  }
-  50% {
-    opacity: 1;
-    transform: scale(1.1) rotate(5deg);
-  }
-}
-
 .boton-texto {
   font-size: 0.625rem;
   font-weight: 600;
diff --git a/nuxt4/app/components/cata/FormularioMuestra.vue b/nuxt4/app/components/cata/FormularioMuestra.vue
index 3fe7f06..d2d5a42 100644
--- a/nuxt4/app/components/cata/FormularioMuestra.vue
+++ b/nuxt4/app/components/cata/FormularioMuestra.vue
@@ -70,9 +70,15 @@
 
     <!-- Tab 2: Descriptiva/Afectiva (todos los sliders incluyendo impresión global) -->
     <div v-if="tabActiva === 'descriptiva-afectiva'" class="tab-content cata-fade-in">
-      <!-- Botón de asignación rápida -->
+      <!-- Modal de Asignación Rápida -->
       <div class="flex justify-start mb-4">
-        <CataBotonNubeCaustica @click="modalAsignacionRapida = true" />
+        <CataModalAsignacionRapida
+          v-model="modalAsignacionRapida"
+          :muestra="muestra"
+          @aplicar="aplicarAsignacionRapida"
+        >
+          <CataBotonNubeCaustica />
+        </CataModalAsignacionRapida>
       </div>
 
       <!-- Sliders de Fragancia -->
@@ -806,13 +812,6 @@
         </div>
       </div>
     </div>
-
-    <!-- Modal de Asignación Rápida -->
-    <CataModalAsignacionRapida
-      v-model="modalAsignacionRapida"
-      :muestra="muestra"
-      @aplicar="aplicarAsignacionRapida"
-    />
   </div>
 </template>
 
diff --git a/nuxt4/app/components/cata/ModalAsignacionRapida.vue b/nuxt4/app/components/cata/ModalAsignacionRapida.vue
index ef76efe..a281017 100644
--- a/nuxt4/app/components/cata/ModalAsignacionRapida.vue
+++ b/nuxt4/app/components/cata/ModalAsignacionRapida.vue
@@ -1,40 +1,36 @@
 <template>
-  <UModal v-model="isOpen" :ui="{ width: 'sm:max-w-md' }">
-    <UCard>
-      <template #header>
-        <div class="flex items-center justify-between">
-          <h3 class="text-lg font-semibold">Asignación Rápida de Puntajes</h3>
-          <UButton
-            color="gray"
-            variant="ghost"
-            icon="i-heroicons-x-mark"
-            @click="cerrar"
-          />
-        </div>
-      </template>
+  <UModal
+    v-model:open="isOpen"
+    title="Asignación Rápida de Puntajes"
+    description="Distribuye un puntaje total entre las 8 categorías descriptivas"
+  >
+    <!-- Trigger (slot por defecto) -->
+    <slot />
 
+    <!-- Contenido del modal -->
+    <template #body>
       <div class="space-y-4">
         <!-- Paso 1: Ingresar puntaje total deseado -->
         <div v-if="paso === 1">
-          <label class="block text-sm font-medium mb-2">
+          <label class="cata-text text-sm font-medium mb-2 block">
             Puntaje Total Deseado (8-80)
           </label>
-          <UInput
+          <input
             v-model.number="puntajeDeseado"
             type="number"
             :min="8"
             :max="80"
             placeholder="Ej: 45"
-            :ui="{ base: 'text-center text-lg' }"
+            class="cata-input w-full px-3 py-2 rounded-md text-center text-lg"
           />
-          <p class="text-xs text-gray-500 mt-2">
+          <p class="text-xs cata-text opacity-60 mt-2">
             Este puntaje se distribuirá entre las 8 categorías descriptivas
           </p>
         </div>
 
         <!-- Paso 2: Seleccionar categorías que sobresalen o palidecen -->
         <div v-if="paso === 2">
-          <p class="text-sm mb-3">
+          <p class="text-sm cata-text mb-3">
             <span v-if="multiploMasCercano < puntajeDeseado">
               Selecciona {{ diferencia }} categoría(s) que <strong>sobresalen</strong> en esta muestra:
             </span>
@@ -49,71 +45,77 @@
               :key="cat.key"
               type="button"
               :class="[
-                'w-full px-3 py-2 rounded-md border-2 transition-all text-left flex items-center gap-2',
+                'w-full px-3 py-2 rounded-md transition-all text-left flex items-center gap-2',
+                'cata-outline-box',
                 categoriasSeleccionadas.includes(cat.key)
-                  ? 'border-primary-500 bg-primary-50 dark:bg-primary-900/20'
-                  : 'border-gray-200 dark:border-gray-700 hover:border-gray-300'
+                  ? 'selected-category'
+                  : ''
               ]"
               :disabled="!categoriasSeleccionadas.includes(cat.key) && categoriasSeleccionadas.length >= diferencia"
               @click="toggleCategoria(cat.key)"
             >
               <UIcon :name="cat.icon" class="w-4 h-4" :style="{ color: cat.color }" />
-              <span>{{ cat.label }}</span>
+              <span class="cata-text">{{ cat.label }}</span>
               <UIcon
                 v-if="categoriasSeleccionadas.includes(cat.key)"
                 name="i-heroicons-check-circle-solid"
-                class="w-5 h-5 ml-auto text-primary-500"
+                class="w-5 h-5 ml-auto"
+                :style="{ color: cat.color }"
               />
             </button>
           </div>
 
-          <p class="text-xs text-gray-500 mt-3">
+          <p class="text-xs cata-text opacity-60 mt-3">
             Seleccionadas: {{ categoriasSeleccionadas.length }} / {{ diferencia }}
           </p>
         </div>
 
         <!-- Resumen -->
-        <div v-if="paso === 2" class="bg-gray-50 dark:bg-gray-800 rounded-md p-3 text-sm">
-          <p class="font-medium mb-1">Distribución:</p>
-          <p>• Puntaje base: {{ puntajeBase }} para todas las categorías</p>
-          <p v-if="multiploMasCercano < puntajeDeseado">
+        <div v-if="paso === 2" class="cata-outline-box rounded-md p-3 text-sm">
+          <p class="cata-text font-medium mb-1">Distribución:</p>
+          <p class="cata-text">• Puntaje base: {{ puntajeBase }} para todas las categorías</p>
+          <p v-if="multiploMasCercano < puntajeDeseado" class="cata-text">
             • +1 punto a las {{ diferencia }} categoría(s) que sobresalen
           </p>
-          <p v-else>
+          <p v-else class="cata-text">
             • -1 punto a las {{ diferencia }} categoría(s) que palidecen
           </p>
-          <p class="font-semibold mt-2">Total: {{ puntajeDeseado }} puntos</p>
+          <p class="cata-text font-semibold mt-2">Total: {{ puntajeDeseado }} puntos</p>
         </div>
       </div>
+    </template>
 
-      <template #footer>
-        <div class="flex justify-end gap-2">
-          <UButton
-            color="gray"
-            variant="ghost"
-            @click="cerrar"
-          >
-            Cancelar
-          </UButton>
+    <!-- Footer con botones -->
+    <template #footer>
+      <div class="flex items-center justify-end gap-2 w-full">
+        <button
+          class="cata-button px-4 py-2"
+          @click="cerrar"
+        >
+          Cancelar
+        </button>
 
-          <UButton
-            v-if="paso === 1"
-            :disabled="!puntajeValido"
-            @click="siguientePaso"
-          >
-            Continuar
-          </UButton>
+        <button
+          v-if="paso === 1"
+          class="cata-button px-4 py-2"
+          :disabled="!puntajeValido"
+          :class="{ 'opacity-50 cursor-not-allowed': !puntajeValido }"
+          @click="siguientePaso"
+        >
+          Continuar
+        </button>
 
-          <UButton
-            v-if="paso === 2"
-            :disabled="categoriasSeleccionadas.length !== diferencia"
-            @click="aplicarAsignacion"
-          >
-            Aplicar
-          </UButton>
-        </div>
-      </template>
-    </UCard>
+        <button
+          v-if="paso === 2"
+          class="cata-button px-4 py-2"
+          :disabled="categoriasSeleccionadas.length !== diferencia"
+          :class="{ 'opacity-50 cursor-not-allowed': categoriasSeleccionadas.length !== diferencia }"
+          @click="aplicarAsignacion"
+        >
+          Aplicar
+        </button>
+      </div>
+    </template>
   </UModal>
 </template>
 
@@ -134,13 +136,13 @@ const emit = defineEmits<{
 
 // Categorías disponibles
 const categoriasDisponibles = [
-  { key: 'fragancia', label: 'Fragancia', icon: 'i-lucide-wind', color: '#8B7AB8' },
-  { key: 'aroma', label: 'Aroma', icon: 'i-lucide-nose', color: '#26A69A' },
-  { key: 'sabor', label: 'Sabor', icon: 'i-lucide-ice-cream-cone', color: '#E53935' },
+  { key: 'fragancia', label: 'Fragancia', icon: 'i-lucide-flower-2', color: '#8B7AB8' },
+  { key: 'aroma', label: 'Aroma', icon: 'i-lucide-wind', color: '#26A69A' },
+  { key: 'sabor', label: 'Sabor', icon: 'i-lucide-candy', color: '#E53935' },
   { key: 'saborResidual', label: 'Sabor Residual', icon: 'i-lucide-timer', color: '#F57C00' },
-  { key: 'acidez', label: 'Acidez', icon: 'i-lucide-zap', color: '#FDD835' },
-  { key: 'dulzor', label: 'Dulzor', icon: 'i-lucide-candy', color: '#EC407A' },
-  { key: 'sensacionBoca', label: 'Sensación en Boca', icon: 'i-lucide-smile', color: '#1E88E5' },
+  { key: 'acidez', label: 'Acidez', icon: 'i-lucide-citrus', color: '#FDD835' },
+  { key: 'dulzor', label: 'Dulzor', icon: 'i-lucide-cookie', color: '#EC407A' },
+  { key: 'sensacionBoca', label: 'Sensación en Boca', icon: 'i-lucide-droplets', color: '#1E88E5' },
   { key: 'impresionGlobal', label: 'Impresión Global', icon: 'i-lucide-star', color: '#00ACC1' },
 ]
 
@@ -245,3 +247,15 @@ const cerrar = () => {
   }, 300)
 }
 </script>
+
+<style scoped>
+.selected-category {
+  background-color: color-mix(in srgb, var(--cata-primary) 10%, transparent);
+  border-color: var(--cata-primary);
+}
+
+.dark .selected-category {
+  background-color: color-mix(in srgb, var(--cata-primary) 15%, transparent);
+  box-shadow: 0 0 8px color-mix(in srgb, var(--cata-primary) 20%, transparent);
+}
+</style>