src/web/src/components/ui/card.tsx

@@ -6,9 +6,10 @@ import { cn } from '@/lib/utils'
 const cardVariants = cva('rounded-xl text-card-foreground transition-shadow', {
   variants: {
     variant: {
-      default: 'border border-border bg-card shadow-sm',
+      default: 'border border-border bg-card shadow-md',
       elevated: 'border border-border bg-card shadow-lg',
       glass: 'glass shadow-xl',
+      flat: 'border border-border bg-card',
     },
   },
   defaultVariants: {

src/web/src/features/users/components/UsersTable.tsx

@@ -25,10 +25,10 @@ export function UsersTable({ rows, onRowClick }: UsersTableProps) {
   }
 
   return (
-    <div className="rounded-md border border-border overflow-hidden">
+    <div className="surface overflow-hidden">
       <table className="w-full text-sm">
         <thead>
-          <tr className="border-b border-border bg-muted/50">
+          <tr className="border-b border-border bg-muted/60">
             <th className="px-4 py-3 text-left font-medium text-muted-foreground">Usuario</th>
             <th className="px-4 py-3 text-left font-medium text-muted-foreground">Nombre</th>
             <th className="px-4 py-3 text-left font-medium text-muted-foreground">Email</th>

src/web/src/index.css

@@ -53,10 +53,10 @@
     --warning-foreground:     oklch(0.220 0.050 75);
 
     /* ── shadcn semantic mapping (LIGHT) ─────────────────── */
-    --background:             oklch(0.988 0.003 250); /* slate barely warm */
+    --background:             oklch(0.962 0.006 250); /* slate cool — pop con cards white */
     --foreground:             var(--neutral-900);
 
-    --card:                   oklch(1 0 0);            /* pure white */
+    --card:                   oklch(1 0 0);            /* pure white — máximo contraste */
     --card-foreground:        var(--neutral-900);
 
     --popover:                oklch(1 0 0);
@@ -110,32 +110,32 @@
 
   .dark {
     /* Background con shift sutil hacia violet → "tech" feel */
-    --background:             oklch(0.135 0.018 252);  /* deep slate-violet */
+    --background:             oklch(0.130 0.018 252);  /* deep slate-violet — más oscuro para contraste */
     --foreground:             var(--neutral-50);
 
-    --card:                   oklch(0.180 0.020 252);  /* elevación visual */
+    --card:                   oklch(0.220 0.024 252);  /* elevación visual marcada — pop sobre bg */
     --card-foreground:        var(--neutral-50);
 
-    --popover:                oklch(0.200 0.022 252);
+    --popover:                oklch(0.245 0.024 252);  /* dropdowns/popovers más elevados aún */
     --popover-foreground:     var(--neutral-50);
 
     --primary:                var(--brand-400);        /* brighter en dark, "neon" feel */
     --primary-foreground:     oklch(0.130 0.013 250);
 
-    --secondary:              oklch(0.230 0.020 252);
+    --secondary:              oklch(0.255 0.022 252);
     --secondary-foreground:   var(--neutral-100);
 
-    --muted:                  oklch(0.220 0.020 252);
+    --muted:                  oklch(0.245 0.022 252);
     --muted-foreground:       var(--neutral-400);
 
-    --accent:                 oklch(0.250 0.030 252);
+    --accent:                 oklch(0.275 0.032 252);
     --accent-foreground:      var(--brand-300);
 
     --destructive:            oklch(0.580 0.190 25);
     --destructive-foreground: oklch(0.990 0.000 0);
 
     --border:                 oklch(1 0 0 / 0.10);    /* sutil glass-style border */
-    --input:                  oklch(0.215 0.020 252); /* elevado del bg, contrast con texto */
+    --input:                  oklch(0.245 0.022 252); /* elevado, mismo nivel que muted */
     --input-border:           oklch(1 0 0 / 0.14);
     --ring:                   var(--brand-400);
 
@@ -252,6 +252,16 @@
     opacity: 0.10;
   }
 
+  /* Surface utility — para contenedores que no usan <Card> (ej: tablas, listas)
+     Mismo treatment visual: bg elevado + border + shadow */
+  .surface {
+    background-color: var(--card);
+    color: var(--card-foreground);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow-md);
+  }
+
   /* Brand glow para focus en inputs críticos */
   .focus-glow:focus-visible {
     box-shadow: var(--shadow-glow);