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

@@ -1,5 +1,5 @@
 <script setup>
-import { watchEffect, computed } from 'vue' // Added computed
+import { watchEffect } from 'vue'
 import TopBar from '@/components/ui/TopBar.vue'
 import NavBar from '@/components/ui/NavBar.vue'
 import { useUi } from '@/stores/useUi'
@@ -46,15 +46,6 @@ watchEffect(() => {
     root.classList.add('animations-disabled')
   }
 })
-
-const transitionDurationStyle = computed(() => {
-  // Assuming base duration of 0.3s for normal speed (transitionSpeed = 1)
-  const baseDuration = 0.3
-  const effectiveDuration = baseDuration * ui.transitionSpeed
-  return {
-    '--current-transition-duration': `${effectiveDuration}s`
-  }
-})
 </script>
 
 <template>
@@ -68,17 +59,13 @@ const transitionDurationStyle = computed(() => {
     // The global style.css will handle base background and text color via body styling
     // but we can keep specific overrides here if needed or theme classes.
     // ui.theme === 'dark' ? 'bg-gray-800 text-gray-100' : 'bg-gray-100 text-gray-900'
-  ]" :style="transitionDurationStyle">
+  ]">
     <!-- NavBar fija -->
     <NavBar />
 
     <!-- contenido principal -->
     <main class="min-h-[calc(100vh-56px)] flex flex-col overflow-hidden">
-      <router-view v-slot="{ Component }">
-        <transition name="slide-fade" mode="out-in">
-          <component :is="Component" class="flex-1 overflow-auto" />
-        </transition>
-      </router-view>
+      <RouterView class="flex-1 overflow-auto" />
     </main>
   </div>
 </template>
@@ -86,26 +73,4 @@ const transitionDurationStyle = computed(() => {
 <style scoped>
 /* Scoped styles remain, global styles are in style.css */
 /* We can add specific App.vue styling here if needed, that doesn't rely on theme variables directly */
-
-.slide-fade-enter-active,
-.slide-fade-leave-active {
-  transition: all var(--current-transition-duration) ease-out; /* Use the CSS variable */
-}
-
-.slide-fade-enter-from {
-  opacity: 0;
-  transform: translateX(-20px); /* Slide in from the left */
-}
-
-.slide-fade-leave-to {
-  opacity: 0;
-  transform: translateX(20px); /* Slide out to the right */
-}
-
-/* Ensure content is fully opaque and in place when active/not transitioning */
-.slide-fade-enter-to,
-.slide-fade-leave-from {
-  opacity: 1;
-  transform: translateX(0);
-}
 </style>