feat(web): bootstrap design system con paleta brand El Dia

- Reemplazo de tokens HSL por OKLCH (Tailwind 4 native)
- Brand color #008fbe escalado a brand-50..950
- Neutral cool slate (complementa brand)
- Semantic: success/warning/destructive como tokens
- Background tinted off-white (no pure white) para warmth
- Dark mode usa neutral-950 (no pure black)
- Brand utilities expuestos via @theme inline (bg-brand-500, etc)
- Focus rings con ring brand color
- Selection con brand-200/800

Skill registry actualizado con compact rules de design system para auto-inyeccion en sub-agents.

Source of truth: Obsidian/02-ARQUITECTURA-y-TECH-STACK/2.14 Design System.md
Engram: sig-cm2/design-system

.atl/skill-registry.md

@@ -59,3 +59,15 @@ Generated: 2026-04-13
 - Frontend: Vitest + React Testing Library — comando: `vitest`
 - Coverage backend: `dotnet test --collect:"XPlat Code Coverage"`
 - Coverage frontend: `vitest --coverage`
+
+### Design System (frontend)
+- Source of truth: `Obsidian/02-ARQUITECTURA-y-TECH-STACK/2.14 🎨 Design System.md`. Engram topic_key: `sig-cm2/design-system`
+- Brand `#008fbe` (logo) → escalado OKLCH `--brand-50..950`. Neutral cool slate (`--neutral-50..950`). NO usar `gray-*`/`slate-*`/`blue-*` genéricos
+- Tokens semánticos: `bg-background`, `text-foreground`, `bg-primary`, `bg-card`, `text-muted-foreground`, `border-border`, `ring-ring`. NUNCA hardcodear `bg-white`/`text-black`/hex inline
+- Density compact: button 32-36px, input 36px, table row 40px. Spacing múltiplos de 4
+- Light + Dark con default = system preference (`useTheme()` hook). Smoke test en ambos antes de mergear
+- Forms: ≤4 campos single col, ≥5 campos `grid grid-cols-1 md:grid-cols-2 gap-4`
+- Tablas mobile: priority columns + tap-to-expand (NO cards-on-mobile, NO pure horizontal scroll)
+- Toasts via `sonner` (`<Toaster />` ya montado en `App.tsx`). `toast.success()` / `toast.error()`
+- Componentes shadcn: instalar via shadcn MCP server o `npx shadcn@latest add`. NUNCA copy-paste manual del website
+- WCAG AA obligatorio: focus rings visibles (ya forzado en CSS base), contrast ≥ 4.5:1 texto normal, aria-label en botones icon-only