Feature: Scrollbar personalizada, arreglos SVG y mejoras de transparencia

- Agregar scrollbar personalizada compacta (8px) adaptable al tema
- Estilo de scrollbar verde (#00DC82) con opacidad diferente para día/noche
- Soporte para WebKit (Chrome/Safari) y Firefox
- Arreglar SVG de colinas para usar 100% del ancho horizontal (preserveAspectRatio=none)
- Revertir modal a estructura funcional (v-model:open, title prop, #content slot)
- Igualar transparencia en modo oscuro usando rgba(0,0,0,0.3-0.4) en lugar de rgba(15,15,25)
- Aplicar tintado negro puro para reducir brillo en modo oscuro manteniendo misma transparencia

nuxt4/app/components/UserHeader.vue

@@ -56,39 +56,38 @@
     </button>
 
     <!-- Modal de edición de perfil -->
-    <UModal v-model="isEditModalOpen">
-      <div class="modal-content">
-        <h3 class="text-xl font-semibold mb-4">Editar Perfil</h3>
-
-        <form @submit.prevent="handleSubmit" class="space-y-4">
-          <UFormGroup label="Nombre de usuario" help="No se puede modificar">
+    <UModal v-model:open="isEditModalOpen" title="Editar Perfil">
+      <template #content>
+        <div class="p-4 space-y-4">
+          <UFormGroup label="Nombre de usuario" name="username">
             <UInput
               :model-value="user?.username"
               disabled
-              icon="i-heroicons-user"
+              :ui="{ base: 'cursor-not-allowed opacity-50' }"
             />
+            <template #help>
+              <span class="text-xs text-gray-500">El username no se puede cambiar</span>
+            </template>
           </UFormGroup>
 
-          <UFormGroup label="Nombre completo" required>
+          <UFormGroup label="Nombre completo" name="name" required>
             <UInput
               v-model="formData.name"
               placeholder="Tu nombre completo"
-              icon="i-heroicons-user-circle"
               :disabled="isSubmitting"
             />
           </UFormGroup>
 
-          <UFormGroup label="Email" required>
+          <UFormGroup label="Email" name="email" required>
             <UInput
               v-model="formData.email"
               type="email"
               placeholder="tu@email.com"
-              icon="i-heroicons-envelope"
               :disabled="isSubmitting"
             />
           </UFormGroup>
 
-          <div class="flex justify-end gap-3 mt-6">
+          <div class="flex justify-end gap-3 pt-4">
             <UButton
               color="neutral"
               variant="ghost"
@@ -98,15 +97,15 @@
               Cancelar
             </UButton>
             <UButton
-              type="submit"
               color="primary"
               :loading="isSubmitting"
+              @click="handleSubmit"
             >
               Guardar cambios
             </UButton>
           </div>
-        </form>
-      </div>
+        </div>
+      </template>
     </UModal>
   </div>
 </template>
@@ -218,7 +217,7 @@ const handleSubmit = async () => {
 }
 
 :global(.dark) .header-content {
-  background: rgba(15, 15, 25, 0.4);
+  background: rgba(0, 0, 0, 0.4);
   box-shadow:
     0 8px 32px 0 rgba(0, 0, 0, 0.5),
     inset 0 1px 1px 0 rgba(255, 255, 255, 0.05);
@@ -296,12 +295,6 @@ const handleSubmit = async () => {
     inset 0 1px 1px 0 rgba(255, 255, 255, 0.4);
 }
 
-.modal-content {
-  padding: 1.5rem;
-  max-width: 28rem;
-  margin: 0 auto;
-}
-
 .edit-hint {
   display: flex;
   align-items: center;
@@ -349,7 +342,7 @@ const handleSubmit = async () => {
 }
 
 :global(.dark) .theme-toggle {
-  background: rgba(15, 15, 25, 0.3);
+  background: rgba(0, 0, 0, 0.3);
   border: 1px solid rgba(255, 255, 255, 0.1);
   box-shadow:
     0 4px 16px 0 rgba(0, 0, 0, 0.5),