From 6994114d91c9eeed64cfa70926d17f7f7e7377bb Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Sun, 19 Oct 2025 03:02:32 -0600
Subject: [PATCH] Feat: Aumentar blur del overlay y aplicar estilos cata a
 UInputNumber
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 .../components/cata/ModalAsignacionRapida.vue | 60 +++++++++++++++++--
 1 file changed, 55 insertions(+), 5 deletions(-)

diff --git a/nuxt4/app/components/cata/ModalAsignacionRapida.vue b/nuxt4/app/components/cata/ModalAsignacionRapida.vue
index 51e3e75..a8589a0 100644
--- a/nuxt4/app/components/cata/ModalAsignacionRapida.vue
+++ b/nuxt4/app/components/cata/ModalAsignacionRapida.vue
@@ -34,7 +34,11 @@
               :max="72"
               :step="1"
               placeholder="8-72"
-              class="w-full"
+              class="w-full cata-input-number"
+              variant="outline"
+              :ui="{
+                base: 'cata-input text-center text-lg',
+              }"
               @update:model-value="onSumatoriaChangeFromButtons"
               @blur="onSumatoriaBlur"
             />
@@ -51,7 +55,11 @@
               :max="scaaMax"
               :step="0.25"
               placeholder="58.00-100.00"
-              class="w-full"
+              class="w-full cata-input-number"
+              variant="outline"
+              :ui="{
+                base: 'cata-input text-center text-lg',
+              }"
               :format-options="{ minimumFractionDigits: 2, maximumFractionDigits: 2 }"
               @update:model-value="onScaaChangeFromButtons"
               @blur="onScaaBlur"
@@ -390,9 +398,51 @@ const cerrar = () => {
 <style>
 .modal-overlay {
   background-color: var(--cata-bg) !important;
-  opacity: 0.90 !important;
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
+  opacity: 0.95 !important;
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+}
+
+/* Estilos para UInputNumber para que respete los colores del usuario */
+:deep(.cata-input-number input) {
+  background-color: var(--cata-bg) !important;
+  color: var(--cata-text) !important;
+  border-color: color-mix(in srgb, var(--cata-primary) 30%, transparent) !important;
+}
+
+:deep(.cata-input-number input:focus) {
+  border-color: var(--cata-primary) !important;
+  outline: none !important;
+  box-shadow: 0 0 0 1px var(--cata-primary) !important;
+}
+
+:deep(.cata-input-number input::placeholder) {
+  color: color-mix(in srgb, var(--cata-text) 50%, transparent) !important;
+}
+
+/* Botones de incremento/decremento */
+:deep(.cata-input-number button) {
+  color: var(--cata-primary) !important;
+  transition: all 0.2s ease;
+}
+
+:deep(.cata-input-number button:hover) {
+  color: var(--cata-primary) !important;
+  opacity: 0.8;
+}
+
+:deep(.cata-input-number button:active) {
+  transform: scale(0.95);
+}
+
+/* Modo oscuro */
+.dark :deep(.cata-input-number input) {
+  background-color: var(--cata-bg) !important;
+  border-color: color-mix(in srgb, var(--cata-primary) 40%, transparent) !important;
+}
+
+.dark :deep(.cata-input-number input:focus) {
+  box-shadow: 0 0 0 1px var(--cata-primary), 0 0 8px color-mix(in srgb, var(--cata-primary) 30%, transparent) !important;
 }
 </style>