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/styles/global.css

@@ -1,18 +1,43 @@
 @import "tailwindcss";
-@import "@fontsource-variable/inter";
+@import "@fontsource-variable/jetbrains-mono";
 
 @theme {
-  --color-primary: #00723F;
-  --color-primary-hover: #005f34;
-  --color-secondary: #DD971A;
-  --color-secondary-hover: #c78614;
-  --color-surface: #F4F7F5;
-  --color-ink: #2D3748;
-  --color-danger: #C53030;
+  /* MotherDuck-derived palette, remapped to LabPréstamos' semantics */
+  --color-cream: #f4efea;
+  --color-frost: #ffffff;
+  --color-chalk: #f8f8f7;
+  --color-ice: #ebf9ff;
 
-  --font-sans: "Inter Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --color-ink: #383838;
+  --color-pencil: #a1a1a1;
+  --color-graphite: #818181;
 
-  --radius-card: 0.5rem;
+  --color-primary: #6fc2ff;
+  --color-primary-hover: #56b4f7;
+  --color-secondary: #ff9538;
+  --color-secondary-hover: #ef8526;
+  --color-danger: #f38e84;
+  --color-danger-hover: #ec7469;
+  /* AA-contrast text variant of Coral Sketch — the fill color reads ~2:1 on white, too light for body text */
+  --color-danger-text: #a83224;
+  --color-positive: #38c1b0;
+  --color-attention: #ffde00;
+
+  --color-surface: var(--color-cream);
+
+  --font-sans: "JetBrains Mono Variable", ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
+
+  --radius-card: 2px;
+  --shadow-hard: -6px 6px 0 0 var(--color-ink);
+  --shadow-hard-sm: -3px 3px 0 0 var(--color-ink);
+
+  /* Every Tailwind radius utility collapses to the system's 2px — non-negotiable per brief */
+  --radius-sm: 2px;
+  --radius-md: 2px;
+  --radius-lg: 2px;
+  --radius-xl: 2px;
+  --radius-2xl: 2px;
+  --radius-3xl: 2px;
 }
 
 @layer base {
@@ -20,58 +45,118 @@
     color-scheme: light;
   }
   body {
-    background: var(--color-surface);
+    background: var(--color-cream);
     color: var(--color-ink);
     font-family: var(--font-sans);
+    letter-spacing: 0.02em;
     -webkit-font-smoothing: antialiased;
   }
   :focus-visible {
-    outline: 2px solid var(--color-primary);
+    outline: 2px solid var(--color-ink);
     outline-offset: 2px;
   }
+  ::selection {
+    background: var(--color-primary);
+    color: var(--color-ink);
+  }
+  /* Tabular data keeps real square corners even where a nested control forgets to ask */
+  table {
+    font-variant-numeric: tabular-nums;
+  }
 }
 
 @layer components {
   .btn {
-    @apply inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2.5 font-medium
-           transition-[filter,background-color,color,border-color] duration-150 ease-out
-           motion-safe:hover:brightness-110
-           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--color-primary)]
-           disabled:opacity-50 disabled:pointer-events-none;
+    @apply inline-flex items-center justify-center gap-2 rounded-[2px] px-4 py-2.5 font-medium
+           motion-safe:transition-transform motion-safe:duration-100 motion-safe:ease-out
+           disabled:opacity-50 disabled:pointer-events-none disabled:translate-x-0 disabled:translate-y-0;
     min-height: 44px;
     touch-action: manipulation;
     -webkit-tap-highlight-color: transparent;
+    border: 2px solid var(--color-ink);
+    color: var(--color-ink);
+    box-shadow: var(--shadow-hard);
+  }
+  .btn:hover,
+  .btn:focus-visible {
+    transform: translate(-6px, 6px);
+    box-shadow: 0 0 0 0 transparent;
+  }
+  .btn:active {
+    transform: translate(-3px, 3px);
+    box-shadow: var(--shadow-hard-sm);
   }
   .btn-primary {
     background: var(--color-primary);
-    color: white;
+    color: var(--color-ink);
   }
   .btn-secondary {
-    background: var(--color-secondary);
-    color: white;
+    background: var(--color-frost);
+    color: var(--color-ink);
   }
   .btn-ghost {
     background: transparent;
     color: var(--color-ink);
-    border: 1px solid color-mix(in oklab, var(--color-ink) 15%, transparent);
+    border-color: color-mix(in oklab, var(--color-ink) 35%, transparent);
+    box-shadow: none;
   }
+  .btn-ghost:hover,
+  .btn-ghost:focus-visible {
+    transform: none;
+    background: var(--color-chalk);
+    border-color: var(--color-ink);
+  }
+
   .card {
-    @apply rounded-lg bg-white p-6;
-    border: 1px solid color-mix(in oklab, var(--color-ink) 10%, transparent);
+    @apply rounded-[2px] bg-white p-6;
+    border: 2px solid var(--color-ink);
   }
+  .card-flat {
+    @apply rounded-[2px] bg-white p-6;
+    border: 1.5px solid var(--color-ink);
+  }
+  .card-raised {
+    @apply rounded-[2px] bg-white p-6;
+    border: 2px solid var(--color-ink);
+    box-shadow: var(--shadow-hard);
+  }
+  .card-link {
+    @apply rounded-[2px] bg-white p-6 block
+           motion-safe:transition-transform motion-safe:duration-100 motion-safe:ease-out;
+    border: 2px solid var(--color-ink);
+    box-shadow: var(--shadow-hard);
+  }
+  .card-link:hover,
+  .card-link:focus-visible {
+    transform: translate(-6px, 6px);
+    box-shadow: 0 0 0 0 transparent;
+  }
+
   .input {
-    @apply w-full rounded-lg bg-white px-3 py-2.5
-           transition-[border-color,box-shadow] duration-150
+    @apply w-full rounded-[2px] bg-white px-3 py-2.5
+           transition-[border-color] duration-100
            focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2
-           focus-visible:outline-[color:var(--color-primary)];
-    border: 1px solid color-mix(in oklab, var(--color-ink) 20%, transparent);
+           focus-visible:outline-[color:var(--color-ink)];
+    border: 2px solid var(--color-ink);
     min-height: 44px;
     touch-action: manipulation;
   }
-  .label {
-    @apply block text-sm font-medium mb-1;
-    color: color-mix(in oklab, var(--color-ink) 90%, transparent);
+  .input:focus {
+    border-color: var(--color-primary);
   }
+  .label {
+    @apply block text-sm font-medium mb-1 uppercase;
+    letter-spacing: 0.05em;
+    font-size: 0.75rem;
+    color: var(--color-ink);
+  }
+
+  .badge {
+    @apply inline-flex items-center rounded-[2px] px-2 py-0.5 text-xs font-semibold uppercase whitespace-nowrap;
+    letter-spacing: 0.03em;
+    border: 1.5px solid var(--color-ink);
+  }
+
   h1, h2, h3 { text-wrap: balance; }
   p { text-wrap: pretty; }
 }