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