diff --git a/ui/src/components/chat/CanvasChat.vue b/ui/src/components/chat/CanvasChat.vue
index f591e82..387f1df 100644
--- a/ui/src/components/chat/CanvasChat.vue
+++ b/ui/src/components/chat/CanvasChat.vue
@@ -47,8 +47,8 @@ watch(() => chat.items.length, scrollBottom)
         <!-- mensaje de texto -->
         <div :class="m.owner==='yo' ? 'flex justify-end' : 'flex justify-start'" v-if="m.type==='text'">
           <div
-            class="max-w-lg rounded-lg px-4 py-2 shadow break-words"
-            :class="m.owner==='yo' ? 'bg-teal-600 text-white' : 'bg-white text-gray-900'">
+            class="user-message max-w-lg rounded-lg px-4 py-2 shadow break-words"
+            :class="m.owner==='yo' ? 'is-user text-white' : 'bg-white text-gray-900'">
             {{ m.text }}
           </div>
         </div>
@@ -65,9 +65,9 @@ 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-lg border p-3 focus:outline-none focus:ring-2 focus:ring-teal-500 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-lg bg-teal-600 text-white hover:bg-teal-700 transition">
+      <button type="submit" class="send-button px-4 py-2 rounded-lg text-white transition">
         ➤
       </button>
     </form>
@@ -75,9 +75,39 @@ 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: var(--accent-color-chat);
+}
+
+.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: var(--accent-color-chat);
+}
+.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(13,148,136,.35); border-radius: 4px; }
-.custom-scroll:hover::-webkit-scrollbar-thumb { background-color: rgba(13,148,136,.7); }
-.custom-scroll { scrollbar-width: thin; scrollbar-color: rgba(13,148,136,.6) 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>
diff --git a/ui/src/components/empleados/cardEmpleado.vue b/ui/src/components/empleados/cardEmpleado.vue
index 1abb0cf..9946086 100644
--- a/ui/src/components/empleados/cardEmpleado.vue
+++ b/ui/src/components/empleados/cardEmpleado.vue
@@ -47,14 +47,15 @@
 <script setup lang="ts">
 import { PropType } from 'vue'
 import { useRouter } from 'vue-router'
+import { useEmpleadosStore } from '@/stores/useEmpleados.js'; // Adjust path as needed
 
 interface Employee {
   id: string | number
   name: string
-  cedula: number
+  cedula: number // Assuming cedula is always present; adjust if optional
   avatar_url?: string
   telefono?: string
-  ubicacion: string
+  ubicacion: string // Assuming ubicacion is always present
   idciat?: string
   grupo_estudio?: string
 }
@@ -67,21 +68,38 @@ const props = defineProps({
 })
 
 const router = useRouter()
+const empleadosStore = useEmpleadosStore();
 
 const handleEdit = () => {
-  // The router pushes to `/empleados/:id` as per current router config,
-  // which maps to `EmpleadoForm.vue`. This form serves for both editing and viewing details.
   router.push(`/empleados/${props.employee.id}`)
 }
 
-// handleViewDetails method removed for consistency
+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 deleteEmployee = 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.
+  } 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'}`);
+  }
+};
 
 const buttonHover = (event: MouseEvent, isHovering: boolean) => {
   const target = event.target as HTMLElement;
   if (isHovering) {
-    target.style.filter = 'brightness(90%)';
+    target.style.filter = 'brightness(90%)'; // Darken slightly
   } else {
-    target.style.filter = 'brightness(100%)';
+    target.style.filter = 'brightness(100%)'; // Back to normal
   }
 };
 </script>
diff --git a/ui/src/components/empleados/tablaEmpleados.vue b/ui/src/components/empleados/tablaEmpleados.vue
index 74744df..593eddb 100644
--- a/ui/src/components/empleados/tablaEmpleados.vue
+++ b/ui/src/components/empleados/tablaEmpleados.vue
@@ -75,42 +75,58 @@
 </template>
 
 <script setup lang="ts">
-import { PropType } from 'vue'
-import { useRouter } from 'vue-router'
+import { PropType, defineEmits } from 'vue'
+// No longer using useRouter directly in this component for navigation
+// import { useRouter } from 'vue-router'
 import { useUi } from '../../stores/useUi.js';
+import { useEmpleadosStore } from '../../stores/useEmpleados.js'; // For delete functionality
 
 const ui = useUi();
+const empleadosStore = useEmpleadosStore();
 
-// Interface for Employee object structure, aligning with prisma model (excluding sensitive or large fields for table view)
+// Interface for Employee object structure
 interface Employee {
-  id: string | number; // Primary key for navigation and :key
+  id: string | number;
   name: string;
-  cedula: number; // Assuming cedula is a number; adjust if it's a string
+  cedula: number;
   avatar_url?: string;
   telefono?: string;
-  ubicacion: string; // As per schema, this has a default and likely always present
+  ubicacion: string;
   idciat?: string;
   grupo_estudio?: string;
-  // Omitting created_at, updated_at, empleado boolean for brevity in table
 }
 
 const props = defineProps({
   employees: {
     type: Array as PropType<Employee[]>,
     required: true,
-    default: () => [], // Provides a default empty array if no prop is passed
+    default: () => [],
   },
 });
 
-const router = useRouter();
+const emit = defineEmits(['edit']);
 
 const handleEdit = (employeeId: string | number) => {
-  router.push(`/empleados/edit/${employeeId}`);
+  emit('edit', employeeId); // Emit event for parent to handle navigation
 };
 
-const handleViewDetails = (employeeId: string | number) => {
-  // This could navigate to a dedicated detail view or the edit view itself
-  router.push(`/empleados/view/${employeeId}`); // Adjust route as per application structure
+// 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 deleteEmployeeInternal = async (employeeId: string | number) => {
+  try {
+    await empleadosStore.deleteEmpleado(employeeId);
+    // Optionally: emit success or use a notification system
+  } 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
+  }
 };
 </script>
 
@@ -121,11 +137,5 @@ const handleViewDetails = (employeeId: string | number) => {
   object-fit: cover; /* Ensures avatar images are displayed nicely */
 }
 
-/* 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 */
-}
+/* Icon transition style removed to align with tablaPlanillas.vue */
 </style>
diff --git a/ui/src/stores/useUi.js b/ui/src/stores/useUi.js
index 45eb65f..78c1cdd 100644
--- a/ui/src/stores/useUi.js
+++ b/ui/src/stores/useUi.js
@@ -99,9 +99,9 @@ export const useUi = defineStore('ui', {
       tableBgColorConfiguracion: '#FFFFFF',
       desktopNavbarPersistent: false,
       // Default module views
-      'defaultViewEmpleados': 'table',
+      'defaultViewEmpleados': 'card', // Changed from 'table' to 'card'
       'defaultViewTareas': 'table',
-      'defaultViewPlanillas': 'table',
+      'defaultViewPlanillas': 'table', // Already present
       'defaultViewAsistencias': 'table',
       'defaultViewConfiguracion': 'table',
     }
diff --git a/ui/src/style.css b/ui/src/style.css
index fb4740a..67053cc 100644
--- a/ui/src/style.css
+++ b/ui/src/style.css
@@ -24,10 +24,25 @@
   --card-hover-shadow: 0 4px 10px rgba(0,0,0,0.10);
 
   /* Colores de módulo */
-  --accent-color-asistencias: #4CAF50;
-  --accent-color-empleados:   #2196F3;
-  --accent-color-planillas:   #FF9800;
-  --accent-color-tareas:      #9C27B0;
+  /* 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));
 
   /* Fondos de tabla (light) */
   --table-container-bg-color-asistencias: #fdebee;
diff --git a/ui/src/views/empleados/EmpleadosIndex.vue b/ui/src/views/empleados/EmpleadosIndex.vue
index 90ec10b..290c60b 100644
--- a/ui/src/views/empleados/EmpleadosIndex.vue
+++ b/ui/src/views/empleados/EmpleadosIndex.vue
@@ -1,21 +1,14 @@
 <template>
-  <div class="p-6 bg-gray-50 min-h-screen">
-    <!-- … encabezado … -->
-    <header class="mb-8">
-      <div class="flex justify-between items-center">
-        <h1 class="text-4xl font-bold text-gray-800">Gestión de Empleados</h1>
-        <button
-          @click="goToCreateEmployee"
-          class="create-button px-6 py-3 text-white font-semibold rounded-lg shadow-md focus:outline-none transition duration-150 ease-in-out"
-        >
-          <!-- í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>
-      </div>
-      <p class="mt-2 text-gray-600">Visualiza, crea y gestiona los empleados de la organización.</p>
+  <div class="empleados-index-container">
+    <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>
 
     <!-- selector de vista -->
@@ -40,12 +33,12 @@
 
     <!-- contenido -->
     <div>
-      <div v-if="loading" class="text-center py-10">
-        <p class="text-gray-500 text-xl">Cargando empleados...</p>
+      <div v-if="loading" class="loading-message">
+        Cargando empleados...
       </div>
 
-      <div v-else-if="error" class="text-center py-10">
-        <p class="text-red-500 text-xl">Error al cargar los empleados: {{ error }}</p>
+      <div v-else-if="error" class="error-message-full">
+        <p>Error al cargar los empleados: {{ error }}</p>
       </div>
 
       <div v-else>
@@ -59,19 +52,16 @@
             :key="employee.id"
             :employee="employee"
           />
-          <div v-if="employees.length === 0" class="col-span-full text-center py-10">
-            <p class="text-gray-500 text-xl">No hay empleados para mostrar en la vista de tarjetas.</p>
+          <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"
-            class="text-center py-10 bg-white shadow-md rounded-lg mt-4"
-          >
-            <p class="text-gray-500 text-xl">No hay empleados para mostrar en la vista de tabla.</p>
+          <div v-if="employees.length === 0" class="no-data-message">
+            No hay empleados para mostrar en la vista de tabla.
           </div>
         </div>
       </div>
@@ -108,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`;
 };
@@ -134,25 +125,100 @@ const goToCreateEmployee = () => router.push({ name: 'empleados-new' });
 </script>
 
 <style scoped>
-.min-h-screen { min-height: calc(100vh - var(--navbar-height, 0px)); } /* Assuming --navbar-height is defined elsewhere or adjust */
-
-.create-button {
-  background-color: var(--accent-color-empleados);
-}
-.create-button:hover {
-  filter: brightness(1.1);
-}
-.create-button:focus {
-  box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px var(--accent-color-empleados);
+.empleados-index-container {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+  font-family: Arial, sans-serif;
 }
 
-.view-toggle-active {
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 25px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #eee;
+}
+
+.page-header h1 {
+  color: var(--accent-color-empleados); /* Accent for title */
+  font-size: 2.2em;
+  font-weight: 600;
+}
+
+.btn-create {
   background-color: var(--accent-color-empleados);
+  color: white; /* Assuming accent is dark enough */
+  padding: 12px 18px;
+  border: none;
+  border-radius: 5px;
+  font-size: 1em;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease, filter 0.2s ease;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.btn-create:hover {
+  filter: brightness(0.9); /* Darken, similar to PlanillasIndex */
+  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 */
+}
+
+
+/* Styles for loading, error, no-data messages, adapted from PlanillasIndex */
+.loading-message,
+.error-message-full,
+.no-data-message {
+  text-align: center;
+  padding: 25px;
+  margin-top: 25px;
+  border-radius: 8px;
+  font-size: 1.1em;
+}
+
+.loading-message {
+  color: #7f8c8d; /* Gray */
+  /* Consider adding a subtle background if needed, e.g., background-color: #f8f9f9; */
+}
+
+.error-message-full {
+  background-color: #fdedec; /* Lighter red */
+  color: #e74c3c; /* Strong red */
+  border: 1px solid #f5b7b1; /* Light red border */
+}
+.error-message-full p {
+  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 { /* 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), 0 0 0 4px var(--accent-color-empleados);
+  box-shadow: 0 0 0 2px var(--background-color, #fff), 0 0 0 4px var(--accent-color-empleados);
 }
 /* Inactive toggle button styling is handled by Tailwind classes directly in btnClass function */
 
 .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>