feat: Add accent color customization for configuracion module

This commit introduces a new accent color setting for the 'configuracion' module.

Changes include:
- Updated `ui/src/stores/useUi.js` to include:
    - A new state property `accentColorConfiguracion`.
    - Addition of `'accentColorConfiguracion'` to `appearanceSettingKeys` for local storage persistence.
    - A new action `setAccentColorConfiguracion` to modify the new color.
- Updated `ui/src/views/SettingsView.vue` to include:
    - A new color picker in the "Module Accent Colors" section, allowing you to select and change the accent color for the 'configuracion' module.

ui/src/stores/useUi.js

@@ -16,6 +16,7 @@ const appearanceSettingKeys = [
   'accentColorTareas',
   'accentColorPlanillas',
   'accentColorAsistencias',
+  'accentColorConfiguracion',
 ]
 
 const loadSettingsFromLocalStorage = () => {
@@ -76,6 +77,7 @@ export const useUi = defineStore('ui', {
       accentColorTareas: '#4CAF50',     // Green
       accentColorPlanillas: '#FF9800',  // Orange
       accentColorAsistencias: '#E91E63', // Pink
+      accentColorConfiguracion: '#607D8B', // Blue Grey
     }
 
     const loadedSettings = loadSettingsFromLocalStorage()
@@ -157,6 +159,10 @@ export const useUi = defineStore('ui', {
     setAccentColorAsistencias(color) {
       this.accentColorAsistencias = color
       _saveAppearanceState(this)
+    },
+    setAccentColorConfiguracion(color) {
+      this.accentColorConfiguracion = color
+      _saveAppearanceState(this)
     }
   },
 })

ui/src/views/SettingsView.vue

@@ -94,6 +94,11 @@
           <input type="color" id="accentColorAsistencias" v-model="ui.accentColorAsistencias" @input="ui.setAccentColorAsistencias($event.target.value)"
                  class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
         </div>
+        <div class="setting-item">
+          <label for="accentColorConfiguracion" class="block text-sm font-medium mb-1">Configuracion Accent</label>
+          <input type="color" id="accentColorConfiguracion" v-model="ui.accentColorConfiguracion" @input="ui.setAccentColorConfiguracion($event.target.value)"
+                 class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
+        </div>
       </div>
     </section>