From dea268d9759bfcbbcfbf635f379e67f94469796c Mon Sep 17 00:00:00 2001
From: Lak-G <aaaaaamado@gmail.com>
Date: Thu, 27 Aug 2026 10:18:04 -0700
Subject: [PATCH] v1.7: overlay carga, baneos, carrito persistente, fix upload
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Lista negra:
- Migración 0007: tabla baneos con historial (soporta expires_at futuro)
- Helper is_banned() usado por middleware
- Middleware guard: user baneado → rewrite /banned (admin exento)
- Página /banned con razón/fecha/expires + botón signout
- Panel /admin/usuarios con banear/desbanear (razón obligatoria, self-ban bloqueado)
- Nav admin nueva entrada Usuarios + icono users

Fix upload de fotos (bug definitivo):
- Root cause: browserClient no autentica al Storage (cookies httpOnly no legibles desde JS)
- Nuevos endpoints proxy /api/upload/material-foto/[id] y /avatar
- Validan sesión con cookie httpOnly, suben con service_role (bypass RLS)
- Refactor MaterialForm y PerfilForm para usar fetch multipart
- Cookies httpOnly intactas (cero riesgo XSS)

Overlay de carga:
- Layout.astro con #page-loader (backdrop-filter blur + spinner mono)
- Script inline captura clicks en <a href> y submits de <form> mismo origen
- Filtros: modifier keys, target=_blank, anchor#, cross-origin, defaultPrevented
- Respeta prefers-reduced-motion; pageshow limpia por bfcache

Carrito persistente + vaciar:
- SolicitudCart: useEffect hidrata/persiste labre:cart:v1 en localStorage
- Guard cartHydrated evita pisar en montaje inicial
- Botón "Vaciar" en checkout con window.confirm (solo con perfilCompleto)

Filtro inventario sin auto-submit:
- Removido script debounced que hacía form.submit() en cada tecla
- Botón "Filtrar" existente sigue funcionando
---
 .../admin/inventario/MaterialForm.tsx         |  43 ++--
 src/components/admin/usuarios/BanearForm.tsx  | 175 ++++++++++++++++
 .../admin/usuarios/DesbanearButton.tsx        |  43 ++++
 src/components/alumno/SolicitudCart.tsx       |  60 +++++-
 src/components/profile/PerfilForm.tsx         |  28 ++-
 src/layouts/AppLayout.astro                   |   2 +
 src/layouts/Layout.astro                      |  65 ++++++
 src/middleware.ts                             |  11 +
 src/pages/admin/inventario/index.astro        |  15 --
 src/pages/admin/usuarios.astro                | 188 ++++++++++++++++++
 src/pages/api/admin/baneos/[id]/desbanear.ts  |  30 +++
 src/pages/api/admin/baneos/index.ts           |  67 +++++++
 src/pages/api/upload/avatar.ts                |  58 ++++++
 src/pages/api/upload/material-foto/[id].ts    |  67 +++++++
 src/pages/banned.astro                        |  85 ++++++++
 15 files changed, 870 insertions(+), 67 deletions(-)
 create mode 100644 src/components/admin/usuarios/BanearForm.tsx
 create mode 100644 src/components/admin/usuarios/DesbanearButton.tsx
 create mode 100644 src/pages/admin/usuarios.astro
 create mode 100644 src/pages/api/admin/baneos/[id]/desbanear.ts
 create mode 100644 src/pages/api/admin/baneos/index.ts
 create mode 100644 src/pages/api/upload/avatar.ts
 create mode 100644 src/pages/api/upload/material-foto/[id].ts
 create mode 100644 src/pages/banned.astro

diff --git a/src/components/admin/inventario/MaterialForm.tsx b/src/components/admin/inventario/MaterialForm.tsx
index c54e097..5ec34f6 100644
--- a/src/components/admin/inventario/MaterialForm.tsx
+++ b/src/components/admin/inventario/MaterialForm.tsx
@@ -1,5 +1,4 @@
 import { useEffect, useRef, useState } from 'react';
-import { browserClient } from '@/lib/supabase';
 import { imgUrl } from '@/lib/materialImg';
 import { toast } from '@/lib/toast';
 import UnidadesManager from './UnidadesManager';
@@ -25,8 +24,6 @@ type Props = {
   compact?: boolean;
 };
 
-const BUCKET = 'materiales-fotos';
-
 export default function MaterialForm({ mode, material, categorias, compact }: Props) {
   const dialogRef = useRef<HTMLDialogElement | null>(null);
   const firstFieldRef = useRef<HTMLInputElement | null>(null);
@@ -99,18 +96,16 @@ export default function MaterialForm({ mode, material, categorias, compact }: Pr
     if (error) errorRef.current?.focus();
   }, [error]);
 
-  async function uploadFotoFor(id: number): Promise<string | null> {
-    if (!file) return null;
-    const ext = (file.name.split('.').pop() ?? 'jpg').toLowerCase().replace(/[^a-z0-9]/g, '');
-    const path = `${id}/${Date.now()}.${ext || 'jpg'}`;
-    const { error: upErr } = await browserClient()
-      .storage.from(BUCKET)
-      .upload(path, file, { upsert: true, contentType: file.type || undefined });
-    if (upErr) {
-      toast({ kind: 'error', title: 'La foto no se subió', description: 'El material se guardó sin foto.' });
+  async function uploadFotoFor(materialId: number, f: File): Promise<string | null> {
+    const fd = new FormData();
+    fd.append('file', f);
+    const res = await fetch(`/api/upload/material-foto/${materialId}`, { method: 'POST', body: fd });
+    const json = await res.json().catch(() => ({}));
+    if (!res.ok) {
+      toast({ kind: 'error', title: 'La foto no se subió', description: json?.error ?? 'El material se guardó sin foto.' });
       return null;
     }
-    return path;
+    return json.path as string;
   }
 
   const submit = async (e: React.FormEvent) => {
@@ -151,26 +146,14 @@ export default function MaterialForm({ mode, material, categorias, compact }: Pr
         const json = await res.json().catch(() => ({}));
         if (!res.ok) throw new Error(json?.error ?? 'No se pudo crear');
 
-        // 2) subir foto (si hay) y PATCH imagen_path
+        // 2) subir foto (si hay) — el endpoint ya persiste imagen_path
         if (file && json.id) {
-          const path = await uploadFotoFor(json.id);
-          if (path) {
-            const p = await fetch(`/api/admin/materiales/${json.id}`, {
-              method: 'PATCH',
-              headers: { 'Content-Type': 'application/json' },
-              body: JSON.stringify({ imagen_path: path }),
-            });
-            if (!p.ok) {
-              toast({ kind: 'error', title: 'Foto subida pero no vinculada', description: 'Recarga y vuelve a intentar.' });
-            }
-          }
+          await uploadFotoFor(json.id, file);
         }
       } else {
-        // edit — sube nueva foto primero (si hay) y luego PATCH con el path incluido
-        let newImagenPath: string | null | undefined = undefined;
+        // edit — sube nueva foto primero (si hay); el endpoint persiste imagen_path
         if (file && material) {
-          const path = await uploadFotoFor(material.id);
-          if (path) newImagenPath = path;
+          await uploadFotoFor(material.id, file);
         }
         const patch: Record<string, unknown> = {
           nombre: nombreT,
@@ -181,7 +164,7 @@ export default function MaterialForm({ mode, material, categorias, compact }: Pr
           trackeado_por_unidad: trackeado,
         };
         if (!trackeado) patch.cantidad_total = cantidad;
-        if (newImagenPath !== undefined) patch.imagen_path = newImagenPath;
+        // ponytail: si el user quitó la foto (imagenPath=null y sin file), no lo PATCHeamos aquí — ese flow ya está fuera de scope de este fix
         const res = await fetch(`/api/admin/materiales/${material!.id}`, {
           method: 'PATCH',
           headers: { 'Content-Type': 'application/json' },
diff --git a/src/components/admin/usuarios/BanearForm.tsx b/src/components/admin/usuarios/BanearForm.tsx
new file mode 100644
index 0000000..a42d6f6
--- /dev/null
+++ b/src/components/admin/usuarios/BanearForm.tsx
@@ -0,0 +1,175 @@
+import { useEffect, useRef, useState } from 'react';
+import { toastAfterReload } from '@/lib/toast';
+
+type Props = {
+  profile: { id: string; nombre?: string | null; email: string };
+  adminSelf: boolean;
+};
+
+export default function BanearForm({ profile, adminSelf }: Props) {
+  const dialogRef = useRef<HTMLDialogElement | null>(null);
+  const firstFieldRef = useRef<HTMLTextAreaElement | null>(null);
+  const errorRef = useRef<HTMLParagraphElement | null>(null);
+  const [razon, setRazon] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const titleId = `banear-${profile.id}`;
+  const label = profile.nombre?.trim() || profile.email;
+
+  const open = () => {
+    if (adminSelf) return;
+    setError(null);
+    setRazon('');
+    dialogRef.current?.showModal();
+    queueMicrotask(() => firstFieldRef.current?.focus());
+  };
+  const close = () => {
+    if (loading) return;
+    dialogRef.current?.close();
+  };
+
+  useEffect(() => {
+    const dlg = dialogRef.current;
+    if (!dlg) return;
+    const onClick = (e: MouseEvent) => {
+      if (e.target === dlg) close();
+    };
+    dlg.addEventListener('click', onClick);
+    return () => dlg.removeEventListener('click', onClick);
+  });
+
+  useEffect(() => {
+    if (error) errorRef.current?.focus();
+  }, [error]);
+
+  const submit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (loading) return;
+    const trimmed = razon.trim();
+    if (trimmed.length < 5) {
+      setError('La razón debe tener al menos 5 caracteres');
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch('/api/admin/baneos', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ profile_id: profile.id, razon: trimmed }),
+      });
+      const json = await res.json().catch(() => ({}));
+      if (!res.ok) throw new Error(json?.error ?? 'No se pudo banear');
+      toastAfterReload({
+        title: 'Usuario baneado',
+        description: label,
+        kind: 'success',
+      });
+      dialogRef.current?.close();
+      location.reload();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Error inesperado');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <button
+        type="button"
+        className="btn btn-ghost"
+        style={{
+          minHeight: '36px',
+          paddingBlock: '0.25rem',
+          color: adminSelf ? undefined : 'var(--color-danger-text)',
+          opacity: adminSelf ? 0.5 : 1,
+          cursor: adminSelf ? 'not-allowed' : undefined,
+        }}
+        onClick={open}
+        disabled={adminSelf}
+        title={adminSelf ? 'No puedes banearte a ti mismo' : undefined}
+        aria-label={adminSelf ? 'No puedes banearte a ti mismo' : `Banear a ${label}`}
+      >
+        Banear
+      </button>
+
+      <dialog
+        ref={dialogRef}
+        aria-labelledby={titleId}
+        className="rounded-lg p-0 bg-white text-[color:var(--color-ink)] border-2 border-[color:var(--color-ink)] shadow-[var(--shadow-hard)] backdrop:bg-black/40 w-[min(92vw,28rem)]"
+      >
+        <form onSubmit={submit} className="p-5 sm:p-6 flex flex-col gap-4" autoComplete="off">
+          <div className="flex items-start justify-between gap-3">
+            <h2 id={titleId} className="text-lg font-semibold">
+              Banear a {label}
+            </h2>
+            <button
+              type="button"
+              onClick={close}
+              aria-label="Cerrar"
+              className="rounded-lg p-1 hover:bg-black/5 transition-colors leading-none text-xl"
+            >
+              <span aria-hidden="true">×</span>
+            </button>
+          </div>
+
+          <p className="text-sm" style={{ color: 'var(--color-pencil)' }}>
+            El usuario no podrá acceder al sistema hasta ser desbaneado.
+          </p>
+
+          <div>
+            <label className="label" htmlFor={`${titleId}-razon`}>
+              Razón del baneo
+            </label>
+            <textarea
+              ref={firstFieldRef}
+              id={`${titleId}-razon`}
+              className="input"
+              rows={4}
+              value={razon}
+              onChange={(e) => setRazon(e.target.value)}
+              required
+              minLength={5}
+              maxLength={500}
+              aria-invalid={error ? true : undefined}
+              aria-describedby={error ? `${titleId}-err` : undefined}
+              placeholder="Explica el motivo — el usuario lo verá en su pantalla de bloqueo."
+            />
+            <p className="text-xs mt-1" style={{ color: 'var(--color-pencil)' }}>
+              {razon.length}/500
+            </p>
+          </div>
+
+          {error && (
+            <p
+              ref={errorRef}
+              id={`${titleId}-err`}
+              role="alert"
+              tabIndex={-1}
+              className="text-sm"
+              style={{ color: 'var(--color-danger-text)' }}
+            >
+              {error}
+            </p>
+          )}
+
+          <div className="flex gap-2 justify-end pt-2">
+            <button type="button" className="btn btn-ghost" onClick={close} disabled={loading}>
+              Cancelar
+            </button>
+            <button
+              type="submit"
+              className="btn"
+              style={{ background: 'var(--color-danger)', color: 'var(--color-ink)' }}
+              disabled={loading}
+            >
+              {loading ? 'Baneando…' : 'Banear'}
+            </button>
+          </div>
+        </form>
+      </dialog>
+    </>
+  );
+}
diff --git a/src/components/admin/usuarios/DesbanearButton.tsx b/src/components/admin/usuarios/DesbanearButton.tsx
new file mode 100644
index 0000000..659694a
--- /dev/null
+++ b/src/components/admin/usuarios/DesbanearButton.tsx
@@ -0,0 +1,43 @@
+import { useState } from 'react';
+import { toastAfterReload } from '@/lib/toast';
+
+type Props = {
+  baneoId: number;
+  nombre: string;
+};
+
+export default function DesbanearButton({ baneoId, nombre }: Props) {
+  const [loading, setLoading] = useState(false);
+
+  const submit = async () => {
+    if (loading) return;
+    if (!window.confirm(`¿Desbanear a ${nombre}? Recuperará acceso inmediato.`)) return;
+    setLoading(true);
+    try {
+      const res = await fetch(`/api/admin/baneos/${baneoId}/desbanear`, { method: 'POST' });
+      const json = await res.json().catch(() => ({}));
+      if (!res.ok) throw new Error(json?.error ?? 'No se pudo desbanear');
+      toastAfterReload({
+        title: 'Usuario desbaneado',
+        description: nombre,
+        kind: 'success',
+      });
+      location.reload();
+    } catch (err) {
+      alert(err instanceof Error ? err.message : 'Error inesperado');
+      setLoading(false);
+    }
+  };
+
+  return (
+    <button
+      type="button"
+      className="btn btn-primary"
+      style={{ minHeight: '36px', paddingBlock: '0.25rem' }}
+      onClick={submit}
+      disabled={loading}
+    >
+      {loading ? 'Desbaneando…' : 'Desbanear'}
+    </button>
+  );
+}
diff --git a/src/components/alumno/SolicitudCart.tsx b/src/components/alumno/SolicitudCart.tsx
index 8a4f38f..57db324 100644
--- a/src/components/alumno/SolicitudCart.tsx
+++ b/src/components/alumno/SolicitudCart.tsx
@@ -55,6 +55,7 @@ export default function CartProvider({
   maestros?: MaestroOpt[];
 }) {
   const [cart, setCart] = useState<Map<number, CartItem>>(new Map());
+  const cartHydrated = useRef(false);
   const dialogRef = useRef<HTMLDialogElement | null>(null);
   const firstFieldRef = useRef<HTMLSelectElement | null>(null);
   const [maestroId, setMaestroId] = useState<string>('');
@@ -130,6 +131,43 @@ export default function CartProvider({
     dialogRef.current?.close();
   };
 
+  // Hidrata carrito desde localStorage al montar
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    try {
+      const raw = window.localStorage.getItem('labre:cart:v1');
+      if (raw) {
+        const arr = JSON.parse(raw);
+        if (Array.isArray(arr)) {
+          const next = new Map<number, CartItem>();
+          for (const i of arr) {
+            if (i && typeof i.material_id === 'number' && typeof i.nombre === 'string') {
+              next.set(i.material_id, {
+                material_id: i.material_id,
+                nombre: i.nombre,
+                cantidad: clamp(Number(i.cantidad) || 1, Number(i.cantidad_disponible) || 1),
+                cantidad_disponible: Number(i.cantidad_disponible) || 1,
+                descripcion: typeof i.descripcion === 'string' ? i.descripcion : '',
+              });
+            }
+          }
+          if (next.size > 0) setCart(next);
+        }
+      }
+    } catch { /* localStorage bloqueado o JSON inválido */ }
+    cartHydrated.current = true;
+  }, []);
+
+  // Persiste carrito a localStorage cuando cambia (después de la hidratación inicial)
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    if (!cartHydrated.current) return;
+    try {
+      if (cart.size === 0) window.localStorage.removeItem('labre:cart:v1');
+      else window.localStorage.setItem('labre:cart:v1', JSON.stringify(Array.from(cart.values())));
+    } catch { /* localStorage bloqueado */ }
+  }, [cart]);
+
   // Cerrar al click en backdrop
   useEffect(() => {
     const dlg = dialogRef.current;
@@ -385,13 +423,23 @@ export default function CartProvider({
               <a href="/perfil" className="btn btn-primary">Completar perfil</a>
             </div>
           ) : (
-            <div className="flex gap-2 justify-end pt-2">
-              <button type="button" className="btn btn-ghost" onClick={closeCheckout} disabled={loading}>
-                Cancelar
-              </button>
-              <button type="submit" className="btn btn-primary" disabled={loading || ok || items.length === 0}>
-                {loading ? 'Enviando…' : 'Enviar solicitud'}
+            <div className="flex gap-2 justify-between items-center pt-2">
+              <button
+                type="button"
+                className="btn btn-ghost"
+                onClick={() => { if (window.confirm('¿Vaciar todo el carrito?')) setCart(new Map()); }}
+                disabled={loading || items.length === 0}
+              >
+                Vaciar
               </button>
+              <div className="flex gap-2">
+                <button type="button" className="btn btn-ghost" onClick={closeCheckout} disabled={loading}>
+                  Cancelar
+                </button>
+                <button type="submit" className="btn btn-primary" disabled={loading || ok || items.length === 0}>
+                  {loading ? 'Enviando…' : 'Enviar solicitud'}
+                </button>
+              </div>
             </div>
           )}
         </form>
diff --git a/src/components/profile/PerfilForm.tsx b/src/components/profile/PerfilForm.tsx
index 749f855..c1e2492 100644
--- a/src/components/profile/PerfilForm.tsx
+++ b/src/components/profile/PerfilForm.tsx
@@ -1,5 +1,4 @@
 import { useEffect, useRef, useState } from 'react';
-import { browserClient } from '@/lib/supabase';
 import { avatarInfo } from '@/lib/avatar';
 import { toast, toastAfterReload } from '@/lib/toast';
 import Avatar from './Avatar';
@@ -22,7 +21,6 @@ type Props = {
   mode?: 'edit' | 'onboarding';
 };
 
-const BUCKET = 'avatares';
 const SEM_OPTS = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'];
 
 export default function PerfilForm({
@@ -69,18 +67,16 @@ export default function PerfilForm({
     ? { ...info, src: previewUrl }
     : info;
 
-  async function uploadAvatar(): Promise<string | null> {
-    if (!file) return null;
-    const ext = (file.name.split('.').pop() ?? 'jpg').toLowerCase().replace(/[^a-z0-9]/g, '') || 'jpg';
-    const path = `${userId}/${Date.now()}.${ext}`;
-    const { error: upErr } = await browserClient()
-      .storage.from(BUCKET)
-      .upload(path, file, { upsert: true, contentType: file.type || undefined });
-    if (upErr) {
-      toast({ kind: 'error', title: 'La foto no se subió', description: upErr.message });
-      return null;
+  async function uploadAvatar(f: File): Promise<boolean> {
+    const fd = new FormData();
+    fd.append('file', f);
+    const res = await fetch('/api/upload/avatar', { method: 'POST', body: fd });
+    const json = await res.json().catch(() => ({}));
+    if (!res.ok) {
+      toast({ kind: 'error', title: 'La foto no se subió', description: json?.error ?? 'Intenta de nuevo.' });
+      return false;
     }
-    return path;
+    return true;
   }
 
   const submit = async (e: React.FormEvent) => {
@@ -89,9 +85,10 @@ export default function PerfilForm({
     setLoading(true);
     setError(null);
     try {
-      let nuevoPath: string | null | undefined = undefined;
+      // La foto se sube por su propio endpoint (que ya persiste foto_path).
+      // El PATCH /api/profile solo maneja matricula/semestre/tutor.
       if (file) {
-        nuevoPath = await uploadAvatar();
+        await uploadAvatar(file);
       }
       const body: Record<string, string | number | null> = {
         matricula: matricula.trim() || null,
@@ -100,7 +97,6 @@ export default function PerfilForm({
         body.semestre = semestre || null;
         body.tutor_id = tutorId ? Number(tutorId) : null;
       }
-      if (nuevoPath !== undefined) body.foto_path = nuevoPath;
 
       const res = await fetch('/api/profile', {
         method: 'PATCH',
diff --git a/src/layouts/AppLayout.astro b/src/layouts/AppLayout.astro
index 1ee0b54..9540394 100644
--- a/src/layouts/AppLayout.astro
+++ b/src/layouts/AppLayout.astro
@@ -57,6 +57,7 @@ const ICONS = {
   chart: 'M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z',
   logout: 'M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75',
   dashboard: 'M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605',
+  users: 'M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z',
 };
 
 const alumnoNav: NavItem[] = [
@@ -70,6 +71,7 @@ const adminNav: NavItem[] = [
   { href: '/admin/inventario', label: 'Inventario', icon: 'box' },
   { href: '/admin/estadisticas', label: 'Estadísticas', icon: 'stats' },
   { href: '/admin/reportes', label: 'Reportes', icon: 'chart' },
+  { href: '/admin/usuarios', label: 'Usuarios', icon: 'users' },
 ];
 const nav = isAdmin ? adminNav : alumnoNav;
 
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index c51328d..d62d140 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -38,5 +38,70 @@ const { title = 'Sistema de Préstamos — Laboratorio UABC' } = Astro.props;
       Saltar al contenido
     </a>
     <slot />
+    <div id="page-loader" hidden aria-hidden="true" aria-live="polite">
+      <div class="page-loader-inner">
+        <svg class="page-loader-spinner" viewBox="0 0 24 24" width="40" height="40" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
+          <path d="M12 3a9 9 0 1 0 9 9" />
+        </svg>
+      </div>
+    </div>
+    <style is:global>
+      #page-loader {
+        position: fixed; inset: 0; z-index: 9999;
+        background: color-mix(in oklab, var(--color-surface) 60%, transparent);
+        backdrop-filter: blur(8px);
+        -webkit-backdrop-filter: blur(8px);
+        display: grid; place-items: center;
+      }
+      #page-loader[hidden] { display: none; }
+      .page-loader-spinner {
+        color: var(--color-ink);
+        animation: labre-spin 0.9s linear infinite;
+      }
+      @keyframes labre-spin { to { transform: rotate(360deg); } }
+      @media (prefers-reduced-motion: reduce) {
+        .page-loader-spinner { animation: none; }
+      }
+    </style>
+    <script is:inline>
+      (() => {
+        const overlay = document.getElementById('page-loader');
+        if (!overlay) return;
+        const show = () => { overlay.hidden = false; };
+
+        document.addEventListener('click', (e) => {
+          const a = (e.target instanceof Element) ? e.target.closest('a[href]') : null;
+          if (!a) return;
+          if (e.defaultPrevented) return;
+          if (e.button !== 0) return;
+          if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;
+          if (a.target && a.target !== '_self') return;
+          const href = a.getAttribute('href') || '';
+          if (!href || href.startsWith('#') || href.startsWith('javascript:') || href.startsWith('mailto:') || href.startsWith('tel:')) return;
+          try {
+            const url = new URL(a.href, location.href);
+            if (url.origin !== location.origin) return;
+            if (url.pathname === location.pathname && url.search === location.search) return;
+          } catch { return; }
+          show();
+        }, true);
+
+        document.addEventListener('submit', (e) => {
+          if (e.defaultPrevented) return;
+          const form = e.target;
+          if (!(form instanceof HTMLFormElement)) return;
+          try {
+            const action = form.getAttribute('action');
+            if (action) {
+              const url = new URL(action, location.href);
+              if (url.origin !== location.origin) return;
+            }
+          } catch { return; }
+          show();
+        }, true);
+
+        window.addEventListener('pageshow', () => { overlay.hidden = true; });
+      })();
+    </script>
   </body>
 </html>
diff --git a/src/middleware.ts b/src/middleware.ts
index 1a8c0c6..f7df3df 100644
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -3,6 +3,8 @@ import { serverClient } from '@/lib/supabase';
 
 const UABC_DOMAIN = '@uabc.edu.mx';
 const PUBLIC_ROUTES = ['/login', '/api/auth/signin', '/api/auth/callback', '/api/auth/signout'];
+// Rutas siempre accesibles para un user baneado (sino, loop de rewrite)
+const BANNED_ALLOWED = ['/banned', '/api/auth/signout'];
 
 export const onRequest = defineMiddleware(async (context, next) => {
   const supabase = serverClient(context.cookies);
@@ -56,6 +58,15 @@ export const onRequest = defineMiddleware(async (context, next) => {
     return context.redirect('/');
   }
 
+  // Ban guard: si el user está baneado (y no es admin), toda ruta cae a /banned
+  // salvo la propia /banned y el signout. RPC is_banned respeta expires_at.
+  if (user && context.locals.profile && context.locals.profile.rol !== 'admin') {
+    const { data: banned } = await supabase.rpc('is_banned', { p_uid: user.id });
+    if (banned === true && !BANNED_ALLOWED.includes(pathname)) {
+      return context.rewrite('/banned');
+    }
+  }
+
   if (pathname.startsWith('/admin') && context.locals.profile?.rol !== 'admin') {
     return context.rewrite('/403');
   }
diff --git a/src/pages/admin/inventario/index.astro b/src/pages/admin/inventario/index.astro
index d5fe8d4..25576c1 100644
--- a/src/pages/admin/inventario/index.astro
+++ b/src/pages/admin/inventario/index.astro
@@ -109,21 +109,6 @@ const estadoBadge = (e: Material['estado']) => {
       </div>
     </form>
 
-    <script is:inline>
-      (() => {
-        const form = document.getElementById('inv-filter-form');
-        if (!form) return;
-        const q = form.querySelector('input[name="q"]');
-        const selects = form.querySelectorAll('select');
-        let t;
-        q && q.addEventListener('input', () => {
-          clearTimeout(t);
-          t = setTimeout(() => form.submit(), 250);
-        });
-        selects.forEach((s) => s.addEventListener('change', () => form.submit()));
-      })();
-    </script>
-
     {matError && (
       <div class="card mb-6" role="alert" style="border-color: color-mix(in oklab, var(--color-danger) 30%, transparent);">
         <p class="text-sm" style="color: var(--color-danger-text);">
diff --git a/src/pages/admin/usuarios.astro b/src/pages/admin/usuarios.astro
new file mode 100644
index 0000000..52774ee
--- /dev/null
+++ b/src/pages/admin/usuarios.astro
@@ -0,0 +1,188 @@
+---
+import AppLayout from '@/layouts/AppLayout.astro';
+import BanearForm from '@/components/admin/usuarios/BanearForm.tsx';
+import DesbanearButton from '@/components/admin/usuarios/DesbanearButton.tsx';
+
+type ProfileRow = {
+  id: string;
+  nombre: string | null;
+  email: string;
+  matricula: string | null;
+  rol: 'alumno' | 'docente' | 'admin';
+};
+
+type BaneoRow = {
+  id: number;
+  profile_id: string;
+  razon: string;
+  banned_at: string;
+};
+
+const meId = Astro.locals.user?.id ?? null;
+
+const [{ data: profiles, error: perr }, { data: baneos }] = await Promise.all([
+  Astro.locals.supabase
+    .from('profiles')
+    .select('id, nombre, email, matricula, rol')
+    .order('nombre'),
+  Astro.locals.supabase
+    .from('baneos')
+    .select('id, profile_id, razon, banned_at')
+    .is('unbanned_at', null),
+]);
+
+const baneosByProfile = new Map<string, BaneoRow>();
+for (const b of (baneos ?? []) as BaneoRow[]) baneosByProfile.set(b.profile_id, b);
+
+const usuarios = ((profiles ?? []) as ProfileRow[]).map((p) => ({
+  ...p,
+  baneo: baneosByProfile.get(p.id) ?? null,
+}));
+
+const rolLabel = (r: ProfileRow['rol']) =>
+  r === 'admin' ? 'Admin' : r === 'docente' ? 'Docente' : 'Alumno';
+
+const fmtDate = (iso: string) =>
+  new Intl.DateTimeFormat('es-MX', {
+    dateStyle: 'medium',
+    timeZone: 'America/Tijuana',
+  }).format(new Date(iso));
+
+const trunc = (s: string, n = 80) => (s.length > n ? s.slice(0, n - 1) + '…' : s);
+---
+<AppLayout title="Usuarios — Admin">
+  <div class="max-w-5xl">
+    <header class="mb-6">
+      <h1 class="text-2xl md:text-3xl font-semibold">Usuarios</h1>
+      <p class="text-sm opacity-70 mt-1">Perfiles de todos los usuarios. Banea a quien haga mal uso del sistema.</p>
+    </header>
+
+    {perr && (
+      <div class="card mb-6" role="alert" style="border-color: color-mix(in oklab, var(--color-danger) 30%, transparent);">
+        <p class="text-sm" style="color: var(--color-danger-text);">
+          No se pudieron cargar los usuarios. Recarga la página.
+        </p>
+      </div>
+    )}
+
+    {!perr && usuarios.length === 0 && (
+      <div class="card text-center">
+        <h2 class="text-lg font-semibold mb-1">Sin usuarios aún</h2>
+        <p class="text-sm opacity-70">Se listarán aquí en cuanto alguien inicie sesión.</p>
+      </div>
+    )}
+
+    {!perr && usuarios.length > 0 && (
+      <>
+        {/* Desktop */}
+        <div class="hidden md:block card p-0 overflow-hidden">
+          <table class="w-full text-sm">
+            <thead class="text-left" style="background: color-mix(in oklab, var(--color-ink) 4%, transparent);">
+              <tr>
+                <th class="px-4 py-3 font-medium">Nombre</th>
+                <th class="px-4 py-3 font-medium">Email</th>
+                <th class="px-4 py-3 font-medium">Rol</th>
+                <th class="px-4 py-3 font-medium">Estado</th>
+                <th class="px-4 py-3 font-medium text-right">Acciones</th>
+              </tr>
+            </thead>
+            <tbody>
+              {usuarios.map((u) => {
+                const isSelf = u.id === meId;
+                return (
+                  <tr class="border-t align-top" style="border-color: color-mix(in oklab, var(--color-ink) 8%, transparent);">
+                    <td class="px-4 py-3">
+                      <div class="font-medium break-words">{u.nombre ?? '—'}</div>
+                      {u.matricula && <div class="text-xs opacity-60 mt-0.5" style="font-variant-numeric: tabular-nums;">{u.matricula}</div>}
+                    </td>
+                    <td class="px-4 py-3 break-all text-xs">{u.email}</td>
+                    <td class="px-4 py-3">
+                      <span
+                        class="text-xs uppercase tracking-wide px-2 py-0.5 rounded-[2px]"
+                        style={`border: 1.5px solid var(--color-ink); ${u.rol === 'admin' ? 'background: var(--color-secondary);' : ''}`}
+                      >{rolLabel(u.rol)}</span>
+                    </td>
+                    <td class="px-4 py-3">
+                      {u.baneo ? (
+                        <div class="flex flex-col gap-1">
+                          <span
+                            class="text-xs uppercase tracking-wide px-2 py-0.5 rounded-[2px] w-fit"
+                            style="background: var(--color-danger); color: var(--color-ink); border: 1.5px solid var(--color-ink);"
+                          >Baneado</span>
+                          <span class="text-xs opacity-70 break-words">{trunc(u.baneo.razon)}</span>
+                          <span class="text-[11px] opacity-50">desde {fmtDate(u.baneo.banned_at)}</span>
+                        </div>
+                      ) : (
+                        <span class="text-xs uppercase tracking-wide" style="color: var(--color-primary);">Activo</span>
+                      )}
+                    </td>
+                    <td class="px-4 py-3">
+                      <div class="flex gap-2 justify-end">
+                        {u.baneo ? (
+                          <DesbanearButton baneoId={u.baneo.id} nombre={u.nombre ?? u.email} client:load />
+                        ) : (
+                          <BanearForm
+                            profile={{ id: u.id, nombre: u.nombre, email: u.email }}
+                            adminSelf={isSelf}
+                            client:load
+                          />
+                        )}
+                      </div>
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+
+        {/* Mobile */}
+        <div class="md:hidden flex flex-col gap-3">
+          {usuarios.map((u) => {
+            const isSelf = u.id === meId;
+            return (
+              <article class="card flex flex-col gap-3">
+                <div class="flex items-start justify-between gap-3">
+                  <div class="min-w-0">
+                    <h3 class="font-semibold break-words">{u.nombre ?? '—'}</h3>
+                    <p class="text-xs opacity-70 break-all">{u.email}</p>
+                    <p class="text-xs opacity-60 mt-1">
+                      {rolLabel(u.rol)}{u.matricula ? ` · ${u.matricula}` : ''}
+                    </p>
+                  </div>
+                  {u.baneo ? (
+                    <span
+                      class="text-xs uppercase tracking-wide px-2 py-0.5 rounded-[2px] shrink-0"
+                      style="background: var(--color-danger); color: var(--color-ink); border: 1.5px solid var(--color-ink);"
+                    >Baneado</span>
+                  ) : (
+                    <span class="text-xs uppercase tracking-wide shrink-0" style="color: var(--color-primary);">Activo</span>
+                  )}
+                </div>
+
+                {u.baneo && (
+                  <div class="text-xs opacity-80 break-words">
+                    <strong>Razón:</strong> {trunc(u.baneo.razon, 120)}
+                    <div class="opacity-60 mt-1">desde {fmtDate(u.baneo.banned_at)}</div>
+                  </div>
+                )}
+
+                <div class="flex gap-2 justify-end">
+                  {u.baneo ? (
+                    <DesbanearButton baneoId={u.baneo.id} nombre={u.nombre ?? u.email} client:load />
+                  ) : (
+                    <BanearForm
+                      profile={{ id: u.id, nombre: u.nombre, email: u.email }}
+                      adminSelf={isSelf}
+                      client:load
+                    />
+                  )}
+                </div>
+              </article>
+            );
+          })}
+        </div>
+      </>
+    )}
+  </div>
+</AppLayout>
diff --git a/src/pages/api/admin/baneos/[id]/desbanear.ts b/src/pages/api/admin/baneos/[id]/desbanear.ts
new file mode 100644
index 0000000..da32079
--- /dev/null
+++ b/src/pages/api/admin/baneos/[id]/desbanear.ts
@@ -0,0 +1,30 @@
+import type { APIRoute } from 'astro';
+
+export const prerender = false;
+
+export const POST: APIRoute = async ({ locals, params }) => {
+  if (locals.profile?.rol !== 'admin') {
+    return Response.json({ error: 'No autorizado' }, { status: 403 });
+  }
+
+  const id = Number(params.id);
+  if (!Number.isInteger(id) || id <= 0) {
+    return Response.json({ error: 'ID inválido' }, { status: 400 });
+  }
+
+  const { data, error } = await locals.supabase
+    .from('baneos')
+    .update({ unbanned_at: new Date().toISOString(), unbanned_by: locals.user!.id })
+    .eq('id', id)
+    .is('unbanned_at', null)
+    .select('id');
+
+  if (error) {
+    return Response.json({ error: 'No se pudo desbanear' }, { status: 500 });
+  }
+  if (!data || data.length === 0) {
+    return Response.json({ error: 'Baneo no encontrado o ya inactivo' }, { status: 404 });
+  }
+
+  return Response.json({ ok: true });
+};
diff --git a/src/pages/api/admin/baneos/index.ts b/src/pages/api/admin/baneos/index.ts
new file mode 100644
index 0000000..f52f6f8
--- /dev/null
+++ b/src/pages/api/admin/baneos/index.ts
@@ -0,0 +1,67 @@
+import type { APIRoute } from 'astro';
+
+export const prerender = false;
+
+export const POST: APIRoute = async ({ request, locals }) => {
+  if (locals.profile?.rol !== 'admin') {
+    return Response.json({ error: 'No autorizado' }, { status: 403 });
+  }
+
+  let body: { profile_id?: unknown; razon?: unknown; expires_at?: unknown };
+  try {
+    body = await request.json();
+  } catch {
+    return Response.json({ error: 'JSON inválido' }, { status: 400 });
+  }
+
+  const profile_id = typeof body.profile_id === 'string' ? body.profile_id.trim() : '';
+  if (!profile_id) {
+    return Response.json({ error: 'profile_id es obligatorio' }, { status: 400 });
+  }
+  if (profile_id === locals.user!.id) {
+    return Response.json({ error: 'No puedes banearte a ti mismo' }, { status: 400 });
+  }
+
+  const razon = typeof body.razon === 'string' ? body.razon.trim().slice(0, 500) : '';
+  if (razon.length < 5) {
+    return Response.json({ error: 'La razón debe tener al menos 5 caracteres' }, { status: 400 });
+  }
+
+  let expires_at: string | null = null;
+  if (body.expires_at != null && body.expires_at !== '') {
+    if (typeof body.expires_at !== 'string') {
+      return Response.json({ error: 'expires_at debe ser string ISO' }, { status: 400 });
+    }
+    const d = new Date(body.expires_at);
+    if (Number.isNaN(d.getTime())) {
+      return Response.json({ error: 'expires_at inválido' }, { status: 400 });
+    }
+    if (d <= new Date()) {
+      return Response.json({ error: 'expires_at debe ser futuro' }, { status: 400 });
+    }
+    expires_at = d.toISOString();
+  }
+
+  const { data, error } = await locals.supabase
+    .from('baneos')
+    .insert({
+      profile_id,
+      razon,
+      expires_at,
+      banned_by: locals.user!.id,
+    })
+    .select('id')
+    .single();
+
+  if (error) {
+    if ((error as { code?: string }).code === '23505') {
+      return Response.json(
+        { error: 'El usuario ya tiene un baneo activo — desbaneálo primero' },
+        { status: 409 },
+      );
+    }
+    return Response.json({ error: 'No se pudo crear el baneo' }, { status: 500 });
+  }
+
+  return Response.json({ id: data.id }, { status: 201 });
+};
diff --git a/src/pages/api/upload/avatar.ts b/src/pages/api/upload/avatar.ts
new file mode 100644
index 0000000..75c946b
--- /dev/null
+++ b/src/pages/api/upload/avatar.ts
@@ -0,0 +1,58 @@
+import type { APIRoute } from 'astro';
+import { serviceClient } from '@/lib/supabase';
+
+export const prerender = false;
+
+const BUCKET = 'avatares';
+const MAX_BYTES = 2 * 1024 * 1024;
+
+const extFrom = (file: File): string => {
+  const fromName = file.name?.split('.').pop()?.toLowerCase().replace(/[^a-z0-9]/g, '');
+  if (fromName) return fromName;
+  const fromMime = file.type?.split('/')[1]?.toLowerCase().replace(/[^a-z0-9]/g, '');
+  return fromMime || 'jpg';
+};
+
+export const POST: APIRoute = async ({ request, locals }) => {
+  const user = locals.user;
+  if (!user) return Response.json({ error: 'no autorizado' }, { status: 401 });
+
+  let form: FormData;
+  try {
+    form = await request.formData();
+  } catch {
+    return Response.json({ error: 'form-data inválido' }, { status: 400 });
+  }
+
+  const file = form.get('file');
+  if (!(file instanceof File)) {
+    return Response.json({ error: 'Archivo faltante' }, { status: 400 });
+  }
+  if (!/^image\//.test(file.type)) {
+    return Response.json({ error: 'Solo se permiten imágenes' }, { status: 400 });
+  }
+  if (file.size > MAX_BYTES) {
+    return Response.json({ error: 'La imagen supera 2 MB' }, { status: 400 });
+  }
+
+  const path = `${user.id}/${Date.now()}.${extFrom(file)}`;
+
+  const { error: upErr } = await serviceClient()
+    .storage.from(BUCKET)
+    .upload(path, file, { upsert: true, contentType: file.type });
+
+  if (upErr) {
+    return Response.json({ error: upErr.message || 'No se pudo subir' }, { status: 500 });
+  }
+
+  const { error: patchErr } = await locals.supabase
+    .from('profiles')
+    .update({ foto_path: path })
+    .eq('id', user.id);
+
+  if (patchErr) {
+    return Response.json({ error: 'Foto subida pero no vinculada' }, { status: 500 });
+  }
+
+  return Response.json({ ok: true, path });
+};
diff --git a/src/pages/api/upload/material-foto/[id].ts b/src/pages/api/upload/material-foto/[id].ts
new file mode 100644
index 0000000..d06dfa3
--- /dev/null
+++ b/src/pages/api/upload/material-foto/[id].ts
@@ -0,0 +1,67 @@
+import type { APIRoute } from 'astro';
+import { serviceClient } from '@/lib/supabase';
+
+export const prerender = false;
+
+const BUCKET = 'materiales-fotos';
+const MAX_BYTES = 2 * 1024 * 1024;
+
+const parseId = (raw: string | undefined) => {
+  const id = Number(raw);
+  return Number.isInteger(id) && id > 0 ? id : null;
+};
+
+const extFrom = (file: File): string => {
+  const fromName = file.name?.split('.').pop()?.toLowerCase().replace(/[^a-z0-9]/g, '');
+  if (fromName) return fromName;
+  const fromMime = file.type?.split('/')[1]?.toLowerCase().replace(/[^a-z0-9]/g, '');
+  return fromMime || 'jpg';
+};
+
+export const POST: APIRoute = async ({ request, locals, params }) => {
+  if (locals.profile?.rol !== 'admin') {
+    return Response.json({ error: 'No autorizado' }, { status: 403 });
+  }
+
+  const materialId = parseId(params.id);
+  if (!materialId) return Response.json({ error: 'ID inválido' }, { status: 400 });
+
+  let form: FormData;
+  try {
+    form = await request.formData();
+  } catch {
+    return Response.json({ error: 'form-data inválido' }, { status: 400 });
+  }
+
+  const file = form.get('file');
+  if (!(file instanceof File)) {
+    return Response.json({ error: 'Archivo faltante' }, { status: 400 });
+  }
+  if (!/^image\//.test(file.type)) {
+    return Response.json({ error: 'Solo se permiten imágenes' }, { status: 400 });
+  }
+  if (file.size > MAX_BYTES) {
+    return Response.json({ error: 'La imagen supera 2 MB' }, { status: 400 });
+  }
+
+  const path = `${materialId}/${Date.now()}.${extFrom(file)}`;
+
+  const { error: upErr } = await serviceClient()
+    .storage.from(BUCKET)
+    .upload(path, file, { upsert: true, contentType: file.type });
+
+  if (upErr) {
+    return Response.json({ error: upErr.message || 'No se pudo subir' }, { status: 500 });
+  }
+
+  const { error: patchErr } = await locals.supabase
+    .from('materiales')
+    .update({ imagen_path: path })
+    .eq('id', materialId);
+
+  if (patchErr) {
+    return Response.json({ error: 'Foto subida pero no vinculada' }, { status: 500 });
+  }
+
+  return Response.json({ ok: true, path });
+};
diff --git a/src/pages/banned.astro b/src/pages/banned.astro
new file mode 100644
index 0000000..a569a86
--- /dev/null
+++ b/src/pages/banned.astro
@@ -0,0 +1,85 @@
+---
+import Layout from '@/layouts/Layout.astro';
+import BrandMark from '@/components/BrandMark.astro';
+
+const user = Astro.locals.user;
+if (!user) return Astro.redirect('/login');
+
+type BanRow = {
+  razon: string;
+  banned_at: string;
+  expires_at: string | null;
+  banned_by: { nombre: string | null } | null;
+};
+
+const { data } = await Astro.locals.supabase
+  .from('baneos')
+  .select('razon, banned_at, expires_at, banned_by:profiles!banned_by(nombre)')
+  .eq('profile_id', user.id)
+  .is('unbanned_at', null)
+  .maybeSingle();
+
+const ban = data as BanRow | null;
+if (!ban) return Astro.redirect('/');
+
+const fmtDate = (iso: string) =>
+  new Intl.DateTimeFormat('es-MX', {
+    dateStyle: 'long',
+    timeStyle: 'short',
+    timeZone: 'America/Tijuana',
+  }).format(new Date(iso));
+
+const bannedAtStr = fmtDate(ban.banned_at);
+const expiresStr = ban.expires_at ? fmtDate(ban.expires_at) : null;
+const byName = ban.banned_by?.nombre ?? null;
+
+Astro.response.status = 403;
+---
+<Layout title="Cuenta bloqueada — LabPréstamos">
+  <main id="main" class="min-h-screen grid place-items-center p-4">
+    <div class="w-full max-w-lg">
+      <div class="text-center mb-6">
+        <div class="inline-grid place-items-center w-16 h-16 rounded-[2px] p-4 mb-4" style="background: var(--color-danger); border: 2px solid var(--color-ink); box-shadow: var(--shadow-hard);">
+          <BrandMark class="w-full h-full" style="color: var(--color-ink);" />
+        </div>
+        <h1 class="text-2xl md:text-3xl font-semibold uppercase tracking-wide">Cuenta bloqueada</h1>
+        <p class="text-sm mt-2" style="color: var(--color-pencil);">Tu acceso al sistema de préstamos fue suspendido.</p>
+      </div>
+
+      <div class="card-raised">
+        <dl class="flex flex-col gap-4 text-sm">
+          <div>
+            <dt class="text-xs uppercase tracking-wide mb-1" style="color: var(--color-pencil);">Motivo</dt>
+            <dd class="whitespace-pre-wrap break-words">{ban.razon}</dd>
+          </div>
+          <div class="grid sm:grid-cols-2 gap-4">
+            <div>
+              <dt class="text-xs uppercase tracking-wide mb-1" style="color: var(--color-pencil);">Fecha del bloqueo</dt>
+              <dd>{bannedAtStr}</dd>
+            </div>
+            {expiresStr && (
+              <div>
+                <dt class="text-xs uppercase tracking-wide mb-1" style="color: var(--color-pencil);">Expira</dt>
+                <dd>{expiresStr}</dd>
+              </div>
+            )}
+            {byName && (
+              <div>
+                <dt class="text-xs uppercase tracking-wide mb-1" style="color: var(--color-pencil);">Bloqueado por</dt>
+                <dd>{byName}</dd>
+              </div>
+            )}
+          </div>
+        </dl>
+
+        <p class="text-sm mt-6" style="color: var(--color-pencil);">
+          Si crees que esto es un error, contacta al Laboratorio de Sistemas Computacionales.
+        </p>
+
+        <form method="POST" action="/api/auth/signout" class="mt-6">
+          <button type="submit" class="btn btn-primary w-full">Cerrar sesión</button>
+        </form>
+      </div>
+    </div>
+  </main>
+</Layout>