feat(ui): Standardize card components and update README

I've standardized the visual appearance, structure, and functionality of card components across different modules (Asistencias, Empleados, Planillas, Tareas) to ensure a consistent user experience for you.

Key changes include:

- **Consistent HTML Structure:** All cards now follow a common layout with `card-header`, `card-body`, and `card-actions` sections.
- **Tailwind CSS Styling:** I've refactored card styling to use Tailwind CSS utility classes, removing scoped CSS where possible. This promotes maintainability and a unified design language. Tailwind CSS has been configured for the `ui` package.
- **CSS Variables for Theming:** I've introduced global CSS variables in `ui/src/style.css` for module-specific accent colors and common UI elements (e.g., warning colors, shadows), allowing for easier theming and consistent color usage.
- **Standardized Functionality:**
    - I've ensured "Edit" and "Delete" buttons have a consistent appearance and behavior.
    - Delete confirmation dialogs now use a standard message format.
    - I've removed the "View Details" button from `cardEmpleado.vue` for consistency, as other modules integrate detail viewing within their "Edit" forms.
- **README Update:** I've added a comprehensive section to `ui/README.md` documenting the standardized card components, including their structure, styling approach with Tailwind, theming via CSS variables, and basic usage guidelines.

These changes improve the visual consistency and maintainability of the UI's card elements.

ui/README.md

@@ -3,3 +3,97 @@
 This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
 
 Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
+
+## Standardized Card Components
+
+This section documents the standardized card components used throughout the UI for modules like Asistencias, Empleados, Planillas, and Tareas. These components have been refactored for a consistent structure, styling approach, and user experience.
+
+### Overview
+
+Card components provide a summarized display of an item (e.g., an employee, a task) and offer quick actions. The standardization ensures that users encounter a familiar layout and interaction pattern across different modules.
+
+### Common HTML Structure
+
+All standardized card components share a common HTML structure:
+
+-   **Root Element:** `<div class="card ...">`
+    -   This is the main container for the card.
+    -   Styling is primarily applied using Tailwind CSS utility classes. Common classes include `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`.
+-   **Card Header:** `<div class="card-header ...">`
+    -   Typically contains the title or ID of the item and a status badge.
+    -   Styled with Tailwind: `flex justify-between items-center mb-3 md:mb-4 pb-2 md:pb-3 border-b border-gray-100`.
+    -   The title element (e.g., `<h4>`) uses module-specific accent colors.
+-   **Card Body:** `<div class="card-body ...">`
+    -   Displays the main content fields of the item.
+    -   Styled with Tailwind: `text-sm text-gray-700 space-y-2`.
+-   **Card Actions:** `<div class="card-actions ...">`
+    -   Contains action buttons like "Editar" and "Eliminar".
+    -   Styled with Tailwind: `mt-auto pt-3 md:pt-4 flex justify-end space-x-2 md:space-x-3`.
+
+### Styling with Tailwind CSS
+
+The visual appearance of the cards (layout, spacing, typography, borders, shadows) is managed by [Tailwind CSS](https://tailwindcss.com/).
+-   Utility classes are applied directly in the component templates (`<template>` section of `.vue` files).
+-   The Tailwind configuration can be found in `ui/tailwind.config.js`.
+-   Core Tailwind directives (`@tailwind base; @tailwind components; @tailwind utilities;`) are included in `ui/src/style.css`.
+
+### Theming with CSS Variables
+
+While Tailwind handles most styling, module-specific theming (especially accent colors) and some global style properties are controlled by CSS variables. These variables are defined in the `:root` scope in `ui/src/style.css`.
+
+**Key CSS Variables:**
+
+-   **Module Accent Colors:**
+    -   `--accent-color-asistencias`: Accent color for the Asistencias module (e.g., for headers, buttons).
+    -   `--accent-color-empleados`: Accent color for the Empleados module.
+    -   `--accent-color-planillas`: Accent color for the Planillas module.
+    -   `--accent-color-tareas`: Accent color for the Tareas module.
+-   **Common Colors & Styles:**
+    -   `--warning-color`: Used for delete buttons and other warning indicators (e.g., `#dc3545`).
+    -   `--background-color`: Default background for the application.
+    -   `--text-color`: Default text color.
+    -   `--muted-text-color`: For less prominent text.
+    -   `--border-color`: Default border color.
+    -   `--card-shadow`: Default shadow for cards.
+    -   `--card-hover-shadow`: Shadow for cards on hover.
+
+**Usage Example (in a Vue component):**
+
+```html
+<h4 :style="{ color: 'var(--accent-color-empleados)' }">Employee Name</h4>
+
+<button :style="{ backgroundColor: 'var(--accent-color-empleados)' }">Edit Employee</button>
+```
+Alternatively, Tailwind's arbitrary value support can be used with CSS variables:
+```html
+<h4 class="text-[var(--accent-color-empleados)]">Employee Name</h4>
+<button class="bg-[var(--accent-color-empleados)] hover:bg-[var(--accent-color-empleados)]/90 ...">Edit</button>
+```
+The latter approach (Tailwind arbitrary values) is generally preferred for consistency with other Tailwind classes, but direct `:style` binding is also used, especially for properties not easily covered by Tailwind utilities or for dynamic hover effects managed in JavaScript.
+
+### Functionality
+
+-   **Actions:**
+    -   **Edit:** Navigates to the form view for editing the item (e.g., `/empleados/:id`).
+    -   **Delete:** Initiates a delete process for the item.
+-   **Delete Confirmation:** A standardized JavaScript `confirm()` dialog is used before deleting an item, with a message format like: `¿Está seguro de que desea eliminar [tipo de item] "[nombre/ID del item]" (ID: [ID])?`.
+
+### Component Usage
+
+Each card component is designed to be used within its respective module's views. They typically expect a prop containing the item data and emit an `edit` event.
+
+**Example (`cardAsistencia.vue`):**
+```vue
+<template>
+  <cardAsistencia :asistencia="asistenciaData" @edit="handleEditAsistencia" />
+</template>
+
+<script setup>
+// ...
+const asistenciaData = { id: 1, /* ... other properties */ };
+const handleEditAsistencia = (asistenciaId) => {
+  // Navigate to edit page or open modal
+};
+</script>
+```
+The specific prop name matches the module (e.g., `asistencia` for `cardAsistencia`, `employee` for `cardEmpleado`, `planilla` for `cardPlanilla`, `tarea` for `cardTarea`).

ui/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

ui/src/components/asistencias/cardAsistencia.vue

@@ -1,24 +1,32 @@
 <template>
-  <div class="asistencia-card">
-    <div class="card-header">
-      <h4>Asistencia ID: {{ asistencia.id }}</h4>
-      <span :class="`estado-asistencia estado-${asistencia.estado?.toLowerCase().replace(/\s+/g, '-')}`">
+  <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 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)]">
         {{ asistencia.estado || 'N/A' }}
       </span>
     </div>
-    <div class="card-body">
-      <p><strong>Empleado ID:</strong> {{ asistencia.empleado_id }}</p>
-      <p><strong>Entrada:</strong> {{ formatDateTime(asistencia.entrada) }}</p>
-      <p><strong>Salida:</strong> {{ asistencia.salida ? formatDateTime(asistencia.salida) : 'No registrada' }}</p>
-      <p v-if="asistencia.observacion" class="observacion">
-        <strong>Observación:</strong> {{ asistencia.observacion }}
+    <div class="text-sm text-gray-700 space-y-2">
+      <p><strong class="font-medium text-gray-900">Empleado ID:</strong> {{ asistencia.empleado_id }}</p>
+      <p><strong class="font-medium text-gray-900">Entrada:</strong> {{ formatDateTime(asistencia.entrada) }}</p>
+      <p><strong class="font-medium text-gray-900">Salida:</strong> {{ asistencia.salida ? formatDateTime(asistencia.salida) : 'No registrada' }}</p>
+      <p v-if="asistencia.observacion" class="italic text-gray-600 bg-gray-50 p-2 border-l-3 rounded" :style="{ borderColor: 'var(--accent-color-asistencias)' }">
+        <strong class="font-medium text-gray-900">Observación:</strong> {{ asistencia.observacion }}
       </p>
-      <!-- Historial might be too complex for a card, but can be added if needed -->
-      <!-- <p v-if="asistencia.historial"><strong>Historial:</strong> {{ asistencia.historial }}</p> -->
     </div>
-    <div class="card-actions">
-      <button @click="editAsistencia" class="action-button edit-button">Editar</button>
-      <button @click="confirmDeleteAsistencia" class="action-button delete-button">Eliminar</button>
+    <div class="mt-auto pt-3 md:pt-4 flex justify-end space-x-2 md:space-x-3">
+      <button
+        @click="editAsistencia"
+        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 text-white"
+        :style="{ backgroundColor: 'var(--accent-color-asistencias)', borderColor: 'var(--accent-color-asistencias)' }"
+        @mouseover="buttonHover($event, true, 'var(--accent-color-asistencias)')"
+        @mouseleave="buttonHover($event, false, 'var(--accent-color-asistencias)')"
+        :class="`focus:ring-[var(--accent-color-asistencias)]`"
+      >Editar</button>
+      <button
+        @click="confirmDeleteAsistencia"
+        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>
@@ -26,6 +34,7 @@
 <script setup>
 import { defineProps, defineEmits } from 'vue';
 import { useAsistenciasStore } from '../../stores/useAsistencias';
+import { computed } from 'vue';
 
 const props = defineProps({
   asistencia: {
@@ -41,14 +50,7 @@ const asistenciasStore = useAsistenciasStore();
 const formatDateTime = (dateTimeString) => {
   if (!dateTimeString) return 'N/A';
   const date = new Date(dateTimeString);
-  return date.toLocaleString('es-HN', { timeZone: 'America/Tegucigalpa', year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' }); // Spanish locale
-    // year: 'numeric', // Already present in the new options
-    // month: '2-digit', // Using 2-digit for month for brevity in card // Already present in the new options
-    // day: '2-digit',   // Using 2-digit for day // Already present in the new options
-    // hour: '2-digit', // Already present in the new options
-    // minute: '2-digit', // Already present in the new options
-    // second: '2-digit', // Optional: include seconds
-  // }); // Removed this line as options are now in a single line
+  return date.toLocaleString('es-HN', { timeZone: 'America/Tegucigalpa', year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' });
 };
 
 const editAsistencia = () => {
@@ -56,7 +58,7 @@ const editAsistencia = () => {
 };
 
 const confirmDeleteAsistencia = () => {
-  if (confirm(`¿Está seguro de que desea eliminar esta asistencia (ID: ${props.asistencia.id})?`)) {
+  if (confirm(`¿Está seguro de que desea eliminar la asistencia "${props.asistencia.id}" (ID: ${props.asistencia.id})?`)) {
     deleteAsistenciaInternal();
   }
 };
@@ -64,126 +66,48 @@ const confirmDeleteAsistencia = () => {
 const deleteAsistenciaInternal = async () => {
   try {
     await asistenciasStore.deleteAsistencia(props.asistencia.id);
-    // Optionally, emit 'deleted' or show notification
   } catch (error) {
     console.error('Error deleting asistencia:', error);
     alert('Ocurrió un error al eliminar la asistencia.');
   }
 };
+
+const getStatusClass = (status) => {
+  if (!status) return 'bg-gray-400'; // Default for N/A
+  const statusNormalized = status.toLowerCase().replace(/\s+/g, '-');
+  switch (statusNormalized) {
+    case 'pendiente': return 'bg-yellow-500 text-gray-800';
+    case 'presente':
+    case 'confirmada': return 'bg-green-500';
+    case 'ausente': return 'bg-red-500';
+    case 'justificada': return 'bg-blue-500';
+    case 'cancelada':
+    case 'anulada': return 'bg-gray-500';
+    default: return 'bg-gray-400';
+  }
+};
+
+const buttonHover = (event, isHovering, colorVar) => {
+  if (isHovering) {
+    event.target.style.filter = 'brightness(90%)';
+  } else {
+    event.target.style.filter = 'brightness(100%)';
+  }
+};
+
 </script>
 
 <style scoped>
-.asistencia-card {
-  border: 1px solid #e0e0e0; /* Lighter border for a softer look */
-  padding: 16px;
-  margin-bottom: 16px;
-  border-radius: 8px;
-  background-color: #fff;
-  box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Softer shadow */
-  display: flex;
-  flex-direction: column;
-  transition: box-shadow 0.3s ease-in-out;
-}
-.asistencia-card:hover {
-    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Enhanced shadow on hover */
-}
+/* Minimal scoped styles, mainly for complex status colors if not handled by Tailwind directly */
+/* Or for :style bindings if preferred for dynamic properties like accent colors */
 
-.card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 12px;
-  padding-bottom: 10px; /* Increased padding */
-  border-bottom: 1px solid #f0f0f0; /* Even lighter border */
+/* The border-l-3 for observation uses a utility-like class,
+   but Tailwind doesn't have border-left-width: 3px by default.
+   You could add this to your tailwind.config.js if used often:
+   theme: { extend: { borderWidth: { '3': '3px' } } }
+   Then use class `border-l-3`. For now, inline style is fine.
+*/
+.border-l-3 {
+  border-left-width: 3px;
 }
-
-.card-header h4 { /* Style for the new Asistencia ID header */
-  font-weight: bold;
-  color: var(--accent-color-asistencias); /* Accent color */
-  font-size: 1.15em; /* Slightly larger for main header element */
-  margin: 0; /* Remove default margin */
-}
-
-.empleado-id { /* This class is no longer used in the header, but could be reused elsewhere if needed */
-  font-weight: bold;
-  color: var(--accent-color-asistencias); /* Accent color */
-  font-size: 1.05em;
-}
-
-.estado-asistencia {
-  padding: 5px 10px; /* Slightly more padding */
-  border-radius: 15px; /* Pill shape */
-  font-size: 0.8em;
-  font-weight: bold;
-  color: white;
-  text-transform: uppercase; /* Uppercase status */
-  letter-spacing: 0.5px;
-}
-
-.card-body p {
-  margin: 8px 0;
-  color: #555;
-  font-size: 0.95em;
-  line-height: 1.6; /* Improved line spacing */
-}
-.card-body p strong {
-  color: #333;
-}
-.observacion {
-  font-style: italic;
-  color: #666;
-  background-color: #f8f9fa; /* Very light grey background */
-  padding: 10px; /* More padding */
-  border-left: 3px solid var(--accent-color-asistencias); /* Accent color for border */
-  border-radius: 4px;
-  margin-top:10px;
-  font-size: 0.9em; /* Slightly smaller for observation */
-}
-
-.card-actions {
-  margin-top: auto; 
-  padding-top: 16px; /* More space before actions */
-  display: flex;
-  justify-content: flex-end; 
-  gap: 10px;
-}
-
-.action-button {
-  padding: 8px 15px;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  font-size: 0.9em;
-  font-weight: 500; /* Slightly bolder text on buttons */
-  transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
-}
-.action-button:hover{
-    transform: translateY(-2px); /* More pronounced lift */
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-}
-
-.edit-button {
-  background-color: var(--accent-color-asistencias);
-  color: white;
-}
-.edit-button:hover {
-  filter: brightness(0.9);
-}
-
-.delete-button {
-  background-color: var(--warning-color); /* Use warning color for delete */
-  color: white;
-}
-.delete-button:hover {
-  filter: brightness(0.9);
-}
-
-/* Estado specific styling */
-.estado-pendiente { background-color: #ffc107; color: #212529;} /* Amber, dark text */
-.estado-presente,
-.estado-confirmada { background-color: #28a745; color: white;} /* Green */
-.estado-ausente { background-color: #dc3545; color: white;} /* Red */
-.estado-justificada { background-color: #17a2b8; color: white;} /* Info Blue */
-.estado-cancelada,
-.estado-anulada { background-color: #6c757d; color: white;} /* Gray */
 </style>

ui/src/components/empleados/cardEmpleado.vue

@@ -1,41 +1,45 @@
 <template>
-  <div class="bg-white shadow-lg rounded-lg p-6 m-4 w-full max-w-sm hover:shadow-xl transition-shadow duration-300 ease-in-out">
-    <div class="flex items-center mb-4">
+  <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 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'"
         alt="Avatar del empleado"
-        class="w-20 h-20 rounded-full mr-6 border-2 object-cover employee-avatar-border"
+        class="w-16 h-16 rounded-full mr-4 border-2 object-cover"
+        :style="{ borderColor: 'var(--accent-color-empleados)' }"
       />
       <div>
-        <h2 class="text-2xl font-bold text-gray-800">{{ employee.name }}</h2>
-        <p class="text-gray-600 text-sm">ID: {{ employee.id }}</p>
+        <h2 class="text-lg md:text-xl font-semibold" :style="{ color: 'var(--accent-color-empleados)' }">{{ employee.name }}</h2>
+        <p class="text-xs text-gray-500">ID: {{ employee.id }}</p>
       </div>
     </div>
-    <div class="space-y-2">
-      <div v-if="employee.telefono" class="flex items-center text-gray-700">
-        <svg class="w-5 h-5 mr-2 employee-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.308 1.154a11.042 11.042 0 005.516 5.516l1.154-2.308a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path></svg>
-        <span>{{ employee.telefono }}</span>
-      </div>
-      <div v-if="employee.ubicacion" class="flex items-center text-gray-700">
-        <svg class="w-5 h-5 mr-2 employee-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
-        <span>{{ employee.ubicacion }}</span>
-      </div>
-      <div v-if="employee.cedula" class="flex items-center text-gray-700">
-        <svg class="w-5 h-5 mr-2 employee-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 012-2h2a2 2 0 012 2v1m-4 0h4m-6 10v-5m0 5v0z"></path></svg>
-        <span>Cedula: {{ employee.cedula }}</span>
-      </div>
-      <div v-if="employee.grupo_estudio" class="flex items-center text-gray-700">
-         <svg class="w-5 h-5 mr-2 employee-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 14l9-5-9-5-9 5 9 5z"></path><path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-5.998 12.083 12.083 0 01.665-6.479L12 14z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0v3.945m0-3.945L6.161 10.58M17.839 10.58L12 14m5.839-3.42L12 14m0 0l6.161 3.42m-6.161-3.42L5.839 14.002"></path></svg>
-        <span>Grupo Estudio: {{ employee.grupo_estudio }}</span>
-      </div>
+    <div class="text-sm text-gray-700 space-y-2">
+      <p v-if="employee.telefono" class="flex items-center">
+        <svg class="w-5 h-5 mr-2 shrink-0" :style="{ color: 'var(--accent-color-empleados)' }" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.308 1.154a11.042 11.042 0 005.516 5.516l1.154-2.308a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path></svg>
+        <strong class="font-medium text-gray-900">Teléfono:</strong>&nbsp;<span>{{ employee.telefono }}</span>
+      </p>
+      <p v-if="employee.ubicacion" class="flex items-center">
+        <svg class="w-5 h-5 mr-2 shrink-0" :style="{ color: 'var(--accent-color-empleados)' }" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
+        <strong class="font-medium text-gray-900">Ubicación:</strong>&nbsp;<span>{{ employee.ubicacion }}</span>
+      </p>
+      <p v-if="employee.cedula" class="flex items-center">
+        <svg class="w-5 h-5 mr-2 shrink-0" :style="{ color: 'var(--accent-color-empleados)' }" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 012-2h2a2 2 0 012 2v1m-4 0h4m-6 10v-5m0 5v0z"></path></svg>
+        <strong class="font-medium text-gray-900">Cédula:</strong>&nbsp;<span>{{ employee.cedula }}</span>
+      </p>
+      <p v-if="employee.grupo_estudio" class="flex items-center">
+         <svg class="w-5 h-5 mr-2 shrink-0" :style="{ color: 'var(--accent-color-empleados)' }" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 14l9-5-9-5-9 5 9 5z"></path><path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-5.998 12.083 12.083 0 01.665-6.479L12 14z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0v3.945m0-3.945L6.161 10.58M17.839 10.58L12 14m5.839-3.42L12 14m0 0l6.161 3.42m-6.161-3.42L5.839 14.002"></path></svg>
+        <strong class="font-medium text-gray-900">Grupo Estudio:</strong>&nbsp;<span>{{ employee.grupo_estudio }}</span>
+      </p>
     </div>
-    <div class="mt-6 flex justify-end space-x-3">
-      <button @click="handleEdit" class="edit-button px-4 py-2 text-white text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2">
-        Editar
-      </button>
-      <button @click="handleViewDetails" class="px-4 py-2 bg-gray-200 text-gray-700 text-sm font-medium rounded-md hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2">
-        Ver Detalles
-      </button>
+    <div class="mt-auto pt-3 md:pt-4 flex justify-end space-x-2 md:space-x-3">
+      <button
+        @click="handleEdit"
+        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 text-white"
+        :style="{ backgroundColor: 'var(--accent-color-empleados)', borderColor: 'var(--accent-color-empleados)' }"
+        @mouseover="buttonHover($event, true)"
+        @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 -->
     </div>
   </div>
 </template>
@@ -44,18 +48,15 @@
 import { PropType } from 'vue'
 import { useRouter } from 'vue-router'
 
-// Define the structure of the employee object based on the Prisma schema
 interface Employee {
-  id: string | number // Changed from BigInt to string | number for easier handling in frontend
+  id: string | number
   name: string
-  cedula: number // Changed from BigInt
+  cedula: number
   avatar_url?: string
   telefono?: string
   ubicacion: string
   idciat?: string
   grupo_estudio?: string
-  // created_at and updated_at are usually not displayed directly in a summary card
-  // empleado: boolean // This is implicit as it's an employee card
 }
 
 const props = defineProps({
@@ -68,65 +69,29 @@ const props = defineProps({
 const router = useRouter()
 
 const handleEdit = () => {
-  // Ensure employee.id is available and correctly typed for URL
-  router.push(`/empleados/edit/${props.employee.id}`)
+  // 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}`)
 }
 
-const handleViewDetails = () => {
-  // This could navigate to a more detailed employee page if one exists
-  // For now, it can also navigate to an edit page or a specific detail view
-  // Depending on the application's routing structure, this might be the same as edit or a different view
-  router.push(`/empleados/view/${props.employee.id}`) // Assuming a dedicated view route exists or will be created
-}
+// handleViewDetails method removed for consistency
+
+const buttonHover = (event: MouseEvent, isHovering: boolean) => {
+  const target = event.target as HTMLElement;
+  if (isHovering) {
+    target.style.filter = 'brightness(90%)';
+  } else {
+    target.style.filter = 'brightness(100%)';
+  }
+};
 </script>
 
 <style scoped>
-/* Scoped styles for the card ensure they don't leak */
-.max-w-sm {
-  max-width: 24rem; /* Consistent with Tailwind's sm breakpoint for max-width */
+/* Minimal scoped styles */
+.shrink-0 {
+  flex-shrink: 0;
 }
-
-/* Adding some subtle enhancements for visual appeal */
-.text-2xl {
-  line-height: 1.2; /* Adjust line height for the title for better readability */
-}
-
-.flex svg {
-    flex-shrink: 0; /* Prevent SVGs from shrinking if text is long, ensuring icon consistency */
-}
-
-.employee-avatar-border {
-  border-color: var(--accent-color-empleados);
-}
-
-.employee-icon {
-  color: var(--accent-color-empleados);
-}
-
-.edit-button {
-  background-color: var(--accent-color-empleados);
-  /* Ensure focus ring also uses accent color if desired, e.g. by adding a specific class or style */
-}
-.edit-button:hover {
-  filter: brightness(1.1);
-}
-.edit-button:focus {
-  box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px var(--accent-color-empleados);
-}
-
-
-/* Styling for buttons for a more refined and interactive look */
-button {
-  transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, transform 0.1s ease-in-out, filter 0.2s ease-in-out;
-}
-button:hover {
-    transform: translateY(-1px); /* Slight lift on hover */
-}
-button:active {
-    transform: translateY(0px); /* Reset lift on click */
-}
-
 .rounded-full {
-    object-fit: cover; /* Ensures the avatar image covers the area without distortion */
+  object-fit: cover; /* Ensures the avatar image covers the area without distortion */
 }
 </style>

ui/src/components/planillas/cardPlanilla.vue

@@ -1,15 +1,31 @@
 <template>
-  <div class="planilla-card">
-    <h4>Planilla ID: {{ planilla.id }}</h4>
-    <p><strong>Título:</strong> {{ planilla.titulo }}</p>
-    <p><strong>Empleado ID:</strong> {{ planilla.empleado_id }}</p>
-    <p><strong>Desde:</strong> {{ formatDate(planilla.fecha_desde) }}</p>
-    <p><strong>Hasta:</strong> {{ formatDate(planilla.fecha_hasta) }}</p>
-    <p><strong>Total:</strong> {{ formatCurrency(planilla.total) }}</p>
-    <p><strong>Estado:</strong> <span :class="`estado-${planilla.estado?.toLowerCase()}`">{{ planilla.estado }}</span></p>
-    <div class="actions">
-      <button @click="editPlanilla">Editar</button>
-      <button @click="confirmDeletePlanilla">Eliminar</button>
+  <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 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)]">
+        {{ planilla.estado || 'N/A' }}
+      </span>
+    </div>
+    <div class="text-sm text-gray-700 space-y-2">
+      <p><strong class="font-medium text-gray-900">Título:</strong> {{ planilla.titulo }}</p>
+      <p><strong class="font-medium text-gray-900">Empleado ID:</strong> {{ planilla.empleado_id }}</p>
+      <p><strong class="font-medium text-gray-900">Desde:</strong> {{ formatDate(planilla.fecha_desde) }}</p>
+      <p><strong class="font-medium text-gray-900">Hasta:</strong> {{ formatDate(planilla.fecha_hasta) }}</p>
+      <p><strong class="font-medium text-gray-900">Total:</strong> {{ formatCurrency(planilla.total) }}</p>
+    </div>
+    <div class="mt-auto pt-3 md:pt-4 flex justify-end space-x-2 md:space-x-3">
+      <button
+        @click="editPlanilla"
+        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 text-white"
+        :style="{ backgroundColor: 'var(--accent-color-planillas)', borderColor: 'var(--accent-color-planillas)' }"
+        @mouseover="buttonHover($event, true)"
+        @mouseleave="buttonHover($event, false)"
+        :class="`focus:ring-[var(--accent-color-planillas)]`"
+      >Editar</button>
+      <button
+        @click="confirmDeletePlanilla"
+        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>
@@ -36,9 +52,7 @@ const formatDate = (dateString) => {
 };
 
 const formatCurrency = (value) => {
-  if (value == null) return 'N/A'; // Handle null or undefined totals
-  // Assuming the value is a number or can be converted to one.
-  // Adjust 'es-PY' and currency 'PYG' (Paraguayan Guarani) as needed.
+  if (value == null) return 'N/A';
   return Number(value).toLocaleString('es-PY', { 
     style: 'currency', 
     currency: 'PYG' 
@@ -50,8 +64,7 @@ const editPlanilla = () => {
 };
 
 const confirmDeletePlanilla = () => {
-  // In a real app, you'd use a confirmation dialog here
-  if (confirm(`¿Está seguro de que desea eliminar la planilla "${props.planilla.titulo}"?`)) {
+  if (confirm(`¿Está seguro de que desea eliminar la planilla "${props.planilla.titulo}" (ID: ${props.planilla.id})?`)) {
     deletePlanilla();
   }
 };
@@ -59,85 +72,35 @@ const confirmDeletePlanilla = () => {
 const deletePlanilla = async () => {
   try {
     await planillasStore.deletePlanilla(props.planilla.id);
-    // Optionally, emit an event or show a notification upon successful deletion
-    // For example: emit('deleted', props.planilla.id);
   } catch (error) {
     console.error('Error deleting planilla:', error);
-    // Handle error (e.g., show a notification to the user)
+    alert('Ocurrió un error al eliminar la planilla.');
   }
 };
+
+const getStatusClass = (status) => {
+  if (!status) return 'bg-gray-400';
+  const statusNormalized = status.toLowerCase().replace(/\s+/g, '-');
+  switch (statusNormalized) {
+    case 'pagado': return 'bg-green-500';
+    case 'pendiente': return 'bg-yellow-500 text-gray-800';
+    case 'anulado': return 'bg-red-500';
+    case 'borrador': return 'bg-gray-500';
+    default: return 'bg-gray-400';
+  }
+};
+
+const buttonHover = (event, isHovering) => {
+  if (isHovering) {
+    event.target.style.filter = 'brightness(90%)';
+  } else {
+    event.target.style.filter = 'brightness(100%)';
+  }
+};
+
 </script>
 
 <style scoped>
-.planilla-card {
-  border: 1px solid #ccc;
-  padding: 16px;
-  margin-bottom: 16px;
-  border-radius: 8px;
-  background-color: #f9f9f9;
-}
-
-.planilla-card h4 { /* Updated selector from h3 to h4 */
-  margin-top: 0;
-  color: var(--accent-color-planillas); /* Accent color for title */
-  font-size: 1.2em; /* Adjust size as needed, h4 is typically smaller than h3 */
-}
-
-.planilla-card h3 { /* Keep if h3 is used elsewhere, or remove if h4 is the new standard */
-  margin-top: 0;
-  color: var(--accent-color-planillas); /* Accent color for title */
-}
-
-.planilla-card p {
-  margin: 8px 0;
-  color: #555;
-}
-
-.planilla-card .actions {
-  margin-top: 12px;
-  display: flex;
-  gap: 8px;
-}
-
-.planilla-card button {
-  padding: 8px 12px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.planilla-card button:hover {
-  opacity: 0.8;
-}
-
-.actions button:first-child { /* Edit button */
-  background-color: var(--accent-color-planillas);
-  color: white;
-}
-.actions button:first-child:hover { /* Edit button hover */
-  filter: brightness(0.9);
-}
-
-.actions button:last-child { /* Delete button */
-  background-color: var(--warning-color); /* Using warning color for delete */
-  color: white;
-}
-.actions button:last-child:hover { /* Delete button hover */
-  filter: brightness(0.9);
-}
-
-/* Example status styling */
-.estado-pagado {
-  color: green;
-  font-weight: bold;
-}
-.estado-pendiente {
-  color: orange;
-  font-weight: bold;
-}
-.estado-anulado {
-  color: red;
-  font-weight: bold;
-  text-decoration: line-through;
-}
+/* All layout and most styling is now handled by Tailwind utility classes. */
+/* Scoped styles can be used for very specific cases not covered by Tailwind, if any. */
 </style>

ui/src/components/tareas/cardTarea.vue

@@ -1,17 +1,34 @@
 <template>
-  <div class="tarea-card">
-    <h4>Tarea ID: {{ tarea.id }}</h4>
-    <p><strong>Título:</strong> {{ tarea.titulo }}</p>
-    <p><strong>Empleado ID:</strong> {{ tarea.empleado_id }}</p>
-    <p><strong>Fecha:</strong> {{ formatDate(tarea.fecha) }}</p>
-    <p><strong>Estado:</strong> <span :class="`estado-${tarea.estado?.toLowerCase().replace(/\s+/g, '-')}`">{{ tarea.estado }}</span></p>
-    <p><strong>Tipo:</strong> {{ tarea.tipo || 'N/A' }}</p>
-    <p v-if="tarea.precio != null"><strong>Precio:</strong> {{ formatCurrency(tarea.precio) }}</p>
-    <p v-if="tarea.observacion"><strong>Observación:</strong> {{ tarea.observacion }}</p>
-    
-    <div class="actions">
-      <button @click="editTarea" class="action-button edit-button">Editar</button>
-      <button @click="confirmDeleteTarea" class="action-button delete-button">Eliminar</button>
+  <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 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)]">
+        {{ tarea.estado || 'N/A' }}
+      </span>
+    </div>
+    <div class="text-sm text-gray-700 space-y-2">
+      <p><strong class="font-medium text-gray-900">Título:</strong> {{ tarea.titulo }}</p>
+      <p><strong class="font-medium text-gray-900">Empleado ID:</strong> {{ tarea.empleado_id }}</p>
+      <p><strong class="font-medium text-gray-900">Fecha:</strong> {{ formatDate(tarea.fecha) }}</p>
+      <p><strong class="font-medium text-gray-900">Tipo:</strong> {{ tarea.tipo || 'N/A' }}</p>
+      <p v-if="tarea.precio != null"><strong class="font-medium text-gray-900">Precio:</strong> {{ formatCurrency(tarea.precio) }}</p>
+      <p v-if="tarea.observacion" class="italic text-gray-600 bg-gray-50 p-2 border-l-3 rounded" :style="{ borderColor: 'var(--accent-color-tareas)' }">
+        <strong class="font-medium text-gray-900">Observación:</strong> {{ tarea.observacion }}
+      </p>
+    </div>
+    <div class="mt-auto pt-3 md:pt-4 flex justify-end space-x-2 md:space-x-3">
+      <button
+        @click="editTarea"
+        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 text-white"
+        :style="{ backgroundColor: 'var(--accent-color-tareas)', borderColor: 'var(--accent-color-tareas)' }"
+        @mouseover="buttonHover($event, true)"
+        @mouseleave="buttonHover($event, false)"
+        :class="`focus:ring-[var(--accent-color-tareas)]`"
+      >Editar</button>
+      <button
+        @click="confirmDeleteTarea"
+        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>
@@ -39,7 +56,7 @@ const formatDate = (dateString) => {
 
 const formatCurrency = (value) => {
   if (value == null) return ''; 
-  return Number(value).toLocaleString('es-PY', { // Paraguayan Guarani
+  return Number(value).toLocaleString('es-PY', {
     style: 'currency',
     currency: 'PYG', 
   });
@@ -50,7 +67,7 @@ const editTarea = () => {
 };
 
 const confirmDeleteTarea = () => {
-  if (confirm(`¿Está seguro de que desea eliminar la tarea "${props.tarea.titulo}"?`)) {
+  if (confirm(`¿Está seguro de que desea eliminar la tarea "${props.tarea.titulo}" (ID: ${props.tarea.id})?`)) {
     deleteTareaInternal();
   }
 };
@@ -58,99 +75,42 @@ const confirmDeleteTarea = () => {
 const deleteTareaInternal = async () => {
   try {
     await tareasStore.deleteTarea(props.tarea.id);
-    // Optionally, emit a 'deleted' event: emit('deleted', props.tarea.id);
-    // Or show a success notification.
   } catch (error) {
     console.error('Error deleting tarea:', error);
     alert('Ocurrió un error al eliminar la tarea. Por favor, intente de nuevo.');
-    // Potentially show a more user-friendly notification.
   }
 };
+
+const getStatusClass = (status) => {
+  if (!status) return 'bg-gray-400';
+  const statusNormalized = status.toLowerCase().replace(/\s+/g, '-');
+  switch (statusNormalized) {
+    case 'pendiente': return 'bg-yellow-500 text-gray-800';
+    case 'realizada':
+    case 'completada':
+    case 'hecho': return 'bg-green-500';
+    case 'en-progreso': return 'bg-blue-500';
+    case 'anulada':
+    case 'cancelada': return 'bg-red-500';
+    case 'archivada': return 'bg-gray-500';
+    default: return 'bg-gray-400';
+  }
+};
+
+const buttonHover = (event, isHovering) => {
+  if (isHovering) {
+    event.target.style.filter = 'brightness(90%)';
+  } else {
+    event.target.style.filter = 'brightness(100%)';
+  }
+};
+
 </script>
 
 <style scoped>
-.tarea-card {
-  border: 1px solid #e0e0e0;
-  padding: 16px;
-  margin-bottom: 16px;
-  border-radius: 8px;
-  background-color: #ffffff;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
-  transition: box-shadow 0.3s ease-in-out;
-}
-
-.tarea-card:hover {
-  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
-}
-
-.tarea-card h4 {
-  margin-top: 0;
-  margin-bottom: 12px;
-  color: var(--accent-color-tareas); /* Accent color for title */
-  font-size: 1.15em; /* Slightly smaller than a typical h3 */
-}
-
-.tarea-card p {
-  margin: 6px 0;
-  color: #555;
-  font-size: 0.95em;
-  line-height: 1.5;
-}
-
-.tarea-card p strong {
-  color: #444;
-}
-
-.actions {
-  margin-top: 16px;
-  display: flex;
-  gap: 10px;
-}
-
-.action-button {
-  padding: 8px 12px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 0.9em;
-  transition: background-color 0.2s ease, opacity 0.2s ease;
-}
-
-.edit-button {
-  background-color: var(--accent-color-tareas);
-  color: white;
-}
-.edit-button:hover {
-  filter: brightness(0.9); /* Standard hover effect */
-}
-
-.delete-button {
-  background-color: #dc3545; /* Red */
-  color: white;
-}
-.delete-button:hover {
-  background-color: #c82333; /* Darker red */
-}
-
-/* Status styling: Added .replace(/\s+/g, '-') for multi-word statuses */
-.estado-pendiente {
-  color: #ff9800; /* Orange */
-  font-weight: bold;
-}
-.estado-realizada,
-.estado-completada, /* Common synonyms for 'done' */
-.estado-hecho {
-  color: #4caf50; /* Green */
-  font-weight: bold;
-}
-.estado-en-progreso { /* Example for 'in progress' */
-    color: #2196f3; /* Blue */
-    font-weight: bold;
-}
-.estado-anulada,
-.estado-cancelada {
-  color: #f44336; /* Red */
-  font-weight: bold;
-  /* text-decoration: line-through; */ /* Optional */
+/* Minimal scoped styles, mainly for complex status colors if not handled by Tailwind directly */
+/* Or for :style bindings if preferred for dynamic properties like accent colors */
+.border-l-3 {
+  border-left-width: 3px;
 }
 </style>

ui/src/style.css

@@ -4,20 +4,22 @@
 @tailwind utilities;
 
 :root {
-  --primary-color: #1976D2;
-  --secondary-color: #424242;
-  --warning-color: #FFC107;
-  --background-color: #FFFFFF;
-  --font-family: 'Roboto', sans-serif;
-  --font-size: 16px;
-  /* Add other variables as needed, e.g., text colors for themes */
-  --text-color: #212121; /* Default text color for light theme */
-
-  /* Module-specific accent colors - Default Fallbacks */
-  --accent-color-empleados: #2196F3;
-  --accent-color-tareas: #4CAF50;
-  --accent-color-planillas: #FF9800;
-  --accent-color-asistencias: #E91E63;
+  --accent-color-asistencias: #4CAF50; /* Example Green */
+  --accent-color-empleados: #2196F3;  /* Example Blue */
+  --accent-color-planillas: #FF9800; /* Example Orange */
+  --accent-color-tareas: #9C27B0;    /* Example Purple */
+  --warning-color: #dc3545;         /* Example Red for delete buttons */
+  --background-color: #ffffff;
+  --text-color: #333333;
+  --muted-text-color: #555555;
+  --border-color: #e0e0e0;
+  --card-shadow: 0 2px 5px rgba(0,0,0,0.05);
+  --card-hover-shadow: 0 4px 10px rgba(0,0,0,0.1);
+  /* Retaining existing theme variables that don't conflict */
+  --primary-color: #1976D2; /* Kept from original */
+  --secondary-color: #424242; /* Kept from original */
+  --font-family: 'Roboto', sans-serif; /* Kept from original */
+  --font-size: 16px; /* Kept from original */
 }
 
 html.theme-dark {

ui/tailwind.config.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{vue,js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}