:root{
  --bg-0:#14263a; --bg-1:#1d3552; --bg-2:#22405f;
  --ink:#e6eef7; --ink-2:#b7cbdd; --mute:#6f8ba6; --faint:#4a627b;
  --line:rgba(255,255,255,.13); --edge:rgba(255,255,255,.30);
  --card:rgba(9,20,33,.42); --card-edge:rgba(255,255,255,.09);
  --up:#3fd39a; --down:#ef6b6b; --pnl:#a78bfa; --mint:#9fdcd4;
  --gap:22px; --r:13px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  background:linear-gradient(160deg,var(--bg-0) 0%,var(--bg-1) 55%,var(--bg-2) 100%) fixed;
  color:var(--ink);
  font:15px/1.45 ui-sans-serif,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;color:inherit;font-variant-numeric:tabular-nums}
[hidden]{display:none!important}

/* ── barra superior (cliente y analista) ────────────────── */
.bar{border-bottom:1px solid rgba(255,255,255,.08);background:rgba(9,20,33,.3)}
/* franja administrativa, visualmente separada de lo que sí ve el cliente */
.bar-adm{padding:11px 22px 12px;background:rgba(4,11,20,.4);border-bottom:1px solid rgba(255,255,255,.07)}
.adm-row{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
/* la descripción de la estrategia va en su propio renglón, debajo de los selectores */
.bar-adm .scope{padding:9px 0 0;margin:0}
.asclient{margin-left:auto;align-self:center;color:var(--mint);text-decoration:none;font-size:12.5px;
  border:1px solid rgba(159,220,212,.35);border-radius:10px;padding:7px 13px;white-space:nowrap}
.asclient:hover{background:rgba(159,220,212,.1)}
.bar-top{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding:13px 22px}
.seg{display:inline-flex;padding:3px;border:1px solid var(--edge);border-radius:var(--r);background:rgba(255,255,255,.04)}
.seg-btn{border:0;background:transparent;color:var(--ink-2);padding:7px 22px;border-radius:10px;cursor:pointer}
.seg-btn.is-on{background:rgba(174,201,226,.85);color:#16283a;border:1px solid rgba(255,255,255,.75);font-weight:600}

.who{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.who b{font-size:14px;font-weight:600}
.who span{font-size:11.5px;color:var(--mute);overflow:hidden;text-overflow:ellipsis}

.when-pick{display:flex;flex-direction:column;gap:5px}
.when-pick select{background:rgba(255,255,255,.05);border:1px solid var(--card-edge);
  border-radius:10px;padding:6px 11px;min-width:118px;outline:none;font-weight:600}
.hi{display:flex;gap:10px;flex-wrap:wrap}
.btn-pdf{align-self:center;white-space:nowrap;margin-left:auto}
.hi-card{display:flex;align-items:center;gap:12px;background:var(--card);
  border:1px solid var(--card-edge);border-radius:14px;padding:8px 14px}
.hi-card h4{margin:0;font-size:10px;letter-spacing:.9px;text-transform:uppercase;color:var(--mute);font-weight:600}
.hi-card .v{font-size:19px;font-weight:700;letter-spacing:-.4px}
.hi-card .v.up{color:var(--up)} .hi-card .v.dn{color:var(--down)}
.hi-card .s{font-size:11px;color:var(--mute)}
.hi-ring{width:44px;height:44px;flex:none}

.bar-fields{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.fld{display:flex;flex-direction:column;gap:5px}
.fld.block{display:flex;margin-top:12px}
.fld>span{font-size:10.5px;letter-spacing:.9px;text-transform:uppercase;color:var(--mute)}
.fld select,.fld input,.fld textarea{
  background:rgba(255,255,255,.05);border:1px solid var(--card-edge);border-radius:10px;
  padding:7px 11px;min-width:120px;outline:none}
.fld textarea{resize:vertical;width:100%}
.duo-fld{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.duo-fld .fld input{min-width:0}
:focus-visible{outline:2px solid var(--pnl);outline-offset:2px}
.btn{background:rgba(255,255,255,.06);border:1px solid var(--edge);border-radius:11px;padding:8px 15px;cursor:pointer}
.btn:hover{background:rgba(255,255,255,.12)}
.btn-go{background:var(--pnl);border-color:var(--pnl);color:#1a1030;font-weight:600}
body:not(.is-admin) .adm{display:none}

.scope{padding:9px 22px 12px;color:var(--ink-2);font-size:12.5px;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.scope b{color:var(--ink);font-weight:600}
.scope em{color:var(--mute);font-style:normal}
.scope .chip{border:1px solid var(--card-edge);border-radius:8px;padding:2px 9px;font-size:11px;color:var(--mute)}

/* ── estructura ─────────────────────────────────────────── */
.wrap{display:grid;grid-template-columns:1fr;gap:var(--gap);padding:var(--gap);align-items:start}
.wrap.has-side{grid-template-columns:minmax(0,1fr) clamp(250px,20%,330px)}
.stage{min-width:0}

/* separador: una sola línea que corre a media altura del título y se desvanece
   hacia las orillas; se corta a los lados de la pastilla, sin cruzarla */
.ttl{display:flex;align-items:center;padding:0}
.ttl:not(.over){padding:8px 0 18px}
.ttl.over{justify-content:center}
.ttl::before,.ttl::after{content:"";flex:1;height:1px}
.ttl::before{background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.14) 40%,rgba(255,255,255,.14) 100%)}
.ttl::after{background:linear-gradient(270deg,transparent 0%,rgba(255,255,255,.14) 40%,rgba(255,255,255,.14) 100%)}
.ttl-pill{display:inline-flex;align-items:center;gap:10px;margin:0 20px;
  border:1.8px solid var(--edge);border-radius:var(--r);padding:9px 26px;
  background:rgba(255,255,255,.04);letter-spacing:.3px;white-space:nowrap}
.ttl-pill .ic{width:15px;height:15px;object-fit:contain;flex:none}

/* ── tiras alineadas al pixel del eje ───────────────────── */
.strip{position:relative;width:100%}
.strip-days{height:64px;margin-bottom:2px}
.strip-ops{height:20px}
.cell{position:absolute;top:0;text-align:center;line-height:1.3}
.pip{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:35px;font-size:12.5px;font-weight:600;color:#cfe0ef;
  background:url("/icons/date_off.svg") center/contain no-repeat;padding-top:4px}
.cell.on .pip{background-image:url("/icons/date_on.svg");color:#1d3552;font-weight:700}
.cell.off .pip{opacity:.5}
.cell .amt{display:block;margin-top:6px;font-size:12px;font-weight:700;color:var(--ink)}
.cell.off .amt{color:var(--faint);font-weight:600}
.cell .pct{display:block;font-size:10.5px;font-weight:600;color:var(--faint)}
.cell .pct.up{color:var(--up)} .cell .pct.dn{color:var(--down)}
.strip-ops .cell{font-size:11.5px;color:var(--mute)}
.strip.tight .amt,.strip.tight .pct{font-size:10px;letter-spacing:-.3px}
.strip.cramped .amt,.strip.cramped .pct{display:none}
.strip.cramped .pip{width:26px;height:27px;font-size:10px}

/* ── gráficas ───────────────────────────────────────────── */
.chart-host{position:relative;width:100%}
.chart{width:100%;height:100%}
.chart-pnl{height:238px}
.chart-ops{height:186px}
.chart-risk{height:178px}

/* insignias de saldo: van DEBAJO de la gráfica, colgando de la línea vertical */
.stats-canvas{position:relative;width:100%}
.stats-canvas .chart{position:absolute;inset:0}
.over{position:absolute;left:0;right:0}
.badges{position:absolute;left:0;right:0}
.badge{position:absolute;top:16px;display:flex;align-items:stretch;
  background:#fff;border:1.2px solid rgba(159,220,212,.9);border-radius:999px;
  box-shadow:0 8px 22px rgba(0,0,0,.4);white-space:nowrap;pointer-events:none;z-index:3}
.badge .bl{display:flex;align-items:center;gap:8px;padding:6px 15px}
.badge img{width:21px;height:14px;object-fit:contain;display:block;flex:none}
.badge .bp{font-size:12.5px;font-weight:700;color:#8296a8}
.badge .bp.up{color:#12a06a} .badge .bp.dn{color:#c94a4a}
.badge .bv{display:flex;align-items:center;border-left:1.2px solid rgba(159,220,212,.9);
  padding:6px 20px;font-size:17px;font-weight:700;color:#16283a}
/* tramo que continúa la línea de la gráfica hasta el divisor de la insignia */
.drop{position:absolute;width:1.2px;margin-left:-0.6px;
  background:rgba(159,220,212,.9);z-index:2;pointer-events:none}

/* ── columna administrativa ─────────────────────────────── */
.side{display:flex;flex-direction:column;gap:14px;min-width:0}
.card{background:var(--card);border:1px solid var(--card-edge);border-radius:18px;padding:16px 17px}
.card h3{margin:0 0 3px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--mute);font-weight:600}
.card .big{font-size:26px;font-weight:700;letter-spacing:-.5px;line-height:1.25}
.card .sub{font-size:12px;color:var(--mute)}
.card .big.up{color:var(--up)} .card .big.dn{color:var(--down)}
.gauge{width:100%;height:132px}
.donut{width:100%;height:168px}
.split{display:grid;grid-template-columns:1fr 108px;gap:8px;align-items:center}
.rows{margin-top:8px;display:flex;flex-direction:column;gap:7px}
.row{display:grid;grid-template-columns:1fr auto;gap:6px;align-items:center;font-size:12.5px}
.row .k{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .v{font-weight:600} .row .v.up{color:var(--up)} .row .v.dn{color:var(--down)}
.meter{grid-column:1/-1;height:4px;border-radius:3px;background:rgba(255,255,255,.07);overflow:hidden}
.meter i{display:block;height:100%;border-radius:3px;background:#2ec4b6}

/* ── inversiones ────────────────────────────────────────── */
.table-wrap{border:1px solid var(--card-edge);border-radius:16px;background:var(--card);overflow:hidden}
.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.tbl th{position:sticky;top:0;z-index:2;background:#182b40;text-align:left;padding:11px 14px;
  font-size:10.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--mute);font-weight:600}
.tbl th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
.tbl th.sortable:hover{color:var(--ink-2)}
.tbl th.sortable.on{color:var(--mint)}
.tbl th.sortable:focus-visible{outline:2px solid var(--pnl);outline-offset:-2px}
/* flecha hacia abajo = de mayor a menor; en fechas, de la más reciente a la más antigua */
.arw{display:inline-block;width:0;height:0;margin-left:6px;vertical-align:middle;opacity:.25;
  border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor}
.tbl th.sortable.on .arw{opacity:1}
.tbl th.sortable.on.asc .arw{border-top:0;border-bottom:5px solid currentColor}

/* barra de orden: solo aparece donde la cabecera no existe (celular) */
.sort-bar{display:none;align-items:center;gap:9px;margin-bottom:10px;font-size:12.5px;color:var(--mute)}
.sort-bar label{display:flex;align-items:center;gap:7px;flex:1;min-width:0}
.sort-bar select{flex:1;min-width:0;background:rgba(255,255,255,.05);border:1px solid var(--card-edge);
  border-radius:9px;padding:7px 9px;color:var(--ink)}
.sort-bar .btn{white-space:nowrap;padding:7px 12px;font-size:12px}
.tbl th.num{text-align:right}
.tbl td{padding:7px 14px;border-top:1px solid rgba(255,255,255,.06);color:var(--ink-2);white-space:nowrap}
.tbl tr:hover td{background:rgba(255,255,255,.03)}
.tbl .num{text-align:right;font-weight:600}
.tbl .up{color:var(--up)} .tbl .dn{color:var(--down)}
.when b{display:block;color:var(--ink);font-weight:600}
.when span{display:block;font-size:11px;color:var(--mute)}
.kind{display:flex;align-items:center;gap:9px}
.kind .sym{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex:none}
.kind .sym img{width:26px;height:26px}
/* par de divisas: dos banderas encimadas en diagonal, la segunda al frente con un aro
   que la separa de la de atrás */
.kind .sym.pair{position:relative;width:34px;height:22px;display:inline-block}
.kind .sym.pair img{position:absolute;width:22px;height:15px;border-radius:3px}
.kind .sym.pair .f1{left:0;top:0}
/* la de encima solo lleva un filo claro de 1px: separa de la de atrás sin taparla,
   que es lo que hacía el aro oscuro anterior */
.kind .sym.pair .f2{left:12px;top:7px;z-index:2;box-shadow:0 0 0 1px rgba(255,255,255,.22)}
.kind .fallback{font-size:9px;font-weight:700;color:var(--ink-2);border:1px solid var(--card-edge);
  border-radius:6px;padding:3px 4px;letter-spacing:-.3px}
.kind .dir img{width:21px;height:21px;display:block}
.kind .per{font-size:11.5px;font-weight:600;color:var(--ink-2);min-width:34px}
.kind .per.soft{opacity:.42;font-weight:500}
.beads{display:flex;align-items:center}
.bead{position:relative;width:19px;height:19px;border-radius:50%;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:9.5px;font-weight:700;border:1.5px solid var(--faint);color:var(--faint)}
.bead+.bead{margin-left:7px}
.bead+.bead::before{content:"";position:absolute;left:-8px;width:7px;height:1.5px;background:var(--faint)}
.bead.lost{border-color:rgba(239,107,107,.6);color:#dc9797}
.bead.won{border-color:rgba(63,211,154,.5);background:rgba(63,211,154,.28);color:#bff0dc}
.bead.pend{border-style:dashed;opacity:.55}
.hist-foot{margin-top:12px;text-align:center;color:var(--mute);font-size:12px}

.tip{position:fixed;z-index:80;pointer-events:none;background:rgba(12,24,38,.97);
  border:1px solid var(--card-edge);border-radius:10px;padding:7px 10px;font-size:12px;
  color:var(--ink);box-shadow:0 10px 26px rgba(0,0,0,.45);max-width:260px}

/* ── mensajes ───────────────────────────────────────────── */
.msg{margin:60px auto;max-width:520px;text-align:center;color:var(--ink-2);
  border:1px solid var(--card-edge);border-radius:18px;padding:28px;background:var(--card)}
.msg b{display:block;margin-bottom:6px;color:var(--ink);font-size:17px}
.msg-fixed{position:fixed;top:14px;left:50%;transform:translateX(-50%);margin:0;z-index:90;
  padding:14px 22px;background:#3a2233;border-color:rgba(239,107,107,.55);box-shadow:0 10px 30px rgba(0,0,0,.45)}

.dlg{border:1px solid var(--card-edge);border-radius:20px;background:#1a2e45;color:var(--ink);
  padding:24px;max-width:560px;width:calc(100% - 40px);max-height:88vh;overflow:auto}
.dlg::backdrop{background:rgba(6,14,24,.66)}
.dlg h2{margin:0 0 6px;font-size:19px}
.dlg-note{margin:0;color:var(--mute);font-size:12.5px}
.dlg-list{margin:14px 0 0;display:flex;flex-direction:column;gap:6px;max-height:150px;overflow:auto}
.dlg-list div{font-size:12.5px;color:var(--ink-2);border-left:2px solid var(--pnl);padding-left:9px}
.dlg-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}

@media (max-width:980px){
  .wrap.has-side{grid-template-columns:1fr}
  .hi{margin-left:0;width:100%}
  .cell .amt,.cell .pct{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


/* ── PDF ───────────────────────────────────────────────────
   Impresión del navegador: texto vectorial, sin dependencias. El ancho del contenido lo
   fija printReport() en JS (PRINT_W); aquí solo se decide QUÉ entra y cómo se acomoda. */
.print-head{display:none}
@media print{
  @page{size:portrait;margin:11mm}
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  html,body{background:#16283a!important}
  .bar,.tip,.msg,.dlg,.hist-foot,.btn,.seg,.when-pick{display:none!important}

  /* Izquierda: título, cuenta y estrategia apilados. Derecha: las tarjetas.
     Tres renglones de texto empatan de alto con las tarjetas sin comprimir nada. */
  .print-head{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:16px 20px 14px}
  .ph-left{min-width:0}
  .ph-title{display:flex;align-items:center;gap:13px;font-size:25px;font-weight:700;
    letter-spacing:-.4px;white-space:nowrap}
  .ph-title i{width:1.5px;height:21px;background:var(--mint);border-radius:2px}
  .ph-title em{font-style:normal;font-weight:500;color:var(--mint);font-size:20px}
  .ph-meta{font-size:12px;color:var(--ink-2);margin-top:6px}
  .ph-acc{font-size:12px;color:var(--ink-2);margin-top:2px}
  .ph-strat{font-size:11px;color:var(--mute);margin-top:4px}
  .print-head .hi{margin-top:0;gap:9px;flex-wrap:nowrap;flex:none}
  .print-head .hi-card{padding:9px 15px}
  .print-head .hi-card .v{font-size:19px}
  /* sin anillos en el PDF: las tarjetas quedan mucho más angostas */
  .hi-ring{display:none!important}

  .wrap{padding:0 20px;gap:16px;display:block!important}
  .stage{margin:0 auto}
  /* la columna del analista pasa completa a la hoja 2, en rejilla y nunca encimada */
  .side{break-before:page;margin:0;padding-top:6px}
  .side .donut{height:150px}
  .card,.hi-card,.tbl tr,.stats-canvas{break-inside:avoid}
  .table-wrap{break-inside:auto}
  .tbl th{position:static}
  /* los degradados de las separadoras no sobreviven a la impresión: color sólido sutil */
  .ttl::before,.ttl::after{background:#31465e!important}

  body[data-print="client"] .side{display:none!important}
}

/* ── capa de filtros (analista) ─────────────────────────── */
.bar-flt{padding:9px 22px 11px;background:rgba(4,11,20,.26);border-bottom:1px solid rgba(255,255,255,.07)}
.flt-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.flt-toggle{white-space:nowrap}
.flt-toggle[aria-expanded="true"]{background:rgba(159,220,212,.14);border-color:rgba(159,220,212,.5)}
.flt-chips{display:flex;gap:6px;flex-wrap:wrap;min-width:0}
.flt-info{margin-left:auto;font-size:12.5px;color:var(--mute);white-space:nowrap}
.flt-info b{color:var(--ink)}
.badge-sim{border-radius:8px;padding:2px 9px;font-size:11.5px;border:1px solid}
.badge-sim.ok{color:var(--up);border-color:rgba(63,211,154,.45)}
.badge-sim.warn{color:#e0a33e;border-color:rgba(224,163,62,.45)}
.flt-panel{margin-top:11px;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;
  border-top:1px solid rgba(255,255,255,.07);padding-top:12px}
.flt-group.wide{grid-column:1/-1}
.flt-group h5{margin:0 0 6px;font-size:10px;letter-spacing:.9px;text-transform:uppercase;color:var(--mute);font-weight:600}
.flt-opts{display:flex;gap:5px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--card-edge);border-radius:8px;
  background:rgba(255,255,255,.04);color:var(--ink-2);padding:4px 9px;font-size:11.5px;cursor:pointer;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip b{color:var(--mute);font-size:10px;font-weight:600}
.chip:hover{background:rgba(255,255,255,.09)}
.chip.on{background:rgba(159,220,212,.16);border-color:rgba(159,220,212,.5);color:var(--ink)}
.chip.on b{color:var(--mint)}
.chip.static{cursor:default}
.flt-ranges{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.rng{display:flex;flex-direction:column;gap:3px;font-size:11.5px;color:var(--ink-2);min-width:0}
.rng-lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rng-in{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.rng input{background:rgba(255,255,255,.05);border:1px solid var(--card-edge);border-radius:8px;
  padding:4px 7px;min-width:0;width:100%}
.rng-hint{font-size:10px;color:var(--faint)}

/* ── detalle expandible en inversiones ──────────────────── */
.tbl th.exp,.tbl td.exp{width:26px;padding-left:10px;padding-right:0}
.exp-btn{border:1px solid var(--card-edge);background:rgba(255,255,255,.04);color:var(--ink-2);
  border-radius:6px;width:20px;height:20px;line-height:1;cursor:pointer;font-size:13px;padding:0;
  transition:transform .15s}
.exp-btn.open{transform:rotate(90deg);border-color:rgba(159,220,212,.5);color:var(--mint)}
.tbl tr.det td{background:rgba(4,11,20,.4);padding:12px 16px 14px}
.det-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.det-title{font-size:13.5px;font-weight:600;color:var(--ink)}
.det-res{font-size:12.5px;font-weight:600}
.dboxes{display:flex;gap:7px;flex-wrap:wrap}
.dbox{display:inline-flex;flex-direction:column;gap:1px;border:1px solid var(--card-edge);
  border-radius:9px;padding:5px 11px;background:rgba(255,255,255,.035);min-width:0}
.dbox i{font-style:normal;font-size:9.5px;letter-spacing:.7px;text-transform:uppercase;color:var(--mute)}
.dbox b{font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap}
.conds{margin-top:12px}
.conds .lbl{display:block;font-size:10px;letter-spacing:.8px;text-transform:uppercase;color:var(--mute);margin-bottom:4px}
.cond{display:flex;align-items:flex-start;gap:9px;margin-bottom:4px;cursor:pointer}
.cond input{margin:3px 0 0;width:14px;height:14px;flex:none;accent-color:var(--up);cursor:pointer}
.conds code{flex:1;min-width:0;font-size:11px;color:#cfe0ef;background:rgba(255,255,255,.045);
  border-left:2px solid var(--pnl);border-radius:0 6px 6px 0;padding:3px 9px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;word-break:break-word}
.cond.done code{border-left-color:var(--up);color:var(--mute);text-decoration:line-through;
  text-decoration-color:rgba(255,255,255,.22)}
.cond.again code{border-left-color:#e0a33e}
.cond-tag{flex:none;align-self:center;font-size:10px;border-radius:7px;padding:2px 8px;
  border:1px solid rgba(63,211,154,.4);color:var(--up);white-space:nowrap}
.cond.again .cond-tag{border-color:rgba(224,163,62,.5);color:#e0a33e}
@media (max-width:640px){
  .cond{flex-wrap:wrap}
  .cond-tag{margin-left:23px;white-space:normal}
}
.det-sum{margin-top:7px;font-weight:600}
.det-extra{color:var(--mute);font-size:11.5px}
.det-ops{width:100%;border-collapse:collapse;margin-top:10px;font-size:11.5px}
.det-ops th{background:transparent;position:static;padding:5px 9px;border-bottom:1px solid rgba(255,255,255,.09)}
.det-ops td{padding:4px 9px;border-top:1px solid rgba(255,255,255,.05)}
@media print{
  .bar-flt{display:none!important}
  .exp,.exp-btn{display:none!important}
  .ph-flt{font-size:11px;color:var(--mint);margin-top:4px}
}

/* ── liga del cliente + copiar ───────────────────────────── */
.link-pair{margin-left:auto;display:inline-flex;align-items:center;gap:6px}
.link-pair .asclient{margin-left:0}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:31px;height:31px;
  border:1px solid rgba(159,220,212,.35);border-radius:9px;background:transparent;color:var(--mint);cursor:pointer}
.icon-btn:hover{background:rgba(159,220,212,.12)}
.icon-btn.done{background:var(--mint);color:#10261f;border-color:var(--mint)}

/* selector de cuenta del cliente, dentro de su propia barra */
.who select{background:rgba(255,255,255,.05);border:1px solid var(--card-edge);border-radius:9px;
  padding:4px 9px;margin-top:3px;font-size:12.5px;max-width:260px}
.who .who-mail{margin-top:2px}

/* ── zona de borrado ─────────────────────────────────────── */
.danger{margin-top:22px;padding-top:16px;border-top:1px solid rgba(239,107,107,.28)}
.danger h3{margin:0 0 2px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--down);font-weight:600}
.danger>p{margin:0 0 12px;font-size:12px;color:var(--mute)}
.danger-row{display:flex;align-items:flex-start;gap:14px;justify-content:space-between;
  padding:10px 0;border-top:1px solid rgba(255,255,255,.06)}
.danger-row b{display:block;font-size:12.5px;color:var(--ink);font-weight:600}
.danger-row span{display:block;font-size:11.5px;color:var(--mute);margin-top:2px}
.danger-row code{background:rgba(255,255,255,.06);border-radius:4px;padding:0 4px;font-size:11px}
.btn-danger{border-color:rgba(239,107,107,.5);color:#f2a3a3;white-space:nowrap;flex:none}
.btn-danger:hover{background:rgba(239,107,107,.16)}

/* ═══════════════════════════════════════════════════════════
   DISEÑO ADAPTABLE
   El escritorio (>980px) queda intacto: todo lo de abajo vive
   dentro de consultas de medio y solo aplica hacia abajo.
   ═══════════════════════════════════════════════════════════ */

/* El carril horizontal solo existe en pantallas chicas. Al desplazar la tira de días
   junto con el lienzo, la alineación entre ambos se conserva sola: comparten ancho. */
.stats-scroll{position:relative}
.stats-inner{width:100%}

@media (max-width:980px){
  :root{--gap:16px}
  .wrap{padding:16px}
  .bar-top{gap:14px;padding:12px 16px}
  .bar-adm{padding:10px 16px 11px}
  .adm-row{gap:10px}
  .scope{padding:11px 16px 12px;font-size:12px}
  .bar-flt{padding:9px 16px 11px}
  .hi-card{padding:8px 12px}
  .hi-card .v{font-size:17px}
  .side{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
  .donut{height:150px}
}

@media (max-width:640px){
  :root{--gap:12px;--r:11px}
  body{font-size:14px}
  .wrap{padding:12px}

  /* ── barra superior ── */
  .bar-top{display:grid;grid-template-columns:1fr;gap:11px;padding:11px 12px}
  .seg{width:100%}
  .seg-btn{flex:1;padding:8px 0;text-align:center}
  .who{flex-direction:column;gap:4px}
  .who b{font-size:15px}
  .who select{max-width:100%;width:100%;padding:8px 10px;font-size:13px}
  .when-pick{flex-direction:row;gap:8px;margin:0}
  .when-pick select{flex:1;min-width:0;padding:8px 10px}
  .btn-pdf{margin:0;width:100%;text-align:center}
  /* tres métricas en fila: los valores son cortos y así no roban alto */
  .hi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;width:100%}
  .hi-card{padding:8px 9px;gap:0;flex-direction:column;align-items:flex-start;min-width:0}
  .hi-card>div{min-width:0;width:100%}
  .hi-card h4{font-size:8.5px;letter-spacing:.4px;line-height:1.25}
  .hi-card .v{font-size:15px;letter-spacing:-.3px}
  .hi-card .s{font-size:9.5px;line-height:1.3}
  .hi-ring{display:none}

  /* ── franja administrativa ── */
  .bar-adm{padding:10px 12px}
  .adm-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .adm-row .fld{min-width:0}
  .adm-row .fld select{min-width:0;width:100%}
  .adm-row .btn{width:100%}
  .link-pair{grid-column:1/-1;margin:0;display:grid;grid-template-columns:1fr auto;gap:8px}
  .asclient{text-align:center}

  /* ── filtros ── */
  .flt-row{gap:8px}
  .flt-toggle{flex:1}
  .flt-info{margin:0;width:100%;white-space:normal;font-size:12px}
  .flt-panel{grid-template-columns:1fr;gap:12px}
  .flt-ranges{grid-template-columns:1fr 1fr}

  /* ── gráficas: carril desplazable, el diseño no se degrada ── */
  .stats-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    margin:0 -12px;padding:0 12px;scrollbar-width:thin}
  .stats-inner{min-width:680px}
  .ttl-pill{padding:7px 16px;font-size:13px;margin:0 12px}
  .ttl-pill .ic{width:13px;height:13px}
  .badge .bl{padding:5px 11px}
  .badge .bv{padding:5px 14px;font-size:15px}
  .badge .bp{font-size:11.5px}

  /* ── columna de métricas ── */
  .side{grid-template-columns:1fr}
  .card{padding:14px 15px}
  .card .big{font-size:23px}

  /* ── inversiones como tarjetas ──
     La tabla no cabe a lo ancho y recortarla escondía justo la columna que importa.
     Cada fila se reordena en una tarjeta con lo esencial arriba. */
  .table-wrap{border:0;background:none;border-radius:0;overflow:visible}
  .tbl thead{display:none}
  .sort-bar{display:flex}
  .tbl, .tbl tbody{display:block;width:100%}
  .tbl tr{display:grid;grid-template-columns:auto 1fr auto;gap:6px 10px;align-items:center;
    background:var(--card);border:1px solid var(--card-edge);border-radius:14px;
    padding:11px 13px;margin-bottom:9px}
  .tbl tr:hover td{background:none}
  .tbl td{display:block;border:0;padding:0;white-space:normal}
  .c-kind{grid-column:1;grid-row:1}
  .c-when{grid-column:2;grid-row:1}
  .c-net{grid-column:3;grid-row:1;text-align:right;font-size:15px}
  .c-ops{grid-column:1/3;grid-row:2}
  .c-stk{grid-column:3;grid-row:2;text-align:right;font-size:12px;color:var(--mute)}
  .c-stk::before{content:attr(data-lbl) " ";font-size:10px;color:var(--faint)}
  .c-inv{grid-column:1/3;grid-row:3;font-size:11.5px;color:var(--mute);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .c-exp{grid-column:3;grid-row:3;justify-self:end}
  .when b{font-size:12.5px}
  .when span{font-size:10.5px}
  .kind{gap:7px}
  .tbl tr.det{display:block;padding:12px 13px 14px}
  .tbl tr.det td{display:block;background:none;padding:0}
  .det-ops{display:block;overflow-x:auto;white-space:nowrap}
  .dboxes{gap:6px}
  .dbox{padding:4px 9px}
  .hist-foot{font-size:11.5px}

  /* ── diálogos ── */
  .dlg{padding:18px;border-radius:16px;max-height:92vh}
  .duo-fld{grid-template-columns:1fr}
  .danger-row{flex-direction:column;align-items:stretch;gap:8px}
  .btn-danger{width:100%}
  .dlg-actions{flex-direction:column-reverse}
  .dlg-actions .btn{width:100%}

  .msg-fixed{width:calc(100% - 24px);max-width:none}
  .tip{max-width:calc(100vw - 24px)}
}

/* Pantallas muy angostas: las métricas pasan a dos renglones antes que apretarse */
@media (max-width:380px){
  .hi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hi-card:last-child{grid-column:1/-1}
  .adm-row{grid-template-columns:1fr}
}