diff --git a/ui/src/App.vue b/ui/src/App.vue
index 5b8edf1..2183a0a 100644
--- a/ui/src/App.vue
+++ b/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>
diff --git a/ui/src/components/asistencias/cardAsistencia.vue b/ui/src/components/asistencias/cardAsistencia.vue
index 5a2c389..f5a14b7 100644
--- a/ui/src/components/asistencias/cardAsistencia.vue
+++ b/ui/src/components/asistencias/cardAsistencia.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-white shadow-md rounded-lg p-4 md:p-6 m-2 border border-gray-200 hover:shadow-lg transition-shadow duration-300 ease-in-out flex flex-col">
+  <div :style="{ backgroundColor: ui.tableBgColorAsistencias }" class="shadow-md rounded-lg p-4 md:p-6 m-2 border border-gray-200 hover:shadow-lg transition-shadow duration-300 ease-in-out flex flex-col">
     <div class="flex justify-between items-center mb-3 md:mb-4 pb-2 md:pb-3 border-b border-gray-100">
       <h4 class="text-lg md:text-xl font-semibold" :style="{ color: 'var(--accent-color-asistencias)' }">Asistencia ID: {{ asistencia.id }}</h4>
       <span :class="['px-2 py-1 text-xs font-bold text-white rounded-full', getStatusClass(asistencia.estado)]">
@@ -34,8 +34,11 @@
 <script setup>
 import { defineProps, defineEmits } from 'vue';
 import { useAsistenciasStore } from '../../stores/useAsistencias';
+import { useUi } from '../../stores/useUi.js';
 import { computed } from 'vue';
 
+const ui = useUi();
+
 const props = defineProps({
   asistencia: {
     type: Object,
diff --git a/ui/src/components/chat/CanvasChat.vue b/ui/src/components/chat/CanvasChat.vue
index 3907ed5..c56890b 100644
--- a/ui/src/components/chat/CanvasChat.vue
+++ b/ui/src/components/chat/CanvasChat.vue
@@ -1,10 +1,8 @@
 <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)
 
@@ -42,16 +40,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" :style="{ backgroundColor: ui.bgColorChat }">
+  <div class="flex flex-col flex-1 min-h-0 bg-gray-50">
     <!-- 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="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' } : {}">
+            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)' } : {}">
             {{ m.text }}
           </div>
         </div>
@@ -68,12 +66,12 @@ watch(() => chat.items.length, scrollBottom)
         @keydown="handleKey"
         rows="1"
         placeholder="Escribí un mensaje… (Enter para enviar, Shift+Enter salto)"
-        class="chat-input flex-1 resize-none rounded-lg border p-3 focus:outline-none focus:ring-2 custom-scroll"
+        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"
       />
       <button
         type="submit"
-        class="send-button px-4 py-2 rounded-lg text-white transition"
-        :style="{ backgroundColor: ui.accentColorChat }">
+        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)' }">
         ➤
       </button>
     </form>
@@ -81,41 +79,29 @@ watch(() => chat.items.length, scrollBottom)
 </template>
 
 <style scoped>
-/* :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. */
+.canvas-chat-root {
+  background-color: var(--background-color-chat, #F0F0F0); /* Fallback to store default */
 }
 
-.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 */
+/* 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);
 }
-.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: 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; }
+.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;
+}
 </style>
diff --git a/ui/src/components/empleados/cardEmpleado.vue b/ui/src/components/empleados/cardEmpleado.vue
index 9946086..b931c53 100644
--- a/ui/src/components/empleados/cardEmpleado.vue
+++ b/ui/src/components/empleados/cardEmpleado.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-white shadow-md rounded-lg p-4 md:p-6 m-2 border border-gray-200 hover:shadow-lg transition-shadow duration-300 ease-in-out flex flex-col">
+  <div :style="{ backgroundColor: ui.tableBgColorEmpleados }" class="shadow-md rounded-lg p-4 md:p-6 m-2 border border-gray-200 hover:shadow-lg transition-shadow duration-300 ease-in-out flex flex-col">
     <div class="flex items-center mb-3 md:mb-4 pb-2 md:pb-3 border-b border-gray-100">
       <img
         :src="employee.avatar_url || 'https://via.placeholder.com/150'"
@@ -39,67 +39,56 @@
         @mouseleave="buttonHover($event, false)"
         :class="`focus:ring-[var(--accent-color-empleados)]`"
       >Editar</button>
-      <!-- "View Details" button removed for consistency as other modules use the edit view for details -->
+      <button
+        @click="confirmDeleteEmpleado"
+        class="px-3 py-1 md:px-4 md:py-2 text-xs md:text-sm font-medium rounded-md transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 bg-red-600 hover:bg-red-700 text-white focus:ring-red-500"
+      >Eliminar</button>
     </div>
   </div>
 </template>
 
-<script setup lang="ts">
-import { PropType } from 'vue'
-import { useRouter } from 'vue-router'
-import { useEmpleadosStore } from '@/stores/useEmpleados.js'; // Adjust path as needed
+<script setup>
+import { useUi } from '../../stores/useUi.js';
+import { useEmpleadosStore } from '../../stores/useEmpleados'; // Ensure correct path
 
-interface Employee {
-  id: string | number
-  name: string
-  cedula: number // Assuming cedula is always present; adjust if optional
-  avatar_url?: string
-  telefono?: string
-  ubicacion: string // Assuming ubicacion is always present
-  idciat?: string
-  grupo_estudio?: string
-}
+const ui = useUi();
+const emit = defineEmits(['edit']);
+const empleadosStore = useEmpleadosStore();
 
 const props = defineProps({
   employee: {
-    type: Object as PropType<Employee>,
+    type: Object,
     required: true,
   },
-})
-
-const router = useRouter()
-const empleadosStore = useEmpleadosStore();
+});
 
 const handleEdit = () => {
-  router.push(`/empleados/${props.employee.id}`)
-}
+  emit('edit', props.employee.id);
+};
 
-const confirmDeleteEmployee = () => {
-  if (confirm(`¿Está seguro de que desea eliminar al empleado "${props.employee.name}" (ID: ${props.employee.id})? Esta acción no se puede deshacer.`)) {
-    deleteEmployee();
+const confirmDeleteEmpleado = () => {
+  if (confirm(`¿Está seguro de que desea eliminar al empleado "${props.employee.name}" (ID: ${props.employee.id})?`)) {
+    deleteEmpleado();
   }
 };
 
-const deleteEmployee = async () => {
+const deleteEmpleado = async () => {
   try {
     await empleadosStore.deleteEmpleado(props.employee.id);
-    // Optionally, you might want to emit an event or show a success notification
-    // For example: emit('deleted', props.employee.id);
-    // Or use a toast notification system if you have one integrated.
+    // Optionally, show a success notification or emit an event if needed,
+    // though typically the list will update reactively from the store.
   } catch (error) {
     console.error('Error deleting employee:', error);
-    // It's good practice to inform the user.
-    // Replace alert with a more sophisticated notification if available (e.g., toast).
-    alert(`Ocurrió un error al eliminar el empleado: ${error.message || 'Error desconocido'}`);
+    alert('Ocurrió un error al eliminar el empleado.');
   }
 };
 
-const buttonHover = (event: MouseEvent, isHovering: boolean) => {
-  const target = event.target as HTMLElement;
+const buttonHover = (event, isHovering) => {
+  const target = event.target;
   if (isHovering) {
-    target.style.filter = 'brightness(90%)'; // Darken slightly
+    target.style.filter = 'brightness(90%)';
   } else {
-    target.style.filter = 'brightness(100%)'; // Back to normal
+    target.style.filter = 'brightness(100%)';
   }
 };
 </script>
diff --git a/ui/src/components/empleados/tablaEmpleados.vue b/ui/src/components/empleados/tablaEmpleados.vue
index 593eddb..63f3f8d 100644
--- a/ui/src/components/empleados/tablaEmpleados.vue
+++ b/ui/src/components/empleados/tablaEmpleados.vue
@@ -63,8 +63,8 @@
               <button @click="handleEdit(employee.id)" class="p-1.5 sm:p-2 rounded-md transition-all duration-150 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-600/20 focus:ring-blue-500 dark:focus:ring-blue-400" title="Editar Empleado">
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" /></svg>
               </button>
-              <button @click="handleViewDetails(employee.id)" class="p-1.5 sm:p-2 rounded-md transition-all duration-150 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-300 hover:bg-green-100 dark:hover:bg-green-600/20 focus:ring-green-500 dark:focus:ring-green-400" title="Ver Detalles">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" /></svg>
+              <button @click="confirmDeleteEmpleado(employee)" class="p-1.5 sm:p-2 rounded-md transition-all duration-150 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300 hover:bg-red-100 dark:hover:bg-red-600/20 focus:ring-red-500 dark:focus:ring-red-400" title="Eliminar">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12.56 0c1.153 0 2.24.03 3.22.077m3.22-.077L10.879 3.28a2.25 2.25 0 012.244-2.077h.093c.956 0 1.853.543 2.244 2.077L14.74 5.79m-4.858 0l-2.828-2.828A1.875 1.875 0 016.188 2.188l2.828 2.828m6.912 0l2.828-2.828a1.875 1.875 0 00-2.652-2.652L12 5.79M9.26 9h5.48L9.26 9z" /></svg>
               </button>
             </div>
           </td>
@@ -74,58 +74,38 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { PropType, defineEmits } from 'vue'
-// No longer using useRouter directly in this component for navigation
-// import { useRouter } from 'vue-router'
+<script setup>
 import { useUi } from '../../stores/useUi.js';
-import { useEmpleadosStore } from '../../stores/useEmpleados.js'; // For delete functionality
+import { useEmpleadosStore } from '../../stores/useEmpleados';
 
 const ui = useUi();
+const emit = defineEmits(['edit']);
 const empleadosStore = useEmpleadosStore();
 
-// Interface for Employee object structure
-interface Employee {
-  id: string | number;
-  name: string;
-  cedula: number;
-  avatar_url?: string;
-  telefono?: string;
-  ubicacion: string;
-  idciat?: string;
-  grupo_estudio?: string;
-}
-
 const props = defineProps({
   employees: {
-    type: Array as PropType<Employee[]>,
+    type: Array,
     required: true,
     default: () => [],
   },
 });
 
-const emit = defineEmits(['edit']);
-
-const handleEdit = (employeeId: string | number) => {
-  emit('edit', employeeId); // Emit event for parent to handle navigation
+const handleEdit = (employeeId) => {
+  emit('edit', employeeId);
 };
 
-// handleViewDetails function is removed
-
-const confirmDeleteEmployee = (employee: Employee) => {
-  if (confirm(`¿Está seguro de que desea eliminar al empleado "${employee.name}" (ID: ${employee.id})? Esta acción no se puede deshacer.`)) {
-    deleteEmployeeInternal(employee.id);
+const confirmDeleteEmpleado = (employee) => {
+  if (confirm(`¿Está seguro de que desea eliminar al empleado "${employee.name}" (ID: ${employee.id})?`)) {
+    deleteEmpleadoInternal(employee.id);
   }
 };
 
-const deleteEmployeeInternal = async (employeeId: string | number) => {
+const deleteEmpleadoInternal = async (id) => {
   try {
-    await empleadosStore.deleteEmpleado(employeeId);
-    // Optionally: emit success or use a notification system
+    await empleadosStore.deleteEmpleado(id);
   } catch (error) {
-    console.error(`Error deleting employee with id ${employeeId}:`, error);
-    alert(`Ocurrió un error al eliminar el empleado: ${error.message || 'Error desconocido'}`);
-    // Optionally: emit error or use a notification system
+    console.error(`Error deleting employee with id ${id}:`, error);
+    // Optional: Show error notification
   }
 };
 </script>
@@ -137,5 +117,11 @@ const deleteEmployeeInternal = async (employeeId: string | number) => {
   object-fit: cover; /* Ensures avatar images are displayed nicely */
 }
 
-/* Icon transition style removed to align with tablaPlanillas.vue */
+/* Optional: Keep icon transition if not handled by Tailwind's transition utilities on the button */
+button svg {
+  transition: transform 0.15s ease-in-out;
+}
+button:hover svg {
+  transform: scale(1.1); /* Adjusted scale for a subtler effect */
+}
 </style>
diff --git a/ui/src/components/planillas/cardPlanilla.vue b/ui/src/components/planillas/cardPlanilla.vue
index 92f7fe0..7d610b2 100644
--- a/ui/src/components/planillas/cardPlanilla.vue
+++ b/ui/src/components/planillas/cardPlanilla.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-white shadow-md rounded-lg p-4 md:p-6 m-2 border border-gray-200 hover:shadow-lg transition-shadow duration-300 ease-in-out flex flex-col">
+  <div :style="{ backgroundColor: ui.tableBgColorPlanillas }" class="shadow-md rounded-lg p-4 md:p-6 m-2 border border-gray-200 hover:shadow-lg transition-shadow duration-300 ease-in-out flex flex-col">
     <div class="flex justify-between items-center mb-3 md:mb-4 pb-2 md:pb-3 border-b border-gray-100">
       <h4 class="text-lg md:text-xl font-semibold" :style="{ color: 'var(--accent-color-planillas)' }">Planilla ID: {{ planilla.id }}</h4>
       <span :class="['px-2 py-1 text-xs font-bold text-white rounded-full', getStatusClass(planilla.estado)]">
@@ -33,6 +33,9 @@
 <script setup>
 import { defineProps, defineEmits } from 'vue';
 import { usePlanillasStore } from '../../stores/usePlanillas';
+import { useUi } from '../../stores/useUi.js';
+
+const ui = useUi();
 
 const props = defineProps({
   planilla: {
diff --git a/ui/src/components/tareas/cardTarea.vue b/ui/src/components/tareas/cardTarea.vue
index 3e15c10..71cfe39 100644
--- a/ui/src/components/tareas/cardTarea.vue
+++ b/ui/src/components/tareas/cardTarea.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-white shadow-md rounded-lg p-4 md:p-6 m-2 border border-gray-200 hover:shadow-lg transition-shadow duration-300 ease-in-out flex flex-col">
+  <div :style="{ backgroundColor: ui.tableBgColorTareas }" class="shadow-md rounded-lg p-4 md:p-6 m-2 border border-gray-200 hover:shadow-lg transition-shadow duration-300 ease-in-out flex flex-col">
     <div class="flex justify-between items-center mb-3 md:mb-4 pb-2 md:pb-3 border-b border-gray-100">
       <h4 class="text-lg md:text-xl font-semibold" :style="{ color: 'var(--accent-color-tareas)' }">Tarea ID: {{ tarea.id }}</h4>
       <span :class="['px-2 py-1 text-xs font-bold text-white rounded-full', getStatusClass(tarea.estado)]">
@@ -36,6 +36,9 @@
 <script setup>
 import { defineProps, defineEmits } from 'vue';
 import { useTareasStore } from '../../stores/useTareas'; 
+import { useUi } from '../../stores/useUi.js';
+
+const ui = useUi();
 
 const props = defineProps({
   tarea: {
diff --git a/ui/src/stores/useUi.js b/ui/src/stores/useUi.js
index b7300d3..6ee9397 100644
--- a/ui/src/stores/useUi.js
+++ b/ui/src/stores/useUi.js
@@ -17,20 +17,13 @@ const appearanceSettingKeys = [
   'accentColorPlanillas',
   'accentColorAsistencias',
   'accentColorConfiguracion',
-  'accentColorChat', // Added
+  'accentColorChat',
   // Per-module table background colors
   'tableBgColorEmpleados',
   'tableBgColorTareas',
   'tableBgColorPlanillas',
   'tableBgColorAsistencias',
   'tableBgColorConfiguracion',
-  'bgColorChat', // Added
-  'desktopNavbarPersistent',
-  // Default module views
-  'tableBgColorTareas',
-  'tableBgColorPlanillas',
-  'tableBgColorAsistencias',
-  'tableBgColorConfiguracion',
   'desktopNavbarPersistent',
   // Default module views
   'defaultViewEmpleados',
@@ -38,6 +31,8 @@ const appearanceSettingKeys = [
   'defaultViewPlanillas',
   'defaultViewAsistencias',
   'defaultViewConfiguracion',
+  'transitionSpeed',
+  'backgroundColorChat',
 ]
 
 const loadSettingsFromLocalStorage = () => {
@@ -99,21 +94,22 @@ export const useUi = defineStore('ui', {
       accentColorPlanillas: '#FF9800',  // Orange
       accentColorAsistencias: '#E91E63', // Pink
       accentColorConfiguracion: '#607D8B', // Blue Grey
-      accentColorChat: 'rgb(13, 148, 136)',  // Added - Default Teal
+      accentColorChat: '#0D9488', // Teal - chosen as a default for chat
       // Per-module table background colors - default to white
       tableBgColorEmpleados: '#FFFFFF',
       tableBgColorTareas: '#FFFFFF',
       tableBgColorPlanillas: '#FFFFFF',
       tableBgColorAsistencias: '#FFFFFF',
       tableBgColorConfiguracion: '#FFFFFF',
-      bgColorChat: 'rgb(249, 250, 251)',    // Added - Default Light Gray (gray-50)
+      backgroundColorChat: '#F0F0F0', // A light gray for chat background by default
       desktopNavbarPersistent: false,
       // Default module views
-      'defaultViewEmpleados': 'card', // Changed from 'table' to 'card'
+      'defaultViewEmpleados': 'table',
       'defaultViewTareas': 'table',
-      'defaultViewPlanillas': 'table', // Already present
+      'defaultViewPlanillas': 'table',
       'defaultViewAsistencias': 'table',
       'defaultViewConfiguracion': 'table',
+      transitionSpeed: 1, // Default to normal speed
     }
 
     const loadedSettings = loadSettingsFromLocalStorage()
@@ -200,6 +196,10 @@ export const useUi = defineStore('ui', {
       this.accentColorConfiguracion = color
       _saveAppearanceState(this)
     },
+    setAccentColorChat(color) {
+      this.accentColorChat = color;
+      _saveAppearanceState(this);
+    },
 
     // Actions for per-module table background colors
     setTableBgColorEmpleados(color) {
@@ -222,6 +222,10 @@ export const useUi = defineStore('ui', {
       this.tableBgColorConfiguracion = color
       _saveAppearanceState(this)
     },
+    setBackgroundColorChat(color) {
+      this.backgroundColorChat = color;
+      _saveAppearanceState(this);
+    },
     setDesktopNavbarPersistent(enabled) {
       this.desktopNavbarPersistent = !!enabled // Ensure boolean
       _saveAppearanceState(this)
@@ -247,7 +251,13 @@ export const useUi = defineStore('ui', {
     setDefaultViewConfiguracion(view) {
       this.defaultViewConfiguracion = view
       _saveAppearanceState(this)
-    }
+    },
+
+    // Action for transition speed
+    setTransitionSpeed(newSpeed) {
+      this.transitionSpeed = Number(newSpeed) // Ensure it's a number
+      _saveAppearanceState(this)
+    },
   },
 })
 
diff --git a/ui/src/style.css b/ui/src/style.css
index 67053cc..fb4740a 100644
--- a/ui/src/style.css
+++ b/ui/src/style.css
@@ -24,25 +24,10 @@
   --card-hover-shadow: 0 4px 10px rgba(0,0,0,0.10);
 
   /* Colores de módulo */
-  /* Empleados - Blue 500 (Tailwind) */
-  --accent-color-empleados-rgb: 59, 130, 246;
-  --accent-color-empleados: rgb(var(--accent-color-empleados-rgb));
-
-  /* Chat - Teal 600 (Tailwind) */
-  --accent-color-chat-rgb: 13, 148, 136;
-  --accent-color-chat: rgb(var(--accent-color-chat-rgb));
-
-  /* Planillas - Emerald 500 (Tailwind) */
-  --accent-color-planillas-rgb: 16, 185, 129;
-  --accent-color-planillas: rgb(var(--accent-color-planillas-rgb));
-
-  /* Asistencias - Green 500 (#4CAF50) */
-  --accent-color-asistencias-rgb: 76, 175, 80;
-  --accent-color-asistencias: rgb(var(--accent-color-asistencias-rgb));
-
-  /* Tareas - Purple 500 (#9C27B0) */
-  --accent-color-tareas-rgb: 156, 39, 176;
-  --accent-color-tareas: rgb(var(--accent-color-tareas-rgb));
+  --accent-color-asistencias: #4CAF50;
+  --accent-color-empleados:   #2196F3;
+  --accent-color-planillas:   #FF9800;
+  --accent-color-tareas:      #9C27B0;
 
   /* Fondos de tabla (light) */
   --table-container-bg-color-asistencias: #fdebee;
diff --git a/ui/src/views/ChatView.vue b/ui/src/views/ChatView.vue
index 62807f2..ee86807 100644
--- a/ui/src/views/ChatView.vue
+++ b/ui/src/views/ChatView.vue
@@ -4,11 +4,36 @@ import CanvasChat from '@/components/chat/CanvasChat.vue'
 </script>
 
 <template>
-  <div class="h-full flex flex-col">
-    <CanvasChat class="flex-1" />
+  <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>
 </template>
 
 <style scoped>
-/* nada por ahora */
+.chat-view-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: var(--background-color-chat, #F0F0F0); /* Fallback to store default */
+}
+
+.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, #0D9488); /* Fallback to store default */
+  font-size: 2.2em; /* Consistent with PlanillasIndex */
+  font-weight: 600; /* Consistent with PlanillasIndex */
+}
+
+/* CanvasChat is expected to manage its own internal padding and scrolling */
 </style>
diff --git a/ui/src/views/SettingsView.vue b/ui/src/views/SettingsView.vue
index 6553161..1d1f6e2 100644
--- a/ui/src/views/SettingsView.vue
+++ b/ui/src/views/SettingsView.vue
@@ -26,6 +26,26 @@
           <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>
 
@@ -211,6 +231,12 @@ onMounted(() => {
     isMounted.value = true
   }, 50)
 })
+
+const speedOptions = [
+  { label: 'Slow', value: 2 },
+  { label: 'Normal', value: 1 },
+  { label: 'Fast', value: 0.5 },
+]
 </script>
 
 <style scoped>
diff --git a/ui/src/views/asistencias/AsistenciaForm.vue b/ui/src/views/asistencias/AsistenciaForm.vue
index 29c5f49..a61656c 100644
--- a/ui/src/views/asistencias/AsistenciaForm.vue
+++ b/ui/src/views/asistencias/AsistenciaForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="asistencia-form-container">
+  <div class="asistencia-form-container" :style="{ backgroundColor: uiStore.tableBgColorAsistencias }">
     <h2>{{ formTitle }}</h2>
     <form @submit.prevent="handleSubmit">
       <div class="form-group">
@@ -48,6 +48,7 @@
 <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({
@@ -57,6 +58,7 @@ 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();
@@ -207,7 +209,7 @@ const handleCancel = () => {
   max-width: 600px;
   margin: 20px auto;
   padding: 25px;
-  background-color: #f9f9f9;
+  /* background-color: #f9f9f9; */ /* Removed to use dynamic background */
   border-radius: 8px;
   box-shadow: 0 2px 10px rgba(0,0,0,0.1);
 }
diff --git a/ui/src/views/empleados/EmpleadoForm.vue b/ui/src/views/empleados/EmpleadoForm.vue
index d02c65d..53f4c31 100644
--- a/ui/src/views/empleados/EmpleadoForm.vue
+++ b/ui/src/views/empleados/EmpleadoForm.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="empleado-form-page-container min-h-screen">
+  <div class="p-6 min-h-screen empleado-form-page-container">
     <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 bg-white p-8 rounded-lg shadow-lg"
+      class="max-w-lg mx-auto p-8 rounded-lg shadow-lg empleado-actual-form"
     >
       <!-- ───────── Nombre ───────── -->
       <div class="mb-6">
@@ -149,6 +149,7 @@ 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 {
@@ -179,6 +180,7 @@ const router = useRouter()
 /* ───── Store ───── */
 const empleadosStore         = useEmpleadosStore()
 const { currentEmpleado }    = storeToRefs(empleadosStore)
+const uiStore = useUi(); // Corrected UI store instantiation
 
 /* ───── State ───── */
 const form         = ref<EmpleadoForm>(defaultForm())
@@ -231,13 +233,6 @@ 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 */
@@ -246,6 +241,19 @@ input:required:invalid {
 /* Removing generic input:focus, button:focus as they are too broad */
 
 /* --- Look & feel extra (opcional, podés ajustar) --- */
+.empleado-form-page-container {
+  background-color: var(--background-color, #f3f4f6); /* Fallback to a light gray */
+}
+
+.empleado-actual-form {
+  background-color: #ffffff; /* Default white for light theme */
+}
+
+/* Example for dark theme (assuming a parent class .dark or data attribute) */
+.dark .empleado-actual-form {
+  background-color: #2d3748; /* A dark gray for dark theme */
+}
+
 .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); }
diff --git a/ui/src/views/empleados/EmpleadosIndex.vue b/ui/src/views/empleados/EmpleadosIndex.vue
index 290c60b..4aea471 100644
--- a/ui/src/views/empleados/EmpleadosIndex.vue
+++ b/ui/src/views/empleados/EmpleadosIndex.vue
@@ -1,12 +1,9 @@
 <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>
@@ -33,12 +30,11 @@
 
     <!-- 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: {{ error }}</p>
+        <p>Error al cargar los empleados. Por favor, intente de nuevo más tarde.</p>
+        <p v-if="error">Detalle: {{ error }}</p>
       </div>
 
       <div v-else>
@@ -52,15 +48,15 @@
             :key="employee.id"
             :employee="employee"
           />
-          <div v-if="employees.length === 0" class="no-data-message">
-            No hay empleados para mostrar en la vista de tarjetas.
-          </div>
+        </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>
 
         <!-- vista de tabla -->
         <div v-if="currentView === 'table'">
           <TablaEmpleados :employees="employees" />
-          <div v-if="employees.length === 0" class="no-data-message">
+          <div v-if="employees.length === 0 && !loading" class="no-data-message">
             No hay empleados para mostrar en la vista de tabla.
           </div>
         </div>
@@ -98,8 +94,7 @@ 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) {
-    // 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-[var(--accent-color-empleados)] text-white 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`;
 };
@@ -130,6 +125,7 @@ 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 {
@@ -161,17 +157,14 @@ const goToCreateEmployee = () => router.push({ name: 'empleados-new' });
 }
 
 .btn-create:hover {
-  filter: brightness(0.9); /* Darken, similar to PlanillasIndex */
+  filter: brightness(0.9);
   box-shadow: 0 4px 8px rgba(0,0,0,0.15);
 }
 
 .btn-create:focus {
-  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 */
+  box-shadow: 0 0 0 2px var(--background-color, #fff), 0 0 0 4px var(--accent-color-empleados);
 }
 
-
-/* Styles for loading, error, no-data messages, adapted from PlanillasIndex */
 .loading-message,
 .error-message-full,
 .no-data-message {
@@ -184,7 +177,6 @@ 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 {
@@ -193,24 +185,17 @@ const goToCreateEmployee = () => router.push({ name: 'empleados-new' });
   border: 1px solid #f5b7b1; /* Light red border */
 }
 .error-message-full p {
-  margin: 5px 0; /* Consistent with Planillas */
+  margin: 5px 0;
 }
 
 .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 { /* Class for active view toggle button */
+.view-toggle-active {
   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);
 }
@@ -218,7 +203,4 @@ 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>
diff --git a/ui/src/views/planillas/PlanillaForm.vue b/ui/src/views/planillas/PlanillaForm.vue
index 9d1b76d..238ea5d 100644
--- a/ui/src/views/planillas/PlanillaForm.vue
+++ b/ui/src/views/planillas/PlanillaForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="planilla-form-container">
+  <div class="planilla-form-container" :style="{ backgroundColor: uiStore.tableBgColorPlanillas }">
     <h2>{{ formTitle }}</h2>
     <form @submit.prevent="handleSubmit">
       <div class="form-group">
@@ -53,6 +53,7 @@
 <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({
@@ -63,6 +64,7 @@ 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: '',
@@ -215,7 +217,7 @@ const handleCancel = () => {
   max-width: 600px;
   margin: 20px auto;
   padding: 20px;
-  background-color: #f9f9f9;
+  /* background-color: #f9f9f9; */ /* Removed to use dynamic background */
   border-radius: 8px;
   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 }
diff --git a/ui/src/views/tareas/TareaForm.vue b/ui/src/views/tareas/TareaForm.vue
index 7200f2b..ab9ed00 100644
--- a/ui/src/views/tareas/TareaForm.vue
+++ b/ui/src/views/tareas/TareaForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="tarea-form-container">
+  <div class="tarea-form-container" :style="{ backgroundColor: uiStore.tableBgColorTareas }">
     <h2>{{ formTitle }}</h2>
     <form @submit.prevent="handleSubmit">
       <div class="form-group">
@@ -65,6 +65,7 @@
 <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({
@@ -74,6 +75,7 @@ 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();
@@ -227,7 +229,7 @@ const handleCancel = () => {
   max-width: 650px;
   margin: 20px auto;
   padding: 25px;
-  background-color: #f9f9f9;
+  /* background-color: #f9f9f9; */ /* Removed to use dynamic background */
   border-radius: 8px;
   box-shadow: 0 2px 10px rgba(0,0,0,0.1);
 }