:root{
  --sb-width:238px;
  --sb-bg:#0d1b2a; --sb-hover:#123a2e; --sb-border:#1a2d3e;
  --sb-text:#b7c6d3; --sb-muted:#5c7387;
  --scg-bol:#0f9d63;        /* verde bolsa */
  --scg-bol-dark:#0a7a4c;
  --scg-bol-soft:#e4f6ee;
  --scg-bg:#eef2f7;
  --up:#12a150; --up-soft:#e6f6ec;
  --down:#e5484d; --down-soft:#fdecec;
  --ok:#198754; --warn:#f59e0b; --danger:#dc3545;
}
*{ box-sizing:border-box; }
body{
  font-family:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif;
  background:var(--scg-bg); margin:0; padding-left:var(--sb-width);
  color:#1f2d3d; transition:padding-left .2s ease;
}
body.no-sb{ padding-left:0; }

/* ── Sidebar ─────────────────────────────────────────────── */
.scg-sidebar{
  position:fixed; top:0; left:0; width:var(--sb-width); height:100vh;
  background:var(--sb-bg); display:flex; flex-direction:column; z-index:1045;
  box-shadow:3px 0 12px rgba(0,0,0,.25);
}
.sb-brand{
  display:flex; align-items:center; gap:10px; padding:0 18px; height:66px;
  background:#0a1622; border-bottom:3px solid var(--scg-bol); flex-shrink:0;
}
.sb-brand .b-ico{ color:var(--scg-bol); font-size:1.55rem; line-height:1; }
.sb-brand .b-txt{ color:#fff; font-weight:800; letter-spacing:.3px; font-size:1.02rem; }
.sb-brand .b-txt small{ display:block; color:var(--sb-muted); font-weight:600; font-size:.62rem; letter-spacing:1.5px; text-transform:uppercase; }
.sb-nav{ flex:1; overflow-y:auto; padding:12px 0; }
.sb-nav::-webkit-scrollbar{ width:4px; } .sb-nav::-webkit-scrollbar-thumb{ background:var(--sb-border); }
.sb-group{ font-size:.6rem; font-weight:700; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--sb-muted); padding:14px 20px 5px; }
.sb-link{
  display:flex; align-items:center; gap:12px; padding:11px 20px; color:var(--sb-text);
  text-decoration:none; font-size:.92rem; font-weight:500; border-left:3px solid transparent;
}
.sb-link i{ font-size:1.15rem; width:22px; text-align:center; }
.sb-link:hover{ background:var(--sb-hover); color:#fff; }
.sb-link.active{ background:var(--sb-hover); color:#fff; border-left-color:var(--scg-bol); }
.sb-foot{ border-top:1px solid var(--sb-border); padding:12px 16px; }
.sb-foot .who{ color:#dbe6ef; font-size:.86rem; font-weight:600; }
.sb-foot .rol{ color:var(--sb-muted); font-size:.72rem; }

/* Topbar (móvil) */
.topbar{ display:none; }
@media(max-width:820px){
  body{ padding-left:0; }
  .scg-sidebar{ transform:translateX(-100%); transition:transform .2s ease; }
  body.sb-open .scg-sidebar{ transform:translateX(0); }
  .topbar{ display:flex; align-items:center; gap:12px; height:56px; padding:0 16px;
    background:var(--sb-bg); color:#fff; position:sticky; top:0; z-index:1040; }
  .topbar .burger{ background:none; border:none; color:#fff; font-size:1.5rem; }
}

/* ── Contenido ──────────────────────────────────────────── */
.content{ padding:22px 26px 60px; max-width:1200px; }
.page-title{ font-weight:800; font-size:1.45rem; margin:0 0 4px; }
.page-sub{ color:#64748b; margin:0 0 22px; }

/* KPIs */
.kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; margin-bottom:24px; }
.kpi{ background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:18px 20px; box-shadow:0 2px 6px rgba(15,40,80,.05); }
.kpi .lbl{ color:#64748b; font-size:.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.kpi .val{ font-size:1.7rem; font-weight:800; color:#0f2850; margin-top:4px; }
.kpi .val.money{ color:var(--scg-bol-dark); }
.kpi .val.up{ color:var(--up); } .kpi .val.down{ color:var(--down); }
.kpi i{ float:right; font-size:1.6rem; color:var(--scg-bol); opacity:.5; }

/* Cards genéricas */
.card-scg{ background:#fff; border:1px solid #e2e8f0; border-radius:14px; box-shadow:0 2px 6px rgba(15,40,80,.05); margin-bottom:22px; }
.card-scg .card-scg-head{ padding:14px 20px; border-bottom:1px solid #eef1f5; font-weight:700; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.card-scg .card-scg-body{ padding:18px 20px; }

/* Cotizaciones (grid de tickers) */
.tickers{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; }
.ticker{ background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:14px 16px;
  box-shadow:0 2px 6px rgba(15,40,80,.05); position:relative; }
.ticker .sym{ font-weight:800; font-size:1.02rem; color:#0f2850; }
.ticker .nom{ font-size:.72rem; color:#64748b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ticker .px{ font-size:1.5rem; font-weight:800; margin-top:8px; color:#0f2850; }
.ticker .chg{ font-size:.86rem; font-weight:700; margin-top:2px; }
.ticker .cur{ font-size:.68rem; color:#94a3b8; font-weight:600; }
.ticker .x{ position:absolute; top:8px; right:10px; color:#cbd5e1; border:none; background:none; font-size:.9rem; }
.ticker .x:hover{ color:var(--down); }
.ticker.idx{ background:linear-gradient(180deg,#fbfdff,#f2f7fc); }

.up{ color:var(--up); } .down{ color:var(--down); } .flat{ color:#64748b; }
.pill{ display:inline-block; padding:2px 8px; border-radius:20px; font-size:.72rem; font-weight:700; }
.pill.up{ background:var(--up-soft); color:var(--up); }
.pill.down{ background:var(--down-soft); color:var(--down); }
.pill.flat{ background:#eef2f7; color:#64748b; }

/* Tablas */
table.scg{ width:100%; border-collapse:collapse; font-size:.9rem; }
table.scg th{ text-align:left; color:#64748b; font-weight:700; font-size:.72rem; text-transform:uppercase;
  letter-spacing:.5px; padding:9px 12px; border-bottom:2px solid #eef1f5; white-space:nowrap; }
table.scg td{ padding:10px 12px; border-bottom:1px solid #f1f5f9; }
table.scg tr:hover td{ background:#fafcff; }
table.scg td.r, table.scg th.r{ text-align:right; }
.mono{ font-variant-numeric:tabular-nums; }

.btn-bol{ background:var(--scg-bol); border-color:var(--scg-bol); color:#fff; }
.btn-bol:hover{ background:var(--scg-bol-dark); border-color:var(--scg-bol-dark); color:#fff; }
.stat-diff{ font-size:1.05rem; font-weight:800; }

/* Login */
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#0d1b2a,#123a2e); padding:20px; }
.login-card{ background:#fff; border-radius:18px; padding:34px 30px; width:100%; max-width:380px; box-shadow:0 20px 60px rgba(0,0,0,.35); }
.login-card .brand{ text-align:center; margin-bottom:20px; }
.login-card .brand i{ font-size:2.6rem; color:var(--scg-bol); }
.login-card .brand h1{ font-size:1.3rem; font-weight:800; margin:8px 0 0; }
.login-card .brand p{ color:#64748b; font-size:.82rem; margin:2px 0 0; }

.chart-box{ position:relative; height:340px; }
.chart-box.sm{ height:150px; }
.autocomplete{ position:relative; }
.ac-list{ position:absolute; z-index:20; background:#fff; border:1px solid #e2e8f0; border-radius:10px;
  width:100%; box-shadow:0 12px 30px rgba(15,40,80,.15); max-height:280px; overflow-y:auto; display:none; }
.ac-item{ padding:9px 12px; cursor:pointer; border-bottom:1px solid #f1f5f9; }
.ac-item:hover, .ac-item.sel{ background:var(--scg-bol-soft); }
.ac-item .s{ font-weight:700; } .ac-item .n{ font-size:.78rem; color:#64748b; }