From a7d44f185df6b2e2206261e3d4c2895dc080a04c Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Fri, 17 Oct 2025 17:51:32 -0600
Subject: [PATCH] Agregar banner informativo sobre guardado local vs servidor
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Banner visible en header del formulario
- Explica que cambios son locales hasta guardar
- Diseño con borde izquierdo y fondo suave
- Soporte dark mode
- Mejora UX explicando comportamiento de persistencia
---
 nuxt4/app/components/UserProfileForm.vue | 47 +++++++++++++++++++++++-
 1 file changed, 46 insertions(+), 1 deletion(-)

diff --git a/nuxt4/app/components/UserProfileForm.vue b/nuxt4/app/components/UserProfileForm.vue
index b6435cc..5a482e2 100644
--- a/nuxt4/app/components/UserProfileForm.vue
+++ b/nuxt4/app/components/UserProfileForm.vue
@@ -15,6 +15,15 @@
           Cancelar
         </UButton>
       </div>
+
+      <!-- Banner informativo sobre guardado local -->
+      <div class="info-banner">
+        <UIcon name="i-heroicons-information-circle" class="w-5 h-5 flex-shrink-0" />
+        <p class="info-banner-text">
+          Los cambios que realices se guardan <strong>automáticamente en tu navegador</strong>.
+          Para que sean permanentes y se sincronicen con el servidor, debes presionar <strong>"Guardar cambios"</strong>.
+        </p>
+      </div>
     </div>
 
     <form @submit.prevent="handleSubmit" class="form-content">
@@ -701,7 +710,30 @@ const removeAvatar = async () => {
 }
 
 .form-header {
-  margin-bottom: 2rem;
+  margin-bottom: 1.5rem;
+}
+
+.info-banner {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.875rem 1.125rem;
+  background: rgba(0, 150, 255, 0.08);
+  border-left: 3px solid rgb(var(--color-primary-500));
+  border-radius: 0.625rem;
+  margin-top: 1rem;
+}
+
+.info-banner-text {
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: var(--color-gray-700);
+  margin: 0;
+}
+
+.info-banner-text strong {
+  color: var(--color-gray-900);
+  font-weight: 600;
 }
 
 .form-title {
@@ -986,6 +1018,19 @@ const removeAvatar = async () => {
   color: var(--color-gray-100) !important;
 }
 
+.dark .info-banner {
+  background: rgba(0, 150, 255, 0.12) !important;
+  border-left-color: rgb(var(--color-primary-400)) !important;
+}
+
+.dark .info-banner-text {
+  color: var(--color-gray-300) !important;
+}
+
+.dark .info-banner-text strong {
+  color: var(--color-gray-100) !important;
+}
+
 .dark .section-title {
   color: var(--color-gray-100) !important;
   border-bottom-color: rgba(var(--color-primary-500), 0.3) !important;