From 75069a7633acc9fb3403733a28f51f6aad2f8d65 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Thu, 16 Oct 2025 22:02:45 -0600
Subject: [PATCH] Feature: Scrollbar personalizada, arreglos SVG y mejoras de
 transparencia
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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/app.vue                             |  4 +-
 nuxt4/app/assets/css/main.css                 | 44 +++++++++++++++++++
 nuxt4/app/components/AnimatedBackground.vue   |  4 +-
 nuxt4/app/components/UserHeader.vue           | 39 +++++++---------
 .../app/components/auth/ApplicationsList.vue  |  4 +-
 5 files changed, 66 insertions(+), 29 deletions(-)

diff --git a/nuxt4/app/app.vue b/nuxt4/app/app.vue
index e4ae9fb..09e6e21 100644
--- a/nuxt4/app/app.vue
+++ b/nuxt4/app/app.vue
@@ -86,7 +86,7 @@ useHead({
 }
 
 :global(.dark) .quick-actions {
-  background: rgba(15, 15, 25, 0.3);
+  background: rgba(0, 0, 0, 0.3);
   box-shadow:
     0 8px 32px 0 rgba(0, 0, 0, 0.5),
     inset 0 1px 1px 0 rgba(255, 255, 255, 0.05);
@@ -110,7 +110,7 @@ useHead({
 }
 
 :global(.dark) .auth-message :deep(.card) {
-  background: rgba(15, 15, 25, 0.3);
+  background: rgba(0, 0, 0, 0.3);
   border: 1px solid rgba(255, 255, 255, 0.08);
   box-shadow:
     0 8px 32px 0 rgba(0, 0, 0, 0.5),
diff --git a/nuxt4/app/assets/css/main.css b/nuxt4/app/assets/css/main.css
index 7c95c6f..ba1fb1d 100644
--- a/nuxt4/app/assets/css/main.css
+++ b/nuxt4/app/assets/css/main.css
@@ -1,2 +1,46 @@
 @import "tailwindcss";
 @import "@nuxt/ui";
+
+/* Custom Scrollbar - Adaptable al tema */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(0, 220, 130, 0.5);
+  border-radius: 4px;
+  transition: background 0.3s ease;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 220, 130, 0.7);
+}
+
+/* Scrollbar para modo oscuro */
+.dark ::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.3);
+}
+
+.dark ::-webkit-scrollbar-thumb {
+  background: rgba(0, 220, 130, 0.6);
+}
+
+.dark ::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 220, 130, 0.8);
+}
+
+/* Firefox scrollbar */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 220, 130, 0.5) rgba(255, 255, 255, 0.1);
+}
+
+.dark * {
+  scrollbar-color: rgba(0, 220, 130, 0.6) rgba(0, 0, 0, 0.3);
+}
diff --git a/nuxt4/app/components/AnimatedBackground.vue b/nuxt4/app/components/AnimatedBackground.vue
index 5e7f851..74bc94a 100644
--- a/nuxt4/app/components/AnimatedBackground.vue
+++ b/nuxt4/app/components/AnimatedBackground.vue
@@ -61,7 +61,7 @@
       </svg>
 
       <!-- Colinas con césped -->
-      <svg class="hills" viewBox="0 0 1920 400" preserveAspectRatio="xMidYMid slice">
+      <svg class="hills" viewBox="0 0 1920 400" preserveAspectRatio="none">
         <path d="M 0,250 Q 240,150 480,200 T 960,220 T 1440,180 T 1920,240 L 1920,400 L 0,400 Z"
               fill="#7CB342" />
       </svg>
@@ -140,7 +140,7 @@
       </svg>
 
       <!-- Colinas nocturnas -->
-      <svg class="hills" viewBox="0 0 1920 400" preserveAspectRatio="xMidYMid slice">
+      <svg class="hills" viewBox="0 0 1920 400" preserveAspectRatio="none">
         <path d="M 0,250 Q 240,150 480,200 T 960,220 T 1440,180 T 1920,240 L 1920,400 L 0,400 Z"
               fill="#1B3A28" />
       </svg>
diff --git a/nuxt4/app/components/UserHeader.vue b/nuxt4/app/components/UserHeader.vue
index 27dc31e..8bf1479 100644
--- a/nuxt4/app/components/UserHeader.vue
+++ b/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),
diff --git a/nuxt4/app/components/auth/ApplicationsList.vue b/nuxt4/app/components/auth/ApplicationsList.vue
index 60dce3f..774fd7c 100644
--- a/nuxt4/app/components/auth/ApplicationsList.vue
+++ b/nuxt4/app/components/auth/ApplicationsList.vue
@@ -188,7 +188,7 @@ onUnmounted(() => {
 }
 
 :global(.dark) .applications-container {
-  background: rgba(15, 15, 25, 0.35);
+  background: rgba(0, 0, 0, 0.35);
   box-shadow:
     0 8px 32px 0 rgba(0, 0, 0, 0.5),
     inset 0 1px 1px 0 rgba(255, 255, 255, 0.05);
@@ -262,7 +262,7 @@ onUnmounted(() => {
 }
 
 :global(.dark) .app-card {
-  background: rgba(20, 20, 30, 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.4),