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

@@ -47,8 +47,9 @@ 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="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'">
+            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>
@@ -65,9 +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">
+      <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)' }">
         ➤
       </button>
     </form>
@@ -75,39 +79,25 @@ 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);
+/* 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 {
-  /* 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(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>