Rediseño impeccable v2: refresh visual de todo el sistema

Segunda iteración del rediseño (sesión separada con skill impeccable).
Toca prácticamente toda la UI: layout base, tokens (global.css),
todas las páginas de alumno y admin, componentes de solicitudes,
inventario, catálogo, filtros, toaster y modales.

Docs y sistema:
- DESIGN.md y PRODUCT.md actualizados con la nueva iteración.
- .impeccable/design.json refleja tokens vigentes.
- .impeccable/review/ contiene screenshots de la revisión visual.

Dependencias:
- Añade @fontsource-variable/jetbrains-mono (fuente monoespaciada).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

src/pages/alumno/mis-prestamos.astro

@@ -43,15 +43,15 @@ const estadoLabel: Record<Estado, string> = {
 
 const estadoColor: Record<Estado, string> = {
   pendiente: 'var(--color-ink)',
-  aprobado: 'var(--color-primary)',
-  activo: 'var(--color-primary)',
+  aprobado: 'var(--color-positive)',
+  activo: 'var(--color-positive)',
   devuelto: 'var(--color-ink)',
   rechazado: 'var(--color-danger)',
   vencido: 'var(--color-danger)',
 };
 
 const badgeStyle = (e: Estado) =>
-  `background: color-mix(in oklab, ${estadoColor[e]} 15%, transparent); color: ${estadoColor[e]};`;
+  `background: color-mix(in oklab, ${estadoColor[e]} 18%, white); color: var(--color-ink); border: 1.5px solid ${estadoColor[e]};`;
 ---
 <AppLayout title="Mis préstamos — LabPréstamos">
   <div class="max-w-4xl">
@@ -62,7 +62,7 @@ const badgeStyle = (e: Estado) =>
 
     {error && (
       <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);">
+        <p class="text-sm" style="color: var(--color-danger-text);">
           No se pudieron cargar tus préstamos. Recarga la página o intenta más tarde.
         </p>
       </div>
@@ -93,7 +93,7 @@ const badgeStyle = (e: Estado) =>
                         {p.material?.numero_inventario ?? '—'}
                       </p>
                     </div>
-                    <span class="text-xs font-medium px-2 py-1 rounded-full whitespace-nowrap" style={badgeStyle(p.estado)}>
+                    <span class="text-xs font-medium px-2 py-1 rounded-[2px] whitespace-nowrap" style={badgeStyle(p.estado)}>
                       {estadoLabel[p.estado]}
                     </span>
                   </div>
@@ -147,7 +147,7 @@ const badgeStyle = (e: Estado) =>
                           {p.material?.numero_inventario ?? '—'}
                         </p>
                       </div>
-                      <span class="text-xs font-medium px-2 py-1 rounded-full whitespace-nowrap" style={badgeStyle(p.estado)}>
+                      <span class="text-xs font-medium px-2 py-1 rounded-[2px] whitespace-nowrap" style={badgeStyle(p.estado)}>
                         {estadoLabel[p.estado]}
                       </span>
                     </div>