/* Barra Sparkies compartida + diseño móvil/escritorio de CRM, Inmobiliario y Finanzas (ver bar.js). */
:root { --spk-bg:#070d10; --spk-panel:#0d171b; --spk-line:#1b2c32; --spk-text:#e6f0ec; --spk-h:60px; }
@media (prefers-color-scheme: light) { :root { --spk-bg:#f2f6f4; --spk-panel:#fff; --spk-line:#d5e0db; --spk-text:#13211d; } }
.spk-bar { position:sticky; top:0; z-index:2147483000; display:flex; align-items:center; gap:10px; min-height:var(--spk-h); box-sizing:border-box;
  padding:max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left));
  background:var(--spk-bg); color:var(--spk-text); border-bottom:0; font:14px/1.2 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif; }
.spk-bar::after { content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:linear-gradient(90deg,#34c738,#ffe21a,#ff9a00,#ff3b2e,#ff1f8e); }
.spk-brand { display:flex; align-items:center; text-decoration:none; color:inherit; min-width:0; }
.spk-logo { height:32px; width:auto; display:block; } .spk-wordmark { font-size:18px; }
.spk-bar .spk-chip { padding:3px 10px; border:1px solid var(--spk-line); border-radius:999px; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.spk-bar .spk-chip:empty { display:none; } .spk-fill { flex:1; }
.spk-bar .spk-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; width:auto; min-width:44px; height:44px; min-height:44px; margin:0; padding:0 12px; box-sizing:border-box;
  cursor:pointer; border:1px solid var(--spk-line); border-radius:12px; background:var(--spk-panel); color:var(--spk-text); font:inherit; font-size:14px; font-weight:600;
  line-height:1; text-decoration:none; text-transform:none; letter-spacing:0; -webkit-appearance:none; appearance:none; box-shadow:none; }
.spk-bar .spk-chip, .spk-bar .spk-lbl, .spk-bar .spk-brand { text-transform:none; letter-spacing:0; }
.spk-bar .spk-btn svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.spk-bar .spk-btn:hover, .spk-bar .spk-btn:focus-visible { outline:2px solid #4f7dff; outline-offset:1px; }
.spk-bar .spk-view .spk-lbl { font-weight:500; }
html[data-view="mobile"] .spk-bar .spk-lbl, html[data-view="mobile"] .spk-bar .spk-chip { display:none; } html[data-view="mobile"] .spk-bar .spk-view .spk-lbl { display:inline; font-size:12px; }
html[data-view="mobile"] .spk-bar .spk-btn:not(.spk-view) { padding:0; }
html[data-view="desktop"] body { min-width:1024px; }
/* «Móvil» forzado en una pantalla ancha: columna del ancho de un teléfono */
@media (min-width: 700px) { html[data-pref="mobile"] body { max-width:460px; margin-left:auto; margin-right:auto; box-shadow:0 0 0 1px var(--spk-line); } }
html[data-view="mobile"] input, html[data-view="mobile"] select, html[data-view="mobile"] textarea { font-size:16px; }

/* ── CRM (dashboard/index.html) ───────────────────────────────────────────── */
html[data-app="crm"][data-view="mobile"] .header { padding:14px 12px; }
html[data-app="crm"][data-view="mobile"] .container { margin:12px auto; padding:0 12px; }
html[data-app="crm"][data-view="mobile"] .grid { grid-template-columns:1fr; gap:12px; }
html[data-app="crm"][data-view="mobile"] .card { padding:14px; overflow-x:auto; }
html[data-app="crm"][data-view="mobile"] table { display:block; overflow-x:auto; }
html[data-app="crm"][data-view="mobile"] button { min-height:44px; }

/* ── Finanzas (frontend/index.html) ───────────────────────────────────────── */
html[data-app="finanzas"][data-view="mobile"] header { flex-wrap:wrap; padding:12px; gap:6px; }
html[data-app="finanzas"][data-view="mobile"] nav#tabs { flex-wrap:nowrap; overflow-x:auto; padding:8px 12px; -webkit-overflow-scrolling:touch; }
html[data-app="finanzas"][data-view="mobile"] nav#tabs button { min-height:42px; white-space:nowrap; }
html[data-app="finanzas"][data-view="mobile"] main { padding:12px; }
html[data-app="finanzas"][data-view="mobile"] th, html[data-app="finanzas"][data-view="mobile"] td { padding:6px 8px; }

/* ── Inmobiliario (React) ─────────────────────────────────────────────────── */
html[data-app="inmobiliario"][data-view="desktop"] .sidebar { top:var(--spk-h); height:calc(100vh - var(--spk-h)); }
html[data-app="inmobiliario"][data-view="mobile"] .app { flex-direction:column; min-height:0; }
html[data-app="inmobiliario"][data-view="mobile"] .sidebar { position:static; width:100%; height:auto; flex-direction:row; align-items:center; overflow-x:auto;
  padding:8px 10px; gap:6px; border-right:0; border-bottom:1px solid var(--border); border-top:0; border-image:none; }
html[data-app="inmobiliario"][data-view="mobile"] .brand { display:none; }
html[data-app="inmobiliario"][data-view="mobile"] .nav-link { white-space:nowrap; min-height:42px; }
html[data-app="inmobiliario"][data-view="mobile"] .sidebar-foot { margin:0 0 0 auto; padding:0; display:flex; gap:10px; align-items:center; }
html[data-app="inmobiliario"][data-view="mobile"] .cur-label, html[data-app="inmobiliario"][data-view="mobile"] .actualizado { display:none; }
html[data-app="inmobiliario"][data-view="mobile"] .main { padding:14px 12px 40px; }
html[data-app="inmobiliario"][data-view="mobile"] .cards, html[data-app="inmobiliario"][data-view="mobile"] .tiles { grid-template-columns:1fr 1fr; gap:10px; }
html[data-app="inmobiliario"][data-view="mobile"] .cards { grid-template-columns:1fr; }
html[data-app="inmobiliario"][data-view="mobile"] table { display:block; overflow-x:auto; }

/* ═══ Tema Sparkies para CRM y Finanzas: misma paleta, tarjetas y tipografía que el Dashboard e Inmobiliario ═══ */
html[data-app="crm"], html[data-app="finanzas"] {
  --t-bg:#060c10; --t-panel:#0c161b; --t-panel2:#101e25; --t-line:#1b2d35; --t-text:#e4eeea; --t-muted:#8aa49d;
  --t-ok:#3fd68f; --t-warn:#f2b544; --t-bad:#ff6b5e; --t-info:#5aa9ff; --t-r:14px; color-scheme:dark light;
}
@media (prefers-color-scheme: light) {
  html[data-app="crm"], html[data-app="finanzas"] { --t-bg:#eef3f1; --t-panel:#fff; --t-panel2:#f5f9f7; --t-line:#d3e0db; --t-text:#12211c; --t-muted:#58706a;
    --t-ok:#0d9b5f; --t-warn:#b9770e; --t-bad:#c2372c; --t-info:#1f6fd1; }
}
html[data-app="crm"] { --t-accent:#ff8a1f; --t-on:#1a1000; --t-soft:color-mix(in srgb,#ff8a1f 14%,transparent); }
html[data-app="finanzas"] { --t-accent:#f2b800; --t-on:#1a1400; --t-soft:color-mix(in srgb,#f2b800 14%,transparent); }
html[data-app="crm"] body, html[data-app="finanzas"] body {
  background:var(--t-bg); color:var(--t-text); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif; -webkit-text-size-adjust:100%; }

/* — CRM — */
html[data-app="crm"] .header { background:var(--t-bg); color:var(--t-text); text-align:left; padding:22px 24px 6px; border:0; }
html[data-app="crm"] .header h1 { font-size:22px; letter-spacing:-.3px; border-left:4px solid var(--t-accent); padding-left:12px; }
html[data-app="crm"] .header p { color:var(--t-muted) !important; margin-left:16px; }
html[data-app="crm"] .container { max-width:1280px; margin:14px auto; padding:0 24px; }
html[data-app="crm"] .grid { gap:16px; }
html[data-app="crm"] .card { background:var(--t-panel); border:1px solid var(--t-line); border-radius:var(--t-r); padding:18px; box-shadow:none; color:var(--t-text); }
html[data-app="crm"] .card h2 { color:var(--t-muted); font-size:12px; letter-spacing:.12em; font-weight:600; border-left:4px solid var(--t-accent); padding-left:10px; }
html[data-app="crm"] .status-item { background:var(--t-panel2); border:1px solid var(--t-line); border-radius:12px; }
html[data-app="crm"] .status-item .value { color:var(--t-accent); font-variant-numeric:tabular-nums; }
html[data-app="crm"] .status-item .label, html[data-app="crm"] .progress-stat .lbl { color:var(--t-muted); }
html[data-app="crm"] button:not(.spk-btn):not(.tab-btn) { background:var(--t-panel2) !important; color:var(--t-text) !important; border:1px solid var(--t-line); border-radius:12px; min-height:44px; box-shadow:none; }
html[data-app="crm"] button:not(.spk-btn):not(.tab-btn):hover:not(:disabled) { border-color:var(--t-accent); }
html[data-app="crm"] .btn-play { background:var(--t-accent) !important; color:var(--t-on) !important; border-color:var(--t-accent); }
html[data-app="crm"] .btn-stop { background:transparent !important; color:var(--t-bad) !important; border-color:var(--t-bad); }
html[data-app="crm"] button:disabled { opacity:.5; }
html[data-app="crm"] .log-panel { background:#04090c; color:#c9d8d3; border:1px solid var(--t-line); border-radius:12px; }
html[data-app="crm"] th { background:var(--t-panel2); color:var(--t-muted); font-size:12px; letter-spacing:.06em; text-transform:uppercase; border-bottom:1px solid var(--t-line); }
html[data-app="crm"] td { border-bottom:1px solid var(--t-line); color:var(--t-text); }
html[data-app="crm"] tr:hover { background:var(--t-panel2); }
html[data-app="crm"] input, html[data-app="crm"] select, html[data-app="crm"] textarea { background:var(--t-panel2); color:var(--t-text); border:1px solid var(--t-line); border-radius:10px; min-height:40px; }
html[data-app="crm"] .tabs { border-bottom:1px solid var(--t-line); }
html[data-app="crm"] .tab-btn { color:var(--t-muted); }
html[data-app="crm"] .tab-btn.active { color:var(--t-accent); border-bottom-color:var(--t-accent); }
html[data-app="crm"] .csv-upload { border:2px dashed var(--t-line); border-radius:var(--t-r); color:var(--t-muted); }
html[data-app="crm"] .csv-upload:hover, html[data-app="crm"] .csv-upload.dragover { border-color:var(--t-accent); background:var(--t-soft); }
html[data-app="crm"] .feed-item { background:var(--t-panel2); border-left:3px solid var(--t-accent); border-radius:10px; color:var(--t-text); }
html[data-app="crm"] .feed-item strong { color:var(--t-text); } html[data-app="crm"] .feed-item small { color:var(--t-muted); }
html[data-app="crm"] .alert { background:color-mix(in srgb,var(--t-warn) 14%,transparent); border-left-color:var(--t-warn); color:var(--t-text); border-radius:10px; }
html[data-app="crm"] .alert.warning { background:color-mix(in srgb,var(--t-bad) 14%,transparent); border-color:var(--t-bad); }
html[data-app="crm"] .alert.success { background:color-mix(in srgb,var(--t-ok) 14%,transparent); border-color:var(--t-ok); }
html[data-app="crm"] #live-progress { background:var(--t-soft); border:1px solid var(--t-accent); border-radius:var(--t-r); }
html[data-app="crm"] #live-progress h2 { color:var(--t-text); }
html[data-app="crm"] .progress-stat { background:var(--t-panel); border:1px solid var(--t-line); box-shadow:none; }
html[data-app="crm"] .progress-stat .val { color:var(--t-accent); } html[data-app="crm"] #progress-current { color:var(--t-muted); }

/* — Finanzas — */
html[data-app="finanzas"] header { background:var(--t-bg); color:var(--t-text); padding:20px 24px 8px; border:0; align-items:baseline; }
html[data-app="finanzas"] header h1 { font-size:22px; letter-spacing:-.3px; border-left:4px solid var(--t-accent); padding-left:12px; }
html[data-app="finanzas"] #actualizado { color:var(--t-muted); }
html[data-app="finanzas"] nav#tabs { background:var(--t-bg); border:0; padding:8px 24px; gap:6px; }
html[data-app="finanzas"] nav#tabs button { background:var(--t-panel); color:var(--t-muted); border:1px solid var(--t-line); border-radius:12px; min-height:40px; padding:0 14px; font-weight:600; }
html[data-app="finanzas"] nav#tabs button:hover { border-color:var(--t-accent); color:var(--t-text); }
html[data-app="finanzas"] nav#tabs button.active { background:var(--t-soft); color:var(--t-accent); border-color:var(--t-accent); }
html[data-app="finanzas"] #mes-filter-wrap { padding:6px 24px 0; } html[data-app="finanzas"] #mes-filter-wrap label { color:var(--t-muted); }
html[data-app="finanzas"] #mes-filter { background:var(--t-panel2); color:var(--t-text); border:1px solid var(--t-line); border-radius:10px; min-height:38px; }
html[data-app="finanzas"] main { padding:14px 24px 40px; }
html[data-app="finanzas"] h2 { color:var(--t-muted); font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; border-left:4px solid var(--t-accent); padding-left:10px; }
html[data-app="finanzas"] .kpis { gap:12px; } 
html[data-app="finanzas"] .kpi { background:var(--t-panel); border:1px solid var(--t-line); border-radius:var(--t-r); padding:14px 18px; min-width:170px; }
html[data-app="finanzas"] .kpi .label { color:var(--t-muted); text-transform:uppercase; letter-spacing:.06em; font-size:11.5px; }
html[data-app="finanzas"] .kpi .value { color:var(--t-text); font-size:22px; font-variant-numeric:tabular-nums; }
html[data-app="finanzas"] table { background:var(--t-panel); border:1px solid var(--t-line); border-radius:var(--t-r); border-collapse:separate; border-spacing:0; overflow:hidden; }
html[data-app="finanzas"] th { background:var(--t-panel2); color:var(--t-muted); font-size:12px; text-transform:uppercase; letter-spacing:.05em; border:0; border-bottom:1px solid var(--t-line); }
html[data-app="finanzas"] td { border:0; border-bottom:1px solid var(--t-line); color:var(--t-text); }
html[data-app="finanzas"] tbody tr:nth-child(even) { background:var(--t-panel2); }
html[data-app="finanzas"] tbody tr:hover { background:var(--t-soft); }
html[data-app="finanzas"] td.num { font-variant-numeric:tabular-nums; }
html[data-app="finanzas"] .tag { border-radius:999px; padding:2px 10px; color:var(--t-text); }
html[data-app="finanzas"] .tag-verde { background:color-mix(in srgb,var(--t-ok) 22%,transparent); }
html[data-app="finanzas"] .tag-rojo { background:color-mix(in srgb,var(--t-bad) 22%,transparent); }
html[data-app="finanzas"] .tag-amar { background:color-mix(in srgb,var(--t-warn) 24%,transparent); }
html[data-app="finanzas"] p[style] { color:var(--t-muted) !important; }

/* Escritorio: pestañas de Finanzas como barra lateral, igual que el Dashboard */
html[data-app="finanzas"][data-view="desktop"] body { display:grid; grid-template-columns:224px minmax(0,1fr); grid-template-rows:auto auto auto 1fr; align-items:start; }
html[data-app="finanzas"][data-view="desktop"] .spk-bar { grid-column:1 / -1; grid-row:1; }
html[data-app="finanzas"][data-view="desktop"] header { grid-column:2; grid-row:2; }
html[data-app="finanzas"][data-view="desktop"] nav#tabs { grid-column:1; grid-row:2 / 5; flex-direction:column; flex-wrap:nowrap; position:sticky; top:var(--spk-h);
  height:calc(100vh - var(--spk-h)); padding:20px 12px; border-right:1px solid var(--t-line); overflow-y:auto; }
html[data-app="finanzas"][data-view="desktop"] nav#tabs button { width:100%; text-align:left; border-color:transparent; background:transparent; }
html[data-app="finanzas"][data-view="desktop"] nav#tabs button.active { background:var(--t-soft); border-color:transparent; }
html[data-app="finanzas"][data-view="desktop"] #mes-filter-wrap { grid-column:2; grid-row:3; }
html[data-app="finanzas"][data-view="desktop"] main { grid-column:2; grid-row:4; min-width:0; }