From db1a12d1003226bbb8cbc46c3422246ff221b4c0 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Wed, 29 Oct 2025 17:18:47 -0600
Subject: [PATCH] Refactor: simplificar indicadores de cambios pendientes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Cambios realizados:
- Alerta más compacta con variant 'soft' en lugar de 'solid'
- Eliminado botón 'Actualizar ahora' redundante de la alerta
- Eliminado emoji de advertencia del botón 'Actualizar'
- Simplificado borde del card (solo borde amarillo sutil)
- Eliminadas sombras y rings del card
- Eliminada animación pulse del botón
- Mantenido punto amarillo pulsante en la alerta

El indicador ahora es más discreto pero sigue siendo evidente.
---
 nuxt4-app/app/pages/panorama.vue | 37 +++++++++-----------------------
 1 file changed, 10 insertions(+), 27 deletions(-)

diff --git a/nuxt4-app/app/pages/panorama.vue b/nuxt4-app/app/pages/panorama.vue
index 91815ff..622aba1 100644
--- a/nuxt4-app/app/pages/panorama.vue
+++ b/nuxt4-app/app/pages/panorama.vue
@@ -103,7 +103,7 @@
         :class="[
           'brand-card border transition-all duration-300',
           hasPendingChanges
-            ? 'border-yellow-500 shadow-lg shadow-yellow-500/50 ring-2 ring-yellow-400/50'
+            ? 'border-yellow-500/60'
             : 'border-transparent'
         ]"
       >
@@ -125,32 +125,15 @@
             <UAlert
               v-if="hasPendingChanges"
               color="warning"
-              variant="solid"
-              icon="i-lucide-alert-circle"
-              class="animate-pulse"
+              variant="soft"
+              class="py-2"
             >
               <template #title>
-                <div class="flex items-center gap-2">
-                  <span class="font-bold">¡Cambios pendientes!</span>
-                  <span class="inline-flex h-2 w-2 rounded-full bg-yellow-400 animate-ping"></span>
-                </div>
-              </template>
-              <template #description>
-                <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
-                  <span>Los filtros han cambiado pero no se han aplicado a los datos mostrados. Haz clic en "Actualizar" para aplicar los cambios.</span>
-                  <UButton
-                    :loading="loading"
-                    :disabled="loading"
-                    color="yellow"
-                    variant="solid"
-                    size="xs"
-                    @click="loadData"
-                  >
-                    <template #leading>
-                      <UIcon name="i-lucide-refresh-cw" :class="{ 'animate-spin': loading }" />
-                    </template>
-                    Actualizar ahora
-                  </UButton>
+                <div class="flex items-center justify-between gap-3 text-sm">
+                  <div class="flex items-center gap-2">
+                    <span class="inline-flex h-2 w-2 rounded-full bg-yellow-500 animate-pulse"></span>
+                    <span class="font-medium">Cambios pendientes - Haz clic en "Actualizar" para aplicar</span>
+                  </div>
                 </div>
               </template>
             </UAlert>
@@ -186,7 +169,7 @@
               :disabled="loading"
               :ui="{
                 base: hasPendingChanges
-                  ? 'bg-yellow-500 text-black border border-yellow-600 hover:bg-yellow-400 hover:border-yellow-500 disabled:opacity-50 disabled:cursor-not-allowed animate-pulse'
+                  ? 'bg-yellow-500 text-black border border-yellow-600 hover:bg-yellow-400 hover:border-yellow-500 disabled:opacity-50 disabled:cursor-not-allowed'
                   : 'bg-[#c08040] text-[#1b1209] border border-[#d99a56] hover:bg-[#d99a56] hover:border-[#f0c07c] disabled:opacity-50 disabled:cursor-not-allowed'
               }"
               size="sm"
@@ -195,7 +178,7 @@
               <template #leading>
                 <UIcon name="i-lucide-refresh-cw" :class="{ 'animate-spin': loading }" />
               </template>
-              {{ hasPendingChanges ? 'Actualizar ⚠️' : 'Actualizar' }}
+              Actualizar
             </UButton>
           </div>
         </template>