feat(ui): Synchronize card backgrounds with table background settings

This commit updates the card components in all modules (Asistencias, Empleados, Planillas, Tareas) to use the same background color as you specified in the module's "Table Background" setting.

Previously, card backgrounds were hardcoded (typically white). Now, they dynamically reflect your color choice for the corresponding module's table, ensuring visual consistency.

Changes made:
- Modified `cardAsistencia.vue`, `cardEmpleado.vue`, `cardPlanilla.vue`, and `cardTarea.vue`.
- Each card component now imports the `useUi` store.
- The main container of each card component has its `backgroundColor` style dynamically bound to the respective `tableBgColor<ModuleName>` property from the `useUi` store (e.g., `ui.tableBgColorAsistencias` for `cardAsistencia.vue`).
- Removed the static `bg-white` class from these card components.

This change directly addresses the issue where cards did not respect the color customization you selected in settings for table backgrounds.

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,

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'"
@@ -47,6 +47,9 @@
 <script setup lang="ts">
 import { PropType } from 'vue'
 import { useRouter } from 'vue-router'
+import { useUi } from '../../stores/useUi.js';
+
+const ui = useUi();
 
 interface Employee {
   id: string | number

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: {

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: {