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/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 {

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) */