diff --git a/public/components/aliases-crud.js b/public/components/aliases-crud.js index 288c423..19462fe 100644 --- a/public/components/aliases-crud.js +++ b/public/components/aliases-crud.js @@ -20,45 +20,45 @@ class AliasesCrud extends HTMLElement { :host { display:block; height:100%; padding:16px; overflow:hidden; } * { box-sizing:border-box; font-family:system-ui,Segoe UI,Roboto,Arial; } .container { display:grid; grid-template-columns:1fr 1fr; gap:16px; height:100%; } - .panel { background:#121823; border:1px solid #1e2a3a; border-radius:10px; padding:16px; overflow:hidden; display:flex; flex-direction:column; } - .panel-title { font-size:14px; font-weight:700; color:#8aa0b5; text-transform:uppercase; letter-spacing:.4px; margin-bottom:12px; } + .panel { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:16px; overflow:hidden; display:flex; flex-direction:column; } + .panel-title { font-size:14px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.4px; margin-bottom:12px; } .toolbar { display:flex; gap:8px; margin-bottom:12px; } - input, select, textarea { background:#0f1520; color:#e7eef7; border:1px solid #253245; border-radius:8px; padding:8px 12px; font-size:13px; width:100%; } - input:focus, select:focus, textarea:focus { outline:none; border-color:#1f6feb; } - button { cursor:pointer; background:#1f6feb; color:#fff; border:none; border-radius:8px; padding:8px 16px; font-size:13px; } - button:hover { background:#1a5fd0; } + input, select, textarea { background:var(--panel-2); color:var(--text); border:1px solid var(--border-hi); border-radius:8px; padding:8px 12px; font-size:13px; width:100%; } + input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); } + button { cursor:pointer; background:var(--accent); color:#fff; border:none; border-radius:8px; padding:8px 16px; font-size:13px; } + button:hover { background:var(--accent-hover); } button:disabled { opacity:.5; cursor:not-allowed; } - button.secondary { background:#253245; } - button.secondary:hover { background:#2d3e52; } - button.danger { background:#e74c3c; } - button.danger:hover { background:#c0392b; } + button.secondary { background:var(--border-hi); } + button.secondary:hover { background:var(--border-hi); } + button.danger { background:var(--err); } + button.danger:hover { background:var(--err); } button.small { padding:4px 8px; font-size:11px; } .list { flex:1; overflow-y:auto; } - .item { background:#0f1520; border:1px solid #253245; border-radius:8px; padding:12px; margin-bottom:8px; cursor:pointer; transition:all .15s; } - .item:hover { border-color:#1f6feb; } - .item.active { border-color:#1f6feb; background:#111b2a; } - .item-alias { font-weight:600; color:#e7eef7; margin-bottom:4px; font-size:15px; } - .item-products { font-size:12px; color:#8aa0b5; } - .item-boost { color:#2ecc71; font-size:11px; } + .item { background:var(--panel-2); border:1px solid var(--border-hi); border-radius:8px; padding:12px; margin-bottom:8px; cursor:pointer; transition:all .15s; } + .item:hover { border-color:var(--accent); } + .item.active { border-color:var(--accent); background:var(--accent-soft); } + .item-alias { font-weight:600; color:var(--text); margin-bottom:4px; font-size:15px; } + .item-products { font-size:12px; color:var(--text-muted); } + .item-boost { color:var(--ok); font-size:11px; } .form { flex:1; overflow-y:auto; } - .form-empty { color:#8aa0b5; text-align:center; padding:40px; } + .form-empty { color:var(--text-muted); text-align:center; padding:40px; } .field { margin-bottom:16px; } - .field label { display:block; font-size:12px; color:#8aa0b5; margin-bottom:4px; text-transform:uppercase; letter-spacing:.4px; } - .field-hint { font-size:11px; color:#8aa0b5; margin-top:4px; } + .field label { display:block; font-size:12px; color:var(--text-muted); margin-bottom:4px; text-transform:uppercase; letter-spacing:.4px; } + .field-hint { font-size:11px; color:var(--text-muted); margin-top:4px; } .actions { display:flex; gap:8px; margin-top:16px; } - .loading { text-align:center; padding:40px; color:#8aa0b5; } + .loading { text-align:center; padding:40px; color:var(--text-muted); } /* Product mappings table */ .mappings-table { width:100%; border-collapse:collapse; margin-top:8px; } - .mappings-table th { text-align:left; font-size:11px; color:#8aa0b5; padding:8px 4px; border-bottom:1px solid #253245; } - .mappings-table td { padding:6px 4px; border-bottom:1px solid #1e2a3a; vertical-align:middle; } + .mappings-table th { text-align:left; font-size:11px; color:var(--text-muted); padding:8px 4px; border-bottom:1px solid var(--border-hi); } + .mappings-table td { padding:6px 4px; border-bottom:1px solid var(--border); vertical-align:middle; } .mappings-table input[type="number"] { width:70px; padding:6px 8px; font-size:12px; } - .mappings-table .product-name { font-size:13px; color:#e7eef7; } - .mappings-table .btn-remove { background:#e74c3c; padding:4px 8px; font-size:11px; } + .mappings-table .product-name { font-size:13px; color:var(--text); } + .mappings-table .btn-remove { background:var(--err); padding:4px 8px; font-size:11px; } .add-mapping-row { display:flex; gap:8px; margin-top:12px; align-items:flex-end; } .add-mapping-row .field { margin-bottom:0; } @@ -67,19 +67,19 @@ class AliasesCrud extends HTMLElement { .product-selector { position:relative; } .product-dropdown { position:absolute; top:100%; left:0; right:0; z-index:100; - background:#0f1520; border:1px solid #253245; border-radius:8px; + background:var(--panel-2); border:1px solid var(--border-hi); border-radius:8px; max-height:200px; overflow-y:auto; display:none; } .product-dropdown.open { display:block; } .product-option { - padding:8px 12px; cursor:pointer; font-size:13px; color:#e7eef7; + padding:8px 12px; cursor:pointer; font-size:13px; color:var(--text); display:flex; justify-content:space-between; align-items:center; } - .product-option:hover { background:#1a2535; } - .product-option .price { font-size:11px; color:#8aa0b5; } + .product-option:hover { background:var(--panel-2); } + .product-option .price { font-size:11px; color:var(--text-muted); } - .empty-hint { color:#8aa0b5; font-size:12px; font-style:italic; } - .badge { display:inline-block; padding:2px 6px; border-radius:999px; font-size:10px; background:#253245; color:#8aa0b5; margin-left:4px; } + .empty-hint { color:var(--text-muted); font-size:12px; font-style:italic; } + .badge { display:inline-block; padding:2px 6px; border-radius:999px; font-size:10px; background:var(--border-hi); color:var(--text-muted); margin-left:4px; }
diff --git a/public/components/chat-simulator.js b/public/components/chat-simulator.js index c3e5944..76a3487 100644 --- a/public/components/chat-simulator.js +++ b/public/components/chat-simulator.js @@ -11,25 +11,49 @@ class ChatSimulator extends HTMLElement { this._sending = false; this.shadowRoot.innerHTML = `
diff --git a/public/components/conversation-inspector.js b/public/components/conversation-inspector.js index 1f4ac72..3f0752a 100644 --- a/public/components/conversation-inspector.js +++ b/public/components/conversation-inspector.js @@ -19,31 +19,63 @@ class ConversationInspector extends HTMLElement { this.shadowRoot.innerHTML = `
diff --git a/public/components/conversation-list.js b/public/components/conversation-list.js index 8879b1a..d8acb83 100644 --- a/public/components/conversation-list.js +++ b/public/components/conversation-list.js @@ -14,27 +14,68 @@ class ConversationList extends HTMLElement { this.shadowRoot.innerHTML = `
diff --git a/public/components/conversations-crud.js b/public/components/conversations-crud.js index 6877f4a..65d5413 100644 --- a/public/components/conversations-crud.js +++ b/public/components/conversations-crud.js @@ -18,40 +18,40 @@ class ConversationsCrud extends HTMLElement { :host { display:block; height:100%; padding:16px; overflow:hidden; } * { box-sizing:border-box; font-family:system-ui,Segoe UI,Roboto,Arial; } .container { display:grid; grid-template-columns:1fr 1fr; gap:16px; height:100%; } - .panel { background:#121823; border:1px solid #1e2a3a; border-radius:10px; padding:16px; overflow:hidden; display:flex; flex-direction:column; } - .panel-title { font-size:14px; font-weight:700; color:#8aa0b5; text-transform:uppercase; letter-spacing:.4px; margin-bottom:12px; } + .panel { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:16px; overflow:hidden; display:flex; flex-direction:column; } + .panel-title { font-size:14px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.4px; margin-bottom:12px; } .toolbar { display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; } - input, select { background:#0f1520; color:#e7eef7; border:1px solid #253245; border-radius:8px; padding:8px 12px; font-size:13px; } - input:focus, select:focus { outline:none; border-color:#1f6feb; } - button { cursor:pointer; background:#1f6feb; color:#fff; border:none; border-radius:8px; padding:8px 16px; font-size:13px; } - button:hover { background:#1a5fd0; } + input, select { background:var(--panel-2); color:var(--text); border:1px solid var(--border-hi); border-radius:8px; padding:8px 12px; font-size:13px; } + input:focus, select:focus { outline:none; border-color:var(--accent); } + button { cursor:pointer; background:var(--accent); color:#fff; border:none; border-radius:8px; padding:8px 16px; font-size:13px; } + button:hover { background:var(--accent-hover); } button:disabled { opacity:.5; cursor:not-allowed; } - button.secondary { background:#253245; } - button.secondary:hover { background:#2d3e52; } - button.danger { background:#e74c3c; } - button.danger:hover { background:#c0392b; } + button.secondary { background:var(--border-hi); } + button.secondary:hover { background:var(--border-hi); } + button.danger { background:var(--err); } + button.danger:hover { background:var(--err); } .list { flex:1; overflow-y:auto; } - .item { background:#0f1520; border:1px solid #253245; border-radius:8px; padding:12px; margin-bottom:8px; cursor:pointer; transition:all .15s; } - .item:hover { border-color:#1f6feb; } - .item.active { border-color:#1f6feb; background:#111b2a; } + .item { background:var(--panel-2); border:1px solid var(--border-hi); border-radius:8px; padding:12px; margin-bottom:8px; cursor:pointer; transition:all .15s; } + .item:hover { border-color:var(--accent); } + .item.active { border-color:var(--accent); background:var(--accent-soft); } .item-header { display:flex; align-items:center; gap:8px; margin-bottom:4px; } - .item-name { font-weight:600; color:#e7eef7; flex:1; } - .item-meta { font-size:12px; color:#8aa0b5; } + .item-name { font-weight:600; color:var(--text); flex:1; } + .item-meta { font-size:12px; color:var(--text-muted); } .dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; } - .ok { background:#2ecc71; } .warn { background:#f1c40f; } .err { background:#e74c3c; } + .ok { background:var(--ok); } .warn { background:var(--warn); } .err { background:var(--err); } .chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; } - .chip { display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px; background:#253245; color:#8aa0b5; } + .chip { display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px; background:var(--border-hi); color:var(--text-muted); } .detail { flex:1; overflow-y:auto; } - .detail-empty { color:#8aa0b5; text-align:center; padding:40px; } + .detail-empty { color:var(--text-muted); text-align:center; padding:40px; } .field { margin-bottom:16px; } - .field label { display:block; font-size:12px; color:#8aa0b5; margin-bottom:4px; text-transform:uppercase; letter-spacing:.4px; } - .field-value { background:#0f1520; border:1px solid #253245; border-radius:8px; padding:10px 12px; color:#e7eef7; font-size:13px; } + .field label { display:block; font-size:12px; color:var(--text-muted); margin-bottom:4px; text-transform:uppercase; letter-spacing:.4px; } + .field-value { background:var(--panel-2); border:1px solid var(--border-hi); border-radius:8px; padding:10px 12px; color:var(--text); font-size:13px; } .actions { display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; } - .loading { text-align:center; padding:40px; color:#8aa0b5; } + .loading { text-align:center; padding:40px; color:var(--text-muted); }
diff --git a/public/components/debug-panel.js b/public/components/debug-panel.js index 5f828ea..98a2900 100644 --- a/public/components/debug-panel.js +++ b/public/components/debug-panel.js @@ -9,12 +9,12 @@ class DebugPanel extends HTMLElement { this.shadowRoot.innerHTML = `
diff --git a/public/components/home-dashboard.js b/public/components/home-dashboard.js index c29ab58..0ccfbc6 100644 --- a/public/components/home-dashboard.js +++ b/public/components/home-dashboard.js @@ -10,6 +10,20 @@ function formatNumber(value) { return new Intl.NumberFormat("es-AR", { maximumFractionDigits: 1 }).format(value); } +/** Lee una CSS custom property del :root. Fallback al hex provisto. */ +function cssVar(name, fallback = "") { + const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim(); + return v || fallback; +} + +/** rgba con alpha desde un hex (#RRGGBB) o sky/etc — para fills de charts. */ +function withAlpha(hex, alpha) { + const m = /^#?([0-9a-f]{6})$/i.exec(hex || ""); + if (!m) return hex; + const n = parseInt(m[1], 16); + return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${alpha})`; +} + class HomeDashboard extends HTMLElement { constructor() { super(); @@ -20,109 +34,86 @@ class HomeDashboard extends HTMLElement { this.shadowRoot.innerHTML = `
@@ -236,7 +227,7 @@ class HomeDashboard extends HTMLElement { const kpiRow = this.shadowRoot.querySelector(".kpi-row"); kpiRow.innerHTML = `
-
${formatCurrency(totals.total_revenue)}
+
${formatCurrency(totals.total_revenue)}
Total Facturado
@@ -244,11 +235,11 @@ class HomeDashboard extends HTMLElement {
Pedidos
-
${formatCurrency(totals.by_source?.whatsapp)}
+
${formatCurrency(totals.by_source?.whatsapp)}
WhatsApp
-
${formatCurrency(totals.by_source?.web)}
+
${formatCurrency(totals.by_source?.web)}
Web
`; @@ -273,8 +264,8 @@ class HomeDashboard extends HTMLElement { datasets: [{ label: "Ventas", data: totals, - backgroundColor: "rgba(59, 130, 246, 0.8)", - borderColor: "#3b82f6", + backgroundColor: withAlpha(cssVar("--chart-blue"), 0.7), + borderColor: cssVar("--chart-blue"), borderWidth: 1, }], }, @@ -287,11 +278,11 @@ class HomeDashboard extends HTMLElement { scales: { y: { beginAtZero: true, - ticks: { color: "#8aa0b5" }, - grid: { color: "#1e2a3a" }, + ticks: { color: cssVar("--text-muted") }, + grid: { color: cssVar("--border") }, }, x: { - ticks: { color: "#8aa0b5" }, + ticks: { color: cssVar("--text-muted") }, grid: { display: false }, }, }, @@ -320,12 +311,12 @@ class HomeDashboard extends HTMLElement { { label: "WhatsApp", data: waData, - backgroundColor: "#25D366", + backgroundColor: cssVar("--chart-green"), }, { label: "Web", data: webData, - backgroundColor: "#3b82f6", + backgroundColor: cssVar("--chart-blue"), }, ], }, @@ -335,19 +326,19 @@ class HomeDashboard extends HTMLElement { plugins: { legend: { position: "top", - labels: { color: "#8aa0b5" }, + labels: { color: cssVar("--text-muted") }, }, }, scales: { y: { stacked: true, beginAtZero: true, - ticks: { color: "#8aa0b5" }, - grid: { color: "#1e2a3a" }, + ticks: { color: cssVar("--text-muted") }, + grid: { color: cssVar("--border") }, }, x: { stacked: true, - ticks: { color: "#8aa0b5" }, + ticks: { color: cssVar("--text-muted") }, grid: { display: false }, }, }, @@ -371,16 +362,16 @@ class HomeDashboard extends HTMLElement { { label: String(yoy.current_year || "Actual"), data: yoy.current_year_data || [], - borderColor: "#3b82f6", - backgroundColor: "rgba(59, 130, 246, 0.1)", + borderColor: cssVar("--chart-blue"), + backgroundColor: withAlpha(cssVar("--chart-blue"), 0.15), fill: true, tension: 0.3, }, { label: String(yoy.last_year || "Anterior"), data: yoy.last_year_data || [], - borderColor: "#9CA3AF", - backgroundColor: "rgba(156, 163, 175, 0.1)", + borderColor: cssVar("--chart-gray"), + backgroundColor: withAlpha(cssVar("--chart-gray"), 0.15), fill: true, tension: 0.3, }, @@ -392,17 +383,17 @@ class HomeDashboard extends HTMLElement { plugins: { legend: { position: "top", - labels: { color: "#8aa0b5" }, + labels: { color: cssVar("--text-muted") }, }, }, scales: { y: { beginAtZero: true, - ticks: { color: "#8aa0b5" }, - grid: { color: "#1e2a3a" }, + ticks: { color: cssVar("--text-muted") }, + grid: { color: cssVar("--border") }, }, x: { - ticks: { color: "#8aa0b5" }, + ticks: { color: cssVar("--text-muted") }, grid: { display: false }, }, }, @@ -423,7 +414,7 @@ class HomeDashboard extends HTMLElement { labels: ["WhatsApp", "Web"], datasets: [{ data: [totals.by_source?.whatsapp || 0, totals.by_source?.web || 0], - backgroundColor: ["#25D366", "#3b82f6"], + backgroundColor: [cssVar("--chart-green"), cssVar("--chart-blue")], }], }, options: this.getDonutOptions(), @@ -440,7 +431,7 @@ class HomeDashboard extends HTMLElement { labels: ["Delivery", "Retiro"], datasets: [{ data: [totals.by_shipping?.delivery || 0, totals.by_shipping?.pickup || 0], - backgroundColor: ["#8B5CF6", "#F59E0B"], + backgroundColor: [cssVar("--chart-purple"), cssVar("--chart-orange")], }], }, options: this.getDonutOptions(), @@ -456,7 +447,7 @@ class HomeDashboard extends HTMLElement { plugins: { legend: { position: "bottom", - labels: { color: "#8aa0b5" }, + labels: { color: cssVar("--text-muted") }, }, }, }; @@ -479,8 +470,8 @@ class HomeDashboard extends HTMLElement { datasets: [{ label: "Facturación", data, - backgroundColor: "rgba(59, 130, 246, 0.8)", - borderColor: "#3b82f6", + backgroundColor: withAlpha(cssVar("--chart-blue"), 0.7), + borderColor: cssVar("--chart-blue"), borderWidth: 1, }], }, @@ -494,11 +485,11 @@ class HomeDashboard extends HTMLElement { scales: { x: { beginAtZero: true, - ticks: { color: "#8aa0b5" }, - grid: { color: "#1e2a3a" }, + ticks: { color: cssVar("--text-muted") }, + grid: { color: cssVar("--border") }, }, y: { - ticks: { color: "#8aa0b5" }, + ticks: { color: cssVar("--text-muted") }, grid: { display: false }, }, }, @@ -523,8 +514,8 @@ class HomeDashboard extends HTMLElement { datasets: [{ label: "Kg", data, - backgroundColor: "rgba(139, 92, 246, 0.8)", - borderColor: "#8B5CF6", + backgroundColor: withAlpha(cssVar("--chart-purple"), 0.7), + borderColor: cssVar("--chart-purple"), borderWidth: 1, }], }, @@ -538,11 +529,11 @@ class HomeDashboard extends HTMLElement { scales: { x: { beginAtZero: true, - ticks: { color: "#8aa0b5" }, - grid: { color: "#1e2a3a" }, + ticks: { color: cssVar("--text-muted") }, + grid: { color: cssVar("--border") }, }, y: { - ticks: { color: "#8aa0b5", font: { size: 10 } }, + ticks: { color: cssVar("--text-muted"), font: { size: 10 } }, grid: { display: false }, }, }, @@ -567,8 +558,8 @@ class HomeDashboard extends HTMLElement { datasets: [{ label: "Unidades", data, - backgroundColor: "rgba(245, 158, 11, 0.8)", - borderColor: "#F59E0B", + backgroundColor: withAlpha(cssVar("--chart-orange"), 0.7), + borderColor: cssVar("--chart-orange"), borderWidth: 1, }], }, @@ -582,11 +573,11 @@ class HomeDashboard extends HTMLElement { scales: { x: { beginAtZero: true, - ticks: { color: "#8aa0b5" }, - grid: { color: "#1e2a3a" }, + ticks: { color: cssVar("--text-muted") }, + grid: { color: cssVar("--border") }, }, y: { - ticks: { color: "#8aa0b5", font: { size: 10 } }, + ticks: { color: cssVar("--text-muted"), font: { size: 10 } }, grid: { display: false }, }, }, diff --git a/public/components/ops-shell.js b/public/components/ops-shell.js index fbc9bc9..63a6c8f 100644 --- a/public/components/ops-shell.js +++ b/public/components/ops-shell.js @@ -12,44 +12,74 @@ class OpsShell extends HTMLElement { this.shadowRoot.innerHTML = ` diff --git a/public/components/orders-crud.js b/public/components/orders-crud.js index 89c18f7..415b9f7 100644 --- a/public/components/orders-crud.js +++ b/public/components/orders-crud.js @@ -23,15 +23,15 @@ function statusLabel(status) { function statusColor(status) { const map = { - pending: "#f59e0b", - processing: "#3b82f6", - "on-hold": "#8b5cf6", - completed: "#22c55e", - cancelled: "#6b7280", - refunded: "#ec4899", - failed: "#ef4444", + pending: "var(--warn)", + processing: "var(--chart-blue)", + "on-hold": "var(--chart-purple)", + completed: "var(--ok)", + cancelled: "var(--text-muted)", + refunded: "var(--chart-pink)", + failed: "var(--err)", }; - return map[status] || "#8aa0b5"; + return map[status] || "var(--text-muted)"; } class OrdersCrud extends HTMLElement { @@ -51,15 +51,15 @@ class OrdersCrud extends HTMLElement { this.shadowRoot.innerHTML = `
@@ -272,7 +272,7 @@ class ProductsCrud extends HTMLElement { // Mostrar unidad actual si está definida const unit = item.sell_unit || item.payload?._sell_unit_override; - const unitBadge = unit ? `${unit === 'unit' ? 'Unidad' : 'Kg'}` : ''; + const unitBadge = unit ? `${unit === 'unit' ? 'Unidad' : 'Kg'}` : ''; el.innerHTML = `
${item.name || "Sin nombre"} ${stockBadge} ${unitBadge}
@@ -328,7 +328,7 @@ class ProductsCrud extends HTMLElement { } catch (err) { console.error("[products-crud] Error in renderDetail:", err); const detail = this.shadowRoot.getElementById("detail"); - detail.innerHTML = `
Error: ${err.message}
`; + detail.innerHTML = `
Error: ${err.message}
`; } // Scroll detail panel to top @@ -449,12 +449,12 @@ class ProductsCrud extends HTMLElement {
-
-
+
Define si este producto se vende por peso o por unidad
@@ -464,16 +464,16 @@ class ProductsCrud extends HTMLElement { ${categoriesArray.length > 0 ? categoriesArray.map(cat => ` + style="display:inline-flex;align-items:center;gap:4px;background:var(--accent-soft);color:var(--accent-hover);padding:4px 8px;border-radius:6px;font-size:12px;"> ${this.escapeHtml(cat)} × `).join("") - : 'Sin categorías' + : 'Sin categorías' }
- ${this.getAllCategories().filter(c => !categoriesArray.includes(c)).map(cat => `` @@ -489,7 +489,7 @@ class ProductsCrud extends HTMLElement {
- +
@@ -533,7 +533,7 @@ class ProductsCrud extends HTMLElement { const tag = document.createElement("span"); tag.className = "category-tag"; tag.dataset.category = categoryName; - tag.style = "display:inline-flex;align-items:center;gap:4px;background:#1a3a5c;color:#7eb8e7;padding:4px 8px;border-radius:6px;font-size:12px;"; + tag.style = "display:inline-flex;align-items:center;gap:4px;background:var(--accent-soft);color:var(--accent-hover);padding:4px 8px;border-radius:6px;font-size:12px;"; tag.innerHTML = `${this.escapeHtml(categoryName)}×`; // Bind remove @@ -545,7 +545,7 @@ class ProductsCrud extends HTMLElement { }; // Remover el mensaje "Sin categorías" si existe - const emptyMsg = container.querySelector('span[style*="color:#8aa0b5"]'); + const emptyMsg = container.querySelector('span[style*="color:var(--text-muted)"]'); if (emptyMsg) emptyMsg.remove(); container.appendChild(tag); @@ -652,8 +652,8 @@ class ProductsCrud extends HTMLElement { detail.innerHTML = `
-
${count} productos
-
${names}${moreText}
+
${count} productos
+
${names}${moreText}
${inStockCount} en stock ${count - inStockCount} sin stock @@ -662,26 +662,26 @@ class ProductsCrud extends HTMLElement {
-
-
+
Se aplicará a todos los productos seleccionados
- ${this.getAllCategories().map(cat => ``).join("")}
-
+
Se agregará esta categoría a todos los productos seleccionados
diff --git a/public/components/quantities-crud.js b/public/components/quantities-crud.js index 7502b00..03fcd9f 100644 --- a/public/components/quantities-crud.js +++ b/public/components/quantities-crud.js @@ -28,47 +28,47 @@ class QuantitiesCrud extends HTMLElement { :host { display:block; height:100%; padding:16px; overflow:hidden; } * { box-sizing:border-box; font-family:system-ui,Segoe UI,Roboto,Arial; } .container { display:grid; grid-template-columns:1fr 1fr; gap:16px; height:100%; } - .panel { background:#121823; border:1px solid #1e2a3a; border-radius:10px; padding:16px; overflow:hidden; display:flex; flex-direction:column; } - .panel-title { font-size:14px; font-weight:700; color:#8aa0b5; text-transform:uppercase; letter-spacing:.4px; margin-bottom:12px; } + .panel { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:16px; overflow:hidden; display:flex; flex-direction:column; } + .panel-title { font-size:14px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.4px; margin-bottom:12px; } .toolbar { display:flex; gap:8px; margin-bottom:12px; } - input, select { background:#0f1520; color:#e7eef7; border:1px solid #253245; border-radius:8px; padding:8px 12px; font-size:13px; width:100%; } - input:focus, select:focus { outline:none; border-color:#1f6feb; } - button { cursor:pointer; background:#1f6feb; color:#fff; border:none; border-radius:8px; padding:8px 16px; font-size:13px; } - button:hover { background:#1a5fd0; } + input, select { background:var(--panel-2); color:var(--text); border:1px solid var(--border-hi); border-radius:8px; padding:8px 12px; font-size:13px; width:100%; } + input:focus, select:focus { outline:none; border-color:var(--accent); } + button { cursor:pointer; background:var(--accent); color:#fff; border:none; border-radius:8px; padding:8px 16px; font-size:13px; } + button:hover { background:var(--accent-hover); } button:disabled { opacity:.5; cursor:not-allowed; } - button.secondary { background:#253245; } - button.secondary:hover { background:#2d3e52; } + button.secondary { background:var(--border-hi); } + button.secondary:hover { background:var(--border-hi); } .list { flex:1; overflow-y:auto; } - .item { background:#0f1520; border:1px solid #253245; border-radius:8px; padding:12px; margin-bottom:8px; cursor:pointer; transition:all .15s; display:flex; justify-content:space-between; align-items:center; } - .item:hover { border-color:#1f6feb; } - .item.active { border-color:#1f6feb; background:#111b2a; } - .item-name { font-weight:500; color:#e7eef7; } - .item-price { font-size:12px; color:#8aa0b5; } - .badge { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; border-radius:999px; font-size:11px; font-weight:600; background:#1f6feb; color:#fff; } - .badge.empty { background:#253245; color:#8aa0b5; } + .item { background:var(--panel-2); border:1px solid var(--border-hi); border-radius:8px; padding:12px; margin-bottom:8px; cursor:pointer; transition:all .15s; display:flex; justify-content:space-between; align-items:center; } + .item:hover { border-color:var(--accent); } + .item.active { border-color:var(--accent); background:var(--accent-soft); } + .item-name { font-weight:500; color:var(--text); } + .item-price { font-size:12px; color:var(--text-muted); } + .badge { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; border-radius:999px; font-size:11px; font-weight:600; background:var(--accent); color:#fff; } + .badge.empty { background:var(--border-hi); color:var(--text-muted); } .form { flex:1; overflow-y:auto; } - .form-empty { color:#8aa0b5; text-align:center; padding:40px; } + .form-empty { color:var(--text-muted); text-align:center; padding:40px; } .product-header { margin-bottom:16px; } - .product-name { font-size:18px; font-weight:600; color:#e7eef7; margin-bottom:4px; } - .product-price { font-size:14px; color:#8aa0b5; } + .product-name { font-size:18px; font-weight:600; color:var(--text); margin-bottom:4px; } + .product-price { font-size:14px; color:var(--text-muted); } .qty-grid { width:100%; border-collapse:collapse; } - .qty-grid th { text-align:left; font-size:12px; color:#8aa0b5; padding:10px 8px; border-bottom:1px solid #253245; } - .qty-grid td { padding:8px; border-bottom:1px solid #1e2a3a; } - .qty-grid .event-label { font-size:13px; color:#e7eef7; font-weight:500; } + .qty-grid th { text-align:left; font-size:12px; color:var(--text-muted); padding:10px 8px; border-bottom:1px solid var(--border-hi); } + .qty-grid td { padding:8px; border-bottom:1px solid var(--border); } + .qty-grid .event-label { font-size:13px; color:var(--text); font-weight:500; } .qty-grid input { width:70px; padding:6px 8px; font-size:12px; text-align:center; } .qty-grid select { width:70px; padding:6px 4px; font-size:11px; } .cell-group { display:flex; gap:4px; align-items:center; } .actions { display:flex; gap:8px; margin-top:16px; } - .loading { text-align:center; padding:40px; color:#8aa0b5; } + .loading { text-align:center; padding:40px; color:var(--text-muted); } - .status { font-size:12px; color:#2ecc71; margin-left:auto; } - .status.error { color:#e74c3c; } + .status { font-size:12px; color:var(--ok); margin-left:auto; } + .status.error { color:var(--err); }
diff --git a/public/components/recommendations-crud.js b/public/components/recommendations-crud.js index 157a18a..684f567 100644 --- a/public/components/recommendations-crud.js +++ b/public/components/recommendations-crud.js @@ -40,45 +40,45 @@ class RecommendationsCrud extends HTMLElement { :host { display:block; height:100%; padding:16px; overflow:hidden; } * { box-sizing:border-box; font-family:system-ui,Segoe UI,Roboto,Arial; } .container { display:grid; grid-template-columns:1fr 1fr; gap:16px; height:100%; } - .panel { background:#121823; border:1px solid #1e2a3a; border-radius:10px; padding:16px; overflow:hidden; display:flex; flex-direction:column; } - .panel-title { font-size:14px; font-weight:700; color:#8aa0b5; text-transform:uppercase; letter-spacing:.4px; margin-bottom:12px; } + .panel { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:16px; overflow:hidden; display:flex; flex-direction:column; } + .panel-title { font-size:14px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.4px; margin-bottom:12px; } .toolbar { display:flex; gap:8px; margin-bottom:12px; } - input, select, textarea { background:#0f1520; color:#e7eef7; border:1px solid #253245; border-radius:8px; padding:8px 12px; font-size:13px; width:100%; } - input:focus, select:focus, textarea:focus { outline:none; border-color:#1f6feb; } + input, select, textarea { background:var(--panel-2); color:var(--text); border:1px solid var(--border-hi); border-radius:8px; padding:8px 12px; font-size:13px; width:100%; } + input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); } textarea { min-height:60px; resize:vertical; font-size:13px; } - button { cursor:pointer; background:#1f6feb; color:#fff; border:none; border-radius:8px; padding:8px 16px; font-size:13px; } - button:hover { background:#1a5fd0; } + button { cursor:pointer; background:var(--accent); color:#fff; border:none; border-radius:8px; padding:8px 16px; font-size:13px; } + button:hover { background:var(--accent-hover); } button:disabled { opacity:.5; cursor:not-allowed; } - button.secondary { background:#253245; } - button.secondary:hover { background:#2d3e52; } - button.danger { background:#e74c3c; } - button.danger:hover { background:#c0392b; } + button.secondary { background:var(--border-hi); } + button.secondary:hover { background:var(--border-hi); } + button.danger { background:var(--err); } + button.danger:hover { background:var(--err); } button.small { padding:4px 8px; font-size:11px; } .list { flex:1; overflow-y:auto; } - .item { background:#0f1520; border:1px solid #253245; border-radius:8px; padding:12px; margin-bottom:8px; cursor:pointer; transition:all .15s; } - .item:hover { border-color:#1f6feb; } - .item.active { border-color:#1f6feb; background:#111b2a; } - .item-key { font-weight:600; color:#e7eef7; margin-bottom:4px; display:flex; align-items:center; gap:8px; } - .item-trigger { font-size:12px; color:#8aa0b5; margin-bottom:4px; } - .item-queries { font-size:11px; color:#2ecc71; } + .item { background:var(--panel-2); border:1px solid var(--border-hi); border-radius:8px; padding:12px; margin-bottom:8px; cursor:pointer; transition:all .15s; } + .item:hover { border-color:var(--accent); } + .item.active { border-color:var(--accent); background:var(--accent-soft); } + .item-key { font-weight:600; color:var(--text); margin-bottom:4px; display:flex; align-items:center; gap:8px; } + .item-trigger { font-size:12px; color:var(--text-muted); margin-bottom:4px; } + .item-queries { font-size:11px; color:var(--ok); } .badge { display:inline-block; padding:2px 8px; border-radius:999px; font-size:10px; } - .badge.active { background:#0f2a1a; color:#2ecc71; } - .badge.inactive { background:#241214; color:#e74c3c; } - .badge.priority { background:#253245; color:#8aa0b5; } - .badge.type { background:#1a2a4a; color:#5dade2; } + .badge.active { background:var(--ok-soft); color:var(--ok); } + .badge.inactive { background:var(--err-soft); color:var(--err); } + .badge.priority { background:var(--border-hi); color:var(--text-muted); } + .badge.type { background:var(--accent-soft); color:var(--accent-hover); } .form { flex:1; overflow-y:auto; } - .form-empty { color:#8aa0b5; text-align:center; padding:40px; } + .form-empty { color:var(--text-muted); text-align:center; padding:40px; } .field { margin-bottom:16px; } - .field label { display:block; font-size:12px; color:#8aa0b5; margin-bottom:4px; text-transform:uppercase; letter-spacing:.4px; } - .field-hint { font-size:11px; color:#8aa0b5; margin-top:4px; } + .field label { display:block; font-size:12px; color:var(--text-muted); margin-bottom:4px; text-transform:uppercase; letter-spacing:.4px; } + .field-hint { font-size:11px; color:var(--text-muted); margin-top:4px; } .field-row { display:flex; gap:12px; } .field-row .field { flex:1; } .actions { display:flex; gap:8px; margin-top:16px; } - .loading { text-align:center; padding:40px; color:#8aa0b5; } + .loading { text-align:center; padding:40px; color:var(--text-muted); } .toggle { display:flex; align-items:center; gap:8px; cursor:pointer; } .toggle input { width:auto; } @@ -88,42 +88,42 @@ class RecommendationsCrud extends HTMLElement { .product-search { margin-bottom:8px; } .product-dropdown { position:absolute; top:100%; left:0; right:0; z-index:100; - background:#0f1520; border:1px solid #253245; border-radius:8px; + background:var(--panel-2); border:1px solid var(--border-hi); border-radius:8px; max-height:200px; overflow-y:auto; display:none; } .product-dropdown.open { display:block; } .product-option { - padding:8px 12px; cursor:pointer; font-size:13px; color:#e7eef7; + padding:8px 12px; cursor:pointer; font-size:13px; color:var(--text); display:flex; justify-content:space-between; align-items:center; } - .product-option:hover { background:#1a2535; } - .product-option.selected { background:#1a3a5c; } - .product-option .price { font-size:11px; color:#8aa0b5; } + .product-option:hover { background:var(--panel-2); } + .product-option.selected { background:var(--accent-soft); } + .product-option .price { font-size:11px; color:var(--text-muted); } .selected-products { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; min-height:30px; } .product-chip { display:inline-flex; align-items:center; gap:4px; - background:#253245; color:#e7eef7; padding:4px 8px 4px 12px; + background:var(--border-hi); color:var(--text); padding:4px 8px 4px 12px; border-radius:999px; font-size:12px; } .product-chip .remove { cursor:pointer; width:16px; height:16px; border-radius:50%; - background:#e74c3c; color:#fff; font-size:10px; + background:var(--err); color:#fff; font-size:10px; display:flex; align-items:center; justify-content:center; } - .product-chip .remove:hover { background:#c0392b; } + .product-chip .remove:hover { background:var(--err); } - .empty-hint { color:#8aa0b5; font-size:12px; font-style:italic; } + .empty-hint { color:var(--text-muted); font-size:12px; font-style:italic; } /* Items table styles */ .items-table { width:100%; border-collapse:collapse; margin-top:8px; } - .items-table th { text-align:left; font-size:11px; color:#8aa0b5; padding:8px 4px; border-bottom:1px solid #253245; } - .items-table td { padding:6px 4px; border-bottom:1px solid #1e2a3a; vertical-align:middle; } + .items-table th { text-align:left; font-size:11px; color:var(--text-muted); padding:8px 4px; border-bottom:1px solid var(--border-hi); } + .items-table td { padding:6px 4px; border-bottom:1px solid var(--border); vertical-align:middle; } .items-table input { padding:6px 8px; font-size:12px; } .items-table input[type="number"] { width:70px; } .items-table select { padding:6px 8px; font-size:12px; width:80px; } - .items-table .product-name { font-size:13px; color:#e7eef7; } - .items-table .btn-remove { background:#e74c3c; padding:4px 8px; font-size:11px; } + .items-table .product-name { font-size:13px; color:var(--text); } + .items-table .btn-remove { background:var(--err); padding:4px 8px; font-size:11px; } .add-item-row { display:flex; gap:8px; margin-top:12px; align-items:flex-end; } .add-item-row .field { margin-bottom:0; } @@ -131,12 +131,12 @@ class RecommendationsCrud extends HTMLElement { /* Rule type selector */ .rule-type-selector { display:flex; gap:8px; margin-bottom:16px; } .rule-type-btn { - flex:1; padding:12px; border:2px solid #253245; border-radius:8px; - background:#0f1520; color:#8aa0b5; cursor:pointer; text-align:center; + flex:1; padding:12px; border:2px solid var(--border-hi); border-radius:8px; + background:var(--panel-2); color:var(--text-muted); cursor:pointer; text-align:center; transition:all .15s; } - .rule-type-btn:hover { border-color:#1f6feb; } - .rule-type-btn.active { border-color:#1f6feb; background:#111b2a; color:#e7eef7; } + .rule-type-btn:hover { border-color:var(--accent); } + .rule-type-btn.active { border-color:var(--accent); background:var(--accent-soft); color:var(--text); } .rule-type-btn .type-title { font-weight:600; margin-bottom:4px; } .rule-type-btn .type-desc { font-size:11px; } diff --git a/public/components/run-timeline.js b/public/components/run-timeline.js index ed932d5..22c3eda 100644 --- a/public/components/run-timeline.js +++ b/public/components/run-timeline.js @@ -13,29 +13,68 @@ class RunTimeline extends HTMLElement { this.shadowRoot.innerHTML = `
diff --git a/public/components/settings-crud.js b/public/components/settings-crud.js index 60eef2b..b355632 100644 --- a/public/components/settings-crud.js +++ b/public/components/settings-crud.js @@ -37,47 +37,47 @@ class SettingsCrud extends HTMLElement { :host { display:block; height:100%; padding:16px; overflow:auto; } * { box-sizing:border-box; font-family:system-ui,Segoe UI,Roboto,Arial; } .container { max-width:800px; margin:0 auto; } - .panel { background:#121823; border:1px solid #1e2a3a; border-radius:10px; padding:20px; margin-bottom:16px; } - .panel-title { font-size:16px; font-weight:700; color:#e7eef7; margin-bottom:16px; display:flex; align-items:center; gap:8px; } - .panel-title svg { width:20px; height:20px; fill:#1f6feb; } + .panel { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:20px; margin-bottom:16px; } + .panel-title { font-size:16px; font-weight:700; color:var(--text); margin-bottom:16px; display:flex; align-items:center; gap:8px; } + .panel-title svg { width:20px; height:20px; fill:var(--accent); } .form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; } .form-row.full { grid-template-columns:1fr; } .field { } - .field label { display:block; font-size:12px; color:#8aa0b5; margin-bottom:6px; text-transform:uppercase; letter-spacing:.4px; } - .field-hint { font-size:11px; color:#6c7a89; margin-top:4px; } + .field label { display:block; font-size:12px; color:var(--text-muted); margin-bottom:6px; text-transform:uppercase; letter-spacing:.4px; } + .field-hint { font-size:11px; color:var(--text-muted); margin-top:4px; } input, select, textarea { - background:#0f1520; color:#e7eef7; border:1px solid #253245; + background:var(--panel-2); color:var(--text); border:1px solid var(--border-hi); border-radius:8px; padding:10px 14px; font-size:14px; width:100%; } - input:focus, select:focus, textarea:focus { outline:none; border-color:#1f6feb; } + input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); } input:disabled { opacity:.6; cursor:not-allowed; } button { - cursor:pointer; background:#1f6feb; color:#fff; border:none; + cursor:pointer; background:var(--accent); color:#fff; border:none; border-radius:8px; padding:10px 20px; font-size:14px; font-weight:600; } - button:hover { background:#1a5fd0; } + button:hover { background:var(--accent-hover); } button:disabled { opacity:.5; cursor:not-allowed; } - button.secondary { background:#253245; } - button.secondary:hover { background:#2d3e52; } + button.secondary { background:var(--border-hi); } + button.secondary:hover { background:var(--border-hi); } .toggle-row { display:flex; align-items:center; gap:12px; margin-bottom:16px; } .toggle { position:relative; width:48px; height:26px; - background:#253245; border-radius:13px; cursor:pointer; + background:var(--border-hi); border-radius:13px; cursor:pointer; transition:background .2s; flex-shrink:0; } - .toggle.active { background:#1f6feb; } + .toggle.active { background:var(--accent); } .toggle::after { content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; background:#fff; border-radius:50%; transition:transform .2s; } .toggle.active::after { transform:translateX(22px); } - .toggle-label { font-size:14px; color:#e7eef7; } + .toggle-label { font-size:14px; color:var(--text); } /* Schedule grid */ .schedule-grid { display:flex; flex-direction:column; gap:8px; } @@ -87,17 +87,17 @@ class SettingsCrud extends HTMLElement { gap:12px; align-items:center; padding:8px 12px; - background:#0f1520; + background:var(--panel-2); border-radius:8px; - border:1px solid #1e2a3a; + border:1px solid var(--border); } .schedule-row.disabled { opacity:0.4; } - .day-label { font-size:13px; color:#e7eef7; font-weight:500; } + .day-label { font-size:13px; color:var(--text); font-weight:500; } .day-toggle { - width:32px; height:18px; background:#253245; border-radius:9px; + width:32px; height:18px; background:var(--border-hi); border-radius:9px; cursor:pointer; position:relative; transition:background .2s; } - .day-toggle.active { background:#2ecc71; } + .day-toggle.active { background:var(--ok); } .day-toggle::after { content:''; position:absolute; top:2px; left:2px; width:14px; height:14px; background:#fff; border-radius:50%; @@ -109,30 +109,30 @@ class SettingsCrud extends HTMLElement { width:70px; text-align:center; font-family:monospace; font-size:13px; padding:6px 8px; letter-spacing:1px; } - .hours-inputs span { color:#6c7a89; font-size:12px; } + .hours-inputs span { color:var(--text-muted); font-size:12px; } .hours-inputs.disabled input { opacity:0.4; pointer-events:none; } .actions { display:flex; gap:12px; margin-top:24px; } - .loading { text-align:center; padding:60px; color:#8aa0b5; } + .loading { text-align:center; padding:60px; color:var(--text-muted); } .success-msg { - background:#2ecc7130; border:1px solid #2ecc71; - color:#2ecc71; padding:12px 16px; border-radius:8px; + background:var(--ok)30; border:1px solid var(--ok); + color:var(--ok); padding:12px 16px; border-radius:8px; margin-bottom:16px; font-size:14px; } .error-msg { - background:#e74c3c30; border:1px solid #e74c3c; - color:#e74c3c; padding:12px 16px; border-radius:8px; + background:var(--err)30; border:1px solid var(--err); + color:var(--err); padding:12px 16px; border-radius:8px; margin-bottom:16px; font-size:14px; } - .min-order-field { margin-top:16px; padding-top:16px; border-top:1px solid #1e2a3a; } + .min-order-field { margin-top:16px; padding-top:16px; border-top:1px solid var(--border); } /* Zonas de entrega */ .zones-search { margin-bottom:12px; } .zones-search input { width:100%; padding:10px 14px; - background:#0f1520 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236c7a89'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E") no-repeat 12px center; + background:var(--panel-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236c7a89'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E") no-repeat 12px center; background-size:18px; padding-left:38px; } .zones-list { max-height:400px; overflow-y:auto; display:flex; flex-direction:column; gap:4px; } @@ -142,18 +142,18 @@ class SettingsCrud extends HTMLElement { gap:12px; align-items:start; padding:10px 12px; - background:#0f1520; + background:var(--panel-2); border-radius:8px; - border:1px solid #1e2a3a; + border:1px solid var(--border); transition:border-color .2s; } - .zone-row.active { border-color:#1f6feb; background:#0f1825; } + .zone-row.active { border-color:var(--accent); background:var(--accent-soft); } .zone-row.hidden { display:none; } .zone-toggle { - width:32px; height:18px; background:#253245; border-radius:9px; + width:32px; height:18px; background:var(--border-hi); border-radius:9px; cursor:pointer; position:relative; transition:background .2s; margin-top:2px; } - .zone-toggle.active { background:#2ecc71; } + .zone-toggle.active { background:var(--ok); } .zone-toggle::after { content:''; position:absolute; top:2px; left:2px; width:14px; height:14px; background:#fff; border-radius:50%; @@ -161,28 +161,28 @@ class SettingsCrud extends HTMLElement { } .zone-toggle.active::after { transform:translateX(14px); } .zone-content { display:flex; flex-direction:column; gap:8px; } - .zone-name { font-size:14px; color:#e7eef7; font-weight:500; } + .zone-name { font-size:14px; color:var(--text); font-weight:500; } .zone-config { display:none; gap:16px; flex-wrap:wrap; align-items:center; } .zone-row.active .zone-config { display:flex; } .zone-days { display:flex; gap:4px; } .zone-day { width:28px; height:28px; border-radius:6px; - background:#253245; color:#8aa0b5; + background:var(--border-hi); color:var(--text-muted); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; cursor:pointer; transition:all .15s; } - .zone-day.active { background:#1f6feb; color:#fff; } - .zone-day:hover { background:#2d3e52; } - .zone-day.active:hover { background:#1a5fd0; } + .zone-day.active { background:var(--accent); color:#fff; } + .zone-day:hover { background:var(--border-hi); } + .zone-day.active:hover { background:var(--accent-hover); } .zone-cost { display:flex; align-items:center; gap:6px; } - .zone-cost label { font-size:12px; color:#8aa0b5; } + .zone-cost label { font-size:12px; color:var(--text-muted); } .zone-cost input { width:90px; padding:6px 10px; font-size:13px; text-align:right; } .zones-summary { - margin-top:12px; padding:12px; background:#0f1520; - border-radius:8px; font-size:13px; color:#8aa0b5; + margin-top:12px; padding:12px; background:var(--panel-2); + border-radius:8px; font-size:13px; color:var(--text-muted); } - .zones-summary strong { color:#e7eef7; } + .zones-summary strong { color:var(--text); }
diff --git a/public/components/takeovers-crud.js b/public/components/takeovers-crud.js index 70ab941..87d0527 100644 --- a/public/components/takeovers-crud.js +++ b/public/components/takeovers-crud.js @@ -18,87 +18,87 @@ class TakeoversCrud extends HTMLElement { :host { display:block; height:100%; padding:16px; overflow:hidden; } * { box-sizing:border-box; font-family:system-ui,Segoe UI,Roboto,Arial; } .container { display:grid; grid-template-columns:350px 1fr; gap:16px; height:100%; } - .panel { background:#121823; border:1px solid #1e2a3a; border-radius:10px; padding:16px; overflow:hidden; display:flex; flex-direction:column; } - .panel-title { font-size:14px; font-weight:700; color:#8aa0b5; text-transform:uppercase; letter-spacing:.4px; margin-bottom:12px; display:flex; align-items:center; gap:8px; } - .panel-title .badge { background:#e74c3c; color:#fff; padding:2px 8px; border-radius:10px; font-size:11px; } + .panel { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:16px; overflow:hidden; display:flex; flex-direction:column; } + .panel-title { font-size:14px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.4px; margin-bottom:12px; display:flex; align-items:center; gap:8px; } + .panel-title .badge { background:var(--err); color:#fff; padding:2px 8px; border-radius:10px; font-size:11px; } - input, select, textarea { background:#0f1520; color:#e7eef7; border:1px solid #253245; border-radius:8px; padding:8px 12px; font-size:13px; width:100%; } - input:focus, select:focus, textarea:focus { outline:none; border-color:#1f6feb; } + input, select, textarea { background:var(--panel-2); color:var(--text); border:1px solid var(--border-hi); border-radius:8px; padding:8px 12px; font-size:13px; width:100%; } + input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); } textarea { resize:vertical; min-height:100px; } - button { cursor:pointer; background:#1f6feb; color:#fff; border:none; border-radius:8px; padding:8px 16px; font-size:13px; } - button:hover { background:#1a5fd0; } + button { cursor:pointer; background:var(--accent); color:#fff; border:none; border-radius:8px; padding:8px 16px; font-size:13px; } + button:hover { background:var(--accent-hover); } button:disabled { opacity:.5; cursor:not-allowed; } - button.secondary { background:#253245; } - button.secondary:hover { background:#2d3e52; } - button.danger { background:#e74c3c; } - button.danger:hover { background:#c0392b; } + button.secondary { background:var(--border-hi); } + button.secondary:hover { background:var(--border-hi); } + button.danger { background:var(--err); } + button.danger:hover { background:var(--err); } .list { flex:1; overflow-y:auto; } - .item { background:#0f1520; border:1px solid #253245; border-radius:8px; padding:12px; margin-bottom:8px; cursor:pointer; transition:all .15s; } - .item:hover { border-color:#1f6feb; } - .item.active { border-color:#1f6feb; background:#111b2a; } - .item-query { font-weight:600; color:#f39c12; margin-bottom:4px; font-size:14px; } - .item-reason { font-size:12px; color:#8aa0b5; margin-bottom:4px; } - .item-time { font-size:11px; color:#6c7a89; } - .item-chat { font-size:11px; color:#1f6feb; } + .item { background:var(--panel-2); border:1px solid var(--border-hi); border-radius:8px; padding:12px; margin-bottom:8px; cursor:pointer; transition:all .15s; } + .item:hover { border-color:var(--accent); } + .item.active { border-color:var(--accent); background:var(--accent-soft); } + .item-query { font-weight:600; color:var(--warn); margin-bottom:4px; font-size:14px; } + .item-reason { font-size:12px; color:var(--text-muted); margin-bottom:4px; } + .item-time { font-size:11px; color:var(--text-muted); } + .item-chat { font-size:11px; color:var(--accent); } .form { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:16px; } - .form-empty { color:#8aa0b5; text-align:center; padding:40px; } + .form-empty { color:var(--text-muted); text-align:center; padding:40px; } .field { } - .field label { display:block; font-size:12px; color:#8aa0b5; margin-bottom:4px; text-transform:uppercase; letter-spacing:.4px; } + .field label { display:block; font-size:12px; color:var(--text-muted); margin-bottom:4px; text-transform:uppercase; letter-spacing:.4px; } .actions { display:flex; gap:8px; margin-top:16px; } - .loading { text-align:center; padding:40px; color:#8aa0b5; } + .loading { text-align:center; padding:40px; color:var(--text-muted); } - .conversation-history { background:#0f1520; border:1px solid #253245; border-radius:8px; padding:12px; max-height:200px; overflow-y:auto; } + .conversation-history { background:var(--panel-2); border:1px solid var(--border-hi); border-radius:8px; padding:12px; max-height:200px; overflow-y:auto; } .msg { margin-bottom:8px; padding:8px; border-radius:6px; font-size:12px; } - .msg.user { background:#1a2a3a; border-left:3px solid #1f6feb; } - .msg.assistant { background:#1a2535; border-left:3px solid #2ecc71; } - .msg-role { font-size:10px; color:#8aa0b5; margin-bottom:4px; text-transform:uppercase; } - .msg-content { color:#e7eef7; white-space:pre-wrap; } + .msg.user { background:var(--accent-soft); border-left:3px solid var(--accent); } + .msg.assistant { background:var(--panel-2); border-left:3px solid var(--ok); } + .msg-role { font-size:10px; color:var(--text-muted); margin-bottom:4px; text-transform:uppercase; } + .msg-content { color:var(--text); white-space:pre-wrap; } - .query-highlight { background:#f39c1230; border:1px solid #f39c12; border-radius:8px; padding:12px; margin-bottom:16px; } - .query-highlight label { color:#f39c12; } - .query-highlight .query { font-size:16px; font-weight:600; color:#f39c12; margin-top:4px; } + .query-highlight { background:var(--warn)30; border:1px solid var(--warn); border-radius:8px; padding:12px; margin-bottom:16px; } + .query-highlight label { color:var(--warn); } + .query-highlight .query { font-size:16px; font-weight:600; color:var(--warn); margin-top:4px; } - .alias-section { background:#0f1520; border:1px solid #253245; border-radius:8px; padding:12px; margin-top:12px; } - .alias-section h4 { margin:0 0 12px; font-size:13px; color:#8aa0b5; } + .alias-section { background:var(--panel-2); border:1px solid var(--border-hi); border-radius:8px; padding:12px; margin-top:12px; } + .alias-section h4 { margin:0 0 12px; font-size:13px; color:var(--text-muted); } .checkbox-row { display:flex; align-items:center; gap:8px; margin-bottom:12px; } .checkbox-row input[type="checkbox"] { width:auto; } - .checkbox-row label { font-size:13px; color:#e7eef7; text-transform:none; } + .checkbox-row label { font-size:13px; color:var(--text); text-transform:none; } .product-selector { position:relative; } .product-dropdown { position:absolute; top:100%; left:0; right:0; z-index:100; - background:#0f1520; border:1px solid #253245; border-radius:8px; + background:var(--panel-2); border:1px solid var(--border-hi); border-radius:8px; max-height:200px; overflow-y:auto; display:none; } .product-dropdown.open { display:block; } .product-option { - padding:8px 12px; cursor:pointer; font-size:13px; color:#e7eef7; + padding:8px 12px; cursor:pointer; font-size:13px; color:var(--text); display:flex; justify-content:space-between; align-items:center; } - .product-option:hover { background:#1a2535; } - .product-option .price { font-size:11px; color:#8aa0b5; } + .product-option:hover { background:var(--panel-2); } + .product-option .price { font-size:11px; color:var(--text-muted); } - .cart-section { background:#0d2818; border:1px solid #2ecc71; border-radius:8px; padding:12px; margin-bottom:12px; } - .cart-section h4 { margin:0 0 12px; font-size:13px; color:#2ecc71; display:flex; align-items:center; gap:8px; } - .cart-section h4 svg { width:16px; height:16px; fill:#2ecc71; } + .cart-section { background:var(--ok-soft); border:1px solid var(--ok); border-radius:8px; padding:12px; margin-bottom:12px; } + .cart-section h4 { margin:0 0 12px; font-size:13px; color:var(--ok); display:flex; align-items:center; gap:8px; } + .cart-section h4 svg { width:16px; height:16px; fill:var(--ok); } .cart-items-list { margin-bottom:12px; } - .cart-item-row { display:flex; align-items:center; gap:8px; padding:8px; background:#0f1520; border-radius:6px; margin-bottom:6px; } - .cart-item-row .name { flex:1; font-size:13px; color:#e7eef7; } + .cart-item-row { display:flex; align-items:center; gap:8px; padding:8px; background:var(--panel-2); border-radius:6px; margin-bottom:6px; } + .cart-item-row .name { flex:1; font-size:13px; color:var(--text); } .cart-item-row .qty { width:60px; text-align:center; } .cart-item-row .unit-select { width:80px; } - .cart-item-row .remove-btn { background:#e74c3c; color:#fff; border:none; border-radius:4px; padding:4px 8px; cursor:pointer; font-size:11px; } - .cart-item-row .remove-btn:hover { background:#c0392b; } + .cart-item-row .remove-btn { background:var(--err); color:#fff; border:none; border-radius:4px; padding:4px 8px; cursor:pointer; font-size:11px; } + .cart-item-row .remove-btn:hover { background:var(--err); } .add-cart-row { display:flex; gap:8px; align-items:flex-end; } .add-cart-row .product-selector { flex:1; } .add-cart-row .qty-input { width:70px; } .add-cart-row .unit-select { width:80px; } .add-cart-row button { white-space:nowrap; } - .no-pending { text-align:center; padding:60px 20px; color:#2ecc71; } - .no-pending svg { width:48px; height:48px; fill:#2ecc71; margin-bottom:16px; } + .no-pending { text-align:center; padding:60px 20px; color:var(--ok); } + .no-pending svg { width:48px; height:48px; fill:var(--ok); margin-bottom:16px; }
@@ -349,7 +349,7 @@ class TakeoversCrud extends HTMLElement { if (!container) return; if (this.cartItemsToAdd.length === 0) { - container.innerHTML = `
Sin items agregados
`; + container.innerHTML = `
Sin items agregados
`; return; } diff --git a/public/components/test-panel.js b/public/components/test-panel.js index ef732cd..a03a074 100644 --- a/public/components/test-panel.js +++ b/public/components/test-panel.js @@ -51,16 +51,13 @@ class TestPanel extends HTMLElement { this.shadowRoot.innerHTML = `
diff --git a/public/lib/modal.js b/public/lib/modal.js index 3c126a2..4d47161 100644 --- a/public/lib/modal.js +++ b/public/lib/modal.js @@ -11,114 +11,81 @@ const STYLES = ` .modal-overlay { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(0, 0, 0, 0.5); - display: flex; - align-items: center; - justify-content: center; + position: fixed; top: 0; left: 0; right: 0; bottom: 0; + background: rgba(15, 23, 42, 0.45); + backdrop-filter: blur(2px); + display: flex; align-items: center; justify-content: center; z-index: 10000; animation: fadeIn 0.15s ease-out; + font-family: var(--font-sans, system-ui); } - - @keyframes fadeIn { - from { opacity: 0; } - to { opacity: 1; } - } - + @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideIn { - from { transform: translateY(-20px); opacity: 0; } - to { transform: translateY(0); opacity: 1; } + from { transform: translateY(-12px); opacity: 0; } + to { transform: translateY(0); opacity: 1; } } - .modal-box { - background: #1e1e1e; - border-radius: 8px; + background: var(--panel, #ffffff); + border-radius: var(--r-lg, 12px); padding: 24px; min-width: 320px; max-width: 480px; - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); + box-shadow: var(--shadow-lg, 0 12px 28px rgba(15,23,42,.10)); + border: 1px solid var(--border, #e2e8f0); animation: slideIn 0.2s ease-out; - border: 1px solid #333; } - .modal-header { - display: flex; - align-items: center; - gap: 12px; - margin-bottom: 16px; + display: flex; align-items: center; gap: 12px; + margin-bottom: 14px; } - .modal-icon { - width: 28px; - height: 28px; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - font-size: 16px; + width: 32px; height: 32px; border-radius: 50%; + display: flex; align-items: center; justify-content: center; + font-size: 16px; font-weight: 700; flex-shrink: 0; } - - .modal-icon.success { background: #22c55e20; color: #22c55e; } - .modal-icon.error { background: #ef444420; color: #ef4444; } - .modal-icon.warn { background: #f59e0b20; color: #f59e0b; } - .modal-icon.info { background: #3b82f620; color: #3b82f6; } - .modal-icon.confirm { background: #8b5cf620; color: #8b5cf6; } - + .modal-icon.success { background: var(--ok-soft, #d1fae5); color: var(--ok, #10b981); } + .modal-icon.error { background: var(--err-soft, #fee2e2); color: var(--err, #ef4444); } + .modal-icon.warn { background: var(--warn-soft, #fef3c7); color: var(--warn, #f59e0b); } + .modal-icon.info { background: var(--accent-soft, #e0f2fe); color: var(--accent, #0ea5e9); } + .modal-icon.confirm { background: var(--accent-soft, #e0f2fe); color: var(--accent-hover, #0284c7); } .modal-title { - font-size: 16px; - font-weight: 600; - color: #fff; + font-size: 16px; font-weight: 600; + color: var(--text, #0f172a); margin: 0; + letter-spacing: -0.01em; } - .modal-message { - color: #ccc; - font-size: 14px; - line-height: 1.5; + color: var(--text-dim, #475569); + font-size: 14px; line-height: 1.5; margin-bottom: 20px; word-break: break-word; } - .modal-buttons { - display: flex; - gap: 12px; - justify-content: flex-end; + display: flex; gap: 8px; justify-content: flex-end; } - .modal-btn { padding: 8px 16px; - border-radius: 6px; - font-size: 14px; - font-weight: 500; - cursor: pointer; - border: none; + border-radius: var(--r-md, 10px); + font-size: 13px; font-weight: 500; + cursor: pointer; border: 1px solid transparent; transition: all 0.15s; + font-family: inherit; } - - .modal-btn:hover { - filter: brightness(1.1); - } - + .modal-btn:focus-visible { outline: none; box-shadow: var(--focus-ring, 0 0 0 3px rgba(14,165,233,.3)); } .modal-btn.primary { - background: #3b82f6; - color: white; + background: var(--accent, #0ea5e9); color: var(--text-on-acc, #fff); } - + .modal-btn.primary:hover { background: var(--accent-hover, #0284c7); } .modal-btn.secondary { - background: #333; - color: #ccc; - border: 1px solid #444; + background: var(--panel, #fff); color: var(--text, #0f172a); + border-color: var(--border-hi, #cbd5e1); } - + .modal-btn.secondary:hover { border-color: var(--accent, #0ea5e9); color: var(--accent-hover, #0284c7); } .modal-btn.danger { - background: #ef4444; - color: white; + background: var(--err, #ef4444); color: #fff; } + .modal-btn.danger:hover { filter: brightness(0.95); } `; // Inyectar estilos una sola vez diff --git a/public/lib/toast.js b/public/lib/toast.js index 3b4e61e..605b3ba 100644 --- a/public/lib/toast.js +++ b/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%)", diff --git a/public/styles/fonts/Inter-Variable.woff2 b/public/styles/fonts/Inter-Variable.woff2 new file mode 100644 index 0000000..5a8d3e7 Binary files /dev/null and b/public/styles/fonts/Inter-Variable.woff2 differ diff --git a/public/styles/fonts/JetBrainsMono-Variable.woff2 b/public/styles/fonts/JetBrainsMono-Variable.woff2 new file mode 100644 index 0000000..3f36e52 --- /dev/null +++ b/public/styles/fonts/JetBrainsMono-Variable.woff2 @@ -0,0 +1,1483 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Page not found · GitHub · GitHub + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + +
+ Skip to content + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + +
+ +
+ + + + + + + + +
+ + + + + +
+ + + + + + + + + +
+
+ + + +
+
+ +
+
+ 404 “This is not the web page you are looking for” + + + + + + + + + + + + +
+
+ +
+
+ +
+ + +
+
+
+ Contact Support — + GitHub Status — + @githubstatus +
+
+ +
+ +
+ + + + + + + + + + + + + + + + + + + + + + +
+
+
+ + + diff --git a/public/styles/theme.css b/public/styles/theme.css index d7e6e10..2731019 100644 --- a/public/styles/theme.css +++ b/public/styles/theme.css @@ -1,74 +1,156 @@ /** - * Tema global (CSS custom properties). + * Tema global Botino — light pastel frío (azul/verde). * - * Las custom properties heredan a través del shadow DOM, así que cualquier + * 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: #0b0f14; - --panel: #121823; - --panel-2: #0f1520; - --panel-3: #0a0e15; + --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: #1e2a3a; - --border-hi: #253245; - --border-active:#1f6feb; + --border: #e2e8f0; /* slate-200 */ + --border-hi: #cbd5e1; /* slate-300 */ + --border-active:#0ea5e9; /* sky-500 */ /* Text */ - --text: #e7eef7; - --text-muted: #8aa0b5; - --text-dim: #d7e2ef; + --text: #0f172a; /* slate-900 */ + --text-dim: #475569; /* slate-600 */ + --text-muted: #64748b; /* slate-500 */ --text-on-acc: #ffffff; + --muted: var(--text-muted); - /* Accents */ - --accent: #1f6feb; - --accent-hover: #2570f0; - --ok: #25D366; - --warn: #F59E0B; - --err: #e74c3c; + /* 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 */ - --user-bubble: #0f2a1a; - --user-border: #1f6f43; - --user-meta: #b9d9c6; - --user-name: #cdebd8; + /* 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: #111b2a; - --bot-border: #2a3a55; - --bot-meta: #a9bed6; - --bot-name: #c7d8ee; + --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: #241214; - --err-border: #e74c3c; - --err-meta: #ffd0d4; - --err-name: #ffd0d4; + --err-bubble: #fee2e2; + --err-border: #fca5a5; + --err-text: #7f1d1d; + --err-name: #b91c1c; + --err-meta: #dc2626; - /* Charts (alias para componentes que aún usan literales) */ - --chart-blue: #3b82f6; - --chart-green: #25D366; - --chart-purple: #8B5CF6; - --chart-orange: #F59E0B; - --chart-pink: #EC4899; - --chart-gray: #9CA3AF; + /* 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); - /* Radii / shadows */ - --r-sm: 6px; - --r-md: 8px; - --r-lg: 10px; - --r-xl: 14px; - --shadow-bubble: 0 1px 0 rgba(0,0,0,.35); -} - -/* Compat: alias antiguo `--muted` que ya usa ops-shell.js. */ -:root { - --muted: var(--text-muted); + /* 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: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; + 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); }