0bf26f8eb5
- 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>
157 lines
5.5 KiB
CSS
157 lines
5.5 KiB
CSS
/**
|
|
* Tema global Botino — light pastel frío (azul/verde).
|
|
*
|
|
* CSS custom properties heredan a través del shadow DOM, así que cualquier
|
|
* componente puede usar `var(--bg)` sin re-declarar nada.
|
|
*/
|
|
|
|
/* ────────────────────────────────────────────────────────────
|
|
* Tipografía: Inter + JetBrains Mono (variable, self-hosted)
|
|
* ──────────────────────────────────────────────────────────── */
|
|
@font-face {
|
|
font-family: "Inter";
|
|
src: url("/styles/fonts/Inter-Variable.woff2") format("woff2");
|
|
font-weight: 100 900;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: "JetBrains Mono";
|
|
src: url("/styles/fonts/JetBrainsMono-Variable.woff2") format("woff2");
|
|
font-weight: 100 900;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
/* ────────────────────────────────────────────────────────────
|
|
* Tokens de diseño
|
|
* ──────────────────────────────────────────────────────────── */
|
|
:root {
|
|
/* Surfaces */
|
|
--bg: #f7fafc; /* casi blanco con tinte azul muy sutil */
|
|
--panel: #ffffff; /* tarjetas / paneles principales */
|
|
--panel-2: #f1f5f9; /* slate-100 */
|
|
--panel-3: #e2e8f0; /* slate-200 */
|
|
|
|
/* Borders */
|
|
--border: #e2e8f0; /* slate-200 */
|
|
--border-hi: #cbd5e1; /* slate-300 */
|
|
--border-active:#0ea5e9; /* sky-500 */
|
|
|
|
/* Text */
|
|
--text: #0f172a; /* slate-900 */
|
|
--text-dim: #475569; /* slate-600 */
|
|
--text-muted: #64748b; /* slate-500 */
|
|
--text-on-acc: #ffffff;
|
|
--muted: var(--text-muted);
|
|
|
|
/* Accents — azul/verde fríos como protagonistas */
|
|
--accent: #0ea5e9; /* sky-500 */
|
|
--accent-hover: #0284c7; /* sky-600 */
|
|
--accent-soft: #e0f2fe; /* sky-100 */
|
|
--ok: #10b981; /* emerald-500 */
|
|
--ok-soft: #d1fae5; /* emerald-100 */
|
|
--warn: #f59e0b; /* amber-500 */
|
|
--warn-soft: #fef3c7;
|
|
--err: #ef4444; /* red-500 */
|
|
--err-soft: #fee2e2;
|
|
|
|
/* Bubbles — light pastel */
|
|
--user-bubble: #d1fae5; /* emerald-100 (cliente) */
|
|
--user-border: #6ee7b7; /* emerald-300 */
|
|
--user-text: #064e3b; /* emerald-900 */
|
|
--user-name: #047857; /* emerald-700 */
|
|
--user-meta: #059669; /* emerald-600 */
|
|
|
|
--bot-bubble: #dbeafe; /* blue-100 (bot) */
|
|
--bot-border: #93c5fd; /* blue-300 */
|
|
--bot-text: #1e3a8a; /* blue-900 */
|
|
--bot-name: #1d4ed8; /* blue-700 */
|
|
--bot-meta: #2563eb; /* blue-600 */
|
|
|
|
--err-bubble: #fee2e2;
|
|
--err-border: #fca5a5;
|
|
--err-text: #7f1d1d;
|
|
--err-name: #b91c1c;
|
|
--err-meta: #dc2626;
|
|
|
|
/* Charts — paleta pastel coordinada (~400 saturación) */
|
|
--chart-blue: #38bdf8; /* sky-400 */
|
|
--chart-green: #34d399; /* emerald-400 */
|
|
--chart-purple: #a78bfa; /* violet-400 */
|
|
--chart-orange: #fb923c; /* orange-400 */
|
|
--chart-pink: #f472b6; /* pink-400 */
|
|
--chart-gray: #94a3b8; /* slate-400 */
|
|
--chart-blue-soft: rgba(56, 189, 248, 0.20);
|
|
--chart-green-soft: rgba(52, 211, 153, 0.20);
|
|
|
|
/* Spacing scale */
|
|
--space-1: 4px;
|
|
--space-2: 8px;
|
|
--space-3: 12px;
|
|
--space-4: 16px;
|
|
--space-5: 20px;
|
|
--space-6: 24px;
|
|
--space-8: 32px;
|
|
|
|
/* Radii */
|
|
--r-sm: 8px;
|
|
--r-md: 10px;
|
|
--r-lg: 12px;
|
|
--r-xl: 16px;
|
|
|
|
/* Shadows */
|
|
--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
|
|
--shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06);
|
|
--shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.10);
|
|
--shadow-bubble: 0 1px 2px rgba(15, 23, 42, 0.04);
|
|
|
|
/* Type scale */
|
|
--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
|
--font-mono: "JetBrains Mono", ui-monospace, "Fira Mono", monospace;
|
|
--fs-xs: 11px;
|
|
--fs-sm: 12px;
|
|
--fs-base: 14px;
|
|
--fs-md: 15px;
|
|
--fs-lg: 18px;
|
|
--fs-xl: 24px;
|
|
--fw-regular: 400;
|
|
--fw-medium: 500;
|
|
--fw-semibold: 600;
|
|
--fw-bold: 700;
|
|
--lh-base: 1.5;
|
|
--lh-tight: 1.3;
|
|
|
|
/* Focus ring (accesibilidad) */
|
|
--focus-ring: 0 0 0 3px var(--accent-soft);
|
|
}
|
|
|
|
/* ────────────────────────────────────────────────────────────
|
|
* Reset / defaults
|
|
* ──────────────────────────────────────────────────────────── */
|
|
html, body {
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
margin: 0;
|
|
font-family: var(--font-sans);
|
|
font-size: var(--fs-base);
|
|
line-height: var(--lh-base);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
/* Scrollbars finos / pastel */
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--border-hi) transparent;
|
|
}
|
|
*::-webkit-scrollbar { width: 8px; height: 8px; }
|
|
*::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 4px; }
|
|
*::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
|
|
*::-webkit-scrollbar-track { background: transparent; }
|
|
|
|
/* Selection con tinte pastel */
|
|
::selection { background: var(--accent-soft); color: var(--text); }
|