feat: Implement module-specific accent colors and enhance theme integration

This commit introduces module-specific accent colors and further integrates
the primary and secondary theme colors throughout the application's UI components.

Key features:
- Four new customizable accent colors, one for each main module:
    - Empleados
    - Tareas
    - Planillas
    - Asistencias
- These accent colors are configurable in the Settings view and persist in local storage.
- Broader application of global primary and secondary colors to common UI elements like navigation bars.
- Module-specific components now use their designated accent color for key visual elements (e.g., primary buttons, titles, icons, borders), providing better visual differentiation between modules.

Changes include:
- Extended `ui/src/stores/useUi.js` to manage state for the four new module accent colors, including actions and local storage persistence.
- Added a "Module Accent Colors" section with color pickers to `ui/src/views/SettingsView.vue`.
- Updated `ui/src/App.vue` to expose these module accent colors as CSS variables (e.g., `--accent-color-empleados`).
- Systematically updated styles in general UI components (`ui/src/components/ui/`) and all module-specific components (`ui/src/components/{module}/` and `ui/src/views/{module}/`) to utilize the new global and module-specific theme colors.
- Updated unit tests for `useUi.js` and component tests for `SettingsView.vue` to cover the new accent color functionality. A bug related to color input event handling in `SettingsView.vue` was identified and fixed during this process.

This enhancement provides a more visually distinct and customizable experience across different sections of the application.

ui/src/App.vue

@@ -1,8 +1,41 @@
 <script setup>
+import { watchEffect } from 'vue'
 import TopBar from '@/components/ui/TopBar.vue'
 import NavBar from '@/components/ui/NavBar.vue'
 import { useUi } from '@/stores/useUi'
+
 const ui = useUi()
+
+watchEffect(() => {
+  const root = document.documentElement
+
+  root.style.setProperty('--primary-color', ui.primaryColor)
+  root.style.setProperty('--secondary-color', ui.secondaryColor)
+  root.style.setProperty('--warning-color', ui.warningColor)
+  root.style.setProperty('--background-color', ui.backgroundColor)
+  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')
+  } else {
+    root.classList.add('theme-light')
+    root.classList.remove('theme-dark')
+  }
+
+  if (ui.animationsEnabled) {
+    root.classList.remove('animations-disabled')
+  } else {
+    root.classList.add('animations-disabled')
+  }
+})
 </script>
 
 <template>
@@ -10,7 +43,13 @@ const ui = useUi()
   <TopBar />
 
   <!-- wrapper: deja espacio para TopBar (pt-14 = 56px) y, en desktop, para NavBar (pl-60) -->
-  <div :class="['pt-14 min-h-screen bg-gray-100 text-gray-900 transition-[padding-left] duration-200', ui.sidebarOpen ? 'md:pl-60' : '']">
+  <div :class="[
+    'pt-14 min-h-screen transition-[padding-left] duration-200',
+    ui.sidebarOpen ? 'md:pl-60' : '',
+    // The global style.css will handle base background and text color via body styling
+    // but we can keep specific overrides here if needed or theme classes.
+    // ui.theme === 'dark' ? 'bg-gray-800 text-gray-100' : 'bg-gray-100 text-gray-900'
+  ]">
     <!-- NavBar fija -->
     <NavBar />
 
@@ -21,4 +60,7 @@ const ui = useUi()
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+/* Scoped styles remain, global styles are in style.css */
+/* We can add specific App.vue styling here if needed, that doesn't rely on theme variables directly */
+</style>