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/components/chat/CanvasChat.vue

@@ -1,8 +1,10 @@
 <script setup>
 import { ref, nextTick, onMounted, watch } from 'vue'
 import { useChat } from '@/stores/useChat'
+import { useUi } from '@/stores/useUi';
 
 const chat = useChat()
+const ui = useUi(); // UI store for colors
 const msg  = ref('')
 const list = ref(null)
 
@@ -40,16 +42,16 @@ watch(() => chat.items.length, scrollBottom)
 
 <template>
   <!-- se adapta al contenedor flex, sin superponer la sidebar -->
-  <div class="flex flex-col flex-1 min-h-0 bg-gray-50">
+  <div class="flex flex-col flex-1 min-h-0" :style="{ backgroundColor: ui.bgColorChat }">
     <!-- historial -->
     <div ref="list" class="flex-1 min-h-0 overflow-auto p-6 space-y-4 custom-scroll">
       <template v-for="(m,i) in chat.items" :key="i">
         <!-- mensaje de texto -->
         <div :class="m.owner==='yo' ? 'flex justify-end' : 'flex justify-start'" v-if="m.type==='text'">
           <div
-            class="max-w-lg px-4 py-2 shadow break-words rounded-lg"
-            :class="m.owner==='yo' ? 'text-white' : 'bg-white text-gray-900 dark:bg-gray-700 dark:text-gray-200'"
-            :style="m.owner==='yo' ? { backgroundColor: 'var(--accent-color-chat, #0D9488)' } : {}">
+            class="user-message max-w-lg rounded-lg px-4 py-2 shadow break-words"
+            :class="m.owner === 'yo' ? 'is-user' : 'bg-white text-gray-900'"
+            :style="m.owner === 'yo' ? { backgroundColor: ui.accentColorChat, color: 'white' } : {}">
             {{ m.text }}
           </div>
         </div>
@@ -66,12 +68,12 @@ watch(() => chat.items.length, scrollBottom)
         @keydown="handleKey"
         rows="1"
         placeholder="Escribí un mensaje… (Enter para enviar, Shift+Enter salto)"
-        class="flex-1 resize-none rounded-md border border-gray-300 dark:border-gray-600 p-3 shadow-sm focus:outline-none focus:ring-2 focus:ring-[var(--accent-color-chat,#0D9488)] focus:border-[var(--accent-color-chat,#0D9488)] dark:bg-gray-700 dark:text-white custom-scroll"
+        class="chat-input flex-1 resize-none rounded-lg border p-3 focus:outline-none focus:ring-2 custom-scroll"
       />
       <button
         type="submit"
-        class="px-4 py-2 rounded-md text-white transition-colors duration-150 ease-in-out shadow-sm hover:brightness-90"
-        :style="{ backgroundColor: 'var(--accent-color-chat, #0D9488)' }">
+        class="send-button px-4 py-2 rounded-lg text-white transition"
+        :style="{ backgroundColor: ui.accentColorChat }">
         ➤
       </button>
     </form>
@@ -79,25 +81,41 @@ watch(() => chat.items.length, scrollBottom)
 </template>
 
 <style scoped>
-/* Default accent color for chat if not provided by CSS variable */
-:root {
-  --accent-color-chat-fallback: #0D9488; /* Teal-700 as a fallback */
-  --accent-color-chat-alpha-35-fallback: rgba(13, 148, 136, 0.35);
-  --accent-color-chat-alpha-70-fallback: rgba(13, 148, 136, 0.7);
-  --accent-color-chat-alpha-60-fallback: rgba(13, 148, 136, 0.6);
+/* :root definitions for --accent-color-chat-* removed, will use global definitions from style.css */
+
+.user-message.is-user {
+  /* background-color is now handled by inline style if owner is 'yo' */
+  /* color: white; is also handled by inline style for user messages */
+  /* This class can be kept if it has other styles, or removed if not. */
 }
 
+.chat-input {
+  /* General input styling, assuming border-gray-300 is default for 'border' */
+  /* Padding p-3 is fine, rounded-lg is fine */
+  border-color: #D1D5DB; /* Explicitly Tailwind's gray-300 for clarity */
+}
+.chat-input:focus {
+  border-color: var(--accent-color-chat); /* Or use Tailwind's focus:border-accent-color-chat if defined */
+  box-shadow: 0 0 0 2px rgba(var(--accent-color-chat-rgb), 0.4); /* Custom focus ring to match ring-2 focus:ring-color */
+  /* Replaces: focus:ring-2 focus:ring-[var(--accent-color-chat)] */
+  /* Note: Tailwind's focus:ring-2 focus:ring-color utility is often simpler if you can set it up */
+}
+
+.send-button {
+  /* background-color is now handled by inline style */
+}
+.send-button:hover {
+  filter: brightness(0.9); /* Consistent with other refactored buttons */
+}
+.send-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--background-color, #fff), 0 0 0 4px var(--accent-color-chat); /* Consistent focus */
+}
+
+
 .custom-scroll::-webkit-scrollbar { width: 8px; }
 .custom-scroll::-webkit-scrollbar-track { background: transparent; }
-.custom-scroll::-webkit-scrollbar-thumb {
-  background-color: var(--accent-color-chat-alpha-35, var(--accent-color-chat-alpha-35-fallback));
-  border-radius: 4px;
-}
-.custom-scroll:hover::-webkit-scrollbar-thumb {
-  background-color: var(--accent-color-chat-alpha-70, var(--accent-color-chat-alpha-70-fallback));
-}
-.custom-scroll {
-  scrollbar-width: thin;
-  scrollbar-color: var(--accent-color-chat-alpha-60, var(--accent-color-chat-alpha-60-fallback)) transparent;
-}
+.custom-scroll::-webkit-scrollbar-thumb { background-color: rgba(var(--accent-color-chat-rgb),.35); border-radius: 4px; }
+.custom-scroll:hover::-webkit-scrollbar-thumb { background-color: rgba(var(--accent-color-chat-rgb),.7); }
+.custom-scroll { scrollbar-width: thin; scrollbar-color: rgba(var(--accent-color-chat-rgb),.6) transparent; }
 </style>