From 5049e54d37605a7afb75ac1b74bb931679c68087 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Sun, 19 Oct 2025 01:21:00 -0600
Subject: [PATCH] =?UTF-8?q?Refactor:=20Simplificar=20bot=C3=B3n=20de=20asi?=
 =?UTF-8?q?gnaci=C3=B3n=20r=C3=A1pida=20y=20arreglar=20estilos=20del=20mod?=
 =?UTF-8?q?al?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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
---
 .../app/components/cata/BotonNubeCaustica.vue | 233 ------------------
 .../app/components/cata/FormularioMuestra.vue |   4 +-
 .../components/cata/ModalAsignacionRapida.vue |  14 +-
 3 files changed, 16 insertions(+), 235 deletions(-)
 delete mode 100644 nuxt4/app/components/cata/BotonNubeCaustica.vue

diff --git a/nuxt4/app/components/cata/BotonNubeCaustica.vue b/nuxt4/app/components/cata/BotonNubeCaustica.vue
deleted file mode 100644
index 8fa7b52..0000000
--- a/nuxt4/app/components/cata/BotonNubeCaustica.vue
+++ /dev/null
@@ -1,233 +0,0 @@
-<template>
-  <button
-    type="button"
-    class="boton-nube-caustica"
-    @click="$emit('click')"
-  >
-    <svg
-      viewBox="0 0 100 60"
-      xmlns="http://www.w3.org/2000/svg"
-      class="nube-svg"
-    >
-      <defs>
-        <!-- Gradiente animado para efecto cáustica -->
-        <linearGradient id="caustic-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
-          <stop offset="0%" class="caustic-stop-1">
-            <animate
-              attributeName="stop-color"
-              values="#60A5FA;#3B82F6;#60A5FA"
-              dur="3s"
-              repeatCount="indefinite"
-            />
-          </stop>
-          <stop offset="50%" class="caustic-stop-2">
-            <animate
-              attributeName="stop-color"
-              values="#3B82F6;#60A5FA;#93C5FD;#3B82F6"
-              dur="2.5s"
-              repeatCount="indefinite"
-            />
-          </stop>
-          <stop offset="100%" class="caustic-stop-3">
-            <animate
-              attributeName="stop-color"
-              values="#93C5FD;#60A5FA;#93C5FD"
-              dur="3.5s"
-              repeatCount="indefinite"
-            />
-          </stop>
-        </linearGradient>
-
-        <!-- Filtro para efecto de brillo suave -->
-        <filter id="glow">
-          <feGaussianBlur stdDeviation="2" result="coloredBlur"/>
-          <feMerge>
-            <feMergeNode in="coloredBlur"/>
-            <feMergeNode in="SourceGraphic"/>
-          </feMerge>
-        </filter>
-
-        <!-- Patrón de ondas cáusticas -->
-        <pattern id="caustic-pattern" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
-          <circle cx="10" cy="10" r="8" fill="rgba(255,255,255,0.15)">
-            <animate
-              attributeName="r"
-              values="6;10;6"
-              dur="2s"
-              repeatCount="indefinite"
-            />
-            <animate
-              attributeName="opacity"
-              values="0.1;0.3;0.1"
-              dur="2s"
-              repeatCount="indefinite"
-            />
-          </circle>
-          <circle cx="30" cy="25" r="6" fill="rgba(255,255,255,0.1)">
-            <animate
-              attributeName="r"
-              values="4;8;4"
-              dur="2.5s"
-              repeatCount="indefinite"
-            />
-            <animate
-              attributeName="opacity"
-              values="0.05;0.25;0.05"
-              dur="2.5s"
-              repeatCount="indefinite"
-            />
-          </circle>
-        </pattern>
-      </defs>
-
-      <!-- Forma de nube -->
-      <path
-        d="M 25,40
-           C 25,35 20,30 25,25
-           C 25,20 30,15 35,15
-           C 40,15 45,17 47,20
-           C 50,17 55,15 60,15
-           C 70,15 75,20 75,28
-           C 80,28 85,32 85,38
-           C 85,44 80,48 75,48
-           L 30,48
-           C 27,48 25,45 25,40 Z"
-        class="nube-base"
-        fill="url(#caustic-gradient)"
-        filter="url(#glow)"
-      />
-
-      <!-- Capa de patrones cáusticos -->
-      <path
-        d="M 25,40
-           C 25,35 20,30 25,25
-           C 25,20 30,15 35,15
-           C 40,15 45,17 47,20
-           C 50,17 55,15 60,15
-           C 70,15 75,20 75,28
-           C 80,28 85,32 85,38
-           C 85,44 80,48 75,48
-           L 30,48
-           C 27,48 25,45 25,40 Z"
-        fill="url(#caustic-pattern)"
-        class="caustic-layer"
-      />
-    </svg>
-
-    <!-- Texto del botón -->
-    <span class="boton-texto">Asignación Rápida</span>
-  </button>
-</template>
-
-<script setup lang="ts">
-defineEmits<{
-  click: []
-}>()
-</script>
-
-<style scoped>
-.boton-nube-caustica {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.25rem;
-  padding: 0.5rem;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  transition: transform 0.2s ease;
-}
-
-.boton-nube-caustica:hover {
-  transform: scale(1.1);
-}
-
-.boton-nube-caustica:active {
-  transform: scale(1.05);
-}
-
-.nube-svg {
-  width: 80px;
-  height: 48px;
-  filter: drop-shadow(0 4px 8px rgba(59, 130, 246, 0.3));
-  transition: filter 0.3s ease;
-}
-
-.boton-nube-caustica:hover .nube-svg {
-  filter: drop-shadow(0 6px 12px rgba(59, 130, 246, 0.5));
-}
-
-/* Animación de la capa cáustica */
-.caustic-layer {
-  animation: caustic-flow 4s ease-in-out infinite;
-}
-
-@keyframes caustic-flow {
-  0%, 100% {
-    opacity: 0.6;
-    transform: translateX(0) translateY(0);
-  }
-  25% {
-    opacity: 0.8;
-    transform: translateX(2px) translateY(-1px);
-  }
-  50% {
-    opacity: 0.5;
-    transform: translateX(-1px) translateY(1px);
-  }
-  75% {
-    opacity: 0.9;
-    transform: translateX(1px) translateY(-2px);
-  }
-}
-
-.boton-texto {
-  font-size: 0.625rem;
-  font-weight: 600;
-  color: rgb(59 130 246);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  white-space: nowrap;
-  transition: color 0.3s ease;
-}
-
-.dark .boton-texto {
-  color: rgb(147 197 253);
-}
-
-.boton-nube-caustica:hover .boton-texto {
-  color: rgb(37 99 235);
-}
-
-.dark .boton-nube-caustica:hover .boton-texto {
-  color: rgb(191 219 254);
-}
-
-/* Efecto de ondas al hacer hover */
-.boton-nube-caustica:hover .nube-base {
-  animation: wave-pulse 1s ease-in-out;
-}
-
-@keyframes wave-pulse {
-  0%, 100% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.05);
-  }
-}
-
-/* Modo oscuro - ajustar colores del gradiente */
-.dark .nube-svg .caustic-stop-1 {
-  stop-color: #3B82F6;
-}
-
-.dark .nube-svg .caustic-stop-2 {
-  stop-color: #60A5FA;
-}
-
-.dark .nube-svg .caustic-stop-3 {
-  stop-color: #93C5FD;
-}
-</style>
diff --git a/nuxt4/app/components/cata/FormularioMuestra.vue b/nuxt4/app/components/cata/FormularioMuestra.vue
index d2d5a42..b04ffa9 100644
--- a/nuxt4/app/components/cata/FormularioMuestra.vue
+++ b/nuxt4/app/components/cata/FormularioMuestra.vue
@@ -77,7 +77,9 @@
           :muestra="muestra"
           @aplicar="aplicarAsignacionRapida"
         >
-          <CataBotonNubeCaustica />
+          <button class="cata-button px-4 py-2 text-sm">
+            Asignación Rápida
+          </button>
         </CataModalAsignacionRapida>
       </div>
 
diff --git a/nuxt4/app/components/cata/ModalAsignacionRapida.vue b/nuxt4/app/components/cata/ModalAsignacionRapida.vue
index 5ae98be..0a4d380 100644
--- a/nuxt4/app/components/cata/ModalAsignacionRapida.vue
+++ b/nuxt4/app/components/cata/ModalAsignacionRapida.vue
@@ -1,11 +1,23 @@
 <template>
   <UModal
     v-model:open="isOpen"
-    title="Asignación Rápida de Puntajes"
+    :ui="{
+      overlay: 'backdrop-blur-sm',
+      content: 'cata-bg cata-outline-box',
+      header: 'cata-bg',
+      body: 'cata-bg',
+      footer: 'cata-bg',
+      title: 'cata-text'
+    }"
   >
     <!-- Trigger (slot por defecto) -->
     <slot />
 
+    <!-- Título personalizado -->
+    <template #title>
+      <span class="cata-text">Asignación Rápida de Puntajes</span>
+    </template>
+
     <!-- Contenido del modal -->
     <template #body>
       <div class="space-y-4">