feat(ui): Add per-module configurable table background colors

This commit introduces the ability for you to customize the background
color of tables individually for each application module (Empleados,
Tareas, Planillas, Asistencias, Configuracion). This enhances user
experience by providing more granular control over the application's
appearance, similar to the existing per-module accent colors.

Key changes:

- **UI Store (`ui/src/stores/useUi.js`):**
    - Removed the previous single `tableBackgroundColor` state.
    - Added new state properties for each module's table background:
        - `tableBgColorEmpleados`
        - `tableBgColorTareas`
        - `tableBgColorPlanillas`
        - `tableBgColorAsistencias`
        - `tableBgColorConfiguracion`
    - These are included in `appearanceSettingKeys` for local storage
      persistence and initialized to `#FFFFFF` (white) by default.
    - Added corresponding actions (e.g., `setTableBgColorEmpleados`) for
      each new property.

- **Settings View (`ui/src/views/SettingsView.vue`):**
    - Removed the previous single global table background color input.
    - Added new color picker inputs for each module's table background
      color, integrated within the "Module Colors" section.
    - These inputs are bound to their respective store properties and
      actions.

- **Global Styles & Application (`ui/src/App.vue` & component styles):**
    - The previous global `--table-bg-color` CSS variable was removed.
    - `App.vue` now dynamically creates and updates CSS variables for each
      module's table background color on the root element (e.g.,
      `--table-bg-color-empleados`).
    - Table components within each module (e.g., `tablaAsistencias.vue`,
      `tablaEmpleados.vue`, etc.) have been updated to use their
      respective CSS variable for the `background-color` property,
      typically by applying it to a module-specific class on the table.

- **Reverted Previous Implementation:**
    - The initial implementation for a single, global table background
      color was reverted before implementing this per-module approach.

This feature allows for a more personalized and visually distinct
experience across different sections of the application.

ui/src/components/asistencias/tablaAsistencias.vue

@@ -94,6 +94,8 @@ const deleteAsistenciaInternal = async (id) => {
 }
 
 .tabla-asistencias {
+  /* Apply module-specific background color */
+  background-color: var(--table-bg-color-asistencias);
   width: 100%;
   border-collapse: collapse;
   margin-top: 1em;

ui/src/components/empleados/tablaEmpleados.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="overflow-x-auto bg-white shadow-md rounded-lg p-4">
-    <table class="min-w-full divide-y divide-gray-200">
+    <table class="min-w-full divide-y divide-gray-200 table-empleados">
       <thead class="bg-gray-50">
         <tr>
           <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
@@ -172,4 +172,8 @@ button:hover svg {
 .overflow-x-auto {
   border: 1px solid #e5e7eb; /* Tailwind's gray-200 */
 }
+
+table.table-empleados {
+  background-color: var(--table-bg-color-empleados);
+}
 </style>

ui/src/components/planillas/tablaPlanillas.vue

@@ -97,6 +97,7 @@ const deletePlanillaInternal = async (id) => {
 }
 
 .tabla-planillas {
+  background-color: var(--table-bg-color-planillas); /* Added */
   width: 100%;
   border-collapse: collapse;
   margin-top: 1em;

ui/src/components/tareas/tablaTareas.vue

@@ -99,6 +99,7 @@ const deleteTareaInternal = async (id) => {
 }
 
 .tabla-tareas {
+  background-color: var(--table-bg-color-tareas); /* Added */
   width: 100%;
   border-collapse: collapse;
   margin-top: 1em;