Rediseño visual UABC + Mulish + auditoría de BD (P0/P1)

Rediseño visual:
- Nueva identidad UABC/editorial (DESIGN.md), tipografía Mulish, tokens
  verde/dorado/negro sobre bone-white, patrón de puntos verde en canvas,
  radios 8/12/30/9999, sin sombras, hairline 1px, tarjetas con leve
  transparencia + blur suave + borde verde muy sutil.
- 45 archivos .astro/.tsx alineados al nuevo sistema (Track A/B/C/D/E).
- Limpieza post-critique: eliminado triple CTA en home alumno, .card
  anidados en admin, aria-live decorativo, 26 aliases legacy en global.css,
  border-l verde en nav (patrón AI-slop), classList.remove obsoletos.

Auditoría de llamadas a BD (para 20-50 usuarios concurrentes):
- P0-1: middleware con cache in-memory de profile (30s) + is_banned (30s)
  por uid; exclusión de assets estáticos (/_astro/*, /audio/*, favicon).
  Invalidación en signout, PATCH /profile, baneos.
- P0-2: eliminado count pendientes duplicado en AppLayout; badge se
  hidrata client-side (BadgeSolicitudes con fetch inicial).
- P0-3: migración 0008 REPLICA IDENTITY FULL en solicitudes + delta
  preciso en BadgeSolicitudes (con fallback a refetch).
- P1: admin/index dedupe (4 queries → 2 con recientes.filter), catalogo
  reusa profile del middleware (3 queries → 1), inventario paralelo,
  estadisticas con cache 60s en RAM (stats-cache.ts), migración 0009
  con 3 índices (fecha, vencidos parcial, audit compuesto).

Fixes P0 de UI post-critique:
- estadisticas.astro: ReferenceError DIAS restaurado.
- solicitudes (3 vistas): error rendering sanitizado (no expone mensaje
  Postgres crudo al admin).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_014xaxs8cGcQe9NwbMqA1gvn

src/components/admin/usuarios/BanearForm.tsx

@@ -11,6 +11,7 @@ export default function BanearForm({ profile, adminSelf }: Props) {
   const firstFieldRef = useRef<HTMLTextAreaElement | null>(null);
   const errorRef = useRef<HTMLParagraphElement | null>(null);
   const [razon, setRazon] = useState('');
+  const [expiresAt, setExpiresAt] = useState('');
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -21,6 +22,7 @@ export default function BanearForm({ profile, adminSelf }: Props) {
     if (adminSelf) return;
     setError(null);
     setRazon('');
+    setExpiresAt('');
     dialogRef.current?.showModal();
     queueMicrotask(() => firstFieldRef.current?.focus());
   };
@@ -54,10 +56,18 @@ export default function BanearForm({ profile, adminSelf }: Props) {
     setLoading(true);
     setError(null);
     try {
+      const payload: { profile_id: string; razon: string; expires_at?: string } = {
+        profile_id: profile.id,
+        razon: trimmed,
+      };
+      if (expiresAt) {
+        payload.expires_at = new Date(expiresAt + 'T23:59:59').toISOString();
+      }
+
       const res = await fetch('/api/admin/baneos', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ profile_id: profile.id, razon: trimmed }),
+        body: JSON.stringify(payload),
       });
       const json = await res.json().catch(() => ({}));
       if (!res.ok) throw new Error(json?.error ?? 'No se pudo banear');
@@ -79,11 +89,10 @@ export default function BanearForm({ profile, adminSelf }: Props) {
     <>
       <button
         type="button"
-        className="btn btn-ghost"
+        className="btn btn-danger text-xs px-3"
         style={{
           minHeight: '36px',
           paddingBlock: '0.25rem',
-          color: adminSelf ? undefined : 'var(--color-danger-text)',
           opacity: adminSelf ? 0.5 : 1,
           cursor: adminSelf ? 'not-allowed' : undefined,
         }}
@@ -98,24 +107,27 @@ export default function BanearForm({ profile, adminSelf }: Props) {
       <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)]"
+        className="card bg-bone-white rounded-[12px] p-0 border border-hairline-gray backdrop:bg-negro-institucional/40 w-[min(92vw,28rem)]"
+        style={{ boxShadow: 'none' }}
       >
-        <form onSubmit={submit} className="p-5 sm:p-6 flex flex-col gap-4" autoComplete="off">
+        <form onSubmit={submit} className="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">
+            <h2 id={titleId} className="text-xl text-graphite font-normal">
               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"
+              className="rounded-[8px] p-1.5 hover:bg-linen text-graphite transition-colors leading-none"
             >
-              <span aria-hidden="true">×</span>
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
+                <path d="M6 18L18 6M6 6l12 12" />
+              </svg>
             </button>
           </div>
 
-          <p className="text-sm" style={{ color: 'var(--color-pencil)' }}>
+          <p className="text-sm text-graphite/70">
             El usuario no podrá acceder al sistema hasta ser desbaneado.
           </p>
 
@@ -137,19 +149,35 @@ export default function BanearForm({ profile, adminSelf }: Props) {
               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)' }}>
+            <p className="text-xs text-graphite/60 mt-1">
               {razon.length}/500
             </p>
           </div>
 
+          <div>
+            <label className="label" htmlFor={`${titleId}-expires`}>
+              Fecha de expiración (opcional)
+            </label>
+            <input
+              id={`${titleId}-expires`}
+              type="date"
+              className="input"
+              value={expiresAt}
+              min={new Date().toISOString().split('T')[0]}
+              onChange={(e) => setExpiresAt(e.target.value)}
+            />
+            <p className="text-xs text-graphite/60 mt-1">
+              Opcional. Si se omite, el baneo será indefinido hasta desbanear manualmente.
+            </p>
+          </div>
+
           {error && (
             <p
               ref={errorRef}
               id={`${titleId}-err`}
               role="alert"
               tabIndex={-1}
-              className="text-sm"
-              style={{ color: 'var(--color-danger-text)' }}
+              className="text-sm text-negro-institucional"
             >
               {error}
             </p>
@@ -161,8 +189,7 @@ export default function BanearForm({ profile, adminSelf }: Props) {
             </button>
             <button
               type="submit"
-              className="btn"
-              style={{ background: 'var(--color-danger)', color: 'var(--color-ink)' }}
+              className="btn btn-danger"
               disabled={loading}
             >
               {loading ? 'Baneando…' : 'Banear'}