feat(auth): recuperación de contraseña self-service en /login

Reusa /auth/confirm sin tocarlo — ya escucha PASSWORD_RECOVERY (lo
armamos para invitaciones, Supabase emite el mismo evento para
recovery). Antes, cualquiera que olvidara su contraseña dependía de
que el director la reseteara a mano por SQL.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/globals.css

@@ -1178,6 +1178,19 @@ body {
 }
 .login-submit:hover:not(:disabled) { background: var(--color-primary-hover); }
 .login-submit:disabled { opacity: 0.6; cursor: not-allowed; }
+.login-back-button { margin-top: 16px; }
+.login-forgot-link {
+  align-self: center;
+  margin-top: 4px;
+  padding: 4px;
+  background: none;
+  border: none;
+  color: var(--color-text-muted);
+  font-size: 0.8125rem;
+  cursor: pointer;
+  text-decoration: underline;
+}
+.login-forgot-link:hover { color: var(--color-primary-hover); }
 
 /* ── Invite form (/admin/usuarios) ── */
 .invite-form { display: flex; flex-direction: column; gap: 12px; }

app/login/page.tsx

@@ -4,10 +4,14 @@ import { useState } from 'react'
 import { createBrowserClient } from '@supabase/ssr'
 import { useRouter } from 'next/navigation'
 
+type Mode = 'login' | 'reset' | 'reset-sent'
+
 export default function LoginPage() {
+  const [mode, setMode] = useState<Mode>('login')
   const [isPending, setIsPending] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const [showPassword, setShowPassword] = useState(false)
+  const [resetEmail, setResetEmail] = useState('')
   const router = useRouter()
 
   const supabase = createBrowserClient(
@@ -36,6 +40,89 @@ export default function LoginPage() {
     router.refresh()
   }
 
+  // Reusa /auth/confirm: ya escucha PASSWORD_RECOVERY (lo armamos para el
+  // flujo de invitación, pero Supabase emite el mismo evento acá).
+  async function handleReset(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+    setIsPending(true)
+    setError(null)
+
+    const fd = new FormData(e.currentTarget)
+    const email = String(fd.get('email') ?? '')
+
+    const { error: resetError } = await supabase.auth.resetPasswordForEmail(email, {
+      redirectTo: `${process.env.NEXT_PUBLIC_SITE_URL}/auth/confirm`,
+    })
+
+    setIsPending(false)
+
+    if (resetError) {
+      setError('No pudimos enviar el link. Probá de nuevo.')
+      return
+    }
+
+    setResetEmail(email)
+    setMode('reset-sent')
+  }
+
+  if (mode === 'reset-sent') {
+    return (
+      <div className="login-page">
+        <div className="login-card">
+          <h1 className="login-title">Revisá tu email</h1>
+          <p className="admin-subtitle">
+            Si <strong>{resetEmail}</strong> tiene una cuenta, te enviamos un link para crear una
+            contraseña nueva.
+          </p>
+          <button
+            type="button"
+            className="login-submit login-back-button"
+            onClick={() => { setMode('login'); setError(null) }}
+          >
+            Volver al login
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  if (mode === 'reset') {
+    return (
+      <div className="login-page">
+        <div className="login-card">
+          <h1 className="login-title">Recuperar contraseña</h1>
+          <form onSubmit={handleReset} className="login-form" noValidate>
+            <div className="login-field">
+              <label htmlFor="reset-email" className="login-label">Email</label>
+              <input
+                id="reset-email"
+                name="email"
+                type="email"
+                autoComplete="email"
+                required
+                disabled={isPending}
+                className="text-short-input"
+              />
+            </div>
+            {error && (
+              <p role="alert" className="field-error login-error">{error}</p>
+            )}
+            <button type="submit" disabled={isPending} className="login-submit">
+              {isPending ? 'Enviando…' : 'Enviar link de recuperación'}
+            </button>
+            <button
+              type="button"
+              className="login-forgot-link"
+              onClick={() => { setMode('login'); setError(null) }}
+            >
+              ← Volver al login
+            </button>
+          </form>
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div className="login-page">
       <div className="login-card">
@@ -96,6 +183,13 @@ export default function LoginPage() {
           >
             {isPending ? 'Ingresando…' : 'Ingresar'}
           </button>
+          <button
+            type="button"
+            className="login-forgot-link"
+            onClick={() => { setMode('reset'); setError(null) }}
+          >
+            ¿Olvidaste tu contraseña?
+          </button>
         </form>
       </div>
     </div>