Feat: Agregar totales monetarios y altura máxima a informe empleados

- Actualizada query de contadores con total_pagado_planillas y total_precios_tareas
- Agregados dos nuevos cards en TotalesEmpleados para mostrar totales monetarios
- Incluida diferencia entre pagos de planillas y precios de tareas
- Agregada función formatCurrency para formateo monetario
- Actualizada función copiarTexto con sección de totales monetarios
- Agregada altura máxima (max-h-96) a tabla de planillas con scroll vertical
- Cambiado grid de 4 a 3 columnas en lg para mejor distribución

nuxt4-app/app/components/empleados/DetallePlanillas.vue

@@ -29,7 +29,7 @@
       </div>
     </template>
 
-    <div class="overflow-x-auto">
+    <div class="overflow-x-auto max-h-96 overflow-y-auto">
       <table class="w-full text-sm">
         <thead>
           <tr class="border-b border-[var(--brand-border)]">

nuxt4-app/app/components/empleados/TotalesEmpleados.vue

@@ -28,7 +28,7 @@
 
     <div class="space-y-6">
       <!-- Métricas Principales -->
-      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
         <div class="rounded-lg border border-[var(--brand-border)] bg-[var(--brand-surface)] px-4 py-4">
           <div class="flex items-center gap-3 mb-2">
             <div class="p-2 rounded-lg bg-blue-500/20">
@@ -96,6 +96,40 @@
             de {{ contadores?.total_empleados || 0 }} totales
           </div>
         </div>
+
+        <div class="rounded-lg border border-[var(--brand-border)] bg-[var(--brand-surface)] px-4 py-4">
+          <div class="flex items-center gap-3 mb-2">
+            <div class="p-2 rounded-lg bg-emerald-500/20">
+              <div class="i-lucide-wallet text-emerald-400 text-xl"></div>
+            </div>
+            <div>
+              <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide">Total Pagado Planillas</div>
+              <div class="text-2xl font-bold text-emerald-400">
+                {{ formatCurrency(data.total_pagado_planillas || 0) }}
+              </div>
+            </div>
+          </div>
+          <div class="text-xs text-[var(--brand-text-muted)] mt-2">
+            en planillas de pago
+          </div>
+        </div>
+
+        <div class="rounded-lg border border-[var(--brand-border)] bg-[var(--brand-surface)] px-4 py-4">
+          <div class="flex items-center gap-3 mb-2">
+            <div class="p-2 rounded-lg bg-cyan-500/20">
+              <div class="i-lucide-coins text-cyan-400 text-xl"></div>
+            </div>
+            <div>
+              <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide">Total Precios Tareas</div>
+              <div class="text-2xl font-bold text-cyan-400">
+                {{ formatCurrency(data.total_precios_tareas || 0) }}
+              </div>
+            </div>
+          </div>
+          <div class="text-xs text-[var(--brand-text-muted)] mt-2">
+            suma de precios asignados
+          </div>
+        </div>
       </div>
 
       <!-- Promedio por Empleado -->
@@ -132,6 +166,8 @@ const props = defineProps<{
     total_horas_trabajadas: number
     total_dias_asistencia: number
     total_tareas: number
+    total_pagado_planillas: number
+    total_precios_tareas: number
   }
   contadores?: {
     total_empleados?: number
@@ -168,6 +204,15 @@ const formatNumber = (value: number, decimals: number = 2) => {
   }).format(value)
 }
 
+const formatCurrency = (value: number) => {
+  return new Intl.NumberFormat('es-HN', {
+    style: 'currency',
+    currency: 'HNL',
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  }).format(value)
+}
+
 async function copiarTexto() {
   const footer = `
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
@@ -186,6 +231,11 @@ async function copiarTexto() {
    Total Tareas Realizadas: ${formatNumber(props.data.total_tareas || 0, 0)} tareas
    Empleados Activos: ${props.contadores?.empleados_filtrados || 0}
 
+💰 TOTALES MONETARIOS:
+   Total Pagado en Planillas: ${formatCurrency(props.data.total_pagado_planillas || 0)}
+   Total Precios de Tareas: ${formatCurrency(props.data.total_precios_tareas || 0)}
+   Diferencia: ${formatCurrency((props.data.total_pagado_planillas || 0) - (props.data.total_precios_tareas || 0))}
+
 📈 PROMEDIO POR EMPLEADO:
    Horas por Empleado: ${formatNumber(promedioHorasPorEmpleado.value)} hrs
    Días por Empleado: ${formatNumber(promedioDiasPorEmpleado.value, 1)} días