diff --git a/ui/src/components/ui/NavBar.vue b/ui/src/components/ui/NavBar.vue
index c305835..cc7d889 100644
--- a/ui/src/components/ui/NavBar.vue
+++ b/ui/src/components/ui/NavBar.vue
@@ -19,6 +19,15 @@ const route = useRoute()
 const activePath = ref(route.path)
 watch(route, v => (activePath.value = v.path))
 
+const accentColorForPath = (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
+  if (path.startsWith('/config')) return ui.accentColorConfiguracion
+  return ui.accentColorChat
+}
+
 // clases dinámicas p/ mostrar / ocultar barra
 const sidebarClasses = computed(() => ui.sidebarOpen ? 'translate-x-0' : '-translate-x-full')
 
@@ -39,16 +48,13 @@ const handleLinkClick = () => {
   <!-- 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;">
+    style="background-color: transparent;">
 
     <!-- encabezado dentro de sidebar -->
     <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>
-      <button class="h-8 w-8 inline-flex items-center justify-center text-gray-500"
-              :style="{ color: 'var(--primary-color)' }"
-              @mouseover="($event.target.style.color = 'var(--primary-color)')"
-              @mouseleave="($event.target.style.color = 'var(--secondary-color)')"
+      <button class="close-btn h-8 w-8 flex items-center justify-center rounded-full border transition"
               @click="ui.toggleSidebar">
         ✕
       </button>
@@ -62,6 +68,7 @@ const handleLinkClick = () => {
             :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="{ '--accent-color': accentColorForPath(l.to) }"
             @click="handleLinkClick"
           >
             <span class="text-lg" aria-hidden="true">{{ l.icon }}</span>
@@ -77,18 +84,46 @@ const handleLinkClick = () => {
 ul { list-style: none; padding-left: 0; }
 
 .nav-link {
-  color: var(--text-color); /* Default text color */
+  position: relative;
+  color: var(--text-color);
+  background-color: transparent;
+  border: 1px solid var(--accent-color);
+  overflow: hidden;
+}
+
+.nav-link::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-color) 30%, transparent 30%);
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform 0.3s ease;
+  z-index: -1;
+}
+
+.nav-link:hover::before {
+  transform: scaleX(1);
 }
 
 .nav-link:hover {
+  color: var(--text-color);
+}
+
+.close-btn {
+  border-color: var(--secondary-color);
+  color: var(--secondary-color);
+}
+
+.close-btn:hover {
   background-color: var(--secondary-color);
-  color: var(--primary-color); /* Text color on hover */
+  color: var(--background-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 */
+  background-color: var(--accent-color);
+  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 */