mejroas ui/ux cuentas-cliente

nuxt4-app/app/components/clientes/VistaTablaClientes.vue

@@ -3,7 +3,7 @@
     <template #header>
       <div class="flex items-center justify-between">
         <div>
-          <h2 class="text-xl font-bold brand-section-title">Vista Tabla de Clientes</h2>
+          <h2 class="text-xl font-bold text-yellow-500">Vista Tabla de Clientes</h2>
           <p class="text-sm text-[var(--brand-text-muted)] mt-1">
             {{ props.records.length }} clientes registrados
           </p>
@@ -51,6 +51,9 @@
       :global-filter="globalFilter"
       sticky
       class="h-96"
+      :ui="{
+        thead: 'bg-yellow-500/20 [&>tr>th]:text-white [&>tr>th]:font-semibold'
+      }"
     />
 
     <!-- Table Footer -->
@@ -192,7 +195,7 @@ const tableColumns = computed((): TableColumn<Record<string, unknown>>[] => {
         variant: 'ghost',
         label: upperFirst(column),
         icon: isSorted ? (isSorted === 'asc' ? 'i-lucide-arrow-up-narrow-wide' : 'i-lucide-arrow-down-wide-narrow') : 'i-lucide-arrow-up-down',
-        class: '-mx-2.5',
+        class: '-mx-2.5 text-white hover:text-yellow-100',
         onClick: () => tableColumn.toggleSorting(tableColumn.getIsSorted() === 'asc')
       })
     },