From b3f039fbd50bf4b0e6dc478a1c250b0f1362e383 Mon Sep 17 00:00:00 2001
From: markosbenitez <msebem@gmail.com>
Date: Sat, 27 Jun 2026 15:18:22 -0300
Subject: [PATCH] fix(ui): toggle password en login + fondo blanco card talento
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix A: botón inline con ícono SVG (ojo/ojo tachado) en el campo
password de /login, alterna type password/text, aria-label según
estado. Sin librería nueva.
Fix B: .db-widget-star pierde el gradiente, hereda background blanco
de .db-widget igual que los demás cards. Borde y título teal intactos.
---
 app/globals.css    | 21 ++++++++++++++++++++-
 app/login/page.tsx | 40 +++++++++++++++++++++++++++++++---------
 2 files changed, 51 insertions(+), 10 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 1d1b857..90907e1 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -964,7 +964,6 @@ body {
 /* ── Card destacada (estrella) ── */
 .db-widget-star {
   border-color: var(--color-re-teal);
-  background: linear-gradient(135deg, #dff4f5, #ffffff);
 }
 .db-widget-star .db-widget-title { color: var(--color-re-teal); }
 
@@ -1093,6 +1092,26 @@ body {
   color: var(--color-text);
 }
 .login-error { margin: 0; }
+.login-password-wrapper { position: relative; }
+.login-password-wrapper .text-short-input { padding-right: 40px; }
+.login-password-toggle {
+  position: absolute;
+  top: 50%;
+  right: 8px;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--radius);
+  color: var(--color-text-muted);
+  cursor: pointer;
+}
+.login-password-toggle:hover { color: var(--color-text); }
 .login-submit {
   margin-top: 8px;
   padding: 10px 20px;
diff --git a/app/login/page.tsx b/app/login/page.tsx
index 5e07380..3fd570d 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -7,6 +7,7 @@ import { useRouter } from 'next/navigation'
 export default function LoginPage() {
   const [isPending, setIsPending] = useState(false)
   const [error, setError] = useState<string | null>(null)
+  const [showPassword, setShowPassword] = useState(false)
   const router = useRouter()
 
   const supabase = createBrowserClient(
@@ -54,15 +55,36 @@ export default function LoginPage() {
           </div>
           <div className="login-field">
             <label htmlFor="password" className="login-label">Contraseña</label>
-            <input
-              id="password"
-              name="password"
-              type="password"
-              autoComplete="current-password"
-              required
-              disabled={isPending}
-              className="text-short-input"
-            />
+            <div className="login-password-wrapper">
+              <input
+                id="password"
+                name="password"
+                type={showPassword ? 'text' : 'password'}
+                autoComplete="current-password"
+                required
+                disabled={isPending}
+                className="text-short-input"
+              />
+              <button
+                type="button"
+                className="login-password-toggle"
+                onClick={() => setShowPassword((v) => !v)}
+                aria-label={showPassword ? 'Ocultar contraseña' : 'Mostrar contraseña'}
+              >
+                {showPassword ? (
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                    <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z" />
+                    <circle cx="12" cy="12" r="3" />
+                  </svg>
+                ) : (
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                    <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z" />
+                    <circle cx="12" cy="12" r="3" />
+                    <path d="M3 3l18 18" />
+                  </svg>
+                )}
+              </button>
+            </div>
           </div>
           {error && (
             <p role="alert" className="field-error login-error">{error}</p>