src/web/src/index.css

@@ -204,6 +204,21 @@
   code, pre, kbd, samp {
     font-family: var(--font-mono);
   }
+
+  /* ── Browser autofill (Chrome/Safari): forzar tokens del DS ──
+     Sin esto, autofill aplica bg amarillo + texto blanco que se ve horrible
+     y rompe contraste con cualquier paleta. */
+  input:-webkit-autofill,
+  input:-webkit-autofill:hover,
+  input:-webkit-autofill:focus,
+  input:-webkit-autofill:active,
+  textarea:-webkit-autofill,
+  select:-webkit-autofill {
+    -webkit-text-fill-color: var(--foreground) !important;
+    -webkit-box-shadow: 0 0 0 1000px var(--input) inset !important;
+    caret-color: var(--foreground) !important;
+    transition: background-color 5000s ease-in-out 0s;
+  }
 }
 
 /* ================================================================
@@ -222,6 +237,21 @@
     background-image: var(--gradient-mesh);
   }
 
+  /* Grid texture overlay — usar como fondo decorativo en surfaces grandes
+     Light: 2.5% opacity (sutil pero visible). Dark: 5% (más presente) */
+  .grid-bg {
+    background-image:
+      linear-gradient(to right, currentColor 1px, transparent 1px),
+      linear-gradient(to bottom, currentColor 1px, transparent 1px);
+    background-size: 56px 56px;
+    color: var(--neutral-500);
+    opacity: 0.07;
+  }
+  .dark .grid-bg {
+    color: var(--neutral-400);
+    opacity: 0.10;
+  }
+
   /* Brand glow para focus en inputs críticos */
   .focus-glow:focus-visible {
     box-shadow: var(--shadow-glow);

src/web/src/layouts/ProtectedLayout.tsx

@@ -8,14 +8,21 @@ interface ProtectedLayoutProps {
 
 export function ProtectedLayout({ children }: ProtectedLayoutProps) {
   return (
-    <div className="flex h-svh overflow-hidden bg-background text-foreground">
+    <div className="relative flex h-svh overflow-hidden bg-background text-foreground">
+      {/* Grid texture — fondo cuadriculado para dar profundidad y resaltar glass */}
+      <div className="absolute inset-0 grid-bg pointer-events-none" />
+
+      {/* Subtle brand/violet glow accents — corners */}
+      <div className="absolute top-[-15%] right-[-8%] w-[500px] h-[500px] rounded-full bg-brand-500/10 dark:bg-brand-500/12 blur-[140px] pointer-events-none" />
+      <div className="absolute bottom-[-15%] left-[20%] w-[500px] h-[500px] rounded-full bg-violet-500/8 dark:bg-violet-500/10 blur-[140px] pointer-events-none" />
+
       {/* Desktop sidebar */}
-      <div className="hidden lg:flex lg:w-60 lg:flex-col lg:shrink-0">
+      <div className="relative z-10 hidden lg:flex lg:w-60 lg:flex-col lg:shrink-0 border-r border-border">
         <SidebarNav />
       </div>
 
       {/* Main column */}
-      <div className="flex flex-1 flex-col min-w-0 overflow-hidden">
+      <div className="relative z-10 flex flex-1 flex-col min-w-0 overflow-hidden">
         <AppHeader />
         <main className="flex-1 overflow-y-auto p-6">{children}</main>
       </div>

src/web/src/layouts/PublicLayout.tsx

@@ -7,23 +7,16 @@ interface PublicLayoutProps {
 
 export function PublicLayout({ children }: PublicLayoutProps) {
   return (
-    <div className="relative min-h-svh flex items-center justify-center p-4 overflow-hidden">
+    <div className="relative min-h-svh flex items-center justify-center p-4 overflow-hidden bg-background">
-      {/* Gradient mesh background — subtle radial blobs (brand cyan + violet) */}
+      {/* Grid texture — sutil en light, más presente en dark */}
+      <div className="absolute inset-0 grid-bg pointer-events-none" />
+
+      {/* Gradient mesh con radial blobs (brand cyan + violet) */}
       <div className="absolute inset-0 gradient-mesh pointer-events-none" />
 
-      {/* Subtle grid texture overlay (visible on dark, fades on light) */}
+      {/* Brand glow accents — más intensos para que la profundidad funcione en light también */}
-      <div
+      <div className="absolute top-[-20%] right-[-10%] w-[600px] h-[600px] rounded-full bg-brand-500/25 dark:bg-brand-500/20 blur-[120px] pointer-events-none" />
-        className="absolute inset-0 opacity-[0.015] dark:opacity-[0.04] pointer-events-none"
+      <div className="absolute bottom-[-20%] left-[-10%] w-[600px] h-[600px] rounded-full bg-violet-500/20 dark:bg-violet-500/18 blur-[120px] pointer-events-none" />
-        style={{
-          backgroundImage:
-            'linear-gradient(to right, currentColor 1px, transparent 1px), linear-gradient(to bottom, currentColor 1px, transparent 1px)',
-          backgroundSize: '64px 64px',
-        }}
-      />
-
-      {/* Brand glow accents (positioned blobs) */}
-      <div className="absolute top-[-20%] right-[-10%] w-[500px] h-[500px] rounded-full bg-brand-500/10 dark:bg-brand-500/15 blur-[120px] pointer-events-none" />
-      <div className="absolute bottom-[-20%] left-[-10%] w-[500px] h-[500px] rounded-full bg-violet-500/10 dark:bg-violet-500/12 blur-[120px] pointer-events-none" />
 
       {/* Theme toggle — top-right, glass over gradient */}
       <div className="absolute top-4 right-4 z-20">