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/SettingsView.vue

@@ -1 +1,180 @@
-<template></template>
+<template>
+  <div class="settings-view p-4 md:p-8 max-w-4xl mx-auto text-[var(--text-color)] bg-[var(--background-color)] transition-opacity duration-500 ease-in-out opacity-0"
+       :class="{ 'opacity-100': isMounted }">
+
+    <h1 class="text-3xl md:text-4xl font-bold mb-8 border-b pb-4 border-[var(--secondary-color)]">Appearance Settings</h1>
+
+    <!-- General Settings Section -->
+    <section class="mb-10">
+      <h2 class="text-2xl font-semibold mb-6 text-[var(--primary-color)]">General</h2>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-center">
+        <div class="setting-item">
+          <label for="theme" class="block text-sm font-medium mb-1">Theme</label>
+          <select id="theme" v-model="ui.theme" @change="ui.setTheme($event.target.value)"
+                  class="w-full p-3 border rounded-lg shadow-sm focus:ring-[var(--primary-color)] focus:border-[var(--primary-color)] transition-all duration-150 ease-in-out bg-white/10 dark:bg-black/10 border-[var(--secondary-color)] hover:border-[var(--primary-color)]">
+            <option value="light">Light</option>
+            <option value="dark">Dark</option>
+          </select>
+        </div>
+        <div class="setting-item flex items-center justify-between mt-4 md:mt-0 md:pt-6">
+          <label for="animationsEnabled" class="text-sm font-medium">Enable Animations</label>
+          <input type="checkbox" id="animationsEnabled" v-model="ui.animationsEnabled" @change="ui.setAnimationsEnabled($event.target.checked)"
+                 class="custom-checkbox relative w-10 h-5 appearance-none bg-gray-300 dark:bg-gray-600 rounded-full cursor-pointer transition-colors duration-300 ease-in-out checked:bg-[var(--primary-color)] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[var(--primary-color)] focus:ring-offset-[var(--background-color)]">
+        </div>
+      </div>
+    </section>
+
+    <!-- Colors Section -->
+    <section class="mb-10">
+      <h2 class="text-2xl font-semibold mb-6 text-[var(--primary-color)]">Color Palette</h2>
+      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+        <div class="setting-item">
+          <label for="primaryColor" class="block text-sm font-medium mb-1">Primary Color</label>
+          <input type="color" id="primaryColor" v-model="ui.primaryColor" @input="ui.setPrimaryColor($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="secondaryColor" class="block text-sm font-medium mb-1">Secondary Color</label>
+          <input type="color" id="secondaryColor" v-model="ui.secondaryColor" @input="ui.setSecondaryColor($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="warningColor" class="block text-sm font-medium mb-1">Warning Color</label>
+          <input type="color" id="warningColor" v-model="ui.warningColor" @input="ui.setWarningColor($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="backgroundColor" class="block text-sm font-medium mb-1">Background Color</label>
+          <input type="color" id="backgroundColor" v-model="ui.backgroundColor" @input="ui.setBackgroundColor($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>
+
+    <!-- Typography Section -->
+    <section>
+      <h2 class="text-2xl font-semibold mb-6 text-[var(--primary-color)]">Typography</h2>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div class="setting-item">
+          <label for="fontFamily" class="block text-sm font-medium mb-1">Font Family</label>
+          <input type="text" id="fontFamily" v-model="ui.fontFamily" @input="ui.setFontFamily($event.target.value)"
+                 class="w-full p-3 border rounded-lg shadow-sm focus:ring-[var(--primary-color)] focus:border-[var(--primary-color)] transition-all duration-150 ease-in-out bg-white/10 dark:bg-black/10 border-[var(--secondary-color)] hover:border-[var(--primary-color)]"
+                 placeholder="e.g., Roboto, sans-serif">
+        </div>
+        <div class="setting-item">
+          <label for="fontSize" class="block text-sm font-medium mb-1">Base Font Size (px)</label>
+          <input type="number" id="fontSize" v-model.number="ui.fontSize" @input="ui.setFontSize(Number($event.target.value))"
+                 class="w-full p-3 border rounded-lg shadow-sm focus:ring-[var(--primary-color)] focus:border-[var(--primary-color)] transition-all duration-150 ease-in-out bg-white/10 dark:bg-black/10 border-[var(--secondary-color)] hover:border-[var(--primary-color)]"
+                 min="8" max="32" step="1">
+        </div>
+      </div>
+    </section>
+
+    <!-- Module Accent Colors Section -->
+    <section class="mb-10"> <!-- Changed from no margin to mb-10 for consistency -->
+      <h2 class="text-2xl font-semibold mb-6 text-[var(--primary-color)]">Module Accent Colors</h2>
+      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+        <div class="setting-item">
+          <label for="accentColorEmpleados" class="block text-sm font-medium mb-1">Empleados Accent</label>
+          <input type="color" id="accentColorEmpleados" v-model="ui.accentColorEmpleados" @input="ui.setAccentColorEmpleados($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="accentColorTareas" class="block text-sm font-medium mb-1">Tareas Accent</label>
+          <input type="color" id="accentColorTareas" v-model="ui.accentColorTareas" @input="ui.setAccentColorTareas($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="accentColorPlanillas" class="block text-sm font-medium mb-1">Planillas Accent</label>
+          <input type="color" id="accentColorPlanillas" v-model="ui.accentColorPlanillas" @input="ui.setAccentColorPlanillas($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="accentColorAsistencias" class="block text-sm font-medium mb-1">Asistencias Accent</label>
+          <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>
+    </section>
+
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useUi } from '@/stores/useUi'
+
+const ui = useUi()
+const isMounted = ref(false)
+
+onMounted(() => {
+  // Slight delay to allow transition to be visible
+  setTimeout(() => {
+    isMounted.value = true
+  }, 50)
+})
+</script>
+
+<style scoped>
+.settings-view {
+  /* display: flex; */ /* Replaced by Tailwind max-w-4xl mx-auto and sectioning */
+  /* flex-direction: column; */
+  /* gap: 1rem; */ /* Handled by margins on sections/items */
+  /* padding: 1rem; */ /* Replaced by p-4 md:p-8 on the root div */
+}
+
+.setting-item { /* New class for spacing, can replace .setting if desired */
+  /* @apply mb-4 md:mb-0; */ /* Add some bottom margin on mobile - Temporarily commented out for testing */
+}
+
+/* Old .setting class and general label styling are no longer needed as Tailwind utilities are used per element. */
+/*
+.setting {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+label {
+  font-weight: bold;
+}
+*/
+
+/* Custom styling for color inputs to ensure the color preview is visible */
+input[type="color"]::-webkit-color-swatch-wrapper {
+  padding: 0; /* Remove default padding to make color fill the input */
+}
+input[type="color"]::-webkit-color-swatch {
+  border: none; /* Remove default border */
+  border-radius: 0.375rem; /* Tailwind's rounded-md */
+}
+/* For Firefox */
+input[type="color"]::-moz-color-swatch {
+  border: none;
+  border-radius: 0.375rem;
+}
+
+/* Custom checkbox style */
+.custom-checkbox::before {
+  content: "";
+  /* @apply absolute top-1/2 left-0.5 w-4 h-4 bg-white rounded-full shadow transform -translate-y-1/2 transition-transform duration-300 ease-in-out; */
+  /* Basic styles to allow tests to pass, actual style handled by Tailwind if processed */
+  position: absolute;
+  top: 50%;
+  left: 0.125rem; /* Corresponds to left-0.5 in Tailwind */
+  width: 1rem; /* w-4 */
+  height: 1rem; /* h-4 */
+  background-color: white;
+  border-radius: 9999px; /* rounded-full */
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06); /* shadow */
+  transform: translateY(-50%);
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+}
+.custom-checkbox:checked::before {
+  /* @apply translate-x-5; */ /* Moves the toggle to the right */
+  transform: translateY(-50%) translateX(1.25rem); /* translate-x-5 (1.25rem for 20px) */
+}
+</style>

ui/src/views/__tests__/SettingsView.spec.js

@@ -0,0 +1,217 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import { useUi } from '../../stores/useUi' // Adjust path
+import SettingsView from '../SettingsView.vue' // Adjust path
+
+// Helper to create a fresh store for each test or group
+const getFreshStore = () => {
+  setActivePinia(createPinia())
+  return useUi()
+}
+
+describe('SettingsView.vue', () => {
+  // No global 'store' variable here, it will be test-specific or wrapper-specific
+
+  beforeEach(() => {
+    // Ensure a fresh Pinia instance is active for each test.
+    setActivePinia(createPinia())
+
+    // Clear localStorage mock before each test
+    // Note: The mock itself is defined globally in this file or via setupFiles in Vitest config.
+    // Re-stubbing it or ensuring its state is clean.
+    const localStorageMock = window.localStorage; // Assuming it's already stubbed globally by Vitest setup or top of file
+    localStorageMock.clear();
+    if (localStorageMock.setItem.mockClear) { // vi.fn() specific
+        localStorageMock.setItem.mockClear();
+        localStorageMock.getItem.mockClear();
+    }
+  })
+
+  // createWrapper now also handles store creation and returns the store for spying if needed
+  const createWrapperAndStore = (initialStoreState = {}) => {
+    if (Object.keys(initialStoreState).length > 0) {
+        localStorage.setItem('appearanceSettings', JSON.stringify(initialStoreState));
+    }
+
+    const currentStore = useUi(); // Store is created AFTER localStorage is set for this test
+
+    const wrapper = mount(SettingsView, {
+      global: {
+        // Pinia is active via setActivePinia, component should pick it up
+      },
+    });
+    return { wrapper, store: currentStore }; // Return store for spying
+  }
+
+  it('renders all input elements with initial values from store', () => {
+    const { wrapper } = createWrapperAndStore({ // Store is created inside here after LS mock
+        primaryColor: '#111111',
+        secondaryColor: '#222222',
+        warningColor: '#333333',
+        backgroundColor: '#444444',
+        fontFamily: 'Arial',
+        fontSize: 18,
+        animationsEnabled: false,
+        theme: 'dark',
+        // Add new accent colors for comprehensive initial state testing
+        accentColorEmpleados: '#123456',
+        accentColorTareas: '#654321',
+        accentColorPlanillas: '#abcdef',
+        accentColorAsistencias: '#fedcba',
+    })
+
+    // Check general appearance settings
+    expect(wrapper.find('input#primaryColor').element.value).toBe('#111111')
+    expect(wrapper.find('input#secondaryColor').element.value).toBe('#222222')
+    expect(wrapper.find('input#warningColor').element.value).toBe('#333333')
+    expect(wrapper.find('input#backgroundColor').element.value).toBe('#444444')
+    expect(wrapper.find('input#fontFamily').element.value).toBe('Arial')
+    expect(wrapper.find('input#fontSize').element.value).toBe('18')
+    expect(wrapper.find('input#animationsEnabled').element.checked).toBe(false)
+    expect(wrapper.find('select#theme').element.value).toBe('dark')
+
+    // Check new module accent color pickers
+    const h2Elements = wrapper.findAll('h2')
+    const sectionTitles = h2Elements.map(h => h.text())
+    expect(sectionTitles).toContain('Module Accent Colors')
+    expect(wrapper.find('input#accentColorEmpleados').element.value).toBe('#123456')
+    expect(wrapper.find('input#accentColorTareas').element.value).toBe('#654321')
+    expect(wrapper.find('input#accentColorPlanillas').element.value).toBe('#abcdef')
+    expect(wrapper.find('input#accentColorAsistencias').element.value).toBe('#fedcba')
+  })
+
+  it('calls setPrimaryColor action when primary color input changes', async () => {
+    const { wrapper, store } = createWrapperAndStore()
+    const spy = vi.spyOn(store, 'setPrimaryColor')
+    const colorInput = wrapper.find('input#primaryColor')
+
+    colorInput.element.value = '#FF00FF'
+    await colorInput.trigger('input')
+
+    expect(spy).toHaveBeenCalledWith('#ff00ff')
+  })
+
+  it('calls setFontFamily action when font family input changes', async () => {
+    const { wrapper, store } = createWrapperAndStore()
+    const spy = vi.spyOn(store, 'setFontFamily')
+    const input = wrapper.find('input#fontFamily')
+    await input.setValue('Helvetica')
+    expect(spy).toHaveBeenCalledWith('Helvetica')
+  })
+
+  it('calls setFontSize action when font size input changes', async () => {
+    const { wrapper, store } = createWrapperAndStore()
+    const spy = vi.spyOn(store, 'setFontSize')
+    const input = wrapper.find('input#fontSize')
+    await input.setValue('22')
+    expect(spy).toHaveBeenCalledWith(22)
+  })
+
+  it('calls setAnimationsEnabled action when animations checkbox changes', async () => {
+    const { wrapper, store } = createWrapperAndStore({ animationsEnabled: true })
+    const spy = vi.spyOn(store, 'setAnimationsEnabled')
+    const checkbox = wrapper.find('input#animationsEnabled')
+
+    await checkbox.setChecked(false)
+
+    expect(spy).toHaveBeenCalledWith(false)
+  })
+
+  it('calls setTheme action when theme select changes', async () => {
+    const { wrapper, store } = createWrapperAndStore()
+    const spy = vi.spyOn(store, 'setTheme')
+    const select = wrapper.find('select#theme')
+    await select.setValue('dark')
+    expect(spy).toHaveBeenCalledWith('dark')
+  })
+
+  // New tests for module accent color pickers
+  it('calls setAccentColorEmpleados action when empleados accent color input changes', async () => {
+    const { wrapper, store } = createWrapperAndStore()
+    const spy = vi.spyOn(store, 'setAccentColorEmpleados')
+    const colorInput = wrapper.find('input#accentColorEmpleados')
+    colorInput.element.value = '#aabbcc'
+    await colorInput.trigger('input')
+    expect(spy).toHaveBeenCalledWith('#aabbcc')
+  })
+
+  it('calls setAccentColorTareas action when tareas accent color input changes', async () => {
+    const { wrapper, store } = createWrapperAndStore()
+    const spy = vi.spyOn(store, 'setAccentColorTareas')
+    const colorInput = wrapper.find('input#accentColorTareas')
+    colorInput.element.value = '#ccbbaa'
+    await colorInput.trigger('input')
+    expect(spy).toHaveBeenCalledWith('#ccbbaa')
+  })
+
+  it('calls setAccentColorPlanillas action when planillas accent color input changes', async () => {
+    const { wrapper, store } = createWrapperAndStore()
+    const spy = vi.spyOn(store, 'setAccentColorPlanillas')
+    const colorInput = wrapper.find('input#accentColorPlanillas')
+    colorInput.element.value = '#a1b2c3'
+    await colorInput.trigger('input')
+    expect(spy).toHaveBeenCalledWith('#a1b2c3')
+  })
+
+  it('calls setAccentColorAsistencias action when asistencias accent color input changes', async () => {
+    const { wrapper, store } = createWrapperAndStore()
+    const spy = vi.spyOn(store, 'setAccentColorAsistencias')
+    const colorInput = wrapper.find('input#accentColorAsistencias')
+    colorInput.element.value = '#c3b2a1'
+    await colorInput.trigger('input')
+    expect(spy).toHaveBeenCalledWith('#c3b2a1')
+  })
+
+  it('updates input values when store state changes programmatically', async () => {
+    const { wrapper, store } = createWrapperAndStore() // Store instance for this test
+
+    // Test primaryColor
+    store.primaryColor = '#001122' // Directly manipulate the store used by the component
+    await wrapper.vm.$nextTick() // Wait for Vue to react to state change
+    expect(wrapper.find('input#primaryColor').element.value).toBe('#001122')
+
+    // Test fontFamily
+    store.fontFamily = 'Verdana'
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('input#fontFamily').element.value).toBe('Verdana')
+
+    // Test fontSize
+    store.fontSize = 12
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('input#fontSize').element.value).toBe('12')
+
+    // Test animationsEnabled
+    store.animationsEnabled = false
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('input#animationsEnabled').element.checked).toBe(false)
+
+    // Test theme
+    store.theme = 'dark'
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('select#theme').element.value).toBe('dark')
+
+    // Test one of the new accent colors
+    store.accentColorEmpleados = '#998877'
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('input#accentColorEmpleados').element.value).toBe('#998877')
+  })
+
+  // Test for the initial fade-in animation - checking class
+  it('applies opacity transition class after mount', async () => {
+    // Mock setTimeout to control its execution
+    vi.useFakeTimers()
+
+    const { wrapper } = createWrapperAndStore() // Use the new function name
+    expect(wrapper.find('.settings-view').classes()).not.toContain('opacity-100')
+
+    // Advance timers by the amount used in setTimeout in SettingsView.vue (50ms)
+    vi.advanceTimersByTime(100) // Advance a bit more to be sure
+    await wrapper.vm.$nextTick() // Allow Vue to re-render
+
+    expect(wrapper.find('.settings-view').classes()).toContain('opacity-100')
+
+    vi.useRealTimers() // Restore real timers
+  })
+
+})

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>

ui/src/views/asistencias/AsistenciasIndex.vue

@@ -89,26 +89,26 @@ const handleEditAsistencia = (asistenciaId) => {
 }
 
 .page-header h1 {
-  color: #212529; 
+  color: var(--accent-color-asistencias); /* Accent color for title */
   font-size: 1.8em; 
   font-weight: 600;
 }
 
 .btn-create {
-  background-color: #17a2b8; /* Info Blue */
-  color: white;
+  background-color: var(--accent-color-asistencias);
+  color: white; /* Assuming accent is dark enough */
   padding: 10px 18px; 
   border: none;
   border-radius: 5px;
   font-size: 1em;
   font-weight: 500;
   cursor: pointer;
-  transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease;
+  transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease, filter 0.2s ease;
   box-shadow: 0 2px 5px rgba(0,0,0,0.1);
 }
 
 .btn-create:hover {
-  background-color: #138496; 
+  filter: brightness(0.9);
   box-shadow: 0 4px 8px rgba(0,0,0,0.15);
 }
 

ui/src/views/empleados/EmpleadoForm.vue

@@ -19,8 +19,8 @@
           v-model="form.name"
           type="text"
           required
-          class="w-full px-4 py-2 border border-gray-300 rounded-md
-                 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          class="form-input w-full px-4 py-2 border border-gray-300 rounded-md
+                 focus:outline-none"
           placeholder="Ej: Juan Pérez"
         />
       </div>
@@ -36,8 +36,8 @@
           v-model="form.cedula"
           type="number"
           required
-          class="w-full px-4 py-2 border border-gray-300 rounded-md
-                 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          class="form-input w-full px-4 py-2 border border-gray-300 rounded-md
+                 focus:outline-none"
           placeholder="Ej: 123456789"
         />
       </div>
@@ -52,8 +52,8 @@
           id="ubicacion"
           v-model="form.ubicacion"
           type="text"
-          class="w-full px-4 py-2 border border-gray-300 rounded-md
-                 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          class="form-input w-full px-4 py-2 border border-gray-300 rounded-md
+                 focus:outline-none"
           placeholder="Ej: Oficina Principal"
         />
       </div>
@@ -68,8 +68,8 @@
           id="grupo_estudio"
           v-model="form.grupo_estudio"
           type="text"
-          class="w-full px-4 py-2 border border-gray-300 rounded-md
-                 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          class="form-input w-full px-4 py-2 border border-gray-300 rounded-md
+                 focus:outline-none"
           placeholder="Ej: Grupo A"
         />
       </div>
@@ -84,8 +84,8 @@
           id="avatar_url"
           v-model="form.avatar_url"
           type="url"
-          class="w-full px-4 py-2 border border-gray-300 rounded-md
-                 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          class="form-input w-full px-4 py-2 border border-gray-300 rounded-md
+                 focus:outline-none"
           placeholder="Ej: https://example.com/avatar.png"
         />
       </div>
@@ -100,8 +100,8 @@
           id="telefono"
           v-model="form.telefono"
           type="tel"
-          class="w-full px-4 py-2 border border-gray-300 rounded-md
-                 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          class="form-input w-full px-4 py-2 border border-gray-300 rounded-md
+                 focus:outline-none"
           placeholder="Ej: 0991234567"
         />
       </div>
@@ -116,8 +116,8 @@
           id="idciat"
           v-model="form.idciat"
           type="text"
-          class="w-full px-4 py-2 border border-gray-300 rounded-md
-                 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          class="form-input w-full px-4 py-2 border border-gray-300 rounded-md
+                 focus:outline-none"
           placeholder="Ej: CIAT123"
         />
       </div>
@@ -127,16 +127,15 @@
         <button
           type="button"
           @click="handleCancel"
-          class="mr-4 px-6 py-2 text-gray-700 border border-gray-300 rounded-md
+          class="btn-secondary mr-4 px-6 py-2 text-gray-700 border border-gray-300 rounded-md
                  hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-400"
         >
           Cancelar
         </button>
         <button
           type="submit"
-          class="px-6 py-2 bg-blue-600 text-white font-semibold rounded-md
-                 hover:bg-blue-700 focus:outline-none focus:ring-2
-                 focus:ring-blue-500 focus:ring-offset-2"
+          class="btn-submit px-6 py-2 text-white font-semibold rounded-md
+                 focus:outline-none focus:ring-2 focus:ring-offset-2"
         >
           {{ isEditMode ? 'Actualizar' : 'Crear' }}
         </button>
@@ -234,39 +233,53 @@ const handleCancel = () => {
 <style scoped>
 /* --- Validación rápida de inputs requeridos --- */
 input:required:invalid {
-  border-color: #e53e3e; /* red-600 */
+  border-color: var(--warning-color); /* Using warning color for invalid fields */
 }
 
-/* --- Focus global para inputs y botones --- */
-input:focus,
-button:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #3b82f6; /* blue-500 */
-}
+/* Removing generic input:focus, button:focus as they are too broad */
 
 /* --- Look & feel extra (opcional, podés ajustar) --- */
-.form-container { background-color: #f9fafb; } /* gray-50 */
+.form-container { background-color: var(--background-color); } /* Use theme background */
 .form-card      { box-shadow: 0 10px 15px -3px rgba(0,0,0,.1),
                             0 4px 6px -2px rgba(0,0,0,.05); }
 
-.form-title   { color: #1f2937; } /* gray-800 */
-.form-label   { color: #374151; font-weight: 600; } /* gray-700 */
-.form-input   { border-color: #d1d5db; transition: border-color .2s, box-shadow .2s; }
+.form-title   { color: var(--text-color); } /* Use theme text color */
+.form-label   { color: var(--text-color); font-weight: 600; } /* Use theme text color */
+
+.form-input   {
+  border-color: var(--secondary-color); /* Use secondary for border */
+  background-color: var(--background-color); /* Ensure inputs match theme background */
+  color: var(--text-color); /* Ensure input text matches theme text */
+  transition: border-color .2s, box-shadow .2s;
+}
 .form-input:focus {
-  border-color: #2563eb; /* blue-600 */
-  box-shadow: 0 0 0 3px rgba(59,130,246,.5);
+  outline: none;
+  border-color: var(--accent-color-empleados); /* Accent color for focus border */
+  box-shadow: 0 0 0 2px var(--accent-color-empleados); /* Accent color for focus ring */
 }
 
-.btn-primary {
-  background-color: #2563eb; color: #fff; font-weight: 600;
-  padding: .75rem 1.5rem; border-radius: .375rem; transition: background-color .2s;
+.btn-submit {
+  background-color: var(--accent-color-empleados);
+  transition: background-color .2s, filter .2s;
+}
+.btn-submit:hover {
+  filter: brightness(1.1);
+}
+.btn-submit:focus {
+  box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px var(--accent-color-empleados);
 }
-.btn-primary:hover { background-color: #1d4ed8; }
 
 .btn-secondary {
-  background-color: #e5e7eb; color: #374151; font-weight: 600;
-  padding: .75rem 1.5rem; border-radius: .375rem; border: 1px solid #d1d5db;
-  transition: background-color .2s;
+  /* Keeping secondary button less prominent, using general theme colors */
+  background-color: var(--secondary-color);
+  color: var(--text-color); /* Adjust if secondary-color is too dark for default text */
+  border: 1px solid var(--secondary-color);
+  transition: background-color .2s, filter .2s;
+}
+.btn-secondary:hover {
+  filter: brightness(0.9);
+}
+.btn-secondary:focus {
+  box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px var(--secondary-color);
 }
-.btn-secondary:hover { background-color: #d1d5db; }
 </style>

ui/src/views/empleados/EmpleadosIndex.vue

@@ -6,7 +6,7 @@
         <h1 class="text-4xl font-bold text-gray-800">Gestión de Empleados</h1>
         <button
           @click="goToCreateEmployee"
-          class="px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition duration-150 ease-in-out"
+          class="create-button px-6 py-3 text-white font-semibold rounded-lg shadow-md focus:outline-none transition duration-150 ease-in-out"
         >
           <!-- ícono ➕ -->
           <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block mr-2" viewBox="0 0 20 20" fill="currentColor">
@@ -99,12 +99,15 @@ const { empleados }      = storeToRefs(empleadosStore);
 const employees = empleados;
 
 // --- helpers ---
-const btnClass = (view: 'card' | 'table') => [
-  'px-4 py-2 rounded-md text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2',
-  currentView.value === view
-    ? 'bg-blue-500 text-white shadow-sm focus:ring-blue-400'
-    : 'bg-gray-200 text-gray-700 hover:bg-gray-300 focus:ring-gray-400',
-];
+const btnClass = (view: 'card' | 'table') => {
+  const baseClasses = 'px-4 py-2 rounded-md text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2';
+  if (currentView.value === view) {
+    // Active button uses accent color
+    return `${baseClasses} text-white shadow-sm view-toggle-active`;
+  }
+  // Inactive button uses secondary/gray styling
+  return `${baseClasses} bg-gray-200 text-gray-700 hover:bg-gray-300 focus:ring-gray-400`;
+};
 
 // --- fetch inicial ---
 const fetchEmployees = async () => {
@@ -127,9 +130,25 @@ const goToCreateEmployee = () => router.push({ name: 'empleados-new' });
 </script>
 
 <style scoped>
-.min-h-screen { min-height: calc(100vh - var(--navbar-height, 0px)); }
-button.focus\:ring-blue-400:focus { box-shadow: 0 0 0 3px rgba(96, 165, 250, .5); }
-button.focus\:ring-gray-400:focus { box-shadow: 0 0 0 3px rgba(156, 163, 175, .5); }
+.min-h-screen { min-height: calc(100vh - var(--navbar-height, 0px)); } /* Assuming --navbar-height is defined elsewhere or adjust */
+
+.create-button {
+  background-color: var(--accent-color-empleados);
+}
+.create-button:hover {
+  filter: brightness(1.1);
+}
+.create-button:focus {
+  box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px var(--accent-color-empleados);
+}
+
+.view-toggle-active {
+  background-color: var(--accent-color-empleados);
+  /* For focus, assuming white text on accent. Adjust if needed. */
+  box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px var(--accent-color-empleados);
+}
+/* Inactive toggle button styling is handled by Tailwind classes directly in btnClass function */
+
 .view-enter-active, .view-leave-active { transition: opacity .3s ease; }
 .view-enter-from, .view-leave-to { opacity: 0; }
 </style>

ui/src/views/planillas/PlanillaForm.vue

@@ -222,7 +222,7 @@ const handleCancel = () => {
 
 h2 {
   text-align: center;
-  color: #333;
+  color: var(--accent-color-planillas); /* Accent color for title */
   margin-bottom: 20px;
 }
 
@@ -243,19 +243,27 @@ h2 {
 .form-group select {
   width: 100%;
   padding: 10px;
-  border: 1px solid #ccc;
+  border: 1px solid var(--secondary-color); /* Theme border */
   border-radius: 4px;
   box-sizing: border-box;
+  background-color: var(--background-color); /* Theme background */
+  color: var(--text-color); /* Theme text */
+}
+.form-group input:focus,
+.form-group select:focus {
+  border-color: var(--accent-color-planillas);
+  box-shadow: 0 0 0 2px var(--accent-color-planillas);
+  outline: none;
 }
 
 .form-group select {
   appearance: none; 
-  background-color: white; 
+  /* background-color: white; */ /* Now uses var(--background-color) */
 }
 
 .error-message {
   display: block;
-  color: red;
+  color: var(--warning-color); /* Theme warning color */
   font-size: 0.9em;
   margin-top: 5px;
 }
@@ -273,32 +281,35 @@ h2 {
   border-radius: 4px;
   cursor: pointer;
   font-size: 1em;
+  transition: background-color 0.2s ease, filter 0.2s ease;
 }
 
 .form-actions button[type="submit"] {
-  background-color: #28a745; /* Green */
-  color: white;
+  background-color: var(--accent-color-planillas);
+  color: white; /* Assuming accent is dark enough */
 }
 
 .form-actions button[type="submit"]:hover {
-  background-color: #218838;
+  filter: brightness(0.9);
 }
 
 .form-actions button[type="submit"]:disabled {
-  background-color: #ccc;
+  background-color: var(--secondary-color);
+  opacity: 0.7;
   cursor: not-allowed;
 }
 
 .form-actions button[type="button"] {
-  background-color: #6c757d; /* Gray */
-  color: white;
+  background-color: var(--secondary-color);
+  color: var(--text-color); /* Ensure contrast */
 }
 
 .form-actions button[type="button"]:hover {
-  background-color: #5a6268;
+  filter: brightness(0.9);
 }
 .form-actions button[type="button"]:disabled {
-  background-color: #ccc;
+  background-color: var(--secondary-color);
+  opacity: 0.5;
   cursor: not-allowed;
 }
 </style>

ui/src/views/planillas/PlanillasIndex.vue

@@ -95,26 +95,26 @@ const handleEditPlanilla = (planillaId) => {
 }
 
 .page-header h1 {
-  color: #2c3e50; /* Darker, more neutral blue */
+  color: var(--accent-color-planillas); /* Accent for title */
   font-size: 2.2em;
   font-weight: 600;
 }
 
 .btn-create {
-  background-color: #3498db; /* Vibrant blue */
-  color: white;
+  background-color: var(--accent-color-planillas);
+  color: white; /* Assuming accent is dark enough */
   padding: 12px 18px;
   border: none;
   border-radius: 5px;
   font-size: 1em;
   font-weight: 500;
   cursor: pointer;
-  transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease;
+  transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease, filter 0.2s ease;
   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 }
 
 .btn-create:hover {
-  background-color: #2980b9; /* Darker shade of vibrant blue */
+  filter: brightness(0.9);
   box-shadow: 0 4px 8px rgba(0,0,0,0.15);
 }
 

ui/src/views/tareas/TareaForm.vue

@@ -234,7 +234,7 @@ const handleCancel = () => {
 
 h2 {
   text-align: center;
-  color: #333;
+  color: var(--accent-color-tareas); /* Accent color for form title */
   margin-bottom: 25px;
 }
 
@@ -291,27 +291,37 @@ h2 {
 }
 
 .form-actions button[type="submit"] {
-  background-color: #2ecc71; 
+  background-color: var(--accent-color-tareas);
   color: white;
 }
 .form-actions button[type="submit"]:hover {
-  background-color: #27ae60; 
+  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); /* Use secondary for disabled */
+  opacity: 0.7;
   cursor: not-allowed;
 }
 
 .form-actions button[type="button"] {
-  background-color: #95a5a6; 
-  color: white;
+  background-color: var(--secondary-color); /* Use secondary for cancel */
+  color: var(--text-color); /* Ensure text contrasts with secondary */
 }
 .form-actions button[type="button"]:hover {
-  background-color: #7f8c8d; 
+  filter: brightness(0.9);
 }
 .form-actions button[type="button"]:disabled {
-  background-color: #bdc3c7;
+  background-color: var(--secondary-color);
+  opacity: 0.5;
   cursor: not-allowed;
 }
+
+/* Also update input focus color if not already using a global variable */
+.form-group input:focus,
+.form-group select:focus,
+.form-group textarea:focus {
+  border-color: var(--accent-color-tareas);
+  box-shadow: 0 0 0 2px var(--accent-color-tareas);
+}
 </style>

ui/src/views/tareas/TareasIndex.vue

@@ -89,13 +89,13 @@ const handleEditTarea = (tareaId) => {
 }
 
 .page-header h1 {
-  color: #333; 
+  color: var(--accent-color-tareas); /* Accent color for page title */
   font-size: 2em; 
   font-weight: 600;
 }
 
 .btn-create {
-  background-color: #5cb85c; 
+  background-color: var(--accent-color-tareas);
   color: white;
   padding: 12px 20px; 
   border: none;
@@ -103,12 +103,12 @@ const handleEditTarea = (tareaId) => {
   font-size: 1em;
   font-weight: 500;
   cursor: pointer;
-  transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease;
+  transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease, filter 0.2s ease;
   box-shadow: 0 2px 5px rgba(0,0,0,0.1);
 }
 
 .btn-create:hover {
-  background-color: #4cae4c; 
+  filter: brightness(0.9);
   box-shadow: 0 4px 8px rgba(0,0,0,0.15);
 }