feat(auth): Supabase Auth email/password + middleware + login [auth]

Protege /admin/* con Supabase Auth. Tabla user_roles con custom claims
(app_role, org_id) en JWT. Middleware Next.js redirige a /login sin sesión.
Página /login con email/password. /admin/responses migrado de service_role
a sesión de usuario autenticado.

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

app/admin/responses/page.tsx

@@ -1,8 +1,8 @@
-import { createClient } from '@supabase/supabase-js'
+import { createServerClient } from '@supabase/ssr'
+import { cookies } from 'next/headers'
 import { ResponsesTable, type DisplayRow } from './responses-table'
+import { SignOutButton } from '../sign-out-button'
 
-// Server Component sin auth — herramienta interna de diagnóstico (Etapa 3V-B).
-// Usa SUPABASE_SERVICE_ROLE_KEY: vive solo acá, server-side, nunca al cliente.
 export const dynamic = 'force-dynamic'
 
 const MAX_SUBMISSIONS = 500
@@ -36,10 +36,28 @@ interface ResponseRow {
   answers: AnswerRow[]
 }
 
-function getSupabaseAdmin() {
-  const url = process.env.NEXT_PUBLIC_SUPABASE_URL || 'https://placeholder.supabase.co'
-  const serviceKey = process.env.SUPABASE_SERVICE_ROLE_KEY || 'placeholder'
-  return createClient(url, serviceKey, { auth: { persistSession: false } })
+async function getSupabaseSession() {
+  const cookieStore = await cookies()
+  return createServerClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+    {
+      cookies: {
+        getAll() {
+          return cookieStore.getAll()
+        },
+        setAll(cookiesToSet) {
+          try {
+            cookiesToSet.forEach(({ name, value, options }) =>
+              cookieStore.set(name, value, options)
+            )
+          } catch {
+            // Server Component — no puede mutar cookies, se ignora
+          }
+        },
+      },
+    }
+  )
 }
 
 function formatDate(iso: string): string {
@@ -76,7 +94,7 @@ export default async function AdminResponsesPage({
   searchParams: Promise<{ survey_id?: string }>
 }) {
   const { survey_id: surveyId } = await searchParams
-  const supabase = getSupabaseAdmin()
+  const supabase = await getSupabaseSession()
 
   // 1. Preguntas permitidas — text_long e is_sensitive=true se excluyen ACÁ,
   //    antes de tocar la tabla answers. Sus valores nunca se consultan.
@@ -214,7 +232,10 @@ export default async function AdminResponsesPage({
             ))}
           </nav>
         </div>
-        <a href="/admin/responses" className="admin-refresh">Actualizar</a>
+        <div className="admin-header-actions">
+          <a href="/admin/responses" className="admin-refresh">Actualizar</a>
+          <SignOutButton />
+        </div>
       </header>
 
       <div className="admin-table-wrapper">

app/admin/sign-out-button.tsx

@@ -0,0 +1,24 @@
+'use client'
+
+import { createBrowserClient } from '@supabase/ssr'
+import { useRouter } from 'next/navigation'
+
+export function SignOutButton() {
+  const router = useRouter()
+
+  const supabase = createBrowserClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
+  )
+
+  async function handleSignOut() {
+    await supabase.auth.signOut()
+    router.push('/login')
+  }
+
+  return (
+    <button type="button" onClick={handleSignOut} className="admin-signout">
+      Cerrar sesión
+    </button>
+  )
+}

app/globals.css

@@ -1060,3 +1060,64 @@ body {
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
 }
+
+/* ── Login ── */
+.login-page {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-bg);
+  padding: 24px;
+}
+.login-card {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-card);
+  padding: 40px 36px;
+  width: 100%;
+  max-width: 380px;
+}
+.login-title {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--color-text);
+  margin: 0 0 28px;
+}
+.login-form { display: flex; flex-direction: column; gap: 16px; }
+.login-field { display: flex; flex-direction: column; gap: 6px; }
+.login-label {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-text);
+}
+.login-error { margin: 0; }
+.login-submit {
+  margin-top: 8px;
+  padding: 10px 20px;
+  background: var(--color-primary);
+  color: #fff;
+  border: none;
+  border-radius: var(--radius);
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+.login-submit:hover:not(:disabled) { background: var(--color-primary-hover); }
+.login-submit:disabled { opacity: 0.6; cursor: not-allowed; }
+
+/* ── Admin sign-out ── */
+.admin-header-actions { display: flex; align-items: center; gap: 12px; }
+.admin-signout {
+  font-size: 0.8125rem;
+  color: var(--color-text-muted);
+  background: none;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  padding: 5px 12px;
+  cursor: pointer;
+  transition: color 0.15s, border-color 0.15s;
+}
+.admin-signout:hover { color: var(--color-error); border-color: var(--color-error); }

app/login/page.tsx

@@ -0,0 +1,81 @@
+'use client'
+
+import { useState } from 'react'
+import { createBrowserClient } from '@supabase/ssr'
+import { useRouter } from 'next/navigation'
+
+export default function LoginPage() {
+  const [isPending, setIsPending] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const router = useRouter()
+
+  const supabase = createBrowserClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
+  )
+
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+    setIsPending(true)
+    setError(null)
+
+    const fd = new FormData(e.currentTarget)
+    const { error: authError } = await supabase.auth.signInWithPassword({
+      email: fd.get('email') as string,
+      password: fd.get('password') as string,
+    })
+
+    if (authError) {
+      setError('Email o contraseña incorrectos')
+      setIsPending(false)
+      return
+    }
+
+    router.push('/admin/responses')
+    router.refresh()
+  }
+
+  return (
+    <div className="login-page">
+      <div className="login-card">
+        <h1 className="login-title">Acceso interno</h1>
+        <form onSubmit={handleSubmit} className="login-form" noValidate>
+          <div className="login-field">
+            <label htmlFor="email" className="login-label">Email</label>
+            <input
+              id="email"
+              name="email"
+              type="email"
+              autoComplete="email"
+              required
+              disabled={isPending}
+              className="text-short-input"
+            />
+          </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>
+          {error && (
+            <p role="alert" className="field-error login-error">{error}</p>
+          )}
+          <button
+            type="submit"
+            disabled={isPending}
+            className="login-submit"
+          >
+            {isPending ? 'Ingresando…' : 'Ingresar'}
+          </button>
+        </form>
+      </div>
+    </div>
+  )
+}