diff --git a/ui/src/components/ui/NavBar.vue b/ui/src/components/ui/NavBar.vue
index 957b1d5..c070cac 100644
--- a/ui/src/components/ui/NavBar.vue
+++ b/ui/src/components/ui/NavBar.vue
@@ -1,11 +1,10 @@
 <script setup>
 import { ref, watch, computed } from 'vue'
 import { useRoute } from 'vue-router'
-import { useUi }   from '@/stores/useUi'
+import { useUi } from '@/stores/useUi'
 
 const ui = useUi()
 
-// enlaces de la app
 const links = [
   { to: '/',            label: 'Chat',        icon: '💬' },
   { to: '/empleados',   label: 'Empleados',   icon: '👥' },
@@ -19,20 +18,24 @@ const route = useRoute()
 const activePath = ref(route.path)
 watch(route, v => (activePath.value = v.path))
 
-// clases dinámicas p/ mostrar / ocultar barra
 const sidebarClasses = computed(() => ui.sidebarOpen ? 'translate-x-0' : '-translate-x-full')
+
+const getAccentColor = (path) => {
+  if (path.startsWith('/empleados'))   return ui.accentColorEmpleados
+  if (path.startsWith('/tareas'))      return ui.accentColorTareas
+  if (path.startsWith('/planillas'))   return ui.accentColorPlanillas
+  if (path.startsWith('/asistencias')) return ui.accentColorAsistencias
+  return ui.secondaryColor
+}
 </script>
 
 <template>
-  <!-- backdrop en mobile -->
   <div v-if="ui.sidebarOpen" class="fixed inset-0 bg-black/40 md:hidden" @click="ui.closeSidebar" />
 
-  <!-- barra lateral -->
   <aside
     :class="['fixed left-0 top-0 md:top-14 h-screen w-60 flex flex-col select-none z-50 transform transition-transform duration-200 ease-in-out', sidebarClasses]"
-    style="background-color: var(--background-color); border-right-color: var(--secondary-color); border-right-width: 1px;">
-
-    <!-- encabezado dentro de sidebar -->
+    style="background-color: var(--background-color); border-right-color: var(--secondary-color); border-right-width: 1px;"
+  >
     <div class="flex items-center justify-between px-4 py-4 md:px-5 md:py-4 md:border-none"
          style="border-bottom-color: var(--secondary-color); border-bottom-width: 1px;">
       <span class="text-lg font-semibold md:hidden" style="color: var(--primary-color);">Núcleo</span>
@@ -45,7 +48,6 @@ const sidebarClasses = computed(() => ui.sidebarOpen ? 'translate-x-0' : '-trans
       </button>
     </div>
 
-    <!-- navegación -->
     <nav class="flex-1 overflow-y-auto custom-scroll pr-1 pt-4 md:pt-0">
       <ul class="space-y-1 px-2">
         <li v-for="l in links" :key="l.to">
@@ -53,6 +55,7 @@ const sidebarClasses = computed(() => ui.sidebarOpen ? 'translate-x-0' : '-trans
             :to="l.to"
             class="nav-link flex items-center gap-3 w-full px-3 py-2 rounded-md font-medium transition group"
             :class="activePath.startsWith(l.to) ? 'active' : ''"
+            :style="{ '--hover-bg': getAccentColor(l.to) }"
             @click="ui.closeSidebar()"
           >
             <span class="text-lg" aria-hidden="true">{{ l.icon }}</span>
@@ -65,26 +68,33 @@ const sidebarClasses = computed(() => ui.sidebarOpen ? 'translate-x-0' : '-trans
 </template>
 
 <style scoped>
-ul { list-style: none; padding-left: 0; }
+ul {
+  list-style: none;
+  padding-left: 0;
+}
 
 .nav-link {
-  color: var(--text-color); /* Default text color */
+  color: var(--text-color);
+  transition: background-color 0.2s, color 0.2s;
 }
 
 .nav-link:hover {
-  background-color: var(--secondary-color);
-  color: var(--primary-color); /* Text color on hover */
+  background-color: var(--hover-bg, var(--secondary-color));
+  color: var(--primary-color);
 }
 
 .nav-link.active {
   background-color: var(--primary-color);
-  color: white; /* Assuming primary color is dark enough for white text */
-  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06); /* Tailwind shadow-sm equivalent */
+  color: white;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06);
 }
 
-/* Scrollbar styling using primary color */
-.custom-scroll::-webkit-scrollbar { width: 8px; }
-.custom-scroll::-webkit-scrollbar-track { background: transparent; }
+.custom-scroll::-webkit-scrollbar {
+  width: 8px;
+}
+.custom-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
 .custom-scroll::-webkit-scrollbar-thumb {
   background-color: var(--primary-color);
   opacity: 0.4;
@@ -96,6 +106,6 @@ ul { list-style: none; padding-left: 0; }
 }
 .custom-scroll {
   scrollbar-width: thin;
-  scrollbar-color: var(--primary-color) transparent; /* scrollbar-color: <thumb-color> <track-color> */
+  scrollbar-color: var(--primary-color) transparent;
 }
 </style>