Merge pull request #10 from josedario87/feature/appearance-settings

feat: Implement module-specific accent colors and enhance theme integ…
2025-05-30 18:23:09 -06:00
parent 258785052f 50390eea88
commit e9b05d2000
24 changed files with 568 additions and 140 deletions
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -16,6 +16,12 @@ watchEffect(() => {
  root.style.setProperty('--font-family', ui.fontFamily)
  root.style.setProperty('--font-size', `${ui.fontSize}px`)

+  // Module-specific accent colors
+  root.style.setProperty('--accent-color-empleados', ui.accentColorEmpleados)
+  root.style.setProperty('--accent-color-tareas', ui.accentColorTareas)
+  root.style.setProperty('--accent-color-planillas', ui.accentColorPlanillas)
+  root.style.setProperty('--accent-color-asistencias', ui.accentColorAsistencias)
+
  if (ui.theme === 'dark') {
    root.classList.add('theme-dark')
    root.classList.remove('theme-light')
--- a/ui/src/components/asistencias/cardAsistencia.vue
+++ b/ui/src/components/asistencias/cardAsistencia.vue
@@ -98,7 +98,7 @@ const deleteAsistenciaInternal = async () => {

 .empleado-id {
  font-weight: bold;
-  color: #2c3e50; /* Dark blue/grey */
+  color: var(--accent-color-asistencias); /* Accent color */
  font-size: 1.05em;
 }

@@ -126,7 +126,7 @@ const deleteAsistenciaInternal = async () => {
  color: #666;
  background-color: #f8f9fa; /* Very light grey background */
  padding: 10px; /* More padding */
-  border-left: 3px solid #007bff; /* Blue accent line */
+  border-left: 3px solid var(--accent-color-asistencias); /* Accent color for border */
  border-radius: 4px;
  margin-top:10px;
  font-size: 0.9em; /* Slightly smaller for observation */
@@ -155,19 +155,19 @@ const deleteAsistenciaInternal = async () => {
 }

 .edit-button {
-  background-color: #007bff; 
+  background-color: var(--accent-color-asistencias);
  color: white;
 }
 .edit-button:hover {
-  background-color: #0056b3;
+  filter: brightness(0.9);
 }

 .delete-button {
-  background-color: #dc3545; 
+  background-color: var(--warning-color); /* Use warning color for delete */
  color: white;
 }
 .delete-button:hover {
-  background-color: #c82333;
+  filter: brightness(0.9);
 }

 /* Estado specific styling */
--- a/ui/src/components/asistencias/tablaAsistencias.vue
+++ b/ui/src/components/asistencias/tablaAsistencias.vue
@@ -136,19 +136,19 @@ const deleteAsistenciaInternal = async (id) => {
 }

 .edit-button {
-  background-color: #007bff; /* Blue */
+  background-color: var(--accent-color-asistencias);
  color: white;
 }
 .edit-button:hover {
-  background-color: #0056b3;
+  filter: brightness(0.9);
 }

 .delete-button {
-  background-color: #dc3545; /* Red */
+  background-color: var(--warning-color); /* Use warning color for delete */
  color: white;
 }
 .delete-button:hover {
-  background-color: #c82333;
+  filter: brightness(0.9);
 }

 /* Estado specific styling (using text color for tables is often cleaner) */
--- a/ui/src/components/empleados/cardEmpleado.vue
+++ b/ui/src/components/empleados/cardEmpleado.vue
@@ -4,7 +4,7 @@
      <img
        :src="employee.avatar_url || 'https://via.placeholder.com/150'"
        alt="Avatar del empleado"
-        class="w-20 h-20 rounded-full mr-6 border-2 border-blue-500 object-cover"
+        class="w-20 h-20 rounded-full mr-6 border-2 object-cover employee-avatar-border"
      />
      <div>
        <h2 class="text-2xl font-bold text-gray-800">{{ employee.name }}</h2>
@@ -13,24 +13,24 @@
    </div>
    <div class="space-y-2">
      <div v-if="employee.telefono" class="flex items-center text-gray-700">
-        <svg class="w-5 h-5 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.308 1.154a11.042 11.042 0 005.516 5.516l1.154-2.308a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path></svg>
+        <svg class="w-5 h-5 mr-2 employee-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.308 1.154a11.042 11.042 0 005.516 5.516l1.154-2.308a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path></svg>
        <span>{{ employee.telefono }}</span>
      </div>
      <div v-if="employee.ubicacion" class="flex items-center text-gray-700">
-        <svg class="w-5 h-5 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
+        <svg class="w-5 h-5 mr-2 employee-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
        <span>{{ employee.ubicacion }}</span>
      </div>
      <div v-if="employee.cedula" class="flex items-center text-gray-700">
-        <svg class="w-5 h-5 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 012-2h2a2 2 0 012 2v1m-4 0h4m-6 10v-5m0 5v0z"></path></svg>
+        <svg class="w-5 h-5 mr-2 employee-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 012-2h2a2 2 0 012 2v1m-4 0h4m-6 10v-5m0 5v0z"></path></svg>
        <span>Cedula: {{ employee.cedula }}</span>
      </div>
      <div v-if="employee.grupo_estudio" class="flex items-center text-gray-700">
-         <svg class="w-5 h-5 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 14l9-5-9-5-9 5 9 5z"></path><path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-5.998 12.083 12.083 0 01.665-6.479L12 14z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0v3.945m0-3.945L6.161 10.58M17.839 10.58L12 14m5.839-3.42L12 14m0 0l6.161 3.42m-6.161-3.42L5.839 14.002"></path></svg>
+         <svg class="w-5 h-5 mr-2 employee-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 14l9-5-9-5-9 5 9 5z"></path><path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-5.998 12.083 12.083 0 01.665-6.479L12 14z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0v3.945m0-3.945L6.161 10.58M17.839 10.58L12 14m5.839-3.42L12 14m0 0l6.161 3.42m-6.161-3.42L5.839 14.002"></path></svg>
        <span>Grupo Estudio: {{ employee.grupo_estudio }}</span>
      </div>
    </div>
    <div class="mt-6 flex justify-end space-x-3">
-      <button @click="handleEdit" class="px-4 py-2 bg-blue-500 text-white text-sm font-medium rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2">
+      <button @click="handleEdit" class="edit-button px-4 py-2 text-white text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2">
        Editar
      </button>
      <button @click="handleViewDetails" class="px-4 py-2 bg-gray-200 text-gray-700 text-sm font-medium rounded-md hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2">
@@ -82,9 +82,29 @@ const handleViewDetails = () => {
    flex-shrink: 0; /* Prevent SVGs from shrinking if text is long, ensuring icon consistency */
 }

+.employee-avatar-border {
+  border-color: var(--accent-color-empleados);
+}
+
+.employee-icon {
+  color: var(--accent-color-empleados);
+}
+
+.edit-button {
+  background-color: var(--accent-color-empleados);
+  /* Ensure focus ring also uses accent color if desired, e.g. by adding a specific class or style */
+}
+.edit-button:hover {
+  filter: brightness(1.1);
+}
+.edit-button:focus {
+  box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px var(--accent-color-empleados);
+}
+
+
 /* Styling for buttons for a more refined and interactive look */
 button {
-  transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, transform 0.1s ease-in-out;
+  transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, transform 0.1s ease-in-out, filter 0.2s ease-in-out;
 }
 button:hover {
    transform: translateY(-1px); /* Slight lift on hover */
--- a/ui/src/components/empleados/tablaEmpleados.vue
+++ b/ui/src/components/empleados/tablaEmpleados.vue
@@ -61,7 +61,7 @@
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium space-x-2">
            <button
              @click="handleEdit(employee.id)"
-              class="text-indigo-600 hover:text-indigo-800 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 p-1 rounded-md hover:bg-indigo-100 transition-all duration-150 ease-in-out"
+              class="edit-action-button p-1 rounded-md transition-all duration-150 ease-in-out"
              title="Editar Empleado"
            >
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
@@ -144,6 +144,18 @@ td {
 }

 /* Action button icon styling */
+.edit-action-button {
+  color: var(--accent-color-empleados);
+}
+.edit-action-button:hover {
+  background-color: var(--accent-color-empleados);
+  color: white; /* Assuming accent color is dark enough for white text */
+}
+.edit-action-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px var(--accent-color-empleados);
+}
+
 button svg {
  transition: transform 0.15s ease-in-out;
 }
--- a/ui/src/components/planillas/cardPlanilla.vue
+++ b/ui/src/components/planillas/cardPlanilla.vue
@@ -82,7 +82,7 @@ const deletePlanilla = async () => {

 .planilla-card h3 {
  margin-top: 0;
-  color: #333;
+  color: var(--accent-color-planillas); /* Accent color for title */
 }

 .planilla-card p {
@@ -108,14 +108,20 @@ const deletePlanilla = async () => {
 }

 .actions button:first-child { /* Edit button */
-  background-color: #007bff;
+  background-color: var(--accent-color-planillas);
  color: white;
 }
+.actions button:first-child:hover { /* Edit button hover */
+  filter: brightness(0.9);
+}

 .actions button:last-child { /* Delete button */
-  background-color: #dc3545;
+  background-color: var(--warning-color); /* Using warning color for delete */
  color: white;
 }
+.actions button:last-child:hover { /* Delete button hover */
+  filter: brightness(0.9);
+}

 /* Example status styling */
 .estado-pagado {
--- a/ui/src/components/planillas/tablaPlanillas.vue
+++ b/ui/src/components/planillas/tablaPlanillas.vue
@@ -133,21 +133,21 @@ const deletePlanillaInternal = async (id) => {
 }

 .edit-button {
-  background-color: #007bff;
+  background-color: var(--accent-color-planillas);
  color: white;
 }

 .edit-button:hover {
-  background-color: #0056b3;
+  filter: brightness(0.9);
 }

 .delete-button {
-  background-color: #dc3545;
+  background-color: var(--warning-color); /* Using warning color for delete */
  color: white;
 }

 .delete-button:hover {
-  background-color: #c82333;
+  filter: brightness(0.9);
 }

 /* Status styling (similar to cardPlanilla) */
--- a/ui/src/components/tareas/cardTarea.vue
+++ b/ui/src/components/tareas/cardTarea.vue
@@ -89,7 +89,7 @@ const deleteTareaInternal = async () => {
 .tarea-card h4 {
  margin-top: 0;
  margin-bottom: 12px;
-  color: #333;
+  color: var(--accent-color-tareas); /* Accent color for title */
  font-size: 1.15em; /* Slightly smaller than a typical h3 */
 }

@@ -120,11 +120,11 @@ const deleteTareaInternal = async () => {
 }

 .edit-button {
-  background-color: #007bff; /* Primary blue */
+  background-color: var(--accent-color-tareas);
  color: white;
 }
 .edit-button:hover {
-  background-color: #0056b3; /* Darker blue */
+  filter: brightness(0.9); /* Standard hover effect */
 }

 .delete-button {
--- a/ui/src/components/tareas/tablaTareas.vue
+++ b/ui/src/components/tareas/tablaTareas.vue
@@ -141,11 +141,11 @@ const deleteTareaInternal = async (id) => {
 }

 .edit-button {
-  background-color: #007bff; /* Blue */
+  background-color: var(--accent-color-tareas);
  color: white;
 }
 .edit-button:hover {
-  background-color: #0056b3;
+  filter: brightness(0.9); /* Standard hover effect */
 }

 .delete-button {
--- a/ui/src/components/ui/NavBar.vue
+++ b/ui/src/components/ui/NavBar.vue
@@ -29,12 +29,18 @@ const sidebarClasses = computed(() => ui.sidebarOpen ? 'translate-x-0' : '-trans

  <!-- barra lateral -->
  <aside
-    :class="['fixed left-0 top-0 md:top-14 h-screen w-60 bg-white dark:bg-zinc-900 border-r border-gray-200 dark:border-zinc-800 flex flex-col select-none z-50 transform transition-transform duration-200 ease-in-out', sidebarClasses]">
+    :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 -->
-    <div class="flex items-center justify-between px-4 py-4 md:px-5 md:py-4 border-b border-gray-200 dark:border-zinc-800 md:border-none">
-      <span class="text-lg font-semibold text-teal-600 dark:text-teal-400 md:hidden">Núcleo</span>
-      <button class="h-8 w-8 inline-flex items-center justify-center text-gray-500 hover:text-teal-600" @click="ui.toggleSidebar">
+    <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)')"
+              @click="ui.toggleSidebar">
        ✕
      </button>
    </div>
@@ -45,10 +51,8 @@ const sidebarClasses = computed(() => ui.sidebarOpen ? 'translate-x-0' : '-trans
        <li v-for="l in links" :key="l.to">
          <RouterLink
            :to="l.to"
-            class="flex items-center gap-3 w-full px-3 py-2 rounded-md font-medium transition group"
-            :class="activePath.startsWith(l.to)
-              ? 'bg-teal-600 text-white shadow'
-              : 'text-gray-700 dark:text-gray-100 hover:bg-teal-100 hover:text-teal-900 dark:hover:bg-zinc-800'"
+            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' : ''"
            @click="ui.closeSidebar()"
          >
            <span class="text-lg" aria-hidden="true">{{ l.icon }}</span>
@@ -63,9 +67,35 @@ const sidebarClasses = computed(() => ui.sidebarOpen ? 'translate-x-0' : '-trans
 <style scoped>
 ul { list-style: none; padding-left: 0; }

+.nav-link {
+  color: var(--text-color); /* Default text color */
+}
+
+.nav-link:hover {
+  background-color: var(--secondary-color);
+  color: var(--primary-color); /* Text color on hover */
+}
+
+.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 */
+}
+
+/* Scrollbar styling using primary color */
 .custom-scroll::-webkit-scrollbar { width: 8px; }
 .custom-scroll::-webkit-scrollbar-track { background: transparent; }
-.custom-scroll::-webkit-scrollbar-thumb { background-color: rgba(13,148,136,.4); border-radius: 4px; }
-.custom-scroll:hover::-webkit-scrollbar-thumb { background-color: rgba(13,148,136,.7); }
-.custom-scroll { scrollbar-width: thin; scrollbar-color: rgba(13,148,136,.6) transparent; }
+.custom-scroll::-webkit-scrollbar-thumb {
+  background-color: var(--primary-color);
+  opacity: 0.4;
+  border-radius: 4px;
+}
+.custom-scroll:hover::-webkit-scrollbar-thumb {
+  background-color: var(--primary-color);
+  opacity: 0.7;
+}
+.custom-scroll {
+  scrollbar-width: thin;
+  scrollbar-color: var(--primary-color) transparent; /* scrollbar-color: <thumb-color> <track-color> */
+}
 </style>
--- a/ui/src/components/ui/TopBar.vue
+++ b/ui/src/components/ui/TopBar.vue
@@ -5,19 +5,28 @@ const ui = useUi()

 <template>
  <!-- barra superior fija -->
-  <header class="fixed top-0 left-0 right-0 h-14 bg-white dark:bg-zinc-900 border-b border-gray-200 dark:border-zinc-800 flex items-center justify-between px-4 md:px-6 z-50 shadow-sm">
+  <header class="fixed top-0 left-0 right-0 h-14 flex items-center justify-between px-4 md:px-6 z-50 shadow-sm"
+          :style="{ backgroundColor: 'var(--background-color)', borderBottom: '1px solid var(--secondary-color)' }">
    <!-- título -->
-    <h1 class="text-lg font-semibold tracking-wide text-teal-600 dark:text-teal-400 select-none">Núcleo</h1>
+    <h1 class="text-lg font-semibold tracking-wide select-none" :style="{ color: 'var(--primary-color)' }">Núcleo</h1>

    <!-- botón hamburguesa (visible solo en mobile) -->
    <button
      @click="ui.toggleSidebar"
-      class="inline-flex items-center justify-center h-9 w-9 rounded-md bg-teal-600 text-white hover:bg-teal-700 transition ">
+      class="hamburger-button inline-flex items-center justify-center h-9 w-9 rounded-md text-white transition">
      &#9776;
    </button>
  </header>
 </template>

 <style scoped>
-/* sin estilos extra */
+.hamburger-button {
+  background-color: var(--primary-color);
+}
+.hamburger-button:hover {
+  filter: brightness(1.1); /* Slight lighten/darken based on primary color */
+}
+/* Alternative hover if primary is very light or very dark, requiring specific color adjustment */
+/* .hamburger-button:hover { background-color: var(--primary-color-hover); } */
+/* Ensure --primary-color-hover is defined or calculated based on --primary-color if this approach is used */
 </style>
--- a/ui/src/stores/tests/useUi.spec.js
+++ b/ui/src/stores/tests/useUi.spec.js
@@ -43,6 +43,15 @@ describe('useUi Store', () => {
    expect(store.primaryColor).toBe('#1976D2')
    expect(store.theme).toBe('light')
    expect(store.fontSize).toBe(16)
+    // Check new accent color defaults
+    expect(store.accentColorEmpleados).toBe('#2196F3')
+    expect(store.accentColorTareas).toBe('#4CAF50')
+    expect(store.accentColorPlanillas).toBe('#FF9800')
+    expect(store.accentColorAsistencias).toBe('#E91E63')
+    expect(localStorageMock.getItem).toHaveBeenCalledWith(APPEARANCE_STORAGE_KEY)
+  })
+
+  it('loads settings from localStorage including new accent colors if present', () => {
    expect(localStorageMock.getItem).toHaveBeenCalledWith(APPEARANCE_STORAGE_KEY)
  })

@@ -52,6 +61,10 @@ describe('useUi Store', () => {
      theme: 'dark',
      fontSize: 20,
      animationsEnabled: false,
+      accentColorEmpleados: '#0000FF',
+      accentColorTareas: '#00FF00',
+      accentColorPlanillas: '#FFFF00',
+      accentColorAsistencias: '#FF00FF',
      // other settings...
    }
    localStorageMock.getItem.mockReturnValueOnce(JSON.stringify(storedSettings))
@@ -63,6 +76,30 @@ describe('useUi Store', () => {
    expect(store.theme).toBe('dark')
    expect(store.fontSize).toBe(20)
    expect(store.animationsEnabled).toBe(false)
+    expect(store.accentColorEmpleados).toBe('#0000FF')
+    expect(store.accentColorTareas).toBe('#00FF00')
+    expect(store.accentColorPlanillas).toBe('#FFFF00')
+    expect(store.accentColorAsistencias).toBe('#FF00FF')
+  })
+
+  it('loads older settings from localStorage and uses defaults for new accent colors if not present', () => {
+    const olderStoredSettings = {
+      primaryColor: '#ABCDEF',
+      theme: 'dark',
+      fontSize: 18,
+    } // Does not include new accent colors
+    localStorageMock.getItem.mockReturnValueOnce(JSON.stringify(olderStoredSettings))
+
+    const store = useUi()
+
+    expect(store.primaryColor).toBe('#ABCDEF')
+    expect(store.theme).toBe('dark')
+    expect(store.fontSize).toBe(18)
+    // New accent colors should fall back to defaults
+    expect(store.accentColorEmpleados).toBe('#2196F3')
+    expect(store.accentColorTareas).toBe('#4CAF50')
+    expect(store.accentColorPlanillas).toBe('#FF9800')
+    expect(store.accentColorAsistencias).toBe('#E91E63')
  })

  it('falls back to default settings if localStorage data is invalid JSON', () => {
@@ -88,6 +125,11 @@ describe('useUi Store', () => {
  })

  describe('Actions', () => {
+    // Update this list to match the store's appearanceSettingKeys
+    const appearanceSettingKeysInTest = [
+      'primaryColor', 'secondaryColor', 'warningColor', 'fontFamily',
+      'fontSize', 'animationsEnabled', 'backgroundColor', 'theme',
+      'accentColorEmpleados', 'accentColorTareas', 'accentColorPlanillas', 'accentColorAsistencias',
    const appearanceSettingKeys = [
      'primaryColor', 'secondaryColor', 'warningColor', 'fontFamily',
      'fontSize', 'animationsEnabled', 'backgroundColor', 'theme',
@@ -170,6 +212,53 @@ describe('useUi Store', () => {
      const savedDataString = localStorageMock.setItem.mock.calls[0][1];
      const savedData = JSON.parse(savedDataString);

+      expect(Object.keys(savedData).length).toBe(appearanceSettingKeysInTest.length);
+      expect(savedData.sidebarOpen).toBeUndefined() // Ensure non-appearance data is not saved
+      appearanceSettingKeysInTest.forEach(key => {
+        expect(savedData.hasOwnProperty(key)).toBe(true)
+      })
+    })
+
+    // Tests for new accent color actions
+    it('setAccentColorEmpleados updates state and saves to localStorage', () => {
+      const store = useUi()
+      store.setAccentColorEmpleados('#FF1122')
+      expect(store.accentColorEmpleados).toBe('#FF1122')
+      expect(localStorageMock.setItem).toHaveBeenCalledWith(
+        APPEARANCE_STORAGE_KEY,
+        expect.stringContaining('"accentColorEmpleados":"#FF1122"')
+      )
+    })
+
+    it('setAccentColorTareas updates state and saves to localStorage', () => {
+      const store = useUi()
+      store.setAccentColorTareas('#33FF44')
+      expect(store.accentColorTareas).toBe('#33FF44')
+      expect(localStorageMock.setItem).toHaveBeenCalledWith(
+        APPEARANCE_STORAGE_KEY,
+        expect.stringContaining('"accentColorTareas":"#33FF44"')
+      )
+    })
+
+    it('setAccentColorPlanillas updates state and saves to localStorage', () => {
+      const store = useUi()
+      store.setAccentColorPlanillas('#5566FF')
+      expect(store.accentColorPlanillas).toBe('#5566FF')
+      expect(localStorageMock.setItem).toHaveBeenCalledWith(
+        APPEARANCE_STORAGE_KEY,
+        expect.stringContaining('"accentColorPlanillas":"#5566FF"')
+      )
+    })
+
+    it('setAccentColorAsistencias updates state and saves to localStorage', () => {
+      const store = useUi()
+      store.setAccentColorAsistencias('#FF7788')
+      expect(store.accentColorAsistencias).toBe('#FF7788')
+      expect(localStorageMock.setItem).toHaveBeenCalledWith(
+        APPEARANCE_STORAGE_KEY,
+        expect.stringContaining('"accentColorAsistencias":"#FF7788"')
+      )
+    })
      expect(Object.keys(savedData).length).toBe(appearanceSettingKeys.length);
      expect(savedData.sidebarOpen).toBeUndefined() // Ensure non-appearance data is not saved
      appearanceSettingKeys.forEach(key => {
--- a/ui/src/stores/useUi.js
+++ b/ui/src/stores/useUi.js
@@ -12,6 +12,10 @@ const appearanceSettingKeys = [
  'animationsEnabled',
  'backgroundColor',
  'theme',
+  'accentColorEmpleados',
+  'accentColorTareas',
+  'accentColorPlanillas',
+  'accentColorAsistencias',
 ]

 const loadSettingsFromLocalStorage = () => {
@@ -67,6 +71,11 @@ export const useUi = defineStore('ui', {
      animationsEnabled: true,
      backgroundColor: '#FFFFFF',
      theme: 'light', // 'light' or 'dark'
+      // Module-specific accent colors
+      accentColorEmpleados: '#2196F3', // Blue
+      accentColorTareas: '#4CAF50',     // Green
+      accentColorPlanillas: '#FF9800',  // Orange
+      accentColorAsistencias: '#E91E63', // Pink
    }

    const loadedSettings = loadSettingsFromLocalStorage()
@@ -130,6 +139,24 @@ export const useUi = defineStore('ui', {
    toggleTheme() {
      this.theme = this.theme === 'light' ? 'dark' : 'light'
      _saveAppearanceState(this)
+    },
+
+    // Actions for module-specific accent colors
+    setAccentColorEmpleados(color) {
+      this.accentColorEmpleados = color
+      _saveAppearanceState(this)
+    },
+    setAccentColorTareas(color) {
+      this.accentColorTareas = color
+      _saveAppearanceState(this)
+    },
+    setAccentColorPlanillas(color) {
+      this.accentColorPlanillas = color
+      _saveAppearanceState(this)
+    },
+    setAccentColorAsistencias(color) {
+      this.accentColorAsistencias = color
+      _saveAppearanceState(this)
    }
  },
 })
--- a/ui/src/style.css
+++ b/ui/src/style.css
@@ -12,6 +12,12 @@
  --font-size: 16px;
  /* Add other variables as needed, e.g., text colors for themes */
  --text-color: #212121; /* Default text color for light theme */
+
+  /* Module-specific accent colors - Default Fallbacks */
+  --accent-color-empleados: #2196F3;
+  --accent-color-tareas: #4CAF50;
+  --accent-color-planillas: #FF9800;
+  --accent-color-asistencias: #E91E63;
 }

 html.theme-dark {
--- a/ui/src/views/SettingsView.vue
+++ b/ui/src/views/SettingsView.vue
@@ -70,6 +70,33 @@
      </div>
    </section>

+    <!-- Module Accent Colors Section -->
+    <section class="mb-10"> <!-- Changed from no margin to mb-10 for consistency -->
+      <h2 class="text-2xl font-semibold mb-6 text-[var(--primary-color)]">Module Accent Colors</h2>
+      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+        <div class="setting-item">
+          <label for="accentColorEmpleados" class="block text-sm font-medium mb-1">Empleados Accent</label>
+          <input type="color" id="accentColorEmpleados" v-model="ui.accentColorEmpleados" @input="ui.setAccentColorEmpleados($event.target.value)"
+                 class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
+        </div>
+        <div class="setting-item">
+          <label for="accentColorTareas" class="block text-sm font-medium mb-1">Tareas Accent</label>
+          <input type="color" id="accentColorTareas" v-model="ui.accentColorTareas" @input="ui.setAccentColorTareas($event.target.value)"
+                 class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
+        </div>
+        <div class="setting-item">
+          <label for="accentColorPlanillas" class="block text-sm font-medium mb-1">Planillas Accent</label>
+          <input type="color" id="accentColorPlanillas" v-model="ui.accentColorPlanillas" @input="ui.setAccentColorPlanillas($event.target.value)"
+                 class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
+        </div>
+        <div class="setting-item">
+          <label for="accentColorAsistencias" class="block text-sm font-medium mb-1">Asistencias Accent</label>
+          <input type="color" id="accentColorAsistencias" v-model="ui.accentColorAsistencias" @input="ui.setAccentColorAsistencias($event.target.value)"
+                 class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
+        </div>
+      </div>
+    </section>
+
  </div>
 </template>

--- a/ui/src/views/tests/SettingsView.spec.js
+++ b/ui/src/views/tests/SettingsView.spec.js
@@ -11,6 +11,41 @@ const getFreshStore = () => {
 }

 describe('SettingsView.vue', () => {
+  // No global 'store' variable here, it will be test-specific or wrapper-specific
+
+  beforeEach(() => {
+    // Ensure a fresh Pinia instance is active for each test.
+    setActivePinia(createPinia())
+
+    // Clear localStorage mock before each test
+    // Note: The mock itself is defined globally in this file or via setupFiles in Vitest config.
+    // Re-stubbing it or ensuring its state is clean.
+    const localStorageMock = window.localStorage; // Assuming it's already stubbed globally by Vitest setup or top of file
+    localStorageMock.clear();
+    if (localStorageMock.setItem.mockClear) { // vi.fn() specific
+        localStorageMock.setItem.mockClear();
+        localStorageMock.getItem.mockClear();
+    }
+  })
+
+  // createWrapper now also handles store creation and returns the store for spying if needed
+  const createWrapperAndStore = (initialStoreState = {}) => {
+    if (Object.keys(initialStoreState).length > 0) {
+        localStorage.setItem('appearanceSettings', JSON.stringify(initialStoreState));
+    }
+
+    const currentStore = useUi(); // Store is created AFTER localStorage is set for this test
+
+    const wrapper = mount(SettingsView, {
+      global: {
+        // Pinia is active via setActivePinia, component should pick it up
+      },
+    });
+    return { wrapper, store: currentStore }; // Return store for spying
+  }
+
+  it('renders all input elements with initial values from store', () => {
+    const { wrapper } = createWrapperAndStore({ // Store is created inside here after LS mock
  let store

  beforeEach(() => {
@@ -60,6 +95,14 @@ describe('SettingsView.vue', () => {
        fontSize: 18,
        animationsEnabled: false,
        theme: 'dark',
+        // Add new accent colors for comprehensive initial state testing
+        accentColorEmpleados: '#123456',
+        accentColorTareas: '#654321',
+        accentColorPlanillas: '#abcdef',
+        accentColorAsistencias: '#fedcba',
+    })
+
+    // Check general appearance settings
    })

    expect(wrapper.find('input#primaryColor').element.value).toBe('#111111')
@@ -70,6 +113,33 @@ describe('SettingsView.vue', () => {
    expect(wrapper.find('input#fontSize').element.value).toBe('18')
    expect(wrapper.find('input#animationsEnabled').element.checked).toBe(false)
    expect(wrapper.find('select#theme').element.value).toBe('dark')
+
+    // Check new module accent color pickers
+    const h2Elements = wrapper.findAll('h2')
+    const sectionTitles = h2Elements.map(h => h.text())
+    expect(sectionTitles).toContain('Module Accent Colors')
+    expect(wrapper.find('input#accentColorEmpleados').element.value).toBe('#123456')
+    expect(wrapper.find('input#accentColorTareas').element.value).toBe('#654321')
+    expect(wrapper.find('input#accentColorPlanillas').element.value).toBe('#abcdef')
+    expect(wrapper.find('input#accentColorAsistencias').element.value).toBe('#fedcba')
+  })
+
+  it('calls setPrimaryColor action when primary color input changes', async () => {
+    const { wrapper, store } = createWrapperAndStore()
+    const spy = vi.spyOn(store, 'setPrimaryColor')
+    const colorInput = wrapper.find('input#primaryColor')
+
+    colorInput.element.value = '#FF00FF'
+    await colorInput.trigger('input')
+
+    expect(spy).toHaveBeenCalledWith('#ff00ff')
+  })
+
+  it('calls setFontFamily action when font family input changes', async () => {
+    const { wrapper, store } = createWrapperAndStore()
+    const spy = vi.spyOn(store, 'setFontFamily')
+    const input = wrapper.find('input#fontFamily')
+    await input.setValue('Helvetica')
  })

  it('calls setPrimaryColor action when primary color input changes', async () => {
@@ -94,6 +164,7 @@ describe('SettingsView.vue', () => {
  })

  it('calls setFontSize action when font size input changes', async () => {
+    const { wrapper, store } = createWrapperAndStore()
    const wrapper = createWrapper()
    const spy = vi.spyOn(store, 'setFontSize')
    const input = wrapper.find('input#fontSize')
@@ -102,6 +173,11 @@ describe('SettingsView.vue', () => {
  })

  it('calls setAnimationsEnabled action when animations checkbox changes', async () => {
+    const { wrapper, store } = createWrapperAndStore({ animationsEnabled: true })
+    const spy = vi.spyOn(store, 'setAnimationsEnabled')
+    const checkbox = wrapper.find('input#animationsEnabled')
+
+    await checkbox.setChecked(false)
    const wrapper = createWrapper({ animationsEnabled: true }) // Start with true
    const spy = vi.spyOn(store, 'setAnimationsEnabled')
    const checkbox = wrapper.find('input#animationsEnabled')
@@ -113,6 +189,56 @@ describe('SettingsView.vue', () => {
  })

  it('calls setTheme action when theme select changes', async () => {
+    const { wrapper, store } = createWrapperAndStore()
+    const spy = vi.spyOn(store, 'setTheme')
+    const select = wrapper.find('select#theme')
+    await select.setValue('dark')
+    expect(spy).toHaveBeenCalledWith('dark')
+  })
+
+  // New tests for module accent color pickers
+  it('calls setAccentColorEmpleados action when empleados accent color input changes', async () => {
+    const { wrapper, store } = createWrapperAndStore()
+    const spy = vi.spyOn(store, 'setAccentColorEmpleados')
+    const colorInput = wrapper.find('input#accentColorEmpleados')
+    colorInput.element.value = '#aabbcc'
+    await colorInput.trigger('input')
+    expect(spy).toHaveBeenCalledWith('#aabbcc')
+  })
+
+  it('calls setAccentColorTareas action when tareas accent color input changes', async () => {
+    const { wrapper, store } = createWrapperAndStore()
+    const spy = vi.spyOn(store, 'setAccentColorTareas')
+    const colorInput = wrapper.find('input#accentColorTareas')
+    colorInput.element.value = '#ccbbaa'
+    await colorInput.trigger('input')
+    expect(spy).toHaveBeenCalledWith('#ccbbaa')
+  })
+
+  it('calls setAccentColorPlanillas action when planillas accent color input changes', async () => {
+    const { wrapper, store } = createWrapperAndStore()
+    const spy = vi.spyOn(store, 'setAccentColorPlanillas')
+    const colorInput = wrapper.find('input#accentColorPlanillas')
+    colorInput.element.value = '#a1b2c3'
+    await colorInput.trigger('input')
+    expect(spy).toHaveBeenCalledWith('#a1b2c3')
+  })
+
+  it('calls setAccentColorAsistencias action when asistencias accent color input changes', async () => {
+    const { wrapper, store } = createWrapperAndStore()
+    const spy = vi.spyOn(store, 'setAccentColorAsistencias')
+    const colorInput = wrapper.find('input#accentColorAsistencias')
+    colorInput.element.value = '#c3b2a1'
+    await colorInput.trigger('input')
+    expect(spy).toHaveBeenCalledWith('#c3b2a1')
+  })
+
+  it('updates input values when store state changes programmatically', async () => {
+    const { wrapper, store } = createWrapperAndStore() // Store instance for this test
+
+    // Test primaryColor
+    store.primaryColor = '#001122' // Directly manipulate the store used by the component
+=======
    const wrapper = createWrapper()
    const spy = vi.spyOn(store, 'setTheme')
    const select = wrapper.find('select#theme')
@@ -147,6 +273,11 @@ describe('SettingsView.vue', () => {
    store.theme = 'dark'
    await wrapper.vm.$nextTick()
    expect(wrapper.find('select#theme').element.value).toBe('dark')
+
+    // Test one of the new accent colors
+    store.accentColorEmpleados = '#998877'
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('input#accentColorEmpleados').element.value).toBe('#998877')
  })

  // Test for the initial fade-in animation - checking class
@@ -154,6 +285,7 @@ describe('SettingsView.vue', () => {
    // Mock setTimeout to control its execution
    vi.useFakeTimers()

+    const { wrapper } = createWrapperAndStore() // Use the new function name
    const wrapper = createWrapper()
    expect(wrapper.find('.settings-view').classes()).not.toContain('opacity-100')

--- a/ui/src/views/asistencias/AsistenciaForm.vue
+++ b/ui/src/views/asistencias/AsistenciaForm.vue
@@ -214,7 +214,7 @@ const handleCancel = () => {

 h2 {
  text-align: center;
-  color: #333;
+  color: var(--accent-color-asistencias); /* Accent color for title */
  margin-bottom: 25px;
 }

@@ -235,10 +235,19 @@ h2 {
 .form-group textarea {
  width: 100%;
  padding: 10px;
-  border: 1px solid #ccc;
+  border: 1px solid var(--secondary-color); /* Theme border */
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 1em;
+  background-color: var(--background-color); /* Theme background */
+  color: var(--text-color); /* Theme text */
+}
+.form-group input:focus,
+.form-group select:focus,
+.form-group textarea:focus {
+  border-color: var(--accent-color-asistencias);
+  box-shadow: 0 0 0 2px var(--accent-color-asistencias);
+  outline: none;
 }

 .form-group textarea {
@@ -247,7 +256,7 @@ h2 {

 .error-message {
  display: block;
-  color: #e74c3c; 
+  color: var(--warning-color); /* Theme warning color */
  font-size: 0.9em;
  margin-top: 5px;
 }
@@ -266,31 +275,33 @@ h2 {
  cursor: pointer;
  font-size: 1em;
  font-weight: 500;
-  transition: background-color 0.2s ease, box-shadow 0.2s ease;
+  transition: background-color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
 }

 .form-actions button[type="submit"] {
-  background-color: #3498db; /* Blue */
-  color: white;
+  background-color: var(--accent-color-asistencias);
+  color: white; /* Assuming accent is dark enough */
 }
 .form-actions button[type="submit"]:hover {
-  background-color: #2980b9; 
+  filter: brightness(0.9);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 }
 .form-actions button[type="submit"]:disabled {
-  background-color: #bdc3c7; 
+  background-color: var(--secondary-color);
+  opacity: 0.7;
  cursor: not-allowed;
 }

 .form-actions button[type="button"] {
-  background-color: #e74c3c; /* Red for cancel */
-  color: white;
+  background-color: var(--secondary-color); /* Using secondary for cancel */
+  color: var(--text-color); /* Ensure text contrasts */
 }
 .form-actions button[type="button"]:hover {
-  background-color: #c0392b; 
+  filter: brightness(0.9);
 }
 .form-actions button[type="button"]:disabled {
-  background-color: #bdc3c7;
+  background-color: var(--secondary-color);
+  opacity: 0.5;
  cursor: not-allowed;
 }
 </style>
--- a/ui/src/views/asistencias/AsistenciasIndex.vue
+++ b/ui/src/views/asistencias/AsistenciasIndex.vue
@@ -89,26 +89,26 @@ const handleEditAsistencia = (asistenciaId) => {
 }

 .page-header h1 {
-  color: #212529; 
+  color: var(--accent-color-asistencias); /* Accent color for title */
  font-size: 1.8em; 
  font-weight: 600;
 }

 .btn-create {
-  background-color: #17a2b8; /* Info Blue */
-  color: white;
+  background-color: var(--accent-color-asistencias);
+  color: white; /* Assuming accent is dark enough */
  padding: 10px 18px; 
  border: none;
  border-radius: 5px;
  font-size: 1em;
  font-weight: 500;
  cursor: pointer;
-  transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease;
+  transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease, filter 0.2s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
 }

 .btn-create:hover {
-  background-color: #138496; 
+  filter: brightness(0.9);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
 }

--- a/ui/src/views/empleados/EmpleadoForm.vue
+++ b/ui/src/views/empleados/EmpleadoForm.vue
@@ -19,8 +19,8 @@
          v-model="form.name"
          type="text"
          required
-          class="w-full px-4 py-2 border border-gray-300 rounded-md
-                 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          class="form-input w-full px-4 py-2 border border-gray-300 rounded-md
+                 focus:outline-none"
          placeholder="Ej: Juan Pérez"
        />
      </div>
@@ -36,8 +36,8 @@
          v-model="form.cedula"
          type="number"
          required
-          class="w-full px-4 py-2 border border-gray-300 rounded-md
-                 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          class="form-input w-full px-4 py-2 border border-gray-300 rounded-md
+                 focus:outline-none"
          placeholder="Ej: 123456789"
        />
      </div>
@@ -52,8 +52,8 @@
          id="ubicacion"
          v-model="form.ubicacion"
          type="text"
-          class="w-full px-4 py-2 border border-gray-300 rounded-md
-                 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          class="form-input w-full px-4 py-2 border border-gray-300 rounded-md
+                 focus:outline-none"
          placeholder="Ej: Oficina Principal"
        />
      </div>
@@ -68,8 +68,8 @@
          id="grupo_estudio"
          v-model="form.grupo_estudio"
          type="text"
-          class="w-full px-4 py-2 border border-gray-300 rounded-md
-                 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          class="form-input w-full px-4 py-2 border border-gray-300 rounded-md
+                 focus:outline-none"
          placeholder="Ej: Grupo A"
        />
      </div>
@@ -84,8 +84,8 @@
          id="avatar_url"
          v-model="form.avatar_url"
          type="url"
-          class="w-full px-4 py-2 border border-gray-300 rounded-md
-                 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          class="form-input w-full px-4 py-2 border border-gray-300 rounded-md
+                 focus:outline-none"
          placeholder="Ej: https://example.com/avatar.png"
        />
      </div>
@@ -100,8 +100,8 @@
          id="telefono"
          v-model="form.telefono"
          type="tel"
-          class="w-full px-4 py-2 border border-gray-300 rounded-md
-                 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          class="form-input w-full px-4 py-2 border border-gray-300 rounded-md
+                 focus:outline-none"
          placeholder="Ej: 0991234567"
        />
      </div>
@@ -116,8 +116,8 @@
          id="idciat"
          v-model="form.idciat"
          type="text"
-          class="w-full px-4 py-2 border border-gray-300 rounded-md
-                 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          class="form-input w-full px-4 py-2 border border-gray-300 rounded-md
+                 focus:outline-none"
          placeholder="Ej: CIAT123"
        />
      </div>
@@ -127,16 +127,15 @@
        <button
          type="button"
          @click="handleCancel"
-          class="mr-4 px-6 py-2 text-gray-700 border border-gray-300 rounded-md
+          class="btn-secondary mr-4 px-6 py-2 text-gray-700 border border-gray-300 rounded-md
                 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-400"
        >
          Cancelar
        </button>
        <button
          type="submit"
-          class="px-6 py-2 bg-blue-600 text-white font-semibold rounded-md
-                 hover:bg-blue-700 focus:outline-none focus:ring-2
-                 focus:ring-blue-500 focus:ring-offset-2"
+          class="btn-submit px-6 py-2 text-white font-semibold rounded-md
+                 focus:outline-none focus:ring-2 focus:ring-offset-2"
        >
          {{ isEditMode ? 'Actualizar' : 'Crear' }}
        </button>
@@ -234,39 +233,53 @@ const handleCancel = () => {
 <style scoped>
 /* --- Validación rápida de inputs requeridos --- */
 input:required:invalid {
-  border-color: #e53e3e; /* red-600 */
+  border-color: var(--warning-color); /* Using warning color for invalid fields */
 }

-/* --- Focus global para inputs y botones --- */
-input:focus,
-button:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #3b82f6; /* blue-500 */
-}
+/* Removing generic input:focus, button:focus as they are too broad */

 /* --- Look & feel extra (opcional, podés ajustar) --- */
-.form-container { background-color: #f9fafb; } /* gray-50 */
+.form-container { background-color: var(--background-color); } /* Use theme background */
 .form-card      { box-shadow: 0 10px 15px -3px rgba(0,0,0,.1),
                            0 4px 6px -2px rgba(0,0,0,.05); }

-.form-title   { color: #1f2937; } /* gray-800 */
-.form-label   { color: #374151; font-weight: 600; } /* gray-700 */
-.form-input   { border-color: #d1d5db; transition: border-color .2s, box-shadow .2s; }
+.form-title   { color: var(--text-color); } /* Use theme text color */
+.form-label   { color: var(--text-color); font-weight: 600; } /* Use theme text color */
+
+.form-input   {
+  border-color: var(--secondary-color); /* Use secondary for border */
+  background-color: var(--background-color); /* Ensure inputs match theme background */
+  color: var(--text-color); /* Ensure input text matches theme text */
+  transition: border-color .2s, box-shadow .2s;
+}
 .form-input:focus {
-  border-color: #2563eb; /* blue-600 */
-  box-shadow: 0 0 0 3px rgba(59,130,246,.5);
+  outline: none;
+  border-color: var(--accent-color-empleados); /* Accent color for focus border */
+  box-shadow: 0 0 0 2px var(--accent-color-empleados); /* Accent color for focus ring */
 }

-.btn-primary {
-  background-color: #2563eb; color: #fff; font-weight: 600;
-  padding: .75rem 1.5rem; border-radius: .375rem; transition: background-color .2s;
+.btn-submit {
+  background-color: var(--accent-color-empleados);
+  transition: background-color .2s, filter .2s;
+}
+.btn-submit:hover {
+  filter: brightness(1.1);
+}
+.btn-submit:focus {
+  box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px var(--accent-color-empleados);
 }
-.btn-primary:hover { background-color: #1d4ed8; }

 .btn-secondary {
-  background-color: #e5e7eb; color: #374151; font-weight: 600;
-  padding: .75rem 1.5rem; border-radius: .375rem; border: 1px solid #d1d5db;
-  transition: background-color .2s;
+  /* Keeping secondary button less prominent, using general theme colors */
+  background-color: var(--secondary-color);
+  color: var(--text-color); /* Adjust if secondary-color is too dark for default text */
+  border: 1px solid var(--secondary-color);
+  transition: background-color .2s, filter .2s;
+}
+.btn-secondary:hover {
+  filter: brightness(0.9);
+}
+.btn-secondary:focus {
+  box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px var(--secondary-color);
 }
-.btn-secondary:hover { background-color: #d1d5db; }
 </style>
--- a/ui/src/views/empleados/EmpleadosIndex.vue
+++ b/ui/src/views/empleados/EmpleadosIndex.vue
@@ -6,7 +6,7 @@
        <h1 class="text-4xl font-bold text-gray-800">Gestión de Empleados</h1>
        <button
          @click="goToCreateEmployee"
-          class="px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition duration-150 ease-in-out"
+          class="create-button px-6 py-3 text-white font-semibold rounded-lg shadow-md focus:outline-none transition duration-150 ease-in-out"
        >
          <!-- ícono ➕ -->
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block mr-2" viewBox="0 0 20 20" fill="currentColor">
@@ -99,12 +99,15 @@ const { empleados }      = storeToRefs(empleadosStore);
 const employees = empleados;

 // --- helpers ---
-const btnClass = (view: 'card' | 'table') => [
-  'px-4 py-2 rounded-md text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2',
-  currentView.value === view
-    ? 'bg-blue-500 text-white shadow-sm focus:ring-blue-400'
-    : 'bg-gray-200 text-gray-700 hover:bg-gray-300 focus:ring-gray-400',
-];
+const btnClass = (view: 'card' | 'table') => {
+  const baseClasses = 'px-4 py-2 rounded-md text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2';
+  if (currentView.value === view) {
+    // Active button uses accent color
+    return `${baseClasses} text-white shadow-sm view-toggle-active`;
+  }
+  // Inactive button uses secondary/gray styling
+  return `${baseClasses} bg-gray-200 text-gray-700 hover:bg-gray-300 focus:ring-gray-400`;
+};

 // --- fetch inicial ---
 const fetchEmployees = async () => {
@@ -127,9 +130,25 @@ const goToCreateEmployee = () => router.push({ name: 'empleados-new' });
 </script>

 <style scoped>
-.min-h-screen { min-height: calc(100vh - var(--navbar-height, 0px)); }
-button.focus\:ring-blue-400:focus { box-shadow: 0 0 0 3px rgba(96, 165, 250, .5); }
-button.focus\:ring-gray-400:focus { box-shadow: 0 0 0 3px rgba(156, 163, 175, .5); }
+.min-h-screen { min-height: calc(100vh - var(--navbar-height, 0px)); } /* Assuming --navbar-height is defined elsewhere or adjust */
+
+.create-button {
+  background-color: var(--accent-color-empleados);
+}
+.create-button:hover {
+  filter: brightness(1.1);
+}
+.create-button:focus {
+  box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px var(--accent-color-empleados);
+}
+
+.view-toggle-active {
+  background-color: var(--accent-color-empleados);
+  /* For focus, assuming white text on accent. Adjust if needed. */
+  box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px var(--accent-color-empleados);
+}
+/* Inactive toggle button styling is handled by Tailwind classes directly in btnClass function */
+
 .view-enter-active, .view-leave-active { transition: opacity .3s ease; }
 .view-enter-from, .view-leave-to { opacity: 0; }
 </style>
--- a/ui/src/views/planillas/PlanillaForm.vue
+++ b/ui/src/views/planillas/PlanillaForm.vue
@@ -222,7 +222,7 @@ const handleCancel = () => {

 h2 {
  text-align: center;
-  color: #333;
+  color: var(--accent-color-planillas); /* Accent color for title */
  margin-bottom: 20px;
 }

@@ -243,19 +243,27 @@ h2 {
 .form-group select {
  width: 100%;
  padding: 10px;
-  border: 1px solid #ccc;
+  border: 1px solid var(--secondary-color); /* Theme border */
  border-radius: 4px;
  box-sizing: border-box;
+  background-color: var(--background-color); /* Theme background */
+  color: var(--text-color); /* Theme text */
+}
+.form-group input:focus,
+.form-group select:focus {
+  border-color: var(--accent-color-planillas);
+  box-shadow: 0 0 0 2px var(--accent-color-planillas);
+  outline: none;
 }

 .form-group select {
  appearance: none; 
-  background-color: white; 
+  /* background-color: white; */ /* Now uses var(--background-color) */
 }

 .error-message {
  display: block;
-  color: red;
+  color: var(--warning-color); /* Theme warning color */
  font-size: 0.9em;
  margin-top: 5px;
 }
@@ -273,32 +281,35 @@ h2 {
  border-radius: 4px;
  cursor: pointer;
  font-size: 1em;
+  transition: background-color 0.2s ease, filter 0.2s ease;
 }

 .form-actions button[type="submit"] {
-  background-color: #28a745; /* Green */
-  color: white;
+  background-color: var(--accent-color-planillas);
+  color: white; /* Assuming accent is dark enough */
 }

 .form-actions button[type="submit"]:hover {
-  background-color: #218838;
+  filter: brightness(0.9);
 }

 .form-actions button[type="submit"]:disabled {
-  background-color: #ccc;
+  background-color: var(--secondary-color);
+  opacity: 0.7;
  cursor: not-allowed;
 }

 .form-actions button[type="button"] {
-  background-color: #6c757d; /* Gray */
-  color: white;
+  background-color: var(--secondary-color);
+  color: var(--text-color); /* Ensure contrast */
 }

 .form-actions button[type="button"]:hover {
-  background-color: #5a6268;
+  filter: brightness(0.9);
 }
 .form-actions button[type="button"]:disabled {
-  background-color: #ccc;
+  background-color: var(--secondary-color);
+  opacity: 0.5;
  cursor: not-allowed;
 }
 </style>
--- a/ui/src/views/planillas/PlanillasIndex.vue
+++ b/ui/src/views/planillas/PlanillasIndex.vue
@@ -95,26 +95,26 @@ const handleEditPlanilla = (planillaId) => {
 }

 .page-header h1 {
-  color: #2c3e50; /* Darker, more neutral blue */
+  color: var(--accent-color-planillas); /* Accent for title */
  font-size: 2.2em;
  font-weight: 600;
 }

 .btn-create {
-  background-color: #3498db; /* Vibrant blue */
-  color: white;
+  background-color: var(--accent-color-planillas);
+  color: white; /* Assuming accent is dark enough */
  padding: 12px 18px;
  border: none;
  border-radius: 5px;
  font-size: 1em;
  font-weight: 500;
  cursor: pointer;
-  transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease;
+  transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease, filter 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 }

 .btn-create:hover {
-  background-color: #2980b9; /* Darker shade of vibrant blue */
+  filter: brightness(0.9);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
 }

--- a/ui/src/views/tareas/TareaForm.vue
+++ b/ui/src/views/tareas/TareaForm.vue
@@ -234,7 +234,7 @@ const handleCancel = () => {

 h2 {
  text-align: center;
-  color: #333;
+  color: var(--accent-color-tareas); /* Accent color for form title */
  margin-bottom: 25px;
 }

@@ -291,27 +291,37 @@ h2 {
 }

 .form-actions button[type="submit"] {
-  background-color: #2ecc71; 
+  background-color: var(--accent-color-tareas);
  color: white;
 }
 .form-actions button[type="submit"]:hover {
-  background-color: #27ae60; 
+  filter: brightness(0.9);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 }
 .form-actions button[type="submit"]:disabled {
-  background-color: #bdc3c7; 
+  background-color: var(--secondary-color); /* Use secondary for disabled */
+  opacity: 0.7;
  cursor: not-allowed;
 }

 .form-actions button[type="button"] {
-  background-color: #95a5a6; 
-  color: white;
+  background-color: var(--secondary-color); /* Use secondary for cancel */
+  color: var(--text-color); /* Ensure text contrasts with secondary */
 }
 .form-actions button[type="button"]:hover {
-  background-color: #7f8c8d; 
+  filter: brightness(0.9);
 }
 .form-actions button[type="button"]:disabled {
-  background-color: #bdc3c7;
+  background-color: var(--secondary-color);
+  opacity: 0.5;
  cursor: not-allowed;
 }
+
+/* Also update input focus color if not already using a global variable */
+.form-group input:focus,
+.form-group select:focus,
+.form-group textarea:focus {
+  border-color: var(--accent-color-tareas);
+  box-shadow: 0 0 0 2px var(--accent-color-tareas);
+}
 </style>
--- a/ui/src/views/tareas/TareasIndex.vue
+++ b/ui/src/views/tareas/TareasIndex.vue
@@ -89,13 +89,13 @@ const handleEditTarea = (tareaId) => {
 }

 .page-header h1 {
-  color: #333; 
+  color: var(--accent-color-tareas); /* Accent color for page title */
  font-size: 2em; 
  font-weight: 600;
 }

 .btn-create {
-  background-color: #5cb85c; 
+  background-color: var(--accent-color-tareas);
  color: white;
  padding: 12px 20px; 
  border: none;
@@ -103,12 +103,12 @@ const handleEditTarea = (tareaId) => {
  font-size: 1em;
  font-weight: 500;
  cursor: pointer;
-  transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease;
+  transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease, filter 0.2s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
 }

 .btn-create:hover {
-  background-color: #4cae4c; 
+  filter: brightness(0.9);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
 }