.

packages/rdx-ui/src/components/datatable/data-table-toolbar.tsx

@@ -75,10 +75,7 @@ export function DataTableToolbar<TData>({
   // Render principal
   return (
     <div
-      className={cn(
+      className={cn("flex items-center justify-between gap-2 px-2 py-2 bg-transparent", className)}
-        "flex items-center justify-between gap-2 py-4 bg-transparent border-b",
-        className
-      )}
     >
       {/* IZQUIERDA: acciones + contador */}
       <div className="flex flex-1 items-center gap-3 flex-wrap">
@@ -187,7 +184,7 @@ export function DataTableToolbar<TData>({
         )}
 
         {/* Contador de selección */}
-        <div aria-live="polite" className="text-sm text-muted-foreground ml-2">
+        <div aria-live="polite" className="text-sm text-muted-foreground">
           {hasSelection
             ? t("components.datatable.selection_summary", {
                 count: selectedCount,

packages/rdx-ui/src/components/datatable/data-table.tsx

@@ -258,15 +258,18 @@ export function DataTable<TData, TValue>({
   // Render principal
   return (
     <div className="transition-[max-height] duration-300 ease-in-out">
-      <div className="flex flex-col gap-0">
+      <div className="flex flex-col rounded-lg border overflow-clip">
         <DataTableToolbar showViewOptions={!readOnly} table={table} />
 
-        <div className="overflow-hidden rounded-md border">
+        <div className="overflow-hidden rounded-md border-t">
           <TableComp className="min-w-full sm:min-w-[820px] w-full">
             {/* CABECERA */}
             <TableHeader>
               {table.getHeaderGroups().map((hg) => (
-                <TableRow className="bg-muted/50 hover:bg-muted/50 text-xs sm:text-sm" key={hg.id}>
+                <TableRow
+                  className="bg-background hover:bg-muted/50 text-xs sm:text-sm"
+                  key={hg.id}
+                >
                   {hg.headers.map((h) => {
                     /*
                     const w = h.getSize();
@@ -286,7 +289,7 @@ export function DataTable<TData, TValue>({
 
                     return (
                       <TableHead
-                        className={cn("whitespace-nowrap", headerClassName)}
+                        className={cn("whitespace-nowrap font-semibold", headerClassName)}
                         colSpan={h.colSpan}
                         key={h.id}
                       >

packages/rdx-ui/src/components/datatable/skeleton-data-table-footer.tsx

@@ -16,9 +16,9 @@ export function SkeletonDataTableFooter({
 
   return (
     <div
-            role="status"
       aria-busy="true"
-            className="flex items-center justify-between border-t border-border px-4 py-3 bg-background"
+      className="flex items-center justify-between border-t border-border px-2 py-2 bg-background"
+      role="status"
     >
       {/* Izquierda: rango visible */}
       <div className="flex flex-col sm:flex-row items-center gap-4 flex-1 text-sm text-muted-foreground">
@@ -31,8 +31,8 @@ export function SkeletonDataTableFooter({
         <div className="flex items-center gap-2">
           <span>Filas por página</span>
           <div
-                        className="h-8 w-20 rounded bg-foreground/10 animate-pulse motion-reduce:animate-none"
             aria-hidden
+            className="h-8 w-20 rounded bg-foreground/10 animate-pulse motion-reduce:animate-none"
           />
         </div>
       </div>
@@ -41,25 +41,25 @@ export function SkeletonDataTableFooter({
       <div className="flex items-center gap-2">
         {/* Primera */}
         <div
-                    className="h-8 w-8 rounded-md bg-foreground/10 animate-pulse motion-reduce:animate-none"
           aria-hidden
+          className="h-8 w-8 rounded-md bg-foreground/10 animate-pulse motion-reduce:animate-none"
         />
         {/* Anterior */}
         <div
-                    className="h-8 w-8 rounded-md bg-foreground/10 animate-pulse motion-reduce:animate-none"
           aria-hidden
+          className="h-8 w-8 rounded-md bg-foreground/10 animate-pulse motion-reduce:animate-none"
         />
         {/* Indicador de página */}
         <div className="h-5 w-28 rounded bg-foreground/10 animate-pulse motion-reduce:animate-none" />
         {/* Siguiente */}
         <div
-                    className="h-8 w-8 rounded-md bg-foreground/10 animate-pulse motion-reduce:animate-none"
           aria-hidden
+          className="h-8 w-8 rounded-md bg-foreground/10 animate-pulse motion-reduce:animate-none"
         />
         {/* Última */}
         <div
-                    className="h-8 w-8 rounded-md bg-foreground/10 animate-pulse motion-reduce:animate-none"
           aria-hidden
+          className="h-8 w-8 rounded-md bg-foreground/10 animate-pulse motion-reduce:animate-none"
         />
       </div>
 

packages/rdx-ui/src/components/form/switch-field.tsx

@@ -69,23 +69,6 @@ export const SwitchField = <TFormValues extends FieldValues>({
             data-invalid={hasError}
             orientation={orientation}
           >
-            <Switch
-              aria-describedby={descriptionId}
-              aria-invalid={hasError || undefined}
-              aria-required={required || undefined}
-              checked={field.value === true}
-              className={cn(inputClassName)}
-              disabled={isDisabled}
-              id={inputId}
-              name={field.name}
-              onBlur={field.onBlur}
-              onCheckedChange={(checked) =>
-                onCheckedChange ? onCheckedChange(checked) : field.onChange(checked)
-              }
-              ref={field.ref}
-              required={required}
-            />
-
             <FieldContent className="gap-1">
               <FormFieldLabel className="font-normal" htmlFor={inputId} required={required}>
                 {label}
@@ -99,6 +82,24 @@ export const SwitchField = <TFormValues extends FieldValues>({
 
               <FieldError errors={[fieldState.error]} />
             </FieldContent>
+
+            <Switch
+              aria-describedby={descriptionId}
+              aria-invalid={hasError || undefined}
+              aria-required={required || undefined}
+              checked={field.value === true}
+              className={cn(inputClassName)}
+              disabled={isDisabled}
+              id={inputId}
+              name={field.name}
+              onBlur={field.onBlur}
+              onCheckedChange={(checked) => {
+                field.onChange(checked);
+                onCheckedChange?.(checked);
+              }}
+              ref={field.ref}
+              required={required}
+            />
           </Field>
         );
       }}