From c0ad00c87fb92b04a2f61eb3992942d3374929bf Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Thu, 30 Oct 2025 15:33:49 -0600
Subject: [PATCH] =?UTF-8?q?Fix:=20Aplicar=20tema=20caf=C3=A9=20a=20sidebar?=
 =?UTF-8?q?=20y=20estilos=20personalizados?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Agregar fondo café oscuro al sidebar (var(--brand-surface))
- Personalizar estilos del input de búsqueda con colores del tema
- Mejorar indicador visual de tab seleccionada con borde izquierdo
- Aplicar estilos consistentes a los badges de teclado (⌘ K)
---
 nuxt4-app/app/components/app/AppSidebar.vue | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/nuxt4-app/app/components/app/AppSidebar.vue b/nuxt4-app/app/components/app/AppSidebar.vue
index abba823..0dbcfd5 100644
--- a/nuxt4-app/app/components/app/AppSidebar.vue
+++ b/nuxt4-app/app/components/app/AppSidebar.vue
@@ -8,6 +8,9 @@
     :min-size="20"
     :max-size="38"
     :toggle="{ color: 'neutral', variant: 'ghost', class: 'rounded-full hover:bg-[var(--brand-primary)]/10 text-[var(--brand-text-muted)] hover:text-[var(--brand-primary)]' }"
+    :ui="{
+      wrapper: 'bg-[var(--brand-surface)] border-r border-[var(--brand-border)]'
+    }"
   >
     <template #header="{ collapsed: isCollapsed }">
       <div class="flex items-center gap-2">
@@ -30,12 +33,12 @@
         variant="outline"
         block
         :square="isCollapsed"
-        class="mb-4"
+        class="mb-4 border-[var(--brand-border)] bg-[var(--brand-bg)]/50 hover:bg-[var(--brand-primary)]/10 hover:border-[var(--brand-primary)]/30 text-[var(--brand-text-muted)] hover:text-[var(--brand-primary)]"
       >
         <template v-if="!isCollapsed" #trailing>
           <div class="flex items-center gap-0.5 ms-auto text-[var(--brand-text-muted)]">
-            <UKbd value="⌘" variant="subtle" />
-            <UKbd value="K" variant="subtle" />
+            <UKbd value="⌘" variant="subtle" class="bg-[var(--brand-surface)] border-[var(--brand-border)] text-[var(--brand-text-muted)]" />
+            <UKbd value="K" variant="subtle" class="bg-[var(--brand-surface)] border-[var(--brand-border)] text-[var(--brand-text-muted)]" />
           </div>
         </template>
       </UButton>
@@ -45,6 +48,13 @@
         :items="navigationPrimary"
         orientation="vertical"
         class="gap-1"
+        :ui="{
+          item: {
+            base: 'text-[var(--brand-text-muted)] hover:text-[var(--brand-primary)] hover:bg-[var(--brand-primary)]/10',
+            active: 'bg-[var(--brand-primary)]/15 text-[var(--brand-primary)] border-l-2 border-[var(--brand-primary)] font-medium',
+            inactive: 'border-l-2 border-transparent'
+          }
+        }"
       />
 
     </template>