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/style.css

@@ -2,3 +2,48 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+:root {
+  --primary-color: #1976D2;
+  --secondary-color: #424242;
+  --warning-color: #FFC107;
+  --background-color: #FFFFFF;
+  --font-family: 'Roboto', sans-serif;
+  --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 {
+  --primary-color: #2196F3; /* Example dark theme primary */
+  --secondary-color: #757575; /* Example dark theme secondary */
+  --warning-color: #FFA000; /* Example dark theme warning */
+  --background-color: #303030; /* Dark theme background */
+  --text-color: #FFFFFF; /* Text color for dark theme */
+}
+
+/* Apply background and text color to the body for theme changes */
+body {
+  background-color: var(--background-color);
+  color: var(--text-color);
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.animations-disabled * {
+  transition: none !important;
+  animation: none !important;
+}
+
+/* Example of using a CSS variable */
+.some-component {
+  background-color: var(--primary-color);
+  font-family: var(--font-family);
+}