From 278e1cf3787e8790520d5ecd3d34361b64008b2f Mon Sep 17 00:00:00 2001
From: dmolinari <dmolinari@eldia.com>
Date: Thu, 16 Apr 2026 11:10:06 -0300
Subject: [PATCH] fix(web): light mode profundidad + grid global + autofill fix
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Cambios:
- index.css: fix de browser autofill (Chrome/Safari forzaba bg amarillo +
  texto blanco que rompia contraste). Override -webkit-text-fill-color
  + box-shadow inset para mantener tokens del DS. Esta era la causa real
  de las 'letras blancas en gris' que se veian en login.
- index.css: utility .grid-bg global (7% opacity light, 10% dark) — para
  usar como fondo cuadriculado en todos los layouts.
- PublicLayout: agrego .grid-bg layer + bg-background explicito + glow
  blobs mas intensos (25%/20% en light vs 10% antes). Light ahora
  tiene la misma profundidad visual que dark.
- ProtectedLayout: agrego .grid-bg + glow blobs sutiles en corners para
  dar profundidad al dashboard y todas las secciones internas. Resalta
  futuros componentes glass.

Tests: 136/136 verde.
---
 src/web/src/index.css                   | 30 +++++++++++++++++++++++++
 src/web/src/layouts/ProtectedLayout.tsx | 13 ++++++++---
 src/web/src/layouts/PublicLayout.tsx    | 23 +++++++------------
 3 files changed, 48 insertions(+), 18 deletions(-)

diff --git a/src/web/src/index.css b/src/web/src/index.css
index db20bdb..a3f7cee 100644
--- a/src/web/src/index.css
+++ b/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);
diff --git a/src/web/src/layouts/ProtectedLayout.tsx b/src/web/src/layouts/ProtectedLayout.tsx
index 377047d..a5a5870 100644
--- a/src/web/src/layouts/ProtectedLayout.tsx
+++ b/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>
diff --git a/src/web/src/layouts/PublicLayout.tsx b/src/web/src/layouts/PublicLayout.tsx
index 104641c..fb0931f 100644
--- a/src/web/src/layouts/PublicLayout.tsx
+++ b/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">
-      {/* Gradient mesh background — subtle radial blobs (brand cyan + violet) */}
+    <div className="relative min-h-svh flex items-center justify-center p-4 overflow-hidden bg-background">
+      {/* 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) */}
-      <div
-        className="absolute inset-0 opacity-[0.015] dark:opacity-[0.04] 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" />
+      {/* Brand glow accents — más intensos para que la profundidad funcione en light también */}
+      <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" />
+      <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" />
 
       {/* Theme toggle — top-right, glass over gradient */}
       <div className="absolute top-4 right-4 z-20">