Refactor: Standardize UI for Empleados and Chat modules

This commit brings the Empleados and Chat UI modules more in line with the visual and functional conventions established by other modules in your application, particularly Planillas.

**Key Changes for Empleados Module:**

-   **`EmpleadosIndex.vue`:**
    -   Standardized page header structure and styling (title, create button).
    -   Removed extra descriptive paragraph from header.
    -   Aligned styling for loading, error, and no-data messages with other modules.
    -   Create button icon removed for consistency.
-   **`cardEmpleado.vue`:**
    -   Edit action now emits an event instead of direct navigation.
    -   Added a delete button with confirmation and store integration.
    -   Converted component from TypeScript to JavaScript.
    -   Adjusted layout for consistency with other card components.
-   **`tablaEmpleados.vue`:**
    -   Edit action now emits an event.
    -   Removed the "View Details" button to streamline actions.
    -   Added a delete button with confirmation and store integration.
    -   Converted component from TypeScript to JavaScript.
    -   Ensured action button styling and no-data messages are consistent.

**Key Changes for Chat Module:**

-   **`ChatView.vue`:**
    -   Added a standard page header with the title "Chat".
-   **`CanvasChat.vue`:**
    -   Standardized styling for the message input textarea and send button, using the new `accent-color-chat`.
    -   Updated message bubble colors for user (using `accent-color-chat`) and bot messages for better theme alignment.
    -   Adjusted custom scrollbar colors to use `accent-color-chat`.
-   **`useUi.js` (UI Store):**
    -   Added `accentColorChat` to the store's state, appearance keys, and actions, allowing it to be configurable and persisted. Defaulted to Teal (#0D9488).

These changes aim to provide a more cohesive user experience across your application by ensuring that common UI elements and interactions behave and look similar in the Empleados and Chat modules as they do elsewhere.

ui/src/App.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { watchEffect } from 'vue'
+import { watchEffect, computed } from 'vue' // Added computed
 import TopBar from '@/components/ui/TopBar.vue'
 import NavBar from '@/components/ui/NavBar.vue'
 import { useUi } from '@/stores/useUi'
@@ -46,6 +46,15 @@ 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>
@@ -59,13 +68,17 @@ watchEffect(() => {
     // 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">
-      <RouterView class="flex-1 overflow-auto" />
+      <router-view v-slot="{ Component }">
+        <transition name="slide-fade" mode="out-in">
+          <component :is="Component" class="flex-1 overflow-auto" />
+        </transition>
+      </router-view>
     </main>
   </div>
 </template>
@@ -73,4 +86,26 @@ watchEffect(() => {
 <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>