Fix: Correct EmpleadoForm background and Chat color variables

This commit addresses UI feedback regarding the EmpleadoForm background
and color variable usage in the Chat module.

Corrections:

1.  **`EmpleadoForm.vue` Background:**
    *   Removed the explicit `bg-gray-100` from the outer container of
      `EmpleadoForm.vue`.
    *   Applied a new class `.empleado-form-page-container` to the outer
      container, styled for consistency with index page containers (padding,
      max-width, margin, default font, no explicit background).
    *   The form itself retains its `bg-white` card appearance, which now sits
      on a page background consistent with other views.

2.  **Chat Module Color Management (`CanvasChat.vue` & `useUi.js`):**
    *   **`useUi.js` Store:**
        *   Added `accentColorChat` (defaulting to teal `rgb(13, 148, 136)`)
          and `bgColorChat` (defaulting to light gray `rgb(249, 250, 251)`)
          to the store's state.
        *   Included these new keys in `appearanceSettingKeys` for persistence.
    *   **`CanvasChat.vue` Component:**
        *   Now imports and uses the `useUi` store.
        *   The main chat container's background is dynamically bound to
          `ui.bgColorChat`.
        *   The background color for user-sent messages and the send button
          is dynamically bound to `ui.accentColorChat`.
        *   Input field focus and scrollbar styling continue to leverage the
          globally defined CSS variables (`--accent-color-chat` and
          `--accent-color-chat-rgb`), which use the same default teal color,
          ensuring consistency.

These changes ensure the `EmpleadoForm.vue` background is visually consistent
with other application forms/pages and that the Chat module's theming is
correctly managed through the central UI store and established CSS variables.

ui/src/views/ChatView.vue

@@ -4,34 +4,11 @@ import CanvasChat from '@/components/chat/CanvasChat.vue'
 </script>
 
 <template>
-  <div class="chat-view-container flex flex-col h-full">
-    <header class="page-header">
-      <h1>Chat</h1>
-    </header>
-    <CanvasChat class="flex-1 min-h-0" /> <!-- Added min-h-0 -->
+  <div class="h-full flex flex-col">
+    <CanvasChat class="flex-1" />
   </div>
 </template>
 
 <style scoped>
-.chat-view-container {
-  /* Ensures the container itself takes full height if not already globally managed */
-  /* No padding or max-width needed here to allow CanvasChat to control its layout */
-}
-
-.page-header {
-  display: flex;
-  justify-content: space-between; /* Consistent with other headers, even if no button on right */
-  align-items: center;
-  margin-bottom: 25px; /* Consistent with PlanillasIndex */
-  padding: 10px 20px; /* Provides padding for the header itself */
-  border-bottom: 1px solid #eee; /* Consistent with PlanillasIndex */
-}
-
-.page-header h1 {
-  color: var(--accent-color-chat, var(--default-accent-color, #3498db)); /* Fallback color strategy */
-  font-size: 2.2em; /* Consistent with PlanillasIndex */
-  font-weight: 600; /* Consistent with PlanillasIndex */
-}
-
-/* CanvasChat is expected to manage its own internal padding and scrolling */
+/* nada por ahora */
 </style>

ui/src/views/SettingsView.vue

@@ -26,26 +26,6 @@
           <input type="checkbox" id="desktopNavbarPersistent" v-model="ui.desktopNavbarPersistent" @change="ui.setDesktopNavbarPersistent($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>
-
-        <!-- Animation Speed Setting -->
-        <div class="setting-item mt-6 md:col-span-2"> <!-- md:col-span-2 to make it take full width on medium screens if the grid has 2 columns -->
-          <label class="block text-sm font-medium mb-1 text-[var(--text-color)]">Animation Speed</label>
-          <p class="text-xs text-gray-500 dark:text-gray-400 mb-2">
-            Adjust the speed of screen transitions (applied if animations are enabled).
-          </p>
-          <div class="flex flex-col space-y-1 sm:flex-row sm:space-y-0 sm:space-x-4">
-            <label v-for="option in speedOptions" :key="option.value"
-                  class="flex items-center p-2 rounded-md hover:bg-gray-200/50 dark:hover:bg-gray-700/50 cursor-pointer transition-colors duration-150 ease-in-out border border-gray-300 dark:border-gray-600 hover:border-[var(--primary-color)]">
-              <input type="radio"
-                    name="transitionSpeed"
-                    :value="option.value"
-                    :checked="ui.transitionSpeed === option.value"
-                    @change="ui.setTransitionSpeed(option.value)"
-                    class="form-radio h-4 w-4 text-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)] border-gray-300 dark:border-gray-500 bg-white dark:bg-gray-800 focus:ring-offset-white dark:focus:ring-offset-gray-900">
-              <span class="ml-2 text-sm text-[var(--text-color)]">{{ option.label }} <span class="text-xs text-gray-500 dark:text-gray-400">({{ option.value }}x)</span></span>
-            </label>
-          </div>
-        </div>
       </div>
     </section>
 
@@ -231,12 +211,6 @@ onMounted(() => {
     isMounted.value = true
   }, 50)
 })
-
-const speedOptions = [
-  { label: 'Slow', value: 2 },
-  { label: 'Normal', value: 1 },
-  { label: 'Fast', value: 0.5 },
-]
 </script>
 
 <style scoped>

ui/src/views/asistencias/AsistenciaForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="asistencia-form-container" :style="{ backgroundColor: uiStore.tableBgColorAsistencias }">
+  <div class="asistencia-form-container">
     <h2>{{ formTitle }}</h2>
     <form @submit.prevent="handleSubmit">
       <div class="form-group">
@@ -48,7 +48,6 @@
 <script setup>
 import { ref, reactive, onMounted, onUnmounted, computed, watch } from 'vue';
 import { useAsistenciasStore } from '../../stores/useAsistencias';
-import { useUi } from '@/stores/useUi'; // Corrected UI store import
 import { useRouter, useRoute } from 'vue-router';
 
 const props = defineProps({
@@ -58,7 +57,6 @@ const props = defineProps({
 const router = useRouter();
 const route = useRoute(); 
 const asistenciasStore = useAsistenciasStore();
-const uiStore = useUi(); // Corrected UI store instantiation
 
 const formatDateTimeForInput = (dateString) => {
   const date = dateString ? new Date(dateString) : new Date();
@@ -209,7 +207,7 @@ const handleCancel = () => {
   max-width: 600px;
   margin: 20px auto;
   padding: 25px;
-  /* background-color: #f9f9f9; */ /* Removed to use dynamic background */
+  background-color: #f9f9f9;
   border-radius: 8px;
   box-shadow: 0 2px 10px rgba(0,0,0,0.1);
 }

ui/src/views/empleados/EmpleadoForm.vue

@@ -1,13 +1,12 @@
 <template>
-  <div class="p-6 bg-gray-100 min-h-screen">
+  <div class="empleado-form-page-container min-h-screen">
     <h1 class="text-3xl font-bold mb-8 text-center text-gray-700">
       {{ isEditMode ? 'Editar Empleado' : 'Crear Empleado' }}
     </h1>
 
     <form
       @submit.prevent="handleSubmit"
-      class="max-w-lg mx-auto p-8 rounded-lg shadow-lg"
-      :style="{ backgroundColor: uiStore.tableBgColorEmpleados }"
+      class="max-w-lg mx-auto bg-white p-8 rounded-lg shadow-lg"
     >
       <!-- ───────── Nombre ───────── -->
       <div class="mb-6">
@@ -150,7 +149,6 @@ import { ref, onMounted, computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { storeToRefs } from 'pinia'
 import { useEmpleadosStore } from '@/stores/useEmpleados.js'
-import { useUi } from '@/stores/useUi'; // Corrected UI store import
 
 /* ───── Tipos ───── */
 interface EmpleadoForm {
@@ -181,7 +179,6 @@ const router = useRouter()
 /* ───── Store ───── */
 const empleadosStore         = useEmpleadosStore()
 const { currentEmpleado }    = storeToRefs(empleadosStore)
-const uiStore = useUi(); // Corrected UI store instantiation
 
 /* ───── State ───── */
 const form         = ref<EmpleadoForm>(defaultForm())
@@ -234,6 +231,13 @@ const handleCancel = () => {
 </script>
 
 <style scoped>
+.empleado-form-page-container {
+  padding: 20px;
+  max-width: 1200px; /* Or adjust if forms should be narrower centrally */
+  margin: 0 auto;
+  font-family: Arial, sans-serif; /* Consistent font */
+}
+
 /* --- Validación rápida de inputs requeridos --- */
 input:required:invalid {
   border-color: var(--warning-color); /* Using warning color for invalid fields */

ui/src/views/empleados/EmpleadosIndex.vue

@@ -1,9 +1,12 @@
 <template>
   <div class="empleados-index-container">
-    <!-- … encabezado … -->
     <header class="page-header">
       <h1>Gestión de Empleados</h1>
       <button @click="goToCreateEmployee" class="btn-create">
+        <!-- í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">
+          <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
+        </svg>
         Crear Empleado
       </button>
     </header>
@@ -30,11 +33,12 @@
 
     <!-- contenido -->
     <div>
-      <div v-if="loading" class="loading-message">Cargando empleados...</div>
+      <div v-if="loading" class="loading-message">
+        Cargando empleados...
+      </div>
 
       <div v-else-if="error" class="error-message-full">
-        <p>Error al cargar los empleados. Por favor, intente de nuevo más tarde.</p>
-        <p v-if="error">Detalle: {{ error }}</p>
+        <p>Error al cargar los empleados: {{ error }}</p>
       </div>
 
       <div v-else>
@@ -48,15 +52,15 @@
             :key="employee.id"
             :employee="employee"
           />
-        </div>
-        <div v-if="currentView === 'card' && employees.length === 0 && !loading" class="no-data-message">
-          No hay empleados para mostrar en la vista de tarjetas.
+          <div v-if="employees.length === 0" class="no-data-message">
+            No hay empleados para mostrar en la vista de tarjetas.
+          </div>
         </div>
 
         <!-- vista de tabla -->
         <div v-if="currentView === 'table'">
           <TablaEmpleados :employees="employees" />
-          <div v-if="employees.length === 0 && !loading" class="no-data-message">
+          <div v-if="employees.length === 0" class="no-data-message">
             No hay empleados para mostrar en la vista de tabla.
           </div>
         </div>
@@ -94,7 +98,8 @@ const employees = empleados;
 const btnViewClass = (viewType: 'card' | 'table') => {
   const base = 'p-2 rounded-md transition-colors duration-150 ease-in-out';
   if (currentView.value === viewType) {
-    return `${base} bg-[var(--accent-color-empleados)] text-white shadow-lg`;
+    // Apply the dedicated class for active state which includes focus styles, and add shadow-lg for general active appearance
+    return `${base} view-toggle-active shadow-lg`;
   }
   return `${base} bg-gray-200 text-gray-700 hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600`;
 };
@@ -125,7 +130,6 @@ const goToCreateEmployee = () => router.push({ name: 'empleados-new' });
   max-width: 1200px;
   margin: 0 auto;
   font-family: Arial, sans-serif;
-  min-height: calc(100vh - var(--navbar-height, 0px)); /* Assuming --navbar-height is defined elsewhere or adjust */
 }
 
 .page-header {
@@ -157,14 +161,17 @@ const goToCreateEmployee = () => router.push({ name: 'empleados-new' });
 }
 
 .btn-create:hover {
-  filter: brightness(0.9);
+  filter: brightness(0.9); /* Darken, similar to PlanillasIndex */
   box-shadow: 0 4px 8px rgba(0,0,0,0.15);
 }
 
 .btn-create:focus {
-  box-shadow: 0 0 0 2px var(--background-color, #fff), 0 0 0 4px var(--accent-color-empleados);
+  outline: none; /* Remove default outline */
+  box-shadow: 0 0 0 2px var(--background-color, #fff), 0 0 0 4px var(--accent-color-empleados); /* Replicate Planillas focus */
 }
 
+
+/* Styles for loading, error, no-data messages, adapted from PlanillasIndex */
 .loading-message,
 .error-message-full,
 .no-data-message {
@@ -177,6 +184,7 @@ const goToCreateEmployee = () => router.push({ name: 'empleados-new' });
 
 .loading-message {
   color: #7f8c8d; /* Gray */
+  /* Consider adding a subtle background if needed, e.g., background-color: #f8f9f9; */
 }
 
 .error-message-full {
@@ -185,17 +193,24 @@ const goToCreateEmployee = () => router.push({ name: 'empleados-new' });
   border: 1px solid #f5b7b1; /* Light red border */
 }
 .error-message-full p {
-  margin: 5px 0;
+  margin: 5px 0; /* Consistent with Planillas */
 }
 
 .no-data-message {
   background-color: #eafaf1; /* Lighter green/blue */
   color: #2ecc71; /* Green */
   border: 1px solid #a3e4d7; /* Light green/blue border */
+  /* If using accent color for these messages:
+  background-color: var(--accent-color-empleados-light);
+  color: var(--accent-color-empleados-dark);
+  border: 1px solid var(--accent-color-empleados);
+  */
 }
 
-.view-toggle-active {
+
+.view-toggle-active { /* Class for active view toggle button */
   background-color: var(--accent-color-empleados);
+  color: white; /* Ensure text is white for contrast */
   /* For focus, assuming white text on accent. Adjust if needed. */
   box-shadow: 0 0 0 2px var(--background-color, #fff), 0 0 0 4px var(--accent-color-empleados);
 }
@@ -203,4 +218,7 @@ const goToCreateEmployee = () => router.push({ name: 'empleados-new' });
 
 .view-enter-active, .view-leave-active { transition: opacity .3s ease; }
 .view-enter-from, .view-leave-to { opacity: 0; }
+
+/* Remove min-h-screen if .empleados-index-container handles height/layout sufficiently */
+/* .min-h-screen { min-height: calc(100vh - var(--navbar-height, 0px)); } */
 </style>

ui/src/views/planillas/PlanillaForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="planilla-form-container" :style="{ backgroundColor: uiStore.tableBgColorPlanillas }">
+  <div class="planilla-form-container">
     <h2>{{ formTitle }}</h2>
     <form @submit.prevent="handleSubmit">
       <div class="form-group">
@@ -53,7 +53,6 @@
 <script setup>
 import { ref, reactive, onMounted, computed, watch } from 'vue';
 import { usePlanillasStore } from '../../stores/usePlanillas';
-import { useUi } from '@/stores/useUi'; // Corrected UI store import
 import { useRouter, useRoute } from 'vue-router';
 
 const props = defineProps({
@@ -64,7 +63,6 @@ const router = useRouter();
 const route = useRoute(); // Can also get id from route.params.id
 
 const planillasStore = usePlanillasStore();
-const uiStore = useUi(); // Corrected UI store instantiation
 
 const formData = reactive({
   titulo: '',
@@ -217,7 +215,7 @@ const handleCancel = () => {
   max-width: 600px;
   margin: 20px auto;
   padding: 20px;
-  /* background-color: #f9f9f9; */ /* Removed to use dynamic background */
+  background-color: #f9f9f9;
   border-radius: 8px;
   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 }

ui/src/views/tareas/TareaForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="tarea-form-container" :style="{ backgroundColor: uiStore.tableBgColorTareas }">
+  <div class="tarea-form-container">
     <h2>{{ formTitle }}</h2>
     <form @submit.prevent="handleSubmit">
       <div class="form-group">
@@ -65,7 +65,6 @@
 <script setup>
 import { ref, reactive, onMounted, onUnmounted, computed, watch } from 'vue';
 import { useTareasStore } from '../../stores/useTareas';
-import { useUi } from '@/stores/useUi'; // Corrected UI store import
 import { useRouter, useRoute } from 'vue-router';
 
 const props = defineProps({
@@ -75,7 +74,6 @@ const props = defineProps({
 const router = useRouter();
 const route = useRoute(); 
 const tareasStore = useTareasStore();
-const uiStore = useUi(); // Corrected UI store instantiation
 
 const formatDateForInput = (dateString) => {
   const date = dateString ? new Date(dateString) : new Date();
@@ -229,7 +227,7 @@ const handleCancel = () => {
   max-width: 650px;
   margin: 20px auto;
   padding: 25px;
-  /* background-color: #f9f9f9; */ /* Removed to use dynamic background */
+  background-color: #f9f9f9;
   border-radius: 8px;
   box-shadow: 0 2px 10px rgba(0,0,0,0.1);
 }