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;