/* =============================================================
   STOCKERFY FOLIO (portafager) — Design System.
   Tokens y chrome portados de Stockerfy Scan (hawk/app.css) para que las dos
   apps se lean como una sola familia: misma escala de superficies, mismo raíl
   lateral, mismo encabezado que nombra la vista, mismo fondo con halo + grano.
   Los nombres viejos (--surface, --fg, --elevated…) siguen vivos como ALIAS
   sobre la escala nueva: así ninguna de las ~190 reglas de componentes de abajo
   tuvo que reescribirse para cambiar de piel.
   ============================================================= */
:root{
  /* ── Marca ── */
  --brand-burgundy:#910713; --brand-burgundy-soft:rgba(145,7,19,0.20);
  --brand-cream:#f5e5ba;

  /* ── Superficies: cinco niveles, cada uno un paso REAL de luminancia ──
     Antes eran cuatro y muy juntos, así que una tarjeta sobre el fondo y una
     tarjeta dentro de otra se veían igual y la jerarquía la cargaba entera el
     borde de 1px. */
  --bg-base:#0d0a0b; --bg-sunken:#090708; --bg-surface:#171214;
  --bg-elevated:#221a1d; --bg-hover:#2b2023;

  --fg-1:#f5ecd9; --fg-2:#a89788; --fg-3:#6e6058;
  /* Bordes en rgba sobre el crema: se comportan bien sobre CUALQUIER superficie
     de la escala, a diferencia de los hex opacos de antes (que sobre una tarjeta
     elevada quedaban más oscuros que su propio fondo). */
  --border-1:rgba(var(--ink),0.08); --border-2:rgba(var(--ink),0.16);
  --border-3:rgba(var(--ink),0.28);

  --pos:#3aa771; --neg:#d63743; --warn:#d99c44; --info:#9d4edd; --info-cool:#2f7fc2;
  --accent:var(--brand-burgundy); --accent-soft:var(--brand-burgundy-soft);
  --accent-fg:var(--brand-cream);

  /* Superficies PLANAS: sin degradado cenital ni filo interior. Un relieve
     simulado sobre near-black se lee como brillo sucio, no como volumen. La
     sombra queda solo para lo que de verdad flota (modales, popovers), donde
     informa que ese plano está encima. */
  --shadow-lg:0 24px 60px -24px rgba(0,0,0,0.80);
  --ring:0 0 0 3px rgba(var(--ink),0.13);

  --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-xl:18px; --radius-pill:999px;
  --font-sans:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-serif:'Newsreader','Source Serif Pro',Georgia,serif;
  --font-mono:'JetBrains Mono','Menlo','Consolas',monospace;
  --dur-hover:120ms; --dur-base:200ms; --ease:cubic-bezier(0.2,0.8,0.2,1);
  --rail-w:84px;
  /* canales RGB para transparencias (24-oct-2026, tema claro): tinta = lo claro sobre el fondo */
  --ink:245,229,186; --paper:13,10,11; --scrim:9,7,8; --c-in:#7fb8e0;

  /* ── Alias de compatibilidad (nombres previos → escala nueva) ── */
  --bg:var(--bg-base); --surface:var(--bg-surface); --surface2:var(--bg-elevated);
  --elevated:var(--bg-hover); --fg:var(--fg-1); --cream:var(--brand-cream);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg-base);color:var(--fg-1);font-family:var(--font-sans);
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow:hidden}
.hidden{display:none!important}
button{font-family:inherit;cursor:pointer}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.up{color:var(--pos)} .down{color:var(--neg)} .muted{color:var(--fg-2)}
::selection{background:var(--brand-burgundy);color:var(--brand-cream)}
kbd{font:600 9.5px/1 var(--font-mono);background:var(--bg-elevated);border:1px solid var(--border-2);
  border-bottom-width:2px;border-radius:4px;padding:3px 5px;color:var(--fg-2)}

/* ---------- scrollbars (WebView2/Chromium) ---------- */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(var(--ink),.13);border-radius:8px;
  border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(var(--ink),.26);background-clip:content-box}
::-webkit-scrollbar-corner{background:transparent}

/* ---------- fondo: halo + grano (igual que Stockerfy Scan) ---------- */
.bg-halo{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(1400px 760px at 22% -24%, rgba(var(--ink),.028), transparent 68%)}
.bg-grain{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E")}

/* ---------- loading overlay ---------- */
.loader{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  background:var(--bg-base);transition:opacity .25s}
.loader.hidden{display:flex!important;opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .25s,visibility 0s .25s}
.loader.hidden .loader-mark,.loader.hidden .loader-bar span{animation:none}
.loader-box{text-align:center;position:relative;z-index:2}
.loader-mark{width:54px;height:54px;display:block;margin:0 auto 18px;border-radius:14px;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.7));animation:markin .7s var(--ease)}
@keyframes markin{from{transform:scale(.86)}to{transform:none}}
.loader-title{font-family:var(--font-serif);font-weight:500;font-size:38px;letter-spacing:-.015em;color:var(--fg-1)}
.loader-title span{color:var(--fg-3)}
.loader-bar{width:180px;height:2px;background:var(--border-1);border-radius:3px;margin:20px auto 12px;overflow:hidden}
.loader-bar span{display:block;height:100%;width:40%;background:var(--accent);border-radius:3px;
  animation:slide 1.1s ease-in-out infinite}
@keyframes slide{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
.loader-msg{color:var(--fg-3);font-size:11.5px;letter-spacing:.02em}

/* ══ CHROME: raíl lateral + shell ═══════════════════════════════════════════
   Sustituye al topbar con tabs horizontales. La navegación pasa a ser
   persistente y vertical, y el encabezado queda libre para decir DÓNDE está uno
   (vista + una frase de alcance) en vez de repetir la marca.
   ═════════════════════════════════════════════════════════════════════════ */
#app{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);height:100vh;
  position:relative;z-index:2}
.rail{display:flex;flex-direction:column;align-items:center;padding:16px 0 14px;
  border-right:1px solid var(--border-1);
  background:linear-gradient(180deg,rgba(var(--ink),.030),rgba(var(--ink),0) 260px),
             rgba(var(--scrim),.55)}
.rail-brand{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:13px;cursor:default}
.rail-mark{width:38px;height:38px;display:block;border-radius:11px;object-fit:cover;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.65))}
.rail-nav{display:flex;flex-direction:column;gap:4px;width:100%;padding:0 9px;margin-top:22px}
.nav-item{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:11px 3px 9px;background:none;border:none;border-radius:12px;color:var(--fg-3);
  font:600 9.5px/1 var(--font-sans);letter-spacing:.03em;cursor:pointer;
  transition:color var(--dur-hover) var(--ease),background var(--dur-hover) var(--ease)}
.nav-item svg{width:21px;height:21px}
.nav-item:hover{color:var(--fg-1);background:rgba(var(--ink),.045)}
.nav-item.active{color:var(--brand-cream);background:rgba(var(--ink),.065)}
/* Marcador de vista activa apoyado en el borde del raíl: el ojo la encuentra
   sin leer ningún texto. */
.nav-item.active::before{content:"";position:absolute;left:-9px;top:50%;transform:translateY(-50%);
  width:3px;height:24px;border-radius:0 3px 3px 0;background:var(--accent)}
.nav-item:focus-visible{outline:none;box-shadow:var(--ring)}
.rail-foot{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:12px}
.rail-foot .dot{width:7px;height:7px;border-radius:50%;background:var(--fg-3);
  transition:background var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease)}
.rail-foot .dot.live{background:var(--pos);box-shadow:0 0 0 3px rgba(58,167,113,.16)}
.rail-foot .dot.partial{background:var(--brand-cream);box-shadow:0 0 0 3px rgba(var(--ink),.12)}

.shell{display:flex;flex-direction:column;min-width:0;min-height:0}
.topbar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:26px;
  padding:14px 28px 12px}
/* Título y bajada comparten línea de base: apilados costaban 30px verticales en
   TODAS las vistas, y esos 30px en una tabla son dos filas de datos. */
.pagehead{min-width:0;display:flex;align-items:baseline;gap:13px}
.pagehead h1{margin:0;font:500 23px/1.1 var(--font-serif);letter-spacing:-.018em;color:var(--fg-1);flex:0 0 auto}
.pagehead p{margin:0;font:400 12px/1.4 var(--font-sans);color:var(--fg-3);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding-left:14px;border-left:1px solid var(--border-1)}
.topright{display:flex;align-items:center;gap:10px;flex:0 0 auto;min-width:0}
.stamp{font:400 10.5px/1.3 var(--font-sans);color:var(--fg-3);white-space:nowrap}
.icon-btn{display:flex;align-items:center;justify-content:center;gap:7px;
  background:var(--bg-surface);border:1px solid var(--border-1);
  color:var(--fg-2);width:36px;height:36px;border-radius:11px;cursor:pointer;flex:0 0 auto;
  transition:border-color var(--dur-hover) var(--ease),color var(--dur-hover) var(--ease)}
.icon-btn:hover{color:var(--fg-1);border-color:var(--border-3)}
.icon-btn svg{width:17px;height:17px;flex:0 0 auto}
.icon-btn.ghost{width:auto;padding:0 13px;font:500 12px var(--font-sans)}
.pfsel{background:var(--bg-surface);color:var(--fg-1);border:1px solid var(--border-1);
  border-radius:11px;height:36px;padding:0 10px;font-family:var(--font-sans);font-size:12.5px;
  max-width:180px;min-width:0;cursor:pointer;transition:border-color var(--dur-hover) var(--ease)}
.pfsel:hover{border-color:var(--border-3)}

/* ---------- selector de moneda (USD → moneda elegida) ---------- */
.fx-wrap{position:relative;display:flex;align-items:center}
.fxbtn{display:flex;align-items:center;gap:7px}
.fx-flag{width:18px;height:13px;border-radius:2px;object-fit:cover;background:var(--bg-elevated)}
.fx-caret{font-size:9px;color:var(--fg-3)}
.fx-panel{position:absolute;right:0;top:44px;width:270px;max-height:360px;z-index:60;
  background:var(--bg-surface);border:1px solid var(--border-2);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);display:flex;flex-direction:column;overflow:hidden}
.fx-panel.hidden{display:none}
.fx-search{margin:10px;padding:8px 10px;background:var(--bg-sunken);color:var(--fg-1);
  border:1px solid var(--border-2);border-radius:8px;font-family:var(--font-sans);font-size:12.5px}
.fx-search:focus{outline:none;border-color:var(--border-3);box-shadow:var(--ring)}
.fx-list{overflow-y:auto;padding:0 6px 8px}
.fx-item{display:flex;align-items:center;gap:9px;width:100%;padding:7px 9px;background:none;
  border:none;border-radius:8px;color:var(--fg-1);font-size:12.5px;text-align:left}
.fx-item:hover{background:rgba(var(--ink),.055)}
.fx-item.sel{background:var(--accent-soft)}
.fx-item img{width:20px;height:14px;border-radius:2px;object-fit:cover;background:var(--bg-elevated)}
.fx-item .cd{font-family:var(--font-mono);font-weight:600;width:36px}
.fx-item .nm{flex:1;color:var(--fg-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-item .rt{font-family:var(--font-mono);font-size:11px;color:var(--fg-3)}
.fx-nav{padding:9px 12px;border-top:1px solid var(--border-1);font-size:11.5px;color:var(--fg-2);
  font-family:var(--font-mono)}

/* anchos menores: lo accesorio cede antes de romper la fila */
@media (max-width:1400px){ .fx-wrap .stamp{display:none} }
@media (max-width:1180px){ .icon-btn.ghost span{display:none} .icon-btn.ghost{width:36px;padding:0}
  .pfsel{max-width:140px} .pagehead p{display:none} }

/* ---------- layout ---------- */
/* El contenedor que scrollea es .view (no el body): el raíl y el encabezado
   quedan fijos, como en Stockerfy Scan. */
.view{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
  width:100%;padding:8px max(28px,calc((100% - 1340px)/2 + 28px)) 34px;animation:fade .2s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.foot{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:9px 28px;border-top:1px solid var(--border-1);font:500 10px var(--font-sans);
  color:var(--fg-3);letter-spacing:.10em;text-transform:uppercase}
.foot-brand{color:var(--fg-2)}
.grid{display:grid;gap:16px}
.eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--fg-2);font-weight:600}
.section-title{font:500 17px/1.2 var(--font-serif);letter-spacing:-.012em;margin:26px 0 12px;color:var(--fg-1)}
.card{background:var(--bg-surface);border:1px solid var(--border-1);border-radius:var(--radius-lg)}
.empty{background:var(--bg-surface);border:1px solid var(--border-1);color:var(--fg-2);
  font-size:13px;line-height:1.7;padding:34px 24px;text-align:center;border-radius:var(--radius-lg)}

/* ---------- hero NAV + period cards ---------- */
.ov-top{display:grid;grid-template-columns:1.55fr 1fr;gap:16px;align-items:stretch}
.hero{background:var(--bg-surface);
  border:1px solid var(--border-1);border-radius:var(--radius-lg);padding:20px 22px;
  display:flex;flex-direction:column}
.hero .lbl{font:600 10px var(--font-sans);text-transform:uppercase;letter-spacing:.07em;color:var(--fg-2)}
.hero .nav-val{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.hero .day{font-size:16px;font-weight:600}
.hero .pill{font-size:12px;padding:2px 9px;border-radius:var(--radius-pill);background:rgba(var(--ink),.06);
  border:1px solid var(--border-1);margin-left:6px}
/* Sesión extendida: neutra (no hereda el verde/rojo del día), en minúsculas del sistema. */
.hero .pill.sess{color:var(--fg-2);font-weight:500;letter-spacing:.02em;text-transform:lowercase}
/* ---------- KPI row ---------- */
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:16px}
.kpis.k6{grid-template-columns:repeat(6,1fr)}
.kpi{background:var(--bg-surface);border:1px solid var(--border-1);border-radius:var(--radius-lg);padding:13px 16px}
.kpi .l{font:600 9.5px var(--font-sans);text-transform:uppercase;letter-spacing:.11em;color:var(--fg-3)}
.kpi .v{font-size:20px;font-weight:600;font-family:var(--font-mono);margin-top:4px}
.kpi .s{font-size:10.5px;color:var(--fg-3);margin-top:2px}

/* ---------- tables ---------- */
.tbl-wrap{background:var(--bg-surface);border:1px solid var(--border-1);border-radius:var(--radius-lg);
  overflow:hidden;overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font-size:13px}
table.t thead th{background:var(--bg-elevated);color:var(--fg-3);font-size:10px;
  text-transform:uppercase;letter-spacing:.11em;font-weight:600;text-align:right;
  padding:10px 14px;position:sticky;top:0;z-index:2;border-bottom:1px solid var(--border-1)}
table.t thead th.l{text-align:left}
table.t thead th.sortable{cursor:pointer;user-select:none}
table.t thead th.sortable:hover{color:var(--fg-1)}
table.t tbody td{padding:11px 14px;text-align:right;border-bottom:1px solid var(--border-1);
  font-family:var(--font-mono);font-variant-numeric:tabular-nums}
table.t tbody td.l{text-align:left;font-family:var(--font-sans)}
table.t tbody tr:last-child td{border-bottom:none}
table.t tbody tr:hover td{background:rgba(var(--ink),.030)}
.tk{display:flex;align-items:center;gap:9px;font-weight:600}
.tk img{width:24px;height:24px;border-radius:7px;object-fit:contain;background:var(--bg-elevated);
  border:1px solid var(--border-1)}
.wbar{height:5px;background:var(--border-1);border-radius:3px;overflow:hidden;width:90px;margin-top:4px}
.wbar i{display:block;height:100%;background:var(--accent);border-radius:3px}
.livecell::after{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--pos);margin-left:6px;vertical-align:middle}
.stale .livecell::after{background:var(--fg-3)}
table.t td .psub{font-size:10.5px;color:var(--fg-3);margin-top:2px;font-variant-numeric:tabular-nums}

/* ---------- distribution / analysis ---------- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
.barlist{display:flex;flex-direction:column;gap:9px;padding:18px}
.brow{display:flex;flex-direction:column;gap:4px;padding:5px;margin:-5px;border-radius:8px;cursor:default}
.brow:hover,.brow.open{background:var(--bg-elevated)}
.brow.has-m .top,.brow.has-m .track{cursor:pointer}
.brow .top:focus-visible{outline:1px solid var(--border-3);outline-offset:3px;border-radius:4px}
.brow.has-m .top>span:first-child::after{content:"";display:inline-block;width:6px;height:6px;margin:0 0 2px 8px;
  border:solid var(--fg-3);border-width:0 1.5px 1.5px 0;transform:rotate(45deg);transition:transform var(--dur-hover) var(--ease)}
.brow.open .top>span:first-child::after{transform:rotate(-135deg);margin-bottom:-2px}
.brow .top{display:flex;justify-content:space-between;font-size:12.5px}
.brow .top .bcount{color:var(--fg-2);font-family:var(--font-mono);font-size:10.5px;
  background:var(--elevated);border-radius:6px;padding:1px 5px;margin-left:3px}
.brow .track{height:8px;background:var(--border-1);border-radius:4px;overflow:hidden}
.brow .track i{display:block;height:100%;border-radius:4px}
.brow .members{display:none;flex-direction:column;gap:5px;margin-top:3px;padding:8px 10px;
  background:var(--bg-hover);border:1px solid var(--border-1);border-radius:8px}
.brow.open .members{display:flex}
.brow .mrow{display:flex;align-items:center;gap:8px;font-size:12px}
.brow .mlogo{width:16px;height:16px;border-radius:4px;object-fit:contain;background:#fff;flex:0 0 auto}
.brow .mlogo.ph{background:var(--border-2)}
.brow .mtk{color:var(--fg);font-weight:600}
.brow .msub{margin-left:auto;white-space:nowrap}
.brow .mind{color:var(--fg-2);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.leg .lind{color:var(--fg-2);font-style:italic}
/* ---------- métricas (QGVAT) ---------- */
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:10px;
  font-weight:700;letter-spacing:.03em;color:#0d0a0b}
.scorecell{display:inline-flex;align-items:center;justify-content:center;width:34px;height:26px;
  border-radius:6px;font-family:var(--font-mono);font-weight:600;font-size:12.5px}
.ms-pill{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:28px;
  padding:0 8px;border-radius:7px;font-family:var(--font-mono);font-weight:700;font-size:14px}
table.t td.scol{padding:7px 8px}
.det{background:var(--bg-elevated);border:1px solid var(--border-1);border-radius:var(--radius-md);
  padding:0;margin-top:-1px}
.det-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.det-grid .cell{display:flex;justify-content:space-between;padding:9px 14px;
  border-bottom:1px solid var(--border-1);font-size:12px}
.det-grid .cell .k{color:var(--fg-2)}
.det-grid .cell .v{font-family:var(--font-mono)}
/* Desglose por eje de la tab Métricas (espejo del drilldown de Stockerfy Scan).
   auto-fill en vez de un número fijo de columnas: son cinco ejes, y con columnas
   fijas el último quedaba solo en su fila ocupando todo el ancho. */
.bd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;padding:14px}
.bd-block{background:var(--bg-elevated);border:1px solid var(--border-1);border-radius:var(--radius-md);
  overflow:hidden}
.bd-head{display:flex;align-items:center;gap:6px;padding:9px 12px;font-size:11px;
  border-bottom:1px solid var(--border-1);color:var(--fg-2)}
.bd-head b{font-family:var(--font-mono);color:var(--fg-1)}
.bd-ax{margin-left:auto;font-family:var(--font-mono);font-weight:800;font-size:14px}
.bd-block table.t.sub{width:100%}
.bd-block table.t.sub tbody td{font-family:var(--font-mono);text-align:right}
.bd-block table.t.sub tbody td.l{text-align:left;font-family:var(--font-sans)}
.bd-block table.t.sub tbody tr:last-child td{border-bottom:none}
.bd-block tr.muted td{color:var(--fg-3)}
tr.drill{cursor:pointer}
tr.drill:hover td{background:rgba(var(--ink),.045)}
.chev{color:var(--fg-3);font-size:10px;margin-left:6px}

.hist-note{margin:12px 2px 0}
/* ---------- modal Gestionar ---------- */
.modal{position:fixed;inset:0;z-index:900;display:flex;align-items:flex-start;justify-content:center;
  padding:48px 16px;background:rgba(var(--scrim),.7);overflow-y:auto;transition:opacity .18s}
.modal.hidden{opacity:0;pointer-events:none;visibility:hidden;transition:opacity .18s,visibility 0s .18s}
.modal-card{width:100%;max-width:680px;background:var(--bg-surface);border:1px solid var(--border-2);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);overflow:hidden}
.modal-card.wide{max-width:1080px}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;
  border-bottom:1px solid var(--border-2)}
.modal-title{font:500 20px var(--font-serif);letter-spacing:-.015em}
.modal-x{background:none;border:none;color:var(--fg-2);font-size:26px;line-height:1;width:34px;height:34px;
  border-radius:8px}
.modal-x:hover{background:var(--bg-elevated);color:var(--fg-1)}
.modal-tabs{display:flex;gap:4px;padding:10px 16px 0}
.mtab{background:none;border:none;color:var(--fg-2);font-size:13px;font-weight:500;padding:8px 14px;
  border-radius:8px 8px 0 0;border-bottom:2px solid transparent}
.mtab:hover{color:var(--fg)} .mtab.active{color:var(--fg);border-bottom-color:var(--accent)}
.modal-body{padding:18px 20px 22px}
.fld{margin-bottom:13px} .fld>label{display:block;font-size:11px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--fg-2);margin-bottom:5px}
.fld input,.fld select{width:100%;background:var(--bg-sunken);color:var(--fg-1);border:1px solid var(--border-2);
  border-radius:10px;padding:9px 11px;font-family:var(--font-sans);font-size:13.5px}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--border-3);box-shadow:var(--ring)}
.fld input.mono{font-family:var(--font-mono)}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.row4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--fg);cursor:pointer}
.check input{width:auto}
.preview{font-size:12.5px;color:var(--fg-2);font-family:var(--font-mono);margin:4px 0 12px;min-height:16px}
.btn{background:var(--accent);color:var(--brand-cream);border:none;border-radius:10px;padding:10px 18px;font-size:13.5px;
  font-weight:600;transition:filter .15s}
.btn:hover{filter:brightness(1.12)} .btn:disabled{opacity:.45;cursor:not-allowed}
.btn.sec{background:var(--bg-elevated);border:1px solid var(--border-2);color:var(--fg-1)}
.btn.danger{background:transparent;border:1px solid var(--neg);color:var(--neg)}
.btn.danger:hover{background:rgba(214,55,67,.12)}
.gmsg{font-size:12.5px;padding:9px 12px;border-radius:9px;margin-top:12px}
.gmsg.ok{background:rgba(58,167,113,.14);color:var(--pos)} .gmsg.err{background:rgba(214,55,67,.14);color:var(--neg)}
.gmsg.busy{background:var(--elevated);color:var(--fg-2)}
.pf-item{display:flex;align-items:center;gap:10px;padding:11px 13px;background:var(--bg-elevated);
  border:1px solid var(--border-1);border-radius:11px;margin-bottom:8px}
.pf-item .pf-nm{flex:1;font-size:13.5px} .pf-item .pf-sl{font-family:var(--font-mono);font-size:11px;color:var(--fg-3)}
.pf-item .pf-badge{font-size:9px;padding:2px 8px;border-radius:var(--radius-pill);background:var(--accent-soft);
  border:1px solid rgba(145,7,19,.5);color:var(--brand-cream);font-weight:700;letter-spacing:.08em}
.helptext{font-size:12px;color:var(--fg-2);line-height:1.5;margin-bottom:14px}

/* ---------- comparativa ---------- */
.famdot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
td.cmp-chk{width:34px;padding:7px 6px 7px 12px !important}
.cmp-chk input{width:15px;height:15px;accent-color:var(--accent);cursor:pointer}
tr.cmp-off td{opacity:.42}
tr.cmp-off td.cmp-chk{opacity:1}
tr.cmp-active td{background:rgba(145,7,19,.14)}
tr.cmp-active td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
/* carga en vivo al abrir el modal — reusa .loader-bar/.loader-msg del arranque */
.cmp-loading{display:flex;flex-direction:column;align-items:center;gap:14px;padding:90px 0 100px}
tr.cmp-drill{cursor:pointer}
tr.cmp-drill:hover td{background:rgba(var(--ink),.045)}
/* sub-tabla de posiciones (fila expandida) */
tr.detrow>td{background:var(--bg-elevated)}
.subtbl{padding:4px 12px 12px 34px}
table.t.sub{font-size:12px}
table.t.sub thead th{background:transparent;position:static;font-size:9.5px;padding:8px 12px 5px;
  border-bottom:1px solid var(--border-2)}
table.t.sub tbody td{padding:7px 12px;border-bottom:1px solid var(--border-1)}
table.t.sub tbody tr:last-child td{border-bottom:none}
table.t.sub .tk img{width:18px;height:18px;border-radius:4px}
table.t.sub td.since{font-family:var(--font-mono);font-size:11.5px}

/* ══ HISTORIAL ═══════════════════════════════════════════════════════════════
   Conmutador de modo + barra de filtros + tabla de movimientos. El conmutador
   es de MODO, no de navegación: los KPI de arriba valen para los dos, así que
   cambiar de modo cambia CÓMO se ve el mismo período, no qué se mira. Por eso
   es una píldora dentro de la vista y no otra entrada del raíl.
   ══════════════════════════════════════════════════════════════════════════ */
.subtabs{display:inline-flex;gap:3px;margin:26px 0 14px;padding:3px;
  background:var(--bg-surface);border:1px solid var(--border-1);border-radius:12px}
.subtab{display:flex;align-items:center;gap:8px;background:none;border:none;border-radius:9px;
  padding:8px 15px;color:var(--fg-3);font:500 13px var(--font-sans);
  transition:color var(--dur-hover) var(--ease),background var(--dur-hover) var(--ease)}
.subtab:hover{color:var(--fg-1)}
.subtab.active{color:var(--brand-cream);background:var(--bg-elevated)}
.subtab .cnt{font:600 10.5px var(--font-mono);color:var(--fg-3);
  background:rgba(var(--ink),.07);border-radius:var(--radius-pill);padding:2px 7px}
.subtab.active .cnt{color:var(--fg-2);background:rgba(var(--ink),.10)}

/* Barra de refinado: escribir a la izquierda, acotar a la derecha, conteo al final. */
.tb2{display:flex;align-items:center;gap:10px;margin:0 0 14px;flex-wrap:wrap}
.hist-search{flex:0 1 340px;min-width:200px}
.search-wrap{position:relative}
.search{width:100%;height:36px;background:var(--bg-surface);border:1px solid var(--border-1);
  border-radius:11px;color:var(--fg-1);padding:0 13px;font:400 13px var(--font-sans);
  caret-color:var(--accent);outline:none;
  transition:border-color var(--dur-hover) var(--ease),box-shadow var(--dur-base) var(--ease)}
.search:focus{border-color:var(--border-3);box-shadow:var(--ring)}
.search::placeholder{color:var(--fg-3)}
.tb2 .pfsel{max-width:none;height:36px}
.meta-inline{margin-left:auto;font:400 11.5px var(--font-sans);color:var(--fg-3);letter-spacing:.02em}

/* Distintivo de tipo. Agrupa por lo que el movimiento HACE (entrar, salir,
   cobrar), no por su signo de caja — el signo ya va coloreado en el Monto. */
.tybadge{display:inline-block;padding:3px 9px;border-radius:var(--radius-pill);
  font:600 9.5px/1.35 var(--font-sans);letter-spacing:.07em;text-transform:uppercase;
  border:1px solid transparent;white-space:nowrap}
.tybadge.tin{color:var(--c-in);background:rgba(47,127,194,.14);border-color:rgba(47,127,194,.32)}
.tybadge.tout{color:var(--warn);background:rgba(217,156,68,.13);border-color:rgba(217,156,68,.30)}
.tybadge.tdiv{color:var(--pos);background:rgba(58,167,113,.13);border-color:rgba(58,167,113,.30)}
.tybadge.tcash{color:var(--fg-2);background:rgba(var(--ink),.055);border-color:var(--border-1)}
.tybadge.tneu{color:var(--fg-2);background:rgba(var(--ink),.055);border-color:var(--border-1)}
/* Las filas de "Dólares" son el fondeo que financia cada compra, no una posición:
   se atenúan para que el ojo recorra las operaciones reales sin tropezar con ellas. */
tr.txcash td{color:var(--fg-3)}
tr.txcash td.l .tk{font-weight:500;color:var(--fg-2)}
.cashico{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  border-radius:7px;background:var(--bg-elevated);border:1px solid var(--border-1);
  font:600 12px var(--font-mono);color:var(--fg-3);flex:0 0 auto}
table.t td.lbcell{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.hist-more{display:flex;justify-content:center;padding:14px 0 2px}
.hist-more .btn{display:flex;align-items:center;gap:7px;font-size:12.5px;padding:9px 16px}
.hist-note{margin:12px 2px 0;font:400 11.5px/1.65 var(--font-sans);color:var(--fg-3);max-width:760px}
.hist-note b{color:var(--fg-2);font-weight:600}

/* ── Hovercard del gráfico de rendimiento: atribución del día ──────────────
   Reemplaza al tooltip nativo de Plotly (que no admite <img> ni layout propio).
   Flota sobre todo y NO recibe eventos del mouse: si los recibiera se metería
   entre el cursor y la curva y el hover se apagaría solo. */
.hcard{position:fixed;z-index:80;pointer-events:none;min-width:246px;max-width:300px;
  background:var(--bg-elevated);border:1px solid var(--border-2);border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);padding:10px 12px 11px;font-size:12px;line-height:1.42}
.hcard .hc-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  font:600 11px/1 var(--font-mono);letter-spacing:.03em;color:var(--fg-1);
  text-transform:uppercase;margin-bottom:7px}
.hcard .hc-h span{font:500 9.5px/1 var(--font-sans);letter-spacing:.04em;color:var(--fg-3);
  text-transform:none;border:1px solid var(--border-1);border-radius:var(--radius-pill);
  padding:2px 6px;flex:0 0 auto}
.hcard .hc-r,.hcard .hc-day{display:flex;align-items:center;gap:8px}
.hcard .hc-r span,.hcard .hc-day span{color:var(--fg-2);flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hcard .hc-r b,.hcard .hc-day b{font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:12px;font-weight:600;flex:0 0 auto}
.hcard .hc-sep{height:1px;background:var(--border-1);margin:8px -12px 8px}
.hcard .hc-day{margin-bottom:7px}
.hcard .hc-day i{font-style:normal;font-family:var(--font-mono);font-size:10.5px;
  font-variant-numeric:tabular-nums;flex:0 0 auto;opacity:.72;min-width:62px;text-align:right}
/* Fila de mover: logo · ticker · pp · USD. El USD va en columna fija a la derecha
   para que los números queden alineados aunque el ticker cambie de largo. */
.hcard .hc-m{display:flex;align-items:center;gap:7px;padding:2.5px 0}
.hcard .hc-lg{width:16px;height:16px;flex:0 0 auto;display:inline-flex}
.hcard .hc-lg img,.hcard .hc-lg>span{width:16px!important;height:16px!important;
  border-radius:4px!important;object-fit:contain;background:var(--bg-surface)}
.hcard .hc-t{font-family:var(--font-mono);font-size:11px;color:var(--fg-1);
  flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hcard .hc-m b{font-family:var(--font-mono);font-size:11px;font-weight:600;
  font-variant-numeric:tabular-nums;flex:0 0 auto;min-width:62px;text-align:right}
.hcard .hc-m i{font-style:normal;font-family:var(--font-mono);font-size:10.5px;
  font-variant-numeric:tabular-nums;flex:0 0 auto;min-width:62px;text-align:right;opacity:.72}
.hcard .hc-oth .hc-t{color:var(--fg-3)}
.hcard .hc-none{color:var(--fg-3);font-size:11px}

/* Cuadre de caja con Fintual (KPI Efectivo) */
.kpi .fcheck.ok{color:var(--pos)}
.kpi .fcheck.off{color:var(--neg)}

/* Toast (sync automático, avisos) */
.toast{position:fixed;right:22px;bottom:22px;z-index:9999;max-width:380px;padding:11px 16px;
  border-radius:10px;background:var(--bg-elevated);border:1px solid var(--border-2);
  font-size:13px;color:var(--fg-1);box-shadow:0 8px 28px rgba(0,0,0,.45);
  opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s;pointer-events:none}
.toast.show{opacity:1;transform:none}
.toast.ok{border-color:color-mix(in srgb, var(--pos) 55%, transparent)}
.toast.warn{border-color:color-mix(in srgb, var(--warn) 60%, transparent)}
/* Punto de estado mientras corre el sync automático */
.dot.syncing{animation:syncpulse 1.1s ease-in-out infinite}
@keyframes syncpulse{50%{opacity:.25}}

/* Subtítulo de sección (fuente de los datos, advertencias) */
.section-title .st-sub{font:400 11px var(--font-sans);color:var(--fg-3);letter-spacing:0;margin-left:10px}
/* Botón pequeño secundario */
.btn-sm{font:500 12px var(--font-sans);padding:6px 12px;border-radius:8px;cursor:pointer;
  background:var(--bg-elevated);color:var(--fg-1);border:1px solid var(--border-2)}
.btn-sm:hover{background:var(--bg-hover)}
.btn-sm:disabled{opacity:.5;cursor:default}

th.nowrap{white-space:nowrap}
/* Ventanas angostas: las filas de KPI pasan a 3 columnas en vez de apretar cifras */
@media (max-width:1000px){ .kpis,.kpis.k6{grid-template-columns:repeat(3,1fr)} }

/* Ganancias realizadas: una tarjeta por año, la ganancia primero */
.rz{padding:16px 18px;margin-bottom:12px}
.rz-head{display:grid;grid-template-columns:70px 1fr auto;align-items:center;gap:18px}
.rz-year{font:500 22px var(--font-serif);color:var(--fg-2)}
.rz-lbl{font:600 9.5px var(--font-sans);text-transform:uppercase;letter-spacing:.11em;color:var(--fg-3)}
.rz-big{font:600 28px var(--font-mono);margin-top:2px}
.rz-usd{font:500 13px var(--font-mono);opacity:.85}
.rz-side{display:flex;flex-direction:column;gap:4px;font-size:12.5px;text-align:right}
.rz-side b{font-family:var(--font-mono);font-weight:500;margin-left:6px}
.rz-why{font-size:12.5px;line-height:1.6;color:var(--fg-2);margin:12px 0 10px;max-width:880px}
.rz-why b{color:var(--fg-1);font-weight:600}
.rz-why b.up{color:var(--pos)} .rz-why b.down{color:var(--neg)}
.rz-detail{margin-top:10px;max-height:420px;overflow:auto}

/* ══ REDISEÑO 23-sep-2026 ════════════════════════════════════════════════════
   Regla que ordena todo lo de abajo: la CAJA es la excepción. Las cifras van en
   un "libro" (una superficie, columnas separadas por filete), los períodos en
   una cinta bajo el gráfico, y la jerarquía la carga la tipografía. Las cajas
   que quedan (hero, treemap, ficha) son superficies de trabajo, no adornos. */

/* ---------- encabezado de sección ---------- */
.sec-h{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:30px 0 12px;min-width:0}
.sec-h .section-title{margin:0;min-width:0}
.seg{display:inline-flex;gap:2px;padding:3px;background:var(--bg-surface);border:1px solid var(--border-1);
  border-radius:10px;flex:0 0 auto}
.seg-b{background:none;border:none;border-radius:7px;padding:5px 11px;color:var(--fg-3);font:500 12px var(--font-sans);
  transition:color var(--dur-hover) var(--ease),background var(--dur-hover) var(--ease)}
.seg-b:hover{color:var(--fg-1)}
.seg-b.on{background:var(--bg-elevated);color:var(--brand-cream)}
.chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:var(--radius-pill);
  background:var(--accent-soft);border:1px solid rgba(145,7,19,.55);color:var(--brand-cream);font:500 12px var(--font-sans);text-transform:capitalize}
.fsel{height:34px;background:var(--bg-surface);color:var(--fg-1);border:1px solid var(--border-1);border-radius:10px;
  padding:0 10px;font:400 13px var(--font-sans);cursor:pointer}
.empty-in{color:var(--fg-3);font-size:12px;padding:10px 8px}

/* ---------- libro de cifras ---------- */
/* Filetes entre celdas con box-shadow (no con gap sobre un fondo de color): así una
   fila incompleta deja superficie vacía y no un bloque de otro tono. */
.ledger,.msum,.wi-hero,.wi-alts{background:var(--bg-surface)}
.ledger{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-top:16px;
  border:1px solid var(--border-1);border-radius:var(--radius-lg);overflow:hidden}
.lg-c,.msum-c,.wi-q,.wi-alt{box-shadow:1px 0 0 var(--border-1),0 1px 0 var(--border-1)}
.lg-c{padding:14px 18px 15px;min-width:0}
.lg-l{font:600 9.5px/1.3 var(--font-sans);text-transform:uppercase;letter-spacing:.11em;color:var(--fg-3);
  display:flex;align-items:center;gap:6px}
.lg-i{display:inline-flex;align-items:center;justify-content:center;width:12px;height:12px;border-radius:50%;
  border:1px solid var(--border-2);font:600 8px/1 var(--font-serif);font-style:italic;color:var(--fg-3);text-transform:none;letter-spacing:0}
.lg-v{font:600 20px/1.2 var(--font-mono);font-variant-numeric:tabular-nums;margin-top:6px;white-space:nowrap}
.lg-s{font-size:11px;line-height:1.45;color:var(--fg-3);margin-top:4px}
.lg-s .fcheck.ok{color:var(--pos)} .lg-s .fcheck.off{color:var(--neg)}
[data-tip]{cursor:help}
button[data-tip],tr[data-tip],.tm-tile[data-tip]{cursor:pointer}

/* ---------- hero: NAV + gráfico + cinta de períodos ---------- */
.ov-top{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(300px,1fr);gap:16px;align-items:stretch}
.hero{padding:20px 24px 0;overflow:hidden;min-width:0}
.hero-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.hero .lbl{font:600 10px var(--font-sans);text-transform:uppercase;letter-spacing:.1em;color:var(--fg-3)}
.hero .nav-val{font-size:46px;font-weight:600;letter-spacing:-.025em;line-height:1.05;margin:8px 0 6px}
.hero .day{font-size:15px;font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.hero .pill{margin-left:2px}
.hero-vs{min-width:228px;padding:2px 0 0 18px;border-left:1px solid var(--border-1);font-size:12.5px}
.vs-k{font:600 9.5px var(--font-sans);text-transform:uppercase;letter-spacing:.1em;color:var(--fg-3);margin-bottom:8px}
.vs-row{display:flex;align-items:center;gap:8px;color:var(--fg-2);padding:2px 0}
.vs-row b{margin-left:auto;font:600 13px var(--font-mono);padding-left:14px}
.vs-sw{width:16px;height:0;border-top:2.4px solid var(--pos);flex:0 0 auto}
.vs-sw.down{border-top-color:var(--neg)}
.vs-sw.bench{border-top:1.6px dotted var(--brand-cream)}
.vs-diff{display:inline-block;margin-top:9px;padding:3px 9px;border-radius:var(--radius-pill);font:600 11.5px var(--font-mono);
  background:rgba(58,167,113,.12);border:1px solid rgba(58,167,113,.28)}
.vs-diff.down{background:rgba(214,55,67,.12);border-color:rgba(214,55,67,.3)}
#twrchart{width:100%;height:292px;margin-top:10px}
.ribbon{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));margin:6px -24px 0;border-top:1px solid var(--border-1)}
.rb{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:11px 12px 13px 14px;min-width:0;
  background:none;border:none;border-left:1px solid var(--border-1);color:var(--fg-1);text-align:left;position:relative;
  transition:background var(--dur-hover) var(--ease)}
.rb:first-child{border-left:none;padding-left:24px}
.rb:hover{background:rgba(var(--ink),.025)}
.rb.on{background:rgba(var(--ink),.045)}
.rb.on::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--accent)}
.rb-k{font:600 9.5px var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.rb.on .rb-k{color:var(--brand-cream)}
.rb-v{font:600 15px var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.rb-d{font:400 10.5px var(--font-mono);color:var(--fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* ---------- panel del día ---------- */
.today{display:flex;flex-direction:column;padding:18px 14px 10px;min-height:0;min-width:0;overflow:hidden}
.today-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:0 6px}
.today-h b{font:500 19px/1.1 var(--font-serif);letter-spacing:-.012em}
.today-h span{display:block;font-size:11.5px;color:var(--fg-3);margin-top:4px}
.today-t{font:600 20px/1.1 var(--font-mono);text-align:right}
.today-t small{display:block;font:500 11px var(--font-mono);opacity:.8;margin-top:3px}
.today-sub{font-size:11px;color:var(--fg-3);padding:10px 6px 8px;border-bottom:1px solid var(--border-1);margin-bottom:6px}
.today .dvl{flex:1 1 auto;min-height:0;overflow-y:auto;margin-right:-6px;padding-right:4px}
/* En dos columnas la altura la manda el gráfico: el panel del día no la estira
   (con 30+ posiciones la lista quedaba mucho más alta que el hero) y scrollea por dentro. */
@media (min-width:1241px){ .today{contain:size;min-height:360px} }

/* ---------- barras divergentes con logo ---------- */
.dvl{display:flex;flex-direction:column;gap:1px}
.dvl-row{display:grid;grid-template-columns:minmax(78px,108px) minmax(0,1fr) 86px;align-items:center;gap:12px;width:100%;
  padding:6px 8px;background:none;border:none;border-radius:8px;color:var(--fg-1);text-align:left;cursor:pointer;
  transition:background var(--dur-hover) var(--ease)}
.dvl-row:hover{background:rgba(var(--ink),.045)}
.dvl-tight .dvl-row{padding:4px 6px}
.dvl-tk{display:flex;align-items:center;gap:8px;min-width:0;font:600 12.5px var(--font-sans)}
.dvl-tk b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dvl-tk img,.dvl-tk>span:first-child{width:20px!important;height:20px!important;border-radius:6px!important;flex:0 0 auto;
  object-fit:contain;background:var(--bg-elevated);border:1px solid var(--border-1)}
.dvl-ph{width:20px;height:20px}
.dvl-track{position:relative;height:9px}
.dvl-track::before{content:"";position:absolute;left:50%;top:-4px;bottom:-4px;width:1px;background:var(--border-2)}
.dvl-track i{position:absolute;top:0;height:100%;border-radius:2px}
.dvl-track i.pos{background:var(--pos);border-radius:0 3px 3px 0}
.dvl-track i.neg{background:var(--neg);border-radius:3px 0 0 3px}
.dvl-v{font:600 12px var(--font-mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.dvl-foot{display:flex;justify-content:space-between;align-items:center;margin:6px 8px 0;padding:10px 0 2px;
  border-top:1px solid var(--border-1);font-size:12px;color:var(--fg-2)}
.dvl-foot b{font:600 13px var(--font-mono)}
.dvl-gap{text-align:center;font:500 10.5px var(--font-mono);color:var(--fg-3);padding:6px 0;letter-spacing:.1em}
.contrib{padding:10px 8px 12px}

/* ---------- tu plata en pesos: una suma ---------- */
.pesos .eq{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;padding:20px 22px 0;
  background:var(--bg-surface);border:1px solid var(--border-1);border-bottom:none;border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.eq-f{min-width:0}
.eq-v{font:600 22px/1.2 var(--font-mono);font-variant-numeric:tabular-nums;margin-top:6px;white-space:nowrap}
.eq-f.big .eq-v{font-size:28px}
.eq-op{font:300 26px/1 var(--font-sans);color:var(--fg-3);padding-bottom:26px}
.eq-irr{margin-left:auto;padding:0 0 4px 22px;border-left:1px solid var(--border-1);min-width:170px}
.irr-r{display:flex;justify-content:space-between;gap:16px;margin-top:6px;font-size:12px;color:var(--fg-3)}
.irr-r b{font:600 16px var(--font-mono)}
.eq-bar{background:var(--bg-surface);border:1px solid var(--border-1);border-top:none;border-bottom:none;padding:16px 22px 8px}
.eq-track{position:relative;height:8px;border-radius:4px;background:rgba(var(--ink),.04);overflow:hidden}
.eq-track i{position:absolute;top:0;bottom:0}
.eq-key{display:flex;gap:18px;padding:4px 22px 16px;font-size:11px;color:var(--fg-3);background:var(--bg-surface);
  border:1px solid var(--border-1);border-top:none;border-radius:0 0 var(--radius-lg) var(--radius-lg)}
.eq-key span{display:flex;align-items:center;gap:6px}
.eq-key i{display:inline-block;width:12px;height:6px;border-radius:2px}
.eq-a{background:rgba(var(--ink),.30)} .eq-g{background:var(--pos)} .eq-fx{background:var(--info-cool)}
.eq-neg{background:repeating-linear-gradient(135deg,var(--neg) 0 3px,rgba(214,55,67,.35) 3px 6px)}

/* ---------- treemap ---------- */
.tm-card{padding:6px}
.sfc.tm{position:relative}
.tm-tile{position:absolute;display:flex;flex-direction:column;align-items:flex-start;gap:1px;overflow:hidden;
  padding:8px 9px;border:none;border-radius:6px;color:var(--fg-1);text-align:left;font-family:var(--font-sans);
  transition:filter var(--dur-hover) var(--ease),box-shadow var(--dur-hover) var(--ease)}
.tm-tile:hover{filter:brightness(1.18);box-shadow:inset 0 0 0 1px rgba(var(--ink),.35)}
.tm-top{display:flex;align-items:center;gap:6px;min-width:0;max-width:100%}
.tm-top img{width:18px;height:18px;border-radius:5px;background:#fff;object-fit:contain;flex:0 0 auto}
.tm-top b{font-family:var(--font-mono);font-weight:700;letter-spacing:-.01em;line-height:1.1;white-space:nowrap}
.tm-v{font:600 12px var(--font-mono);opacity:.92}
.tm-w{font:400 10.5px var(--font-mono);color:rgba(245,236,217,.62);margin-top:auto}
.tm-xs{font:700 10px var(--font-mono);opacity:.9}
.tm-cash{background:repeating-linear-gradient(135deg,rgba(var(--ink),.06) 0 6px,rgba(var(--ink),.02) 6px 12px);cursor:default}
.tm-cash b{font:600 12px var(--font-sans);color:var(--fg-2)} .tm-cash span{font:500 11px var(--font-mono);color:var(--fg-3)}
.ov-dist{align-items:start}
.ov-dist > section{min-width:0}

/* ---------- próximos eventos ---------- */
/* Agenda en grilla: filas separadas por filete, sin scroll horizontal (con
   `scrollbar-width` Chromium ignora el estilo oscuro de ::-webkit-scrollbar y
   pinta la barra nativa blanca). */
.evrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));background:var(--bg-surface);
  border:1px solid var(--border-1);border-radius:var(--radius-lg);overflow:hidden}
.ev2{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:12px;padding:12px 14px;
  background:none;border:none;color:var(--fg-1);text-align:left;min-width:0;
  box-shadow:1px 0 0 var(--border-1),0 1px 0 var(--border-1)}
.ev2:hover{background:var(--bg-elevated)}
.ev-cal{display:flex;flex-direction:column;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:9px;background:rgba(var(--ink),.04);border:1px solid var(--border-1)}
.ev-cal b{font:600 16px/1 var(--font-mono)}
.ev-cal span{font:600 8.5px var(--font-sans);text-transform:uppercase;letter-spacing:.1em;color:var(--fg-3);margin-top:3px}
.ev2.soon .ev-cal{background:var(--accent-soft);border-color:rgba(145,7,19,.55)}
.ev2.soon .ev-cal span{color:var(--brand-cream)}
.ev-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.ev-t{display:flex;align-items:center;gap:7px;min-width:0;font-size:13px}
.ev-t b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev-t img,.ev-t>span:first-child{width:16px!important;height:16px!important;border-radius:4px!important;flex:0 0 auto}
.ev-k{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--fg-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-k i{width:6px;height:6px;border-radius:50%;flex:0 0 auto;background:var(--fg-3)}
.ev-k.ev-earn i{background:var(--c-in)} .ev-k.ev-div i{background:var(--pos)}
.ev-n{margin-left:auto;padding-left:8px;font:500 10.5px var(--font-mono);color:var(--fg-3);white-space:nowrap;flex:0 0 auto}
.ev2.soon .ev-n{color:var(--brand-cream)}

/* ---------- kit de gráficos + tooltip ---------- */
.sfc{position:relative;width:100%}
.sfc-empty{color:var(--fg-3);font-size:12px;padding:30px 0;text-align:center}
.k-svg{display:block;overflow:visible;touch-action:pan-y}
.k-grid{stroke:rgba(var(--ink),.06);stroke-width:1}
.k-lab{fill:var(--fg-3);font:400 10.5px var(--font-mono)}
.k-ref{stroke:rgba(var(--ink),.5);stroke-width:1;stroke-dasharray:4 4}
.k-lab-ref{fill:var(--fg-2);font-family:var(--font-sans);font-size:10.5px}
.k-shade{fill:rgba(var(--ink),.035)}
.k-lab-shade{fill:var(--fg-3);font-family:var(--font-sans);font-style:italic}
.k-buy{fill:var(--c-in);stroke:var(--bg-surface);stroke-width:1}
.k-sell{fill:var(--warn);stroke:var(--bg-surface);stroke-width:1}
.k-xh{stroke:rgba(var(--ink),.28);stroke-width:1}
.k-dot{fill:var(--fg-1);stroke:var(--bg-surface);stroke-width:2}
.k-xh,.k-dot{opacity:0;transition:opacity .1s}
.sfc:hover .k-xh,.sfc:hover .k-dot{opacity:1}
.k-lab-ref,.k-lab-shade{paint-order:stroke;stroke:var(--bg-surface);stroke-width:4px;stroke-linejoin:round}
.sf-tip{position:fixed;z-index:1200;pointer-events:none;min-width:150px;max-width:290px;padding:9px 11px 10px;
  background:var(--bg-elevated);border:1px solid var(--border-2);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);
  font-size:12px;line-height:1.45;color:var(--fg-1);opacity:0;transform:translateY(3px);transition:opacity .12s,transform .12s}
.sf-tip.show{opacity:1;transform:none}
.tip-h{font:600 10px var(--font-sans);text-transform:uppercase;letter-spacing:.07em;color:var(--fg-3);margin-bottom:4px}
.tip-big{font:600 16px var(--font-mono);margin-bottom:3px}
.tip-r{display:flex;justify-content:space-between;gap:14px;margin-top:2px}
.tip-r span{color:var(--fg-2)} .tip-r b{font-family:var(--font-mono);font-weight:600}
.tip-s{font-size:11px;color:var(--fg-3);margin-top:2px}
.t-buy{color:var(--c-in);font-style:normal} .t-sell{color:var(--warn);font-style:normal}
.spark{display:block}
.spark-ref{stroke:rgba(var(--ink),.32);stroke-width:1;stroke-dasharray:2 2}
.spark-empty{display:block;width:96px;height:26px}

/* ---------- posiciones ---------- */
table.t tr.drill{cursor:pointer}
table.t.pos td.sp-c{padding:4px 10px 4px 4px;text-align:left}
.tk-n{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.tk-n small{font:400 10.5px var(--font-sans);color:var(--fg-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.pl2{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25}
.pl2 small{font-size:10.5px;opacity:.78}
.wcell{display:flex;align-items:center;gap:9px;justify-content:flex-end}
.wcell .wbar{margin-top:0;width:64px}
table.t tfoot td{padding:12px 14px;text-align:right;font:600 13px var(--font-mono);font-variant-numeric:tabular-nums;
  border-top:1px solid var(--border-2);background:var(--bg-elevated)}
table.t tfoot td.l{text-align:left;font:600 10px var(--font-sans);text-transform:uppercase;letter-spacing:.11em;color:var(--fg-3)}
tr.fl-up td.livecell{animation:flup 1.6s var(--ease)} tr.fl-down td.livecell{animation:fldn 1.6s var(--ease)}
@keyframes flup{0%{background:rgba(58,167,113,.32)}100%{background:transparent}}
@keyframes fldn{0%{background:rgba(214,55,67,.32)}100%{background:transparent}}

/* ---------- métricas ---------- */
.msum{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  border:1px solid var(--border-1);border-radius:var(--radius-lg);overflow:hidden}
.msum-c{background:var(--bg-surface);padding:15px 18px 16px;min-width:0}
.msum-c.ms{background:linear-gradient(180deg,rgba(145,7,19,.16),rgba(145,7,19,.04))}
.msum-v{font:600 30px/1.1 var(--font-mono);margin-top:6px}
.msum-b{height:4px;border-radius:2px;background:var(--border-1);margin-top:10px;overflow:hidden}
.msum-b i{display:block;height:100%;border-radius:2px}
.ctx{font-size:8.5px;letter-spacing:.06em;padding:1px 5px;border-radius:var(--radius-pill);border:1px solid var(--border-2);color:var(--fg-3)}
table.t.met thead th{text-align:center;line-height:1.25}
table.t.met thead th.l{text-align:left}
table.t.met thead th small{display:block;font:500 9px var(--font-mono);letter-spacing:.06em;color:var(--fg-3);opacity:.75;text-transform:none;margin-top:2px}
table.t.met tbody td.scol{text-align:center}

/* ---------- historial ---------- */
.act-card{padding:2px 16px 10px;margin:0 0 14px}
.act-card .sec-h{margin:14px 0 6px}
.act .act-hit{fill:transparent;cursor:pointer}
.act .act-b{fill:var(--c-in);opacity:.75} .act .act-s{fill:var(--warn);opacity:.75}
.act .act-m:hover .act-b,.act .act-m:hover .act-s,.act .act-m.on .act-b,.act .act-m.on .act-s{opacity:1}
.act .act-m.on .act-hit{fill:rgba(var(--ink),.05)}
.act .act-m.dim .act-b,.act .act-m.dim .act-s{opacity:.25}
table.t tbody tr.mgroup td{background:transparent;text-align:left;font-family:var(--font-sans);padding:18px 14px 7px;
  border-bottom:1px solid var(--border-2)}
table.t tbody tr.mgroup:hover td{background:transparent}
tr.mgroup b,.mgroup b{font:500 15px var(--font-serif);letter-spacing:-.01em;color:var(--fg-1);text-transform:capitalize}
tr.mgroup span{font-size:11px;color:var(--fg-3);margin-left:12px}
.mgroup i{font-style:normal}
table.t tbody tr:first-child.mgroup td{padding-top:12px}
.subtabs{margin:28px 0 14px}

/* ---------- ¿Y si…? ---------- */
.wi-hero{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border-1);
  border-radius:var(--radius-lg);overflow:hidden}
.wi-q{background:var(--bg-surface);padding:20px 24px 20px}
.wi-q p{font:400 21px/1.35 var(--font-serif);letter-spacing:-.01em;color:var(--fg-2);margin:8px 0 8px}
.wi-q p b{font:600 21px var(--font-mono);letter-spacing:-.01em}
.wi-two{align-items:start}
.wi-two > section{min-width:0}
.wi-legend{display:flex;gap:18px;padding:12px 14px 6px;font-size:11px;color:var(--fg-3)}
.wi-legend span{display:flex;align-items:center;gap:6px}
.wi-legend i{width:12px;height:7px;border-radius:2px}
.wi-legend i.pos{background:var(--pos)} .wi-legend i.neg{background:var(--neg)}
.dvl-wi{padding:2px 6px 8px}
.dvl-wi .dvl-row{grid-template-columns:minmax(78px,108px) minmax(0,1fr) 96px}
.dvl-wi .dvl-v{line-height:1.15}
.dvl-wi .dvl-v small,.sale-d small{display:block;font:500 10.5px var(--font-mono);opacity:.75;margin-top:1px}
.sale-d{text-align:right;line-height:1.15}
.wi-legend .wi-unit{margin-left:auto;color:var(--fg-3);opacity:.8}
.sales{padding:4px 8px 10px}
.sales-h{font:600 9.5px var(--font-sans);text-transform:uppercase;letter-spacing:.11em;color:var(--fg-3);padding:14px 8px 6px}
.sale{display:grid;grid-template-columns:92px minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;padding:7px 8px;
  background:none;border:none;border-radius:8px;color:var(--fg-1);text-align:left;font-size:12.5px}
.sale:hover{background:rgba(var(--ink),.045)}
.sale .tk b{font-weight:600}
.sale .muted{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sale-d{font:600 13px var(--font-mono)}
.sim-card{padding:18px 20px 14px}
.sim-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;font-size:14px;color:var(--fg-2)}
.sim-ctl label{display:flex;align-items:center;gap:8px}
.sim-amt{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-mono);color:var(--fg-1)}
.sim-amt input{width:92px;height:34px;background:var(--bg-sunken);border:1px solid var(--border-2);border-radius:9px;
  padding:0 9px;color:var(--fg-1);font:500 14px var(--font-mono)}
.sim-date b{color:var(--fg-1);font-family:var(--font-mono);min-width:82px}
.sim-date input{width:240px;accent-color:var(--accent)}
.sim-out{display:flex;align-items:flex-end;gap:32px;flex-wrap:wrap;margin:16px 0 10px}
.sim-real{margin-left:auto;max-width:340px;font-size:12px;line-height:1.5;color:var(--fg-3)}
.sim-real b{color:var(--fg-2)}

/* ---------- análisis ---------- */
.stack{display:flex;gap:2px;height:12px;margin:18px 18px 4px;border-radius:6px;overflow:hidden}
.stack i{display:block;height:100%}
.brow .mrow{cursor:pointer;border-radius:6px;padding:2px 4px;margin:0 -4px}
.brow .mrow:hover{background:rgba(var(--ink),.05)}

/* ---------- ficha de posición ---------- */
.drawer{position:fixed;inset:0;z-index:850}
.drawer-scrim{position:absolute;inset:0;background:rgba(var(--scrim),.55);opacity:0;transition:opacity .2s}
.drawer.open .drawer-scrim{opacity:1}
.drawer-card{position:absolute;top:0;right:0;bottom:0;width:min(580px,100%);overflow-y:auto;overscroll-behavior:contain;
  background:var(--bg-surface);border-left:1px solid var(--border-2);box-shadow:-30px 0 80px -30px rgba(0,0,0,.8);
  padding:20px 24px 34px;opacity:0;transform:translateX(26px);transition:opacity .2s var(--ease),transform .22s var(--ease)}
.drawer.open .drawer-card{opacity:1;transform:none}
.dr-head{display:flex;align-items:center;gap:13px}
.dr-head>img,.dr-head>span:first-child{width:42px!important;height:42px!important;border-radius:11px!important;
  object-fit:contain;background:var(--bg-elevated);border:1px solid var(--border-1)}
.dr-id{display:flex;flex-direction:column;min-width:0}
.dr-id b{font:700 25px/1.1 var(--font-mono);letter-spacing:-.02em}
.dr-id span{font-size:12px;color:var(--fg-3);margin-top:3px}
.dr-x{margin-left:auto;display:flex;align-items:center;justify-content:center}
.modal-x svg{width:18px;height:18px}
.dr-ledger{grid-template-columns:repeat(2,minmax(0,1fr))}
.dr-ledger .lg-v{font-size:18px}
.dr-sec{margin-top:24px}
.dr-sh{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;
  font:600 9.5px var(--font-sans);text-transform:uppercase;letter-spacing:.11em;color:var(--fg-3);margin-bottom:10px}
.dr-key{font:400 11px var(--font-sans);text-transform:none;letter-spacing:0;display:flex;align-items:center;gap:6px}
.dr-key i{font-style:normal}
.k-refk{display:inline-block;width:14px;border-top:1px dashed rgba(var(--ink),.6)}
.dr-warn{font-size:11.5px;color:var(--warn);margin-top:6px}
.dr-scores{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.dsc{display:flex;flex-direction:column;gap:3px;min-width:0}
.dsc span{font-size:10.5px;color:var(--fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dsc b{font:600 19px var(--font-mono)}
.dsc i{display:block;height:3px;border-radius:2px;background:var(--border-1);overflow:hidden}
.dsc u{display:block;height:100%}
.wi-alts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid var(--border-1);border-radius:var(--radius-md);overflow:hidden}
.wi-alt{background:var(--bg-elevated);padding:12px 13px}
.wi-alt .eq-v{font-size:17px}
.wi-alt .lg-s b{font-family:var(--font-mono)}
.wi-sells{margin-top:12px;width:100%}
.dr-tx{display:flex;flex-direction:column}
.dtx{display:grid;grid-template-columns:74px 104px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 0;
  border-bottom:1px solid var(--border-1);font-size:12px}
.dtx:last-child{border-bottom:none}
.dtx .tybadge{justify-self:start}
.bl2 .barlist{display:grid;grid-template-columns:1fr 1fr;column-gap:36px;row-gap:9px}
.dtx .mono{color:var(--fg-2);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dtx b.mono{color:inherit;font-size:12.5px}
.dtx b.up{color:var(--pos)} .dtx b.down{color:var(--neg)}

/* ---------- selector de portafolio + modo privado ---------- */
.pf-wrap{position:relative}
.pfbtn{display:flex;align-items:center;gap:8px;height:36px;padding:0 11px 0 12px;background:var(--bg-surface);
  border:1px solid var(--border-1);border-radius:11px;color:var(--fg-1);font:500 12.5px var(--font-sans);max-width:200px;
  transition:border-color var(--dur-hover) var(--ease)}
.pfbtn:hover{border-color:var(--border-3)}
.pfdot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 3px rgba(var(--ink),.05)}
.pfname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pfbtn .caret{width:14px;height:14px;color:var(--fg-3);flex:0 0 auto}
.pf-panel{position:absolute;right:0;top:44px;width:250px;max-height:430px;overflow-y:auto;z-index:60;padding:6px;
  background:var(--bg-surface);border:1px solid var(--border-2);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
.pf-g{font:600 9.5px var(--font-sans);text-transform:uppercase;letter-spacing:.11em;color:var(--fg-3);padding:10px 10px 4px}
.pf-opt{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;background:none;border:none;border-radius:8px;
  color:var(--fg-1);font:400 13px var(--font-sans);text-align:left}
.pf-opt:hover{background:rgba(var(--ink),.05)}
.pf-opt.on{background:rgba(var(--ink),.07)}
.pf-opt svg{width:14px;height:14px;margin-left:auto;color:var(--brand-cream)}
#privbtn .eye-off{display:none}
body.priv #privbtn .eye-on{display:none}
body.priv #privbtn .eye-off{display:block}
body.priv #privbtn{color:var(--brand-cream);border-color:rgba(145,7,19,.6);background:var(--accent-soft)}
.top-brand{display:none}

/* ---------- anchos intermedios ---------- */
@media (max-width:1240px){
  .ov-top{grid-template-columns:minmax(0,1fr)}
  .today{max-height:440px}
  .msum{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1100px){
  .ribbon{grid-template-columns:repeat(4,minmax(0,1fr))}
  .rb:nth-child(5){border-left:none;padding-left:24px}
  .rb:nth-child(n+5){border-top:1px solid var(--border-1)}
  .two{grid-template-columns:minmax(0,1fr)}
  .pesos .eq-irr{margin-left:0;border-left:none;padding-left:0;width:100%;display:flex;gap:26px;align-items:baseline}
  .pesos .eq-irr .irr-r{margin-top:0}
  table.t.pos td.sp-c,table.t.pos th:nth-child(2){display:none}
}

/* ══ TELÉFONO (≤ 760 px) ════════════════════════════════════════════════════
   Mismo corte y patrón que Stockerfy Scan: el raíl baja a una barra inferior
   (donde llega el pulgar), el encabezado se compacta y las tablas anchas se
   vuelven listas de una fila por acción. */
@media (max-width:760px){
  html,body{height:100%}
  #app{grid-template-columns:minmax(0,1fr);height:100vh;height:100dvh}
  .rail{position:fixed;left:0;right:0;bottom:0;z-index:70;height:calc(60px + env(safe-area-inset-bottom));
    flex-direction:row;align-items:stretch;padding:0 4px env(safe-area-inset-bottom);border-right:none;
    border-top:1px solid var(--border-2);background:rgba(var(--paper),.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  .rail-brand,.rail-foot{display:none}
  .rail-nav{flex-direction:row;margin:0;padding:0;gap:0;width:100%}
  .nav-item{flex:1 1 0;justify-content:center;gap:4px;padding:8px 0 6px;font-size:10.5px}
  .nav-item svg{width:22px;height:22px}
  .nav-item.active{background:none}
  .nav-item.active::before{left:50%;top:0;transform:translateX(-50%);width:28px;height:2px;border-radius:0 0 2px 2px}
  .shell{padding-bottom:calc(60px + env(safe-area-inset-bottom))}
  .topbar{gap:10px;padding:calc(10px + env(safe-area-inset-top)) 14px 8px}
  .top-brand{display:block;width:30px;height:30px;border-radius:9px;flex:0 0 auto}
  .pagehead{flex:1 1 auto;min-width:0}
  .pagehead h1{font-size:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pagehead p{display:none}
  .topright{gap:6px}
  .icon-btn,.pfbtn{width:36px;height:36px}
  .icon-btn.ghost{width:36px;padding:0}
  .icon-btn.ghost span,.fx-wrap .stamp,.fx-caret{display:none}
  .pfbtn{padding:0;justify-content:center;gap:0}
  .pfname,.pfbtn .caret{display:none}
  .pfdot{width:10px;height:10px}
  .pf-panel,.fx-panel{position:fixed;left:12px;right:12px;top:calc(56px + env(safe-area-inset-top));width:auto}
  .view{padding:4px 14px 22px;-webkit-overflow-scrolling:touch}
  .foot{display:none}
  .search,.fld input,.fld select,.sim-amt input,.fx-search{font-size:16px}
  .toast{left:14px;right:14px;bottom:calc(72px + env(safe-area-inset-bottom));max-width:none}

  .sec-h{margin:24px 0 10px}
  .section-title{font-size:16px}
  .section-title .st-sub{display:block;margin:3px 0 0}

  /* Overview */
  .hero{padding:16px 16px 0}
  .hero-head{flex-direction:column;gap:12px}
  .hero .nav-val{font-size:36px}
  .hero-vs{min-width:0;width:100%;padding:10px 0 0;border-left:none;border-top:1px solid var(--border-1)}
  .vs-k{margin-bottom:4px}
  #twrchart{height:220px}
  .ribbon{margin:4px -16px 0}
  .rb{padding:10px 8px 11px 12px}
  .rb:first-child,.rb:nth-child(5){padding-left:16px}
  .rb-v{font-size:13.5px}
  .today{max-height:none;padding:16px 10px 8px}
  .today .dvl{overflow:visible}
  .dvl-row{grid-template-columns:minmax(70px,86px) minmax(0,1fr) 74px;gap:9px}
  .dvl-wi .dvl-row{grid-template-columns:minmax(70px,86px) minmax(0,1fr) 82px}
  .wi-legend{flex-wrap:wrap;row-gap:4px} .wi-legend .wi-unit{margin-left:0;flex-basis:100%}
  .ledger{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lg-c{padding:12px 13px 13px}
  .lg-v{font-size:17px;white-space:normal;word-break:break-word}
  .pesos .eq{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px;padding:16px 16px 0}
  .eq-op{display:none}
  .eq-v{font-size:18px}
  .eq-f.big{grid-column:1/-1;padding-top:10px;border-top:1px solid var(--border-1)}
  .eq-f.big .eq-v{font-size:26px}
  .pesos .eq-irr{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr 1fr;gap:4px 14px;align-items:baseline;
    padding:10px 0 2px;border-top:1px solid var(--border-1)}
  .pesos .eq-irr .irr-r{justify-content:flex-start;gap:8px}
  .bl2 .barlist{grid-template-columns:1fr}
  #cmp-body table.t th:nth-child(3),#cmp-body table.t tr.cmp-drill>td:nth-child(3),
  #cmp-body table.t th:nth-child(6),#cmp-body table.t tr.cmp-drill>td:nth-child(6){display:none}
  #cmp-body .kpi{padding:11px 12px} #cmp-body .kpi .v{font-size:16px}
  .eq-bar{padding:14px 16px 8px}
  .eq-key{padding:4px 16px 14px;flex-wrap:wrap}
  .evrow{grid-template-columns:1fr}
  .ev2{padding:10px 12px}

  /* listas (posiciones, historial, métricas) */
  .m-bar{display:flex;align-items:center;gap:10px;margin:4px 0 10px}
  .m-bar .meta-inline{margin-left:auto;text-align:right}
  .plist{display:flex;flex-direction:column;gap:1px;background:var(--border-1);border:1px solid var(--border-1);
    border-radius:var(--radius-lg);overflow:hidden}
  .prow,.hrow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;width:100%;
    padding:11px 12px;background:var(--bg-surface);border:none;color:var(--fg-1);text-align:left;font-family:var(--font-sans)}
  .hrow{grid-template-columns:minmax(0,1fr) auto}
  .prow:active,.hrow:active{background:var(--bg-elevated)}
  .prow-id{display:flex;align-items:center;gap:11px;min-width:0}
  .prow-id>img,.prow-id>span:first-child:not(:only-child){width:30px!important;height:30px!important;border-radius:8px!important;
    flex:0 0 auto;object-fit:contain;background:var(--bg-elevated);border:1px solid var(--border-1)}
  .prow-id .cashico{width:30px;height:30px}
  .prow-id b{font:600 14px var(--font-sans);display:block}
  .prow-id small{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--fg-3);margin-top:2px;white-space:nowrap}
  .prow-id small .tybadge{padding:1px 6px;font-size:8.5px}
  .prow .spark{width:72px}
  .prow-v{text-align:right;display:flex;flex-direction:column;align-items:flex-end}
  .prow-v b{font:600 14px var(--font-mono)}
  .prow-v small{font:500 11px var(--font-mono);color:var(--fg-3);margin-top:2px;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .prow-v small.up{color:var(--pos)} .prow-v small.down{color:var(--neg)}
  .plist .mgroup{display:flex;justify-content:space-between;align-items:baseline;padding:14px 12px 6px;background:var(--bg-base);font-size:11px;color:var(--fg-3)}
  .plist .mgroup b{font-size:14px}
  .mcard{background:var(--bg-surface);padding:10px 12px 12px}
  .mcard-h{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;color:var(--fg-1);padding:0}
  .mcard-ax{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:10px}
  .mcard-ax span{display:flex;flex-direction:column;align-items:center;gap:3px}
  .mcard-ax small{font:600 9px var(--font-mono);color:var(--fg-3)}
  .mcard-ax .scorecell{width:100%}
  .mcard-bd .bd-grid{grid-template-columns:1fr;padding:12px 0 0;gap:10px}
  .msum{grid-template-columns:repeat(3,minmax(0,1fr))}
  .msum-c{padding:12px 12px 13px}
  .msum-v{font-size:22px}
  .msum .ctx{display:none}
  .msum .lg-l{min-height:26px;align-items:flex-start}

  /* historial */
  .tb2{gap:8px}
  .hist-search{flex:1 1 100%;min-width:0}
  .tb2 .pfsel{flex:1 1 0;min-width:0;font-size:13px}
  .tb2 .meta-inline{width:100%;margin-left:0}
  .subtabs{display:flex;width:100%;margin:22px 0 12px}
  .subtab{flex:1 1 0;justify-content:center;padding:8px 6px;font-size:12.5px}
  .act-card{padding:6px 10px 8px}
  .wi-hero{grid-template-columns:1fr}
  .wi-q{padding:16px 16px}
  .wi-q p,.wi-q p b{font-size:18px}
  .sale{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t d" "m d";row-gap:2px}
  .sale .tk{grid-area:t} .sale .muted{grid-area:m} .sale-d{grid-area:d}
  .sim-card{padding:14px 14px 10px}
  .sim-ctl{flex-direction:column;align-items:stretch;gap:10px}
  .sim-ctl label{justify-content:space-between}
  .sim-date{flex-wrap:wrap}
  .sim-date input{width:100%}
  .sim-out{gap:22px}
  .sim-real{margin-left:0}
  .rz-head{grid-template-columns:1fr;gap:8px}
  .rz-side{text-align:left}
  #geomap{height:220px!important}

  /* ficha: hoja inferior */
  .drawer-card{top:auto;left:0;right:0;width:100%;max-height:calc(100dvh - 40px);border-left:none;border-top:1px solid var(--border-2);
    border-radius:20px 20px 0 0;padding:10px 16px calc(28px + env(safe-area-inset-bottom));transform:translateY(40px)}
  .drawer-card::before{content:"";display:block;width:40px;height:4px;border-radius:2px;background:var(--border-3);margin:0 auto 14px}
  .dr-scores{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wi-alts{grid-template-columns:1fr}
  .dtx{grid-template-columns:64px auto minmax(0,1fr) auto;gap:8px}
  .dtx .mono:not(b){display:none}

  /* modales a pantalla completa */
  .modal{padding:0}
  .modal-card,.modal-card.wide{border-radius:0;min-height:100%;border:none}
  .row4{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ══ Ronda 2 (23-sep-2026): plan, alertas, diversificación, comparación ══ */
/* plan en el gráfico de la ficha */
.k-pl{stroke-width:1.2;stroke-dasharray:6 4}
.k-pl.tgt{stroke:rgba(58,167,113,.75)} .k-pl.stp{stroke:rgba(214,55,67,.75)}
.k-lab-pl{font-family:var(--font-sans);font-size:10.5px;paint-order:stroke;stroke:var(--bg-surface);stroke-width:4px}
.k-lab-pl.tgt{fill:var(--pos)} .k-lab-pl.stp{fill:var(--neg)}

/* alertas del Overview */
.alerts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.alert{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 13px 0 10px;border-radius:var(--radius-pill);
  background:var(--bg-surface);border:1px solid var(--border-1);color:var(--fg-1);font:500 12.5px var(--font-sans)}
.alert i{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;
  font:700 10px var(--font-mono);font-style:normal;background:rgba(var(--ink),.08);color:var(--fg-2)}
.alert.up{border-color:rgba(58,167,113,.4)} .alert.up i{background:rgba(58,167,113,.18);color:var(--pos)}
.alert.down{border-color:rgba(214,55,67,.45)} .alert.down i{background:rgba(214,55,67,.18);color:var(--neg)}
.alert.warn{border-color:rgba(217,156,68,.45)} .alert.warn i{background:rgba(217,156,68,.18);color:var(--warn)}
.alert:hover{background:var(--bg-elevated)}

/* columna Plan: regla stop → meta */
table.t td.pl-c{text-align:left;padding-top:6px;padding-bottom:6px}
.planbar{position:relative;display:inline-block;width:84px;height:16px;vertical-align:middle}
.planbar i{position:absolute;display:block}
.pb-track{left:0;right:0;top:7px;height:2px;background:rgba(var(--ink),.12);border-radius:1px}
.pb-stop{left:0;top:4px;width:2px;height:8px;background:var(--neg);border-radius:1px}
.pb-tgt{top:4px;width:2px;height:8px;margin-left:-1px;background:var(--pos);border-radius:1px}
.pb-cost{top:3px;width:1px;height:10px;background:rgba(var(--ink),.55);margin-left:-.5px}
.pb-px{top:4px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--fg-1);box-shadow:0 0 0 2px var(--bg-surface)}
.pb-px.down{background:var(--neg)} .pb-px.up{background:var(--pos)} .pb-px.warn{background:var(--warn)}
.plan-none{font:500 11px var(--font-sans);border-bottom:1px dashed var(--border-2)}
.pdot{display:inline-block;width:7px;height:7px;border-radius:50%;vertical-align:middle;margin-left:3px}
.pdot.down{background:var(--neg)} .pdot.up{background:var(--pos)} .pdot.warn{background:var(--warn)}

/* plan en la ficha */
.plan-read{display:flex;flex-direction:column;gap:10px}
.plan-nums{display:flex;flex-wrap:wrap;gap:14px 28px}
.plan-nums .pn-hit b{text-decoration:line-through;text-decoration-thickness:1px;opacity:.6}
.tp-list{display:flex;flex-direction:column;gap:6px}
.tp-row{display:grid;grid-template-columns:18px 1fr 88px 32px;gap:8px;align-items:stretch}
.tp-i{align-self:center;font:500 11px var(--font-mono);color:var(--fg-3);text-align:right}
.tp-row input{width:100%;min-width:0}
.tp-pct{position:relative;display:block}
.tp-pct input{padding-right:22px}
.tp-pct i{position:absolute;right:9px;top:50%;transform:translateY(-50%);font:normal 11.5px var(--font-mono);color:var(--fg-3);pointer-events:none}
.tp-x{height:100%;min-height:32px;border:1px solid var(--border-1);background:transparent;color:var(--fg-3);border-radius:6px;cursor:pointer;font-size:15px;line-height:1}
.tp-x:hover{color:var(--neg);border-color:var(--neg)}
.tp-add{margin-top:8px;align-self:flex-start;background:none;border:1px dashed var(--border-1);color:var(--brand-cream);font:500 12px var(--font-sans);padding:6px 10px;border-radius:6px;cursor:pointer}
.tp-add:hover{border-color:var(--brand-cream)}
.plan-nums>div{display:flex;flex-direction:column;gap:3px}
.plan-nums b{font:600 18px var(--font-mono)}
.plan-nums span:not(.lg-l){font:500 11.5px var(--font-mono)}
.plan-read p{margin:0;font-size:13px;line-height:1.55;color:var(--fg-2)}
.plan-read p .lg-l{display:block;margin-bottom:3px}
.plan-empty{margin:0;font-size:12.5px;color:var(--fg-3);line-height:1.5}
.plan-edit{margin-top:12px;border-top:1px solid var(--border-1);padding-top:10px}
.plan-edit summary{cursor:pointer;font:500 12.5px var(--font-sans);color:var(--brand-cream);padding:4px 0 10px;list-style:none}
.plan-edit summary::before{content:"+ ";color:var(--fg-3)}
.plan-edit[open] summary::before{content:"− "}
.fld textarea{width:100%;background:var(--bg-sunken);color:var(--fg-1);border:1px solid var(--border-2);border-radius:10px;
  padding:9px 11px;font:400 13px/1.45 var(--font-sans);resize:vertical}
.fld textarea:focus{outline:none;border-color:var(--border-3);box-shadow:var(--ring)}
.gmsg-in{font-size:12px;color:var(--fg-3);margin-left:10px}
.gmsg-in.err{color:var(--neg)}

/* comparación del gráfico */
.vs-seg{margin-top:12px}
.vs-seg .seg-b{padding:4px 9px;font-size:11.5px}
.vs-sw.bench.peer{border-top-color:var(--c-in)}
.vs-note{font-size:11px;color:var(--fg-3);margin-top:6px;max-width:250px;line-height:1.4}
.vs-note:empty{display:none}

/* diversificación real */
.lg-of{font:500 12px var(--font-sans);color:var(--fg-3)}
.corr-two{margin-top:16px;align-items:start}
.corr-card{padding:14px 14px 12px}
.corr-v{font-size:9.5px;fill:rgba(245,236,217,.85)}
.corr-xl{font-size:10px}
.corr-key{display:flex;align-items:center;gap:8px;font:500 10.5px var(--font-mono);color:var(--fg-3);margin:6px 0 0 52px;flex-wrap:wrap}
.corr-key i{display:block;width:120px;height:6px;border-radius:3px;
  background:linear-gradient(90deg,rgba(47,127,194,.88),rgba(var(--ink),.06) 50%,rgba(214,55,67,.88))}
.corr-key small{font:400 10.5px var(--font-sans);width:100%}
.corr-side{padding:4px 10px 12px}
.cpair{display:flex;justify-content:space-between;width:100%;padding:8px 8px;background:none;border:none;border-radius:8px;
  color:var(--fg-1);font:500 13px var(--font-sans)}
.cpair:hover{background:rgba(var(--ink),.045)}
.cpair b{font:600 13px var(--font-mono)}
@media (max-width:1100px){ table.t.pos td.pl-c,table.t.pos th:nth-last-child(2){display:none} }
@media (max-width:760px){
  .alerts{gap:6px}
  .alert{height:30px;font-size:12px}
  .corr-key{margin-left:0}
  .plan-nums{gap:20px}
}
.splitnote{display:inline-block;margin-left:5px;padding:0 5px;border-radius:4px;font:600 9.5px var(--font-mono);
  color:var(--warn);background:rgba(217,156,68,.12);border:1px solid rgba(217,156,68,.3);vertical-align:1px}

/* ── Mover a Stockerfy web (16-oct-2026) ── */
.hist-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.hist-bar .subtabs{margin-bottom:14px}
.xweb-btn{display:inline-flex;align-items:center;gap:7px;margin:26px 0 14px}
.modal-card.xweb{max-width:560px;margin-top:12vh}
.xweb-ok{margin:0 0 14px;font-size:15px;color:var(--fg-1)}
.xweb-ok b{font-family:var(--font-mono)}
.xweb-file{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--border-2);
  border-radius:var(--radius-md);background:var(--bg-sunken);font-size:12.5px;margin-bottom:16px;word-break:break-all}
.xweb-pasos{margin:0 0 14px;padding-left:20px;display:grid;gap:12px;color:var(--fg-2);font-size:13.5px;line-height:1.5}
.xweb-pasos b{color:var(--fg-1)}
.xweb-pasos .btn-sm{margin-top:8px}
.btn-sm.pri{background:var(--brand-cream);color:#1d1517;border-color:var(--brand-cream)}
.hist-note.warn{color:var(--warn)}
.xweb-sel{display:grid;gap:6px}
.xweb-sel label{display:flex;align-items:center;gap:9px;padding:9px 12px;border:1px solid var(--border-2);border-radius:var(--radius-md);cursor:pointer}
.xweb-sel label:has(input:checked){border-color:var(--brand-cream)}

/* ══ Tema claro · 24-oct-2026 ══ (mismos valores que hawk/app.css: las dos apps son una familia) */
html[data-tema="claro"]{
  --brand-burgundy-soft:rgba(145,7,19,.09); --brand-cream:#1c120e;
  --bg-base:#f6f1e7; --bg-sunken:#ede5d6; --bg-surface:#fffcf6; --bg-elevated:#ffffff; --bg-hover:#efe6d6;
  --fg-1:#1f1612; --fg-2:#574841; --fg-3:#6f5f55;
  --ink:52,30,22; --paper:246,241,231; --scrim:44,28,22; --c-in:#1d68ab;
  --border-1:rgba(var(--ink),.10); --border-2:rgba(var(--ink),.17); --border-3:rgba(var(--ink),.30);
  --pos:#18804d; --neg:#c0222f; --warn:#a8680c; --info:#7a2fc4; --info-cool:#1d68ab;
  --accent-fg:#910713; --on-accent:#f5e5ba;
  --shadow-lg:0 24px 60px -24px rgba(60,35,25,.32),0 2px 6px rgba(60,35,25,.06);
  --ring:0 0 0 3px rgba(145,7,19,.16);
}
html[data-tema="claro"] ::selection{background:var(--brand-burgundy);color:var(--on-accent)}
html[data-tema="claro"] .btn{color:var(--on-accent)}
html[data-tema="claro"] .btn-sm.pri{color:#fffcf6}
html[data-tema="claro"] .rail{background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 260px),var(--bg-sunken)}
html[data-tema="claro"] .bg-grain{opacity:.07;mix-blend-mode:multiply}
html[data-tema="claro"] .bg-halo{background:radial-gradient(1400px 760px at 22% -24%, rgba(255,255,255,.7), transparent 68%)}
html[data-tema="claro"] .loader-mark,html[data-tema="claro"] .rail-mark{filter:drop-shadow(0 3px 10px rgba(60,35,25,.18))}