:root{
  --bg: #0a0e14;
  --bg-raised: #10151d;
  --bg-panel: #131922;
  --bg-hover: #1a2230;
  --border: #212b3a;
  --border-strong: #2c3a4f;
  --ink: #eef2f7;
  --ink-dim: #97a3b6;
  --ink-faint: #5c6b81;
  --accent: #35d0a8;
  --accent-dim: rgba(53,208,168,0.14);
  --accent-ink: #04140f;
  --indigo: #7c8cf8;
  --indigo-dim: rgba(124,140,248,0.14);
  --amber: #f5b73d;
  --amber-dim: rgba(245,183,61,0.14);
  --red: #f2665f;
  --red-dim: rgba(242,102,95,0.14);
  --good: #35d0a8;
  --bad: #f2665f;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: "Inter", "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --radius: 12px;
  --radius-sm: 8px;
  color-scheme: dark;
}

:root[data-theme="light"]{
  --bg: #f4f6f9;
  --bg-raised: #ffffff;
  --bg-panel: #ffffff;
  --bg-hover: #eef1f6;
  --border: #dde3ec;
  --border-strong: #c7d0dd;
  --ink: #101722;
  --ink-dim: #4d5b70;
  --ink-faint: #8b97a8;
  --accent-ink: #ffffff;
  color-scheme: light;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a{ color: inherit; }
button{ font-family: inherit; }
::selection{ background: var(--accent-dim); color: var(--ink); }

/* ---------- shell ---------- */
.shell{ display:flex; min-height:100vh; }

.sidebar{
  width: 232px; flex: none; background: var(--bg-raised); border-right:1px solid var(--border);
  display:flex; flex-direction:column; padding: 18px 12px; gap: 4px; position: sticky; top:0; height:100vh;
}
.brand{ display:flex; align-items:center; gap:10px; padding: 6px 10px 18px; }
.brand-mark{ width:30px; height:30px; border-radius:9px; background: linear-gradient(135deg, var(--accent), var(--indigo)); display:flex; align-items:center; justify-content:center; font-family: var(--mono); font-weight:800; color: var(--accent-ink); font-size:15px; flex:none; }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-text b{ font-size:15px; font-weight:800; letter-spacing:-0.01em; }
.brand-text span{ font-size:10.5px; color: var(--ink-faint); font-family: var(--mono); text-transform:uppercase; letter-spacing:0.06em; }

.navlink{
  display:flex; align-items:center; gap:10px; padding: 10px 12px; border-radius: var(--radius-sm);
  color: var(--ink-dim); font-size:13.5px; font-weight:600; cursor:pointer; border:none; background:transparent;
  text-align:left; width:100%;
}
.navlink svg{ flex:none; opacity:0.85; }
.navlink:hover{ background: var(--bg-hover); color: var(--ink); }
.navlink.active{ background: var(--accent-dim); color: var(--accent); }
.navlink .count{ margin-left:auto; font-family: var(--mono); font-size:10.5px; color: var(--ink-faint); background: var(--bg-hover); padding:2px 6px; border-radius:999px; }
.navlink.active .count{ color: var(--accent); }

.sidebar-foot{ margin-top:auto; padding: 10px; display:flex; flex-direction:column; gap:8px; }
.data-pill{ display:flex; align-items:center; gap:7px; font-size:11px; color: var(--ink-faint); padding:8px 10px; border-radius:var(--radius-sm); background: var(--bg-panel); border:1px solid var(--border); }
.data-pill .dot{ width:7px; height:7px; border-radius:50%; flex:none; background: var(--ink-faint); }
.data-pill.live .dot{ background: var(--good); box-shadow: 0 0 0 3px var(--accent-dim); }
.data-pill.local .dot{ background: var(--amber); }
.theme-toggle{ display:flex; align-items:center; justify-content:center; gap:6px; padding:8px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--bg-panel); color:var(--ink-dim); font-size:11.5px; font-weight:600; cursor:pointer; }
.theme-toggle:hover{ color: var(--ink); border-color: var(--border-strong); }

.main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{
  display:flex; align-items:center; gap:14px; padding: 14px 28px; border-bottom:1px solid var(--border);
  position:sticky; top:0; background: rgba(10,14,20,0.86); backdrop-filter: blur(10px); z-index:20;
}
:root[data-theme="light"] .topbar{ background: rgba(244,246,249,0.88); }
.topbar h1{ font-size:16.5px; font-weight:800; margin:0; letter-spacing:-0.01em; }
.topbar .sub{ font-size:12px; color: var(--ink-faint); }
.topbar-spacer{ flex:1; }

.view{ padding: 24px 28px 60px; max-width: 1320px; }
.view[hidden]{ display:none; }

/* ---------- primitives ---------- */
.panel{ background: var(--bg-panel); border:1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.panel + .panel{ margin-top:16px; }
.grid{ display:grid; gap:16px; }
.grid.cols-2{ grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); }
.grid.cols-3{ grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); }
.grid.cols-4{ grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); }

h2.sec-title{ font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:0.04em; color: var(--ink-dim); margin: 0 0 14px; display:flex; align-items:center; gap:8px; }
h2.sec-title .n{ font-family: var(--mono); font-weight:700; color: var(--ink-faint); font-size:11px; }
p.hint{ font-size:12.5px; color: var(--ink-faint); line-height:1.55; margin: 8px 0 0; }

.btn{ display:inline-flex; align-items:center; gap:7px; padding: 9px 16px; border-radius: var(--radius-sm); border:1px solid var(--border-strong); background: var(--bg-raised); color: var(--ink); font-size:13px; font-weight:700; cursor:pointer; }
.btn:hover{ border-color: var(--accent); color: var(--accent); }
.btn.primary{ background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover{ filter: brightness(1.08); color: var(--accent-ink); }
.btn.ghost{ background:transparent; border-color:transparent; color: var(--ink-dim); }
.btn.ghost:hover{ color: var(--ink); background: var(--bg-hover); border-color: transparent; }
.btn.sm{ padding:6px 11px; font-size:12px; }
.btn:disabled{ opacity:0.45; cursor:not-allowed; }

input[type=text], input[type=search], input[type=number], input[type=password], select{
  font-family: inherit; background: var(--bg-raised); border:1px solid var(--border-strong); color: var(--ink);
  border-radius: var(--radius-sm); padding: 9px 12px; font-size: 13.5px;
}
input:focus, select:focus{ outline:2px solid var(--accent); outline-offset:1px; }
label.field{ display:flex; flex-direction:column; gap:5px; font-size:11.5px; color: var(--ink-faint); font-weight:600; }

.badge{ display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:999px; font-size:10.5px; font-weight:800; letter-spacing:0.02em; text-transform:uppercase; }
.badge.fondo{ background: var(--indigo-dim); color: var(--indigo); }
.badge.etf{ background: var(--accent-dim); color: var(--accent); }
.badge.full{ background: rgba(53,208,168,0.10); color: var(--good); }
.badge.partial{ background: var(--bg-hover); color: var(--ink-faint); }

.stat{ font-family: var(--mono); font-variant-numeric: tabular-nums; }
.stat.pos{ color: var(--good); }
.stat.neg{ color: var(--bad); }

/* ---------- explorer table ---------- */
.toolbar{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:16px; }
.toolbar .search{ position:relative; flex:1; min-width:220px; }
.toolbar .search input{ width:100%; padding-left:34px; }
.toolbar .search svg{ position:absolute; left:11px; top:50%; transform:translateY(-50%); opacity:0.5; }
.chipbar{ display:flex; gap:6px; flex-wrap:wrap; }
.filter-chip{ padding:6px 12px; border-radius:999px; border:1px solid var(--border-strong); background: var(--bg-raised); color: var(--ink-dim); font-size:12px; font-weight:700; cursor:pointer; }
.filter-chip:hover{ border-color: var(--accent); color: var(--ink); }
.filter-chip.active{ background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

table.data-table{ width:100%; border-collapse:collapse; font-size:12.8px; }
table.data-table thead th{
  text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:0.04em; color: var(--ink-faint);
  font-weight:800; padding:9px 12px; border-bottom:1px solid var(--border); cursor:pointer; white-space:nowrap; user-select:none;
}
table.data-table thead th:hover{ color: var(--ink); }
table.data-table thead th.active{ color: var(--accent); }
table.data-table tbody tr{ cursor:pointer; }
table.data-table tbody tr:hover{ background: var(--bg-hover); }
table.data-table td{ padding: 10px 12px; border-bottom:1px solid var(--border); vertical-align:middle; }
table.data-table td.num{ text-align:right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
table.data-table .fname{ font-weight:700; color: var(--ink); }
table.data-table .fmeta{ font-size:11px; color: var(--ink-faint); margin-top:1px; }
.table-scroll{ overflow-x:auto; border-radius: var(--radius-sm); }
.pager{ display:flex; align-items:center; gap:10px; justify-content:center; padding-top:16px; font-size:12.5px; color: var(--ink-faint); }

/* ---------- detail drawer ---------- */
.drawer-overlay{ position:fixed; inset:0; background:rgba(4,6,10,0.55); backdrop-filter: blur(2px); z-index:50; display:flex; justify-content:flex-end; }
.drawer-overlay[hidden]{ display:none; }
.drawer{ width: min(720px, 100vw); background: var(--bg); border-left:1px solid var(--border); height:100vh; overflow-y:auto; padding: 24px 28px 60px; }
.drawer-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:18px; }
.drawer-head h2{ font-size:19px; font-weight:800; margin:0 0 6px; letter-spacing:-0.01em; }
.drawer-close{ background: var(--bg-panel); border:1px solid var(--border); color: var(--ink-dim); width:32px; height:32px; border-radius:50%; cursor:pointer; flex:none; font-size:16px; }
.drawer-close:hover{ color: var(--ink); border-color: var(--border-strong); }

/* ---------- gauges / bars ---------- */
.gaugegrid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap:6px; }
.gauge{ display:flex; flex-direction:column; align-items:center; padding:8px 2px; }
.gauge svg{ display:block; }
.gauge .val{ font-family: var(--mono); font-weight:800; font-size:15px; }
.gauge .lbl{ font-size:11px; font-weight:700; color: var(--ink-dim); margin-top:4px; text-align:center; }
.gauge .sub{ font-family: var(--mono); font-size:9.5px; color: var(--ink-faint); }

.barrow{ display:grid; grid-template-columns: 118px 1fr 50px; align-items:center; gap:10px; padding:5px 0; }
.barrow .lbl{ font-size:12px; color: var(--ink-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.barrow .track{ height:9px; background: var(--border); border-radius:999px; overflow:hidden; }
.barrow .fill{ height:100%; border-radius:999px; }
.barrow .val{ font-family: var(--mono); font-size:12px; font-weight:700; text-align:right; }

.stylebox{ display:grid; grid-template-columns: 84px repeat(3,1fr) 42px; gap:5px; }
.stylebox .rl{ display:flex; align-items:center; font-size:11px; font-weight:700; color: var(--ink-dim); }
.stylebox .cell{ min-height:52px; border-radius:8px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-family: var(--mono); font-size:12.5px; font-weight:700; }
.stylebox .rt{ display:flex; align-items:center; justify-content:flex-end; font-family: var(--mono); font-size:11px; color: var(--ink-faint); }
.stylebox .cl{ text-align:center; font-size:10.5px; font-weight:700; color: var(--ink-dim); padding-top:2px; }

/* ---------- comparator ---------- */
.compare-table{ width:100%; border-collapse:collapse; font-size:12.8px; }
.compare-table th, .compare-table td{ padding:9px 12px; border-bottom:1px solid var(--border); text-align:left; }
.compare-table th.rowlabel{ color: var(--ink-faint); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:0.03em; white-space:nowrap; }
.compare-table td{ font-family: var(--mono); }
.compare-slot{ border:1px dashed var(--border-strong); border-radius:var(--radius-sm); padding:22px; text-align:center; color:var(--ink-faint); font-size:12.5px; cursor:pointer; }
.compare-slot:hover{ border-color: var(--accent); color: var(--accent); }
.compare-chip{ display:flex; align-items:center; justify-content:space-between; gap:8px; background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 12px; }

/* ---------- portfolio (mi cartera) ---------- */
.holding-row{ display:grid; grid-template-columns: 1fr 90px 90px 32px; gap:10px; align-items:center; padding:9px 0; border-bottom:1px solid var(--border); }
.holding-row:last-child{ border-bottom:none; }
.holding-row .hname{ font-size:12.8px; font-weight:700; }
.holding-row .hmeta{ font-size:10.5px; color: var(--ink-faint); }
.holding-row input[type=number]{ width:100%; padding:6px 8px; font-size:12.5px; }
.holding-remove{ background:transparent; border:none; color: var(--ink-faint); cursor:pointer; font-size:16px; width:28px; height:28px; border-radius:50%; }
.holding-remove:hover{ background: var(--red-dim); color: var(--red); }

/* ---------- settings / data source ---------- */
.source-card{ display:flex; align-items:center; gap:14px; padding:16px; border-radius:var(--radius-sm); border:1px solid var(--border); background: var(--bg-raised); }
.source-card .icon{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex:none; }
.source-card.ok .icon{ background: var(--accent-dim); color: var(--accent); }
.source-card.off .icon{ background: var(--bg-hover); color: var(--ink-faint); }
.source-card .body{ flex:1; min-width:0; }
.source-card .body b{ font-size:13.5px; }
.source-card .body div{ font-size:12px; color: var(--ink-faint); margin-top:2px; }
textarea.code{ width:100%; min-height:120px; font-family: var(--mono); font-size:11.5px; background: var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius-sm); color: var(--ink-dim); padding:12px; resize:vertical; }

/* ---------- empty / loading ---------- */
.empty{ padding: 48px 20px; text-align:center; color: var(--ink-faint); font-size:13px; border:1px dashed var(--border); border-radius: var(--radius); }
.loading{ padding: 80px 20px; text-align:center; color: var(--ink-faint); font-family: var(--mono); font-size:12.5px; }
.skeleton{ background: linear-gradient(90deg, var(--bg-hover) 25%, var(--border) 37%, var(--bg-hover) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: var(--radius-sm); }
@keyframes shimmer{ 0%{background-position:100% 0} 100%{background-position:0 0} }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background: var(--border-strong); border-radius:6px; }
::-webkit-scrollbar-track{ background:transparent; }

@media (max-width: 860px){
  .sidebar{ position:fixed; left:-240px; z-index:60; transition: left .18s; box-shadow: 20px 0 40px rgba(0,0,0,0.4); }
  .sidebar.open{ left:0; }
  .topbar{ padding: 12px 16px; }
  .view{ padding: 16px 16px 50px; }
  .drawer{ width:100vw; }
}