mejroas ui/ux cuentas-cliente

nuxt4-app/app/components/ingresos/VistaTablaIngresosConClientes.vue

@@ -85,10 +85,21 @@ const data = computed<(IngresoWithChildren | ClienteWithChildren)[]>(() => {
   }
 })
 
-const columns: TableColumn<IngresoWithChildren | ClienteWithChildren>[] = [
+// Compute table UI for thead background
+const tableUi = computed(() => {
+  const bgClass = props.primaryView === 'ingresos'
+    ? 'bg-cyan-400/20'
+    : 'bg-yellow-500/20'
+
+  return {
+    thead: `${bgClass} [&>tr>th]:text-white [&>tr>th]:font-semibold`
+  }
+})
+
+const columns = computed((): TableColumn<IngresoWithChildren | ClienteWithChildren>[] => [
   {
     accessorKey: 'id',
-    header: '#',
+    header: () => h('span', { class: 'text-white font-semibold' }, '#'),
     cell: ({ row }) => {
       const original = row.original as any
       const isIngreso = 'tipo' in original
@@ -127,7 +138,7 @@ const columns: TableColumn<IngresoWithChildren | ClienteWithChildren>[] = [
   },
   {
     accessorKey: 'created_at',
-    header: 'Fecha',
+    header: () => h('span', { class: 'text-white font-semibold' }, 'Fecha'),
     cell: ({ row }) => {
       const created = row.getValue('created_at') as string | undefined
       if (!created) return '—'
@@ -143,7 +154,7 @@ const columns: TableColumn<IngresoWithChildren | ClienteWithChildren>[] = [
   },
   {
     accessorKey: 'name',
-    header: 'Info',
+    header: () => h('span', { class: 'text-white font-semibold' }, 'Info'),
     cell: ({ row }) => {
       const original = row.original as any
       const isCliente = 'name' in original && !('tipo' in original)
@@ -176,7 +187,7 @@ const columns: TableColumn<IngresoWithChildren | ClienteWithChildren>[] = [
   },
   {
     accessorKey: 'peso_seco',
-    header: () => h('div', { class: 'text-right' }, 'Peso Seco (qq)'),
+    header: () => h('div', { class: 'text-right text-white font-semibold' }, 'Peso Seco (qq)'),
     cell: ({ row }) => {
       const original = row.original as any
       const isIngreso = 'tipo' in original
@@ -196,7 +207,7 @@ const columns: TableColumn<IngresoWithChildren | ClienteWithChildren>[] = [
   },
   {
     accessorKey: 'peso_neto',
-    header: () => h('div', { class: 'text-right' }, 'Peso Neto (lb)'),
+    header: () => h('div', { class: 'text-right text-white font-semibold' }, 'Peso Neto (lb)'),
     cell: ({ row }) => {
       const original = row.original as any
       const isIngreso = 'tipo' in original
@@ -216,7 +227,7 @@ const columns: TableColumn<IngresoWithChildren | ClienteWithChildren>[] = [
   },
   {
     accessorKey: 'precio',
-    header: () => h('div', { class: 'text-right' }, 'Precio'),
+    header: () => h('div', { class: 'text-right text-white font-semibold' }, 'Precio'),
     cell: ({ row }) => {
       const original = row.original as any
       const isIngreso = 'tipo' in original
@@ -250,7 +261,7 @@ const columns: TableColumn<IngresoWithChildren | ClienteWithChildren>[] = [
   },
   {
     accessorKey: 'estado',
-    header: 'Estado',
+    header: () => h('span', { class: 'text-white font-semibold' }, 'Estado'),
     cell: ({ row }) => {
       const original = row.original as any
       const isCliente = 'name' in original && !('tipo' in original)
@@ -293,7 +304,7 @@ const columns: TableColumn<IngresoWithChildren | ClienteWithChildren>[] = [
       return h('span', { class: 'text-gray-500 text-xs' }, '—')
     }
   }
-]
+])
 
 const expanded = ref<Record<string, boolean>>({})
 
@@ -344,6 +355,7 @@ function previousPage() {
       class="flex-1"
       :ui="{
         base: 'border-separate border-spacing-0',
+        thead: tableUi.thead,
         tbody: '[&>tr]:last:[&>td]:border-b-0',
         tr: 'group',
         td: 'empty:p-0 group-has-[td:not(:empty)]:border-b border-default'