Restyling light pastel: tema blanco/azul/verde + Inter self-hosted

- theme.css reescrito: paleta light (sky/emerald accents, slate neutrals),
  tokens de spacing/typography/radii/shadows, @font-face Inter +
  JetBrains Mono variable woff2 self-hosted.
- ops-shell: header blanco con nav active=accent-soft + status pill pastel.
- run-timeline: bubbles emerald-100 (user) / blue-100 (bot) sobre blanco.
- home-dashboard: helpers cssVar + withAlpha, 6 charts coordinados a
  paleta pastel (--chart-blue/green/purple/orange/pink/gray).
- 8 CRUDs (users, products, orders, conversations, aliases,
  recommendations, quantities, takeovers, settings, debug) migrados
  de hex hardcoded oscuros a var(--*).
- modal.js + toast.js refactor a vars con fallbacks; modal blanco
  con shadow-lg y soft icon backgrounds.
- test-panel: aliases :host apuntan a globals en vez de override dark.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

public/lib/toast.js

@@ -8,12 +8,23 @@
  *   toast({ kind: "ok", text: "Listo", ms: 2000 });
  */
 
-const KIND_COLORS = {
-  error: { bg: "#241214", border: "#e74c3c", text: "#ffe9ea" },
-  ok:    { bg: "#0f2a1a", border: "#1f6f43", text: "#cdebd8" },
-  warn:  { bg: "#2a1f0a", border: "#F59E0B", text: "#ffe6b0" },
-  info:  { bg: "#0f2030", border: "#1f6feb", text: "#cce0ff" },
-};
+// Lee var del :root con fallback. Permite que la paleta de toasts se adapte
+// al tema sin que el archivo conozca los hex.
+function v(name, fallback) {
+  try {
+    const c = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+    return c || fallback;
+  } catch { return fallback; }
+}
+
+function kindColors() {
+  return {
+    error: { bg: v("--err-soft",  "#fee2e2"), border: v("--err",  "#ef4444"), text: v("--err-text",  "#7f1d1d") },
+    ok:    { bg: v("--ok-soft",   "#d1fae5"), border: v("--ok",   "#10b981"), text: v("--user-text", "#064e3b") },
+    warn:  { bg: v("--warn-soft", "#fef3c7"), border: v("--warn", "#f59e0b"), text: v("--text",      "#0f172a") },
+    info:  { bg: v("--accent-soft","#e0f2fe"),border: v("--accent","#0ea5e9"),text: v("--bot-text",  "#1e3a8a") },
+  };
+}
 
 let _container = null;
 
@@ -38,16 +49,19 @@ function ensureContainer() {
 
 export function toast({ kind = "error", text = "", ms = 4000 } = {}) {
   if (!text) return;
-  const colors = KIND_COLORS[kind] || KIND_COLORS.info;
+  const COLORS = kindColors();
+  const colors = COLORS[kind] || COLORS.info;
   const el = document.createElement("div");
   Object.assign(el.style, {
     background: colors.bg,
     border: `1px solid ${colors.border}`,
     color: colors.text,
-    padding: "10px 12px",
-    borderRadius: "10px",
+    padding: "12px 16px",
+    borderRadius: "12px",
     fontSize: "13px",
-    boxShadow: "0 4px 12px rgba(0,0,0,.4)",
+    fontWeight: "500",
+    fontFamily: "var(--font-sans, system-ui)",
+    boxShadow: "var(--shadow-md, 0 4px 12px rgba(15,23,42,.06))",
     pointerEvents: "auto",
     cursor: "pointer",
     transform: "translateX(120%)",