diff --git a/README.md b/README.md
index eb98a43..33338dc 100644
--- a/README.md
+++ b/README.md
@@ -132,6 +132,9 @@ docker compose down --remove-orphans
* Arranca en puerto **80** internamente.
* Código fuente en `ui/src/`, configuración en `vite.config.js`.
+#### Card Animation
+The data cards implemented in `ui/src/components/ui/NucleoDataCard.vue` now feature a subtle growing animation when hovered over. This animation is implemented purely with CSS using keyframes and transitions defined within the component's `
diff --git a/ui/src/components/ui/NucleoTable.vue b/ui/src/components/ui/NucleoTable.vue
index f542c3f..f5d2190 100644
--- a/ui/src/components/ui/NucleoTable.vue
+++ b/ui/src/components/ui/NucleoTable.vue
@@ -20,8 +20,8 @@
diff --git a/ui/src/style.css b/ui/src/style.css
index fb4740a..befcd01 100644
--- a/ui/src/style.css
+++ b/ui/src/style.css
@@ -29,6 +29,15 @@
--accent-color-planillas: #FF9800;
--accent-color-tareas: #9C27B0;
+ /* Table background colors */
+ --table-bg-color-asistencias: #fdebee;
+ --table-bg-color-empleados: #e3f2fd;
+ --table-bg-color-planillas: #fff8e1;
+ --table-bg-color-tareas: #e6f4ea;
+
+ /* Input background color */
+ --input-field-bg-color: #FFFFFF;
+
/* Fondos de tabla (light) */
--table-container-bg-color-asistencias: #fdebee;
--table-container-bg-color-empleados: #e3f2fd;
@@ -44,6 +53,13 @@ html.theme-dark {
--background-color: #303030; /* Dark theme background */
--text-color: #FFFFFF; /* Text color for dark theme */
+ /* Table background colors (dark theme) */
+ --table-bg-color-asistencias: #4a1f28;
+ --table-bg-color-empleados: #193a50;
+ --table-bg-color-planillas: #503f1b;
+ --table-bg-color-tareas: #1e4028;
+ --input-field-bg-color: #000000;
+
/* NEW: Module-specific table container background colors (Dark Theme) */
--table-container-bg-color-asistencias: #4a1f28;
--table-container-bg-color-empleados: #193a50;
diff --git a/ui/src/views/empleados/EmpleadoForm.vue b/ui/src/views/empleados/EmpleadoForm.vue
index 72b86c9..e2fa142 100644
--- a/ui/src/views/empleados/EmpleadoForm.vue
+++ b/ui/src/views/empleados/EmpleadoForm.vue
@@ -1,5 +1,5 @@
-
+
{{ isEditMode ? 'Editar Empleado' : 'Crear Empleado' }}
@@ -240,19 +240,8 @@ 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 */
+ background-color: var(--table-bg-color-empleados);
}
.form-container { background-color: var(--background-color); } /* Use theme background */
@@ -263,9 +252,9 @@ input:required:invalid {
.form-label { color: var(--text-color); font-weight: 600; } /* Use theme text color */
.form-input {
- border-color: var(--secondary-color); /* Use secondary for border */
- background-color: var(--background-color); /* Ensure inputs match theme background */
- color: var(--text-color); /* Ensure input text matches theme text */
+ border-color: var(--accent-color-empleados);
+ background-color: var(--input-field-bg-color);
+ color: var(--text-color);
transition: border-color .2s, box-shadow .2s;
}
.form-input:focus {
|