From fd0de74c2e78cafbb6a4a455276e1fbb1f7d227e Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Sun, 19 Oct 2025 01:25:30 -0600
Subject: [PATCH] Feat: Personalizar backdrop del modal y agregar puntaje
 target en footer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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
---
 .../components/cata/ModalAsignacionRapida.vue | 69 ++++++++++++-------
 1 file changed, 43 insertions(+), 26 deletions(-)

diff --git a/nuxt4/app/components/cata/ModalAsignacionRapida.vue b/nuxt4/app/components/cata/ModalAsignacionRapida.vue
index 0a4d380..faaa57f 100644
--- a/nuxt4/app/components/cata/ModalAsignacionRapida.vue
+++ b/nuxt4/app/components/cata/ModalAsignacionRapida.vue
@@ -2,7 +2,7 @@
   <UModal
     v-model:open="isOpen"
     :ui="{
-      overlay: 'backdrop-blur-sm',
+      overlay: 'modal-overlay',
       content: 'cata-bg cata-outline-box',
       header: 'cata-bg',
       body: 'cata-bg',
@@ -77,33 +77,42 @@
 
     <!-- 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>
+      <div class="flex items-center justify-between w-full">
+        <!-- Puntaje target a la izquierda -->
+        <div v-if="paso === 2" class="cata-text font-semibold">
+          Target: {{ puntajeDeseado }}
+        </div>
+        <div v-else></div>
 
-        <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>
+        <!-- Botones a la derecha -->
+        <div class="flex items-center gap-2">
+          <button
+            class="cata-button px-4 py-2"
+            @click="cerrar"
+          >
+            Cancelar
+          </button>
 
-        <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>
+          <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>
+
+          <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>
       </div>
     </template>
   </UModal>
@@ -241,6 +250,14 @@ const cerrar = () => {
 }
 </script>
 
+<style>
+.modal-overlay {
+  background-color: var(--cata-bg) !important;
+  opacity: 0.85 !important;
+  backdrop-filter: blur(4px);
+}
+</style>
+
 <style scoped>
 .selected-category {
   background-color: color-mix(in srgb, var(--cata-primary) 10%, transparent);