Rediseño impeccable: brand mark, páginas 403/404, DESIGN.md + PRODUCT.md

Rediseño hecho en sesión aparte con el skill impeccable. Se registran
las especificaciones y ajustes visuales al sistema ya en producción.

Añade:
- BrandMark.astro con el escudo/logo del laboratorio.
- Favicon actualizado (svg + ico).
- Páginas propias 403 y 404 consistentes con el sistema visual.
- DESIGN.md y PRODUCT.md documentando decisiones.
- .impeccable/design.json con el design system tokenizado.

Ajusta componentes existentes (modales, autocomplete, layout, login,
solicitudes, mis-préstamos, middleware) para alinearse a los tokens
del design system.

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

src/layouts/AppLayout.astro

@@ -1,6 +1,7 @@
 ---
 import Layout from './Layout.astro';
 import Toaster from '@/components/Toaster.tsx';
+import BrandMark from '@/components/BrandMark.astro';
 
 interface Props {
   title?: string;
@@ -62,7 +63,9 @@ const activeCheck = (item: NavItem) => {
     <!-- Sidebar desktop -->
     <aside id="app-sidebar" class="hidden md:flex md:fixed md:top-0 md:left-0 md:w-64 md:h-screen bg-[color:var(--color-primary)] text-white md:flex-col md:z-40 sidebar-panel transition-transform duration-200 ease-out">
       <a href="/" class="p-6 flex items-center gap-3 border-b border-white/10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white" aria-label="LabPréstamos — Inicio">
-        <div class="w-9 h-9 rounded-lg bg-[color:var(--color-secondary)] grid place-items-center font-bold" aria-hidden="true">L</div>
+        <div class="w-9 h-9 rounded-lg bg-white/15 grid place-items-center p-2" aria-hidden="true">
+          <BrandMark class="w-full h-full text-white" />
+        </div>
         <div>
           <div class="font-semibold leading-tight">LabPréstamos</div>
           <div class="text-xs text-white/70">UABC · Lab. Sistemas</div>
@@ -106,7 +109,9 @@ const activeCheck = (item: NavItem) => {
     <!-- Header mobile mínimo -->
     <header class="md:hidden flex items-center justify-between px-4 py-3 bg-[color:var(--color-primary)] text-white">
       <a href="/" class="flex items-center gap-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white rounded-lg" aria-label="LabPréstamos — Inicio">
-        <div class="w-8 h-8 rounded-lg bg-[color:var(--color-secondary)] grid place-items-center font-bold text-sm" aria-hidden="true">L</div>
+        <div class="w-8 h-8 rounded-lg bg-white/15 grid place-items-center p-1.5" aria-hidden="true">
+          <BrandMark class="w-full h-full text-white" />
+        </div>
         <span class="font-semibold text-sm">LabPréstamos</span>
       </a>
       <div class="text-xs text-white/80 truncate max-w-[45%] text-right">