:root{--bg:#05060a;--panel:#0c0e15;--panel2:#141821;--border:#232836;--text:#f4f6fa;--muted:#9aa1ae;--accent:#4c7dff;--on:#ffffff;--accentbg:rgba(76,125,255,.14);--green:#34d399;--red:#f87171;--gain:#5b8cff;--gainbg:76,125,255}
:root[data-theme="light"]{--bg:#f5f7fb;--panel:#ffffff;--panel2:#eef1f6;--border:#dde2ea;--text:#12141a;--muted:#5f6673;--accent:#2563eb;--on:#ffffff;--accentbg:rgba(37,99,235,.10);--green:#0f9d6e;--red:#dc3b3b;--gain:#2563eb;--gainbg:37,99,235;color-scheme:light}
:root:not([data-theme="light"]){color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--text);font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;font-size:14px;line-height:1.45}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
.hidden{display:none!important}
.muted{color:var(--muted)}.pos{color:var(--gain)}.neg{color:var(--red)}.accent{color:var(--accent)}

.layout{display:flex;min-height:100%}
.side{width:220px;flex:none;background:var(--panel);border-right:1px solid var(--border);padding:18px 12px;display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px;margin:0 4px 24px;white-space:nowrap}
.brand b{color:var(--accent)}
.nav button{display:block;width:100%;text-align:left;background:none;border:0;padding:10px 12px;border-radius:8px;color:var(--muted);margin-bottom:3px}
.nav button:hover{color:var(--text);background:var(--panel2)}
.nav button.on{background:var(--accentbg);color:var(--accent);font-weight:600}
.side .foot{margin-top:auto;padding:10px 6px 0;border-top:1px solid var(--border);font-size:12px;word-break:break-all}
.side .foot button{margin-top:8px}
.main{flex:1;min-width:0;padding:22px 26px 40px}
.top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.top h1{font-size:22px;margin:0;margin-right:auto}
.menu-btn{display:none;background:none;border:1px solid var(--border);border-radius:8px;padding:6px 10px}
.side-min{margin-left:auto;background:none;border:1px solid transparent;border-radius:7px;color:var(--muted);font-size:17px;line-height:1;padding:3px 8px}
.side-min:hover,.side-min:focus-visible{color:var(--accent);border-color:var(--border)}
@media (min-width:901px){.nav-min .side{display:none}.nav-min .menu-btn{display:inline-block}}

.btn{background:var(--accent);color:var(--on);border:0;border-radius:8px;padding:9px 14px;font-weight:600;white-space:nowrap}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:none;border:1px solid var(--border);color:var(--text);font-weight:500}
.btn.ghost:hover{border-color:var(--muted)}
.btn.danger{background:none;border:1px solid var(--red);color:var(--red);font-weight:500}
.btn.small{padding:5px 10px;font-size:12px}
.btn:disabled{opacity:.5;cursor:default}

.pill{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);border-radius:999px;padding:6px 12px;font-size:13px}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--muted);flex:none}
.dot.ok{background:#22c55e}.dot.bad{background:var(--red)}.dot.warn{background:#f5b53d}

.banner{border:1px solid var(--border);border-left:4px solid var(--accent);background:var(--panel);border-radius:8px;padding:11px 14px;margin-bottom:12px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.banner.err{border-left-color:var(--red)}
.banner p{margin:0;flex:1;min-width:220px;white-space:pre-line}

.table{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--panel)}
.row{display:grid;grid-template-columns:30px .55fr 1.4fr .75fr 1.15fr minmax(98px,1fr) minmax(76px,.7fr) minmax(84px,.9fr) 1.35fr 88px 46px 60px;gap:10px;padding:12px 14px;align-items:center;border-top:1px solid var(--border)}
.row.head{border-top:0;color:var(--muted);font-size:12px;background:var(--panel2);padding:9px 14px}
.row>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .name{font-weight:600}
.row.off .name,.row.off .lot{color:var(--muted)}
.row [data-l]:before{display:none}
.row .mob{display:none}
.empty{padding:34px 16px;text-align:center;color:var(--muted)}
input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent)}

.switch{position:relative;width:34px;height:19px;border-radius:10px;border:0;background:var(--border);padding:0}
.switch:after{content:"";position:absolute;left:3px;top:3px;width:13px;height:13px;border-radius:50%;background:var(--muted);transition:left .12s}
.switch.on{background:var(--accent)}
.switch.on:after{left:18px;background:var(--on)}

.section{margin-top:22px}
.section h2{font-size:14px;color:var(--accent);margin:0 0 8px}
.log{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:10px 12px;height:210px;overflow:auto;font-family:Consolas,"Courier New",monospace;font-size:12px;white-space:pre-wrap;color:#cfcbc2}
.soon{background:var(--panel);border:1px dashed var(--border);border-radius:10px;padding:40px 20px;text-align:center;color:var(--muted)}

.overlay{position:fixed;inset:0;background:rgba(0,0,0,.62);display:flex;align-items:flex-start;justify-content:center;padding:28px 14px;overflow:auto;z-index:20}
.modal{background:var(--panel);border:1px solid var(--border);border-radius:12px;width:100%;max-width:560px;padding:20px}
.modal.wide{max-width:760px}
.modal h2{margin:0 0 4px;font-size:18px}
.modal .sub{color:var(--muted);margin:0 0 14px;font-size:13px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{margin-bottom:12px}
.field label{display:block;color:var(--muted);font-size:12px;margin-bottom:4px}
.field small{display:block;color:var(--muted);font-size:11.5px;margin-top:3px}
input[type=text],input[type=password],input[type=email],input[type=number],select{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:9px 10px;outline:none}
input:focus,select:focus{border-color:var(--accent)}
input:disabled,select:disabled{opacity:.45}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px;align-items:center}
.actions .sp{margin-left:auto}
.error{color:var(--red);margin:6px 0 0;white-space:pre-line;min-height:1em}
.check{display:flex;align-items:center;gap:8px;margin:4px 0}
.bulk{display:grid;grid-template-columns:1fr 1.4fr;gap:20px}
.bulk h3{font-size:13px;color:var(--accent);margin:0 0 8px}
.bulk .grp{color:var(--muted);font-size:12px;font-weight:600;margin:10px 0 2px}
.brow{display:grid;grid-template-columns:170px 1fr;gap:10px;align-items:center;margin-bottom:8px}
ul.sum{margin:8px 0;padding-left:18px}
.arow{display:grid;grid-template-columns:1.4fr .8fr 1.6fr;gap:12px;padding:12px 14px;align-items:center;border-top:1px solid var(--border)}
.arow:first-child{border-top:0}
.arow.brow{grid-template-columns:1fr 1.8fr auto}
.arow.brow .small div{overflow-wrap:anywhere;word-break:normal}
.aterm{display:flex;gap:8px}
.code{font-family:Consolas,"Courier New",monospace;letter-spacing:.5px;color:var(--accent)}
.addmail{max-width:520px;margin:0 0 10px}
.addmail.wide{max-width:760px}
.small{font-size:12px;word-break:break-all}
.code.big{font-size:20px}
.section p.muted{margin:0 0 10px;font-size:13px}
.link{background:none;border:0;color:var(--accent);padding:0;text-decoration:underline;margin-top:14px}

.auth{min-height:100%;display:flex;align-items:center;justify-content:center;padding:20px}
.auth .card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:28px;width:100%;max-width:400px}
.auth .brand{justify-content:center;font-size:20px;margin:0 0 18px}
.auth h1{font-size:18px;margin:0 0 4px;text-align:center}
.auth p.sub{color:var(--muted);text-align:center;margin:0 0 18px;font-size:13px}
.auth .btn{width:100%;margin-top:6px}

@media (max-width:900px){
 .side{position:fixed;inset:0 auto 0 0;z-index:15;transform:translateX(-100%);transition:transform .15s}
 .side.open{transform:none;box-shadow:0 0 0 100vmax rgba(0,0,0,.55)}
 .menu-btn{display:inline-block}
 .main{padding:16px 14px 40px}
 .row.head{display:none}
 /* Móvil: cada cuenta en una fila compacta (nombre; debajo estado · rol · grupo y el saldo) */
 .row{grid-template-columns:22px minmax(0,1fr) auto auto auto;gap:3px 10px;padding:10px 12px;
  grid-template-areas:"chk name name sw edit" "chk sub money money money" "chk ops ops ops ops"}
 .row .c-chk{grid-area:chk;align-self:center}.row .c-name{grid-area:name;font-size:14px}
 .row .c-sw{grid-area:sw;justify-self:end}.row .c-edit{grid-area:edit;justify-self:end}
 .row .c-edit .btn{padding:5px 10px}
 .row .c-sub{grid-area:sub;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .row .c-sub b{font-weight:500;color:var(--text)}.row .c-sub b.accent{color:var(--accent)}
 .row .c-money{grid-area:money;justify-self:end;font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
 .row .c-grp,.row .c-role,.row .c-lot,.row .c-bal,.row .c-pct,.row .c-eq,.row .c-st,.row .c-ops.muted{display:none}
 .row .mob{display:block}
 .nomob{display:none}
 .top{gap:8px}
 .top .btn{padding:7px 11px;font-size:13px}
 .top .pill{font-size:12px;padding:5px 10px}
 .grid2,.bulk,.arow,.arow.brow{grid-template-columns:1fr}
 .brow{grid-template-columns:1fr}
}

.pw{position:relative}
.pw input{padding-right:44px}
.eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--muted);padding:6px 8px;border-radius:6px;display:flex;align-items:center}
.eye:hover,.eye:focus-visible{color:var(--accent)}
.adv-toggle{margin:2px 0 10px;display:block}
.adv{border-left:2px solid var(--border);padding-left:12px;margin-bottom:6px}
.tplform{display:grid;grid-template-columns:1fr 2fr auto;gap:12px;align-items:start;margin:12px 0 6px}
.tplform .actions{margin-top:22px}
@media (max-width:900px){.tplform{grid-template-columns:1fr}.tplform .actions{margin-top:0}}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--panel);border-radius:999px;padding:5px 6px 5px 12px;font-size:13px}
.chipx{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:16px;line-height:1;padding:2px 6px;border-radius:999px}
.chipx:hover{color:var(--red)}
.lotbox{border:1px solid var(--border);border-radius:8px;padding:12px 14px 4px;margin:4px 0 12px}
.lotbox h3{font-size:13px;color:var(--accent);margin:0 0 10px}
.lotnote{margin:4px 0 12px}
.brow>label{color:var(--muted);font-size:13px}
.withhelp{display:flex;gap:8px;align-items:center}
.withhelp select{flex:1;min-width:0}
.helpbtn{flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--accent);background:transparent;color:var(--accent);font-weight:700;font-size:14px;line-height:1;cursor:pointer;padding:0}
.helpbtn:hover,.helpbtn[aria-expanded=true]{background:var(--accent);color:#141414}
.helpbox{border:1px solid var(--border);border-left:3px solid var(--accent);background:var(--bg);border-radius:8px;padding:10px 12px;margin-top:8px;font-size:13px;line-height:1.45}
.helpbox b{color:var(--accent)}
.helpbox p{margin:6px 0 0}
.brow{align-items:start}.brow>label{padding-top:9px}
.sltag{display:inline-block;border:1px solid var(--accent);color:var(--accent);border-radius:999px;font-size:11px;font-weight:700;padding:0 7px;margin-right:2px}
.btn.trash{display:inline-flex;align-items:center;gap:4px;padding-left:11px;padding-right:11px}
.btn.trash:hover{background:var(--red);color:#141414}
.modal .sub{white-space:pre-line}
.longtext{overflow-wrap:anywhere}
.link.more{margin-top:0;font-size:inherit;white-space:nowrap}
.banner .problems{flex:1;min-width:220px;display:grid;gap:4px}
.error.okmsg{color:var(--green)}
#forgot{display:block;margin-top:8px}
.codes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 16px;margin:10px 0 16px;font-size:15px}
.secretbox{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:1px solid var(--border);background:var(--bg);border-radius:8px;padding:12px 14px;margin:6px 0 12px}
.secretbox .code{word-break:break-all;letter-spacing:.5px}
.row .c-ops .btn{white-space:nowrap}
@media (max-width:900px){.row .c-ops{grid-area:ops;margin-top:4px}.row .c-ops .btn{padding:4px 10px;font-size:12px}}
.qrbox{display:flex;justify-content:center;margin:8px 0 12px}
.qrbox img{background:#fff;padding:10px;border-radius:10px;width:200px;height:200px}
.choices{display:grid;gap:10px;margin:12px 0 16px}
.choice{display:grid;grid-template-columns:1fr auto;gap:4px 10px;text-align:left;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:14px;color:var(--text);cursor:pointer;font:inherit}
.choice:hover:not(:disabled){border-color:var(--accent)}
.choice:disabled{opacity:.55;cursor:not-allowed}
.choice small{grid-column:1/-1;color:var(--muted);font-size:12.5px}
.choice .tag{font-size:11px;font-weight:700;color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:1px 8px;align-self:start}
.choice .tag.muted{color:var(--muted);border-color:var(--border)}
.auth .card .link{display:block;margin-top:8px}
.pwrules{list-style:none;padding:0;margin:8px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:3px 12px;font-size:12px;color:var(--muted)}
.pwrules li:before{content:"○ ";color:var(--muted)}
.pwrules li.ok{color:var(--green)}.pwrules li.ok:before{content:"✓ ";color:var(--green)}
.pasterow{display:flex;gap:8px;align-items:stretch}.pasterow input{flex:1 1 auto;width:auto;min-width:0}.pasterow .btn,.auth .pasterow .btn{flex:0 0 auto;width:auto;margin:0;padding:0 16px;white-space:nowrap}
.extras{display:flex;flex-direction:column;gap:2px;padding:6px 10px;border:1px solid var(--border);border-radius:8px;background:var(--bg)}
.extras .check{margin:2px 0}
/* ---- Rendimiento ---- */
.perfsel{width:auto;min-width:220px;max-width:100%;background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:8px 10px;max-width:100%}
.hero{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:18px 20px;margin-bottom:12px}
.hero-v{font-size:44px;font-weight:700;line-height:1.1;margin:4px 0 6px;letter-spacing:-.5px}
.t-label{color:var(--muted);font-size:12px}
.t-help{background:none;border:0;color:var(--muted);padding:0 4px;margin-left:2px;font-size:13px;line-height:1;cursor:pointer;border-radius:4px}
.t-help:hover,.t-help[aria-expanded='true']{color:var(--accent)}
.t-value{font-size:20px;font-weight:600;margin-top:4px}
.t-sub{color:var(--muted);font-size:12px;margin-top:3px}
.t-sub.warn{color:var(--accent)}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
/* 10 tarjetas: en pantallas anchas, 5 columnas x 2 filas (cada pareja una encima de otra); si no, 2 columnas. Nunca queda un hueco. */
@media (min-width:1150px){.tiles{grid-template-columns:none;grid-template-rows:auto auto;grid-auto-flow:column;grid-auto-columns:1fr}}
.tile{position:relative;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:12px 14px;min-width:0}
.t-value{overflow-wrap:anywhere}
.pop{position:absolute;z-index:20;left:8px;right:8px;top:34px;min-width:220px;background:var(--panel2);border:1px solid var(--accent);border-radius:10px;padding:12px 30px 12px 14px;font-size:12.5px;box-shadow:0 8px 24px rgba(0,0,0,.45)}
.pop b{display:block;margin-bottom:4px}
.pop p{margin:0;color:var(--text);line-height:1.5}
.pop-x{position:absolute;top:6px;right:6px;background:none;border:0;color:var(--muted);font-size:13px;padding:4px}
.pop-x:hover{color:var(--text)}
@media (max-width:1149px){.tiles .tile:nth-child(2n) .pop{left:auto}}
@media (max-width:640px){.tiles .tile:nth-child(2n) .pop{right:8px;left:auto;min-width:min(260px,calc(100vw - 48px))}.tiles .tile:nth-child(2n+1) .pop{min-width:min(260px,calc(100vw - 48px))}}
.pcard{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px 18px;margin-bottom:12px;min-width:0}
.pcard-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pcard h3{margin:0;font-size:15px}
.pcard-sub{color:var(--muted);font-size:12.5px;margin:4px 0 12px}
.two{display:grid;grid-template-columns:1.15fr 1fr;gap:12px;align-items:start}
.two>.pcard{margin-bottom:0}
.two+.pcard{margin-top:12px}
@media (max-width:1100px){.two{grid-template-columns:1fr}.two>.pcard{margin-bottom:0}}
.chart{position:relative}
.chart svg{display:block;max-width:100%;touch-action:pan-y}
.chart .grid{stroke:var(--border);stroke-width:1}
.chart .axis{fill:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}
.chart .line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .area{fill:var(--accent);fill-opacity:.10;stroke:none}
.chart .dot{fill:var(--accent);stroke:var(--panel);stroke-width:2}
.chart .cross{stroke:var(--muted);stroke-width:1}
.tip{position:absolute;transform:translate(-50%,-100%);background:var(--panel2);border:1px solid var(--border);border-radius:8px;padding:7px 10px;font-size:12px;pointer-events:none;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.calnav{display:flex;align-items:center;gap:8px}
.calnav b{min-width:120px;text-align:center}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr)) minmax(0,1.15fr);gap:4px}
.cal-h{color:var(--muted);font-size:11px;text-align:center;padding:2px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-d{background:var(--panel2);border-radius:6px;min-height:50px;padding:4px 5px;display:flex;flex-direction:column;justify-content:space-between;font-variant-numeric:tabular-nums}
.cal-d.out{opacity:.35}
.cal-n{font-size:11px;color:var(--muted)}
.cal-v{font-size:11.5px;font-weight:600;text-align:right;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:clip}
.cal-w{border-radius:6px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums}
@media (max-width:520px){.cal{gap:2px}.cal-d{min-height:42px;padding:3px}.cal-v{font-size:9.5px}.cal-w{font-size:9.5px}.hero-v{font-size:34px}}
.syms{display:flex;flex-direction:column;gap:8px}
.sym{display:grid;grid-template-columns:110px 1fr 110px;grid-template-areas:"n bar v" "n m m";column-gap:10px;align-items:center}
.sym-n{grid-area:n;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sym-bar{grid-area:bar;height:10px;background:var(--panel2);border-radius:5px;overflow:hidden}
.sym-bar span{display:block;height:100%;border-radius:0 4px 4px 0}
.sym-bar .up{background:var(--gain)}.sym-bar .down{background:var(--red)}
.sym-v{grid-area:v;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.sym-m{grid-area:m;font-size:11.5px}
.htable{display:flex;flex-direction:column}
.hrow{display:grid;grid-template-columns:140px 1fr 70px 70px 1fr;gap:8px;padding:8px 4px;border-top:1px solid var(--border);font-variant-numeric:tabular-nums}
.htable.with-acc .hrow{grid-template-columns:130px 1.3fr 1fr 70px 60px 1fr}
.hrow.head{color:var(--muted);font-size:12px;border-top:0}
.hrow .r{text-align:right}
.more{margin-top:10px;display:flex;gap:8px}
@media (max-width:700px),(max-height:500px) and (pointer:coarse) and (orientation:landscape){
  .htable .hrow,.htable.with-acc .hrow{grid-template-columns:1fr 1fr;row-gap:2px}
  .hrow.head{display:none}
  .hrow span:before{content:attr(data-l) ": ";color:var(--muted);font-size:11px}
  .hrow .r{text-align:left}
}
button.cal-d{border:0;color:inherit;font:inherit;text-align:left;cursor:pointer}
button.cal-d:hover,button.cal-d:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.dtrades{display:flex;flex-direction:column;max-height:55vh;overflow-y:auto;margin:6px 0 4px}
.dtrade{padding:9px 2px;border-top:1px solid var(--border)}
.dtrade:first-child{border-top:0}
.dtrade{position:relative}
.dt-view{position:absolute;left:0;top:33px;padding:2px 6px;font-size:11px;line-height:1.3;white-space:nowrap;min-height:0}
.dtrade.has-view .dt-main{grid-template-columns:56px minmax(70px,1fr) 62px 80px auto}
.dtrade.has-view .dt-costs,.dtrade.has-view .dt-sub{margin-left:64px}
@media (max-width:520px){.dtrade.has-view .dt-main{grid-template-columns:56px 1fr auto}.dtrade.has-view .dt-costs,.dtrade.has-view .dt-sub{margin-left:64px}}
.dt-pct{position:absolute;right:2px;bottom:9px;font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums}
.dtrade.has-pct .dt-sub,.dtrade.has-pct .dt-costs{padding-right:72px}
.dt-main{display:grid;grid-template-columns:44px minmax(70px,1fr) 62px 80px auto;gap:8px;align-items:center;font-variant-numeric:tabular-nums}
.dt-time{color:var(--muted);font-size:12.5px}
.dt-sym{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dt-side{font-size:12px;border-radius:5px;padding:1px 6px;text-align:center;border:1px solid var(--border)}
.dt-res{font-weight:600;text-align:right}
.dt-sub{font-size:11.5px;margin:3px 0 0 52px}
.dt-total{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--border);padding:10px 2px 0;font-size:15px}
.dt-note{margin:8px 0 0;font-size:12px}
@media (max-width:520px){.dt-main{grid-template-columns:40px 1fr auto;row-gap:2px}.dt-side,.dt-lot{grid-row:2}.dt-side{grid-column:2;justify-self:start}.dt-lot{grid-column:3;text-align:right}.dt-res{grid-row:1;grid-column:3}.dt-sub{margin-left:48px}}
.dt-costs{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--muted);margin:4px 0 0 52px;font-variant-numeric:tabular-nums}
.dt-costs b{font-weight:600}
.dt-fees{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--border);padding:8px 2px 0;margin-top:2px;font-size:13px;color:var(--muted)}
.dt-fees+.dt-fees{border-top:0;padding-top:4px}
@media (max-width:520px){.dt-costs{margin-left:48px}}
.dt-total b{white-space:nowrap}.dt-total small{font-size:12px}
/* ---- Calculadora ---- */
.tabs{display:flex;gap:6px;margin-bottom:14px;overflow-x:auto;padding-bottom:2px}
.tab{background:var(--panel);border:1px solid var(--border);border-radius:999px;padding:8px 14px;white-space:nowrap;color:var(--muted)}
.tab:hover{color:var(--text)}
.tab.on{background:var(--accentbg);border-color:var(--accent);color:var(--accent);font-weight:600}
.calc{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:12px;align-items:start}
@media (max-width:1000px){.calc{grid-template-columns:1fr}}
.calc .pcard{margin-bottom:0}
.calc-in .field input,.calc-in .field select{width:100%}
.calc-in .pasterow input{flex:1}
.calc-in .pasterow select{width:auto;flex:none}
.calc-h{font-size:13px;color:var(--accent);margin:14px 0 8px}
.calc-res{position:sticky;top:14px}
.calc-res .hero-v.lots{color:var(--accent)}
.kv{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--border);font-size:13.5px;font-variant-numeric:tabular-nums}
.kv span{color:var(--muted)}
.kv b{text-align:right}
.calc-warn{background:rgba(245,181,61,.10);border:1px solid rgba(245,181,61,.35);border-radius:8px;padding:8px 10px;font-size:12.5px;margin:10px 0 0}
.spec{font-size:12px;margin:-4px 0 12px;line-height:1.5}
.small-note{font-size:12px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 12px}
@media (max-width:700px),(max-height:500px) and (pointer:coarse) and (orientation:landscape){.grid3{grid-template-columns:1fr 1fr}}
.grid3 .field input{width:100%}
.simrow{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:4px}
.sim-out{margin-top:12px}
.chart .simpath{fill:none;stroke:var(--muted);stroke-opacity:.22;stroke-width:1}
.chart .limit{stroke:var(--red);stroke-width:1}
.segbtn{display:flex;gap:6px}
.segbtn button{flex:1;background:var(--panel2);border:1px solid var(--border);border-radius:8px;padding:9px 10px;color:var(--muted)}
.segbtn button.on.buy{border-color:var(--green);color:var(--green);background:rgba(52,211,153,.10);font-weight:600}
.segbtn button.on.sell{border-color:var(--red);color:var(--red);background:rgba(248,113,113,.10);font-weight:600}
.lots-broker{margin-top:14px;padding-top:12px;border-top:1px dashed var(--border)}
.hero-v.small-hero{font-size:30px}
/* ---- Operar ---- */
.op-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.op-sym{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:8px 10px;min-width:240px;flex:0 1 320px}
.tfs{display:flex;gap:4px;flex-wrap:wrap;position:relative}
.tab.small{padding:6px 10px;font-size:12.5px}
.op-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:12px;align-items:start}
@media (max-width:1000px){.op-grid{grid-template-columns:1fr}}
.op-grid .pcard{margin-bottom:0}
.op-chartcard{padding:10px}
.op-chart{width:100%;height:440px;touch-action:none}
.op-chartmsg{font-size:12.5px;padding:6px 4px 0}
.op-chartmsg:empty{display:none}
.op-panel .field input,.op-panel .field select{width:100%}
.op-panel .pasterow select{width:auto;flex:none}
.op-panel .segbtn{margin-bottom:10px}
.segbtn button.on:not(.buy):not(.sell){border-color:var(--accent);color:var(--accent);background:var(--accentbg);font-weight:600}
.op-quote{display:flex;align-items:baseline;gap:12px;margin-bottom:10px;font-variant-numeric:tabular-nums}
.op-quote b{font-size:16px;margin-right:auto}
.op-res{margin:8px 0 10px}
.op-go{width:100%;padding:12px;font-size:15px}
.op-go.buy{background:var(--green);color:#06281c}
.op-go.sell{background:var(--red);color:#2a0a0a}
.op-go:disabled{opacity:.5}
.op-pos{margin-top:12px}
.op-rows{display:flex;flex-direction:column}
.op-row{display:grid;grid-template-columns:70px 110px 80px minmax(0,1fr) 110px auto;gap:10px;align-items:center;padding:9px 2px;border-top:1px solid var(--border);font-variant-numeric:tabular-nums}
.op-row .r{text-align:right}
.op-acts{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
@media (max-width:760px),(max-height:500px) and (pointer:coarse) and (orientation:landscape){.op-row{grid-template-columns:auto 1fr auto;row-gap:4px}.op-row .muted{grid-column:1/-1}.op-acts{grid-column:1/-1;justify-content:flex-start}}
.op-help p{margin:8px 0}
.op-attr{font-size:11px;color:var(--muted);display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 2px 0}
.op-attr a{color:var(--muted)}
/* Buscador de símbolos */
.symsearch{position:relative;flex:1;min-width:0}
.symsearch input{width:100%}
.symlist{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 4px);background:var(--panel2);border:1px solid var(--border);border-radius:10px;max-height:320px;overflow-y:auto;box-shadow:0 10px 26px rgba(0,0,0,.45);min-width:260px}
.symopt{display:flex;gap:10px;align-items:baseline;padding:8px 12px;cursor:pointer}
.symopt span{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.symopt.on,.symopt:hover{background:var(--accentbg)}
.symopt b{white-space:nowrap}
.symhead{padding:8px 12px 4px;font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.op-bar .symsearch{flex:0 1 340px}
.op-bar .op-sym{width:100%}
.op-confirm{margin-top:10px;font-size:13px;color:var(--muted)}
.modal .op-go{width:auto;padding:9px 16px;font-size:14px}
.symtag{margin-left:auto;font-style:normal;font-size:11px;color:var(--muted);border:1px solid var(--border);border-radius:5px;padding:0 5px;white-space:nowrap}
.op-chart{position:relative}
.op-overlay{position:absolute;inset:0;pointer-events:none;z-index:5}
.op-tag{position:absolute;left:10px;display:flex;align-items:center;gap:6px;pointer-events:auto;background:var(--panel2);border:1px solid var(--border);border-left:3px solid var(--green);border-radius:6px;padding:2px 4px 2px 8px;font-size:12px;font-variant-numeric:tabular-nums;box-shadow:0 2px 8px rgba(0,0,0,.4);white-space:nowrap}
.op-tag.sell{border-left-color:var(--red)}
.op-tag-side{color:var(--muted)}
.op-tag-btn{background:none;border:1px solid var(--border);border-radius:4px;color:var(--text);font-size:11px;padding:1px 5px}
.op-tag-btn:hover{border-color:var(--accent);color:var(--accent)}
.op-tag-x{background:none;border:0;color:var(--muted);font-size:13px;padding:1px 5px;border-radius:4px}
.op-tag-x:hover{background:rgba(248,113,113,.15);color:var(--red)}
/* Botón «Ampliar gráfico» y gráfico a pantalla completa */
body.op-big{overflow:hidden}
.op-chartcard.big{position:fixed;inset:0;z-index:18;margin:0;border-radius:0;border:0;display:flex;flex-direction:column;padding:8px 10px}
.op-chartcard.big .op-chart{flex:1;height:auto;min-height:0}
.op-bighead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:0 2px 8px}
.op-bighead .symsearch{flex:0 1 220px}
.op-quick{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap}
.op-qrisk{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.op-qrisk input{width:64px;padding:6px 8px}
.op-qbtn{display:flex;flex-direction:column;align-items:center;line-height:1.15;padding:6px 16px;min-width:118px}
.op-qbtn small{font-size:11px;font-weight:500;opacity:.85;font-variant-numeric:tabular-nums}
.op-qbtn.buy{background:var(--green);color:#06281c}
.op-qbtn.sell{background:var(--red);color:#2a0a0a}
.op-qbtn:disabled{opacity:.45}
@media (max-width:700px),(max-height:500px) and (pointer:coarse) and (orientation:landscape){.op-quick{margin-left:0;width:100%;display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:"risk risk x" "sell lots buy" "c c c"}.op-qlots{grid-area:lots}.op-menubtn{grid-area:x;justify-self:end}.op-closeall{grid-area:c}.op-qrisk{grid-area:risk}.op-qbtn.sell{grid-area:sell}.op-qbtn.buy{grid-area:buy}.op-qbtn{min-width:0;padding:7px 8px;font-size:14px}.op-bighead .symsearch{flex:1 1 140px}}
.op-bighead .op-sym{width:100%;min-width:0}
.op-tag{cursor:pointer}.op-tag.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 2px 10px rgba(0,0,0,.5)}
.op-pos .pcard-h>span{margin-left:auto}
/* Menú con todas las temporalidades (▾) */
.tf-more{min-width:30px}
.tfmenu{position:absolute;z-index:30;top:calc(100% + 6px);right:0;width:min(330px,calc(100vw - 32px));background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:10px 12px;box-shadow:0 10px 26px rgba(0,0,0,.45);display:grid;grid-template-columns:repeat(3,1fr);gap:6px 10px}
.tfmenu-help{grid-column:1/-1;margin:0 0 4px;font-size:12px}
.tfmenu-g{display:flex;flex-direction:column;gap:2px;min-width:0}
.tfmenu-g>b{font-size:11px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}
.tfmenu-row{display:flex;align-items:center;border-radius:6px}
.tfmenu-row:hover{background:var(--accentbg)}
.tfmenu-row.on .tfmenu-name{color:var(--accent);font-weight:600}
.tfmenu-name{flex:1;text-align:left;background:none;border:0;padding:5px 6px;font-size:12.5px;white-space:nowrap;color:var(--text)}
.tfmenu-star{background:none;border:0;padding:3px 6px;color:var(--muted);font-size:15px;line-height:1}
.tfmenu-star.fav{color:var(--accent)}
.tfmenu-star:hover{color:var(--accent)}
@media (max-width:520px){.tfmenu{left:0;right:auto;grid-template-columns:1fr 1fr}}
/* Panel de la orden dentro del gráfico ampliado */
.op-bigpanel.on{border-color:var(--accent);color:var(--accent)}
.op-bigbody{flex:1;min-height:0;display:flex;gap:10px}
.op-bigbody .op-chart{flex:1;min-width:0;height:auto}
.op-bigbody .op-panel{width:320px;flex:none;overflow-y:auto;margin:0}
@media (max-width:760px),(max-height:500px) and (pointer:coarse) and (orientation:landscape){.op-bigbody{position:relative}.op-bigbody .op-panel{position:absolute;z-index:8;left:0;right:0;bottom:0;width:auto;max-height:62%;box-shadow:0 -10px 30px rgba(0,0,0,.55)}}
.op-confirm-close{margin-top:4px}
/* «SL»/«TP» para arrastrar desde el recuadro y recuadros del SL/TP de la seleccionada */
.op-chip{display:inline-flex;align-items:center;justify-content:center;padding:1px 6px;border-radius:4px;font-size:11px;font-weight:700;cursor:grab;touch-action:none;user-select:none;border:1px dashed currentColor}
.op-chip.sl{color:var(--red)}
.op-chip.tp{color:var(--pos-tp,var(--gain))}
.op-chip:hover{background:var(--accentbg)}
.op-lvl{cursor:ns-resize;touch-action:none;user-select:none;border-left-width:3px;padding-left:6px}
.op-lvl.sl{border-left-color:var(--red)}
.op-lvl.tp{border-left-color:var(--pos-tp,var(--gain))}
.op-lvl-t{font-weight:600}
.op-tag-off{opacity:.92}
/* Pips del SL/TP en el gráfico ampliado y aviso de a quién se copia */
.op-qpips{display:flex;flex-direction:column;font-size:11.5px;line-height:1.3;font-variant-numeric:tabular-nums;white-space:nowrap}
.op-copy{margin:0 0 10px;font-size:12.5px}
.op-copy p{margin:4px 0}
@media (max-width:700px),(max-height:500px) and (pointer:coarse) and (orientation:landscape){.op-qpips{grid-column:1/-1;flex-direction:row;gap:10px;flex-wrap:wrap}}
.op-spread{font-size:11.5px}
/* Lotes entre Vender y Comprar (gráfico ampliado) */
.op-qlots{display:flex;flex-direction:column;align-items:center;gap:1px}
.op-qlots input{width:72px;text-align:center;padding:5px 6px;font-weight:600;font-variant-numeric:tabular-nums}
.op-qlotmode{background:var(--panel2);border:1px solid var(--border);border-radius:5px;font-size:10.5px;color:var(--muted);padding:1px 7px;line-height:1.3;margin-top:2px}
.op-qlotmode.on{color:var(--accent);border-color:var(--accent);background:var(--accentbg)}
.op-qlotmode:hover{color:var(--text);border-color:var(--muted)}
.op-plan b{font-weight:700;margin-right:2px}
.op-plan .op-plan-t:empty{display:none}
button.op-chip{background:none;font:inherit;font-size:11px;font-weight:700;cursor:pointer}
/* Botón del menú (panel de la orden) a la derecha del todo del gráfico ampliado */
.op-menubtn{display:inline-flex;align-items:center;gap:6px;background:var(--panel2);border:1px solid var(--border);border-radius:8px;padding:6px 10px;color:var(--text);font-size:13px}
.op-menubtn:hover{border-color:var(--accent)}
.op-menubtn.on{border-color:var(--accent);color:var(--accent);background:var(--accentbg)}
.op-menuicon{font-size:17px;line-height:1}
.op-menuarrow{font-size:11px;color:var(--muted)}
.op-menubtn.on .op-menuarrow{color:var(--accent)}
.op-marks{position:absolute;left:0;top:0;pointer-events:none;z-index:4;overflow:hidden}
/* Marca «MAX» cuando el lotaje se queda en el máximo que se puede abrir */
.op-maxtag{display:inline-block;margin-left:6px;padding:0 5px;border-radius:4px;background:var(--red);color:#fff;font-size:10px;font-weight:700;letter-spacing:.03em;vertical-align:middle;line-height:16px}
.op-qlots{position:relative}
.op-qmax{position:absolute;top:-7px;right:-10px;margin:0;z-index:2}
/* Botones de la esquina del gráfico, colores del gráfico y mercado cerrado */
.op-attr-l{display:flex;gap:6px;flex-wrap:wrap}
.op-style{display:flex;flex-direction:column;gap:10px;margin:6px 0 14px}
.op-style-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.op-style-row input[type=color]{width:54px;height:30px;padding:0 2px;background:var(--bg);border:1px solid var(--border);border-radius:6px;cursor:pointer}
.op-qbtn.closed{background:var(--panel2)!important;color:var(--muted)!important;border:1px solid var(--border)}
/* Personalizar gráfico: filas y selector de color con paleta */
.op-style-head{display:flex;justify-content:space-between;font-size:11.5px;margin-bottom:-4px}
.op-style-cols{display:flex;align-items:center;gap:10px}
.op-style-pair{display:flex;gap:6px}
.cp{position:relative}
.cp-btn{display:flex;align-items:center;gap:4px;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:4px 5px}
.cp-btn:hover,.cp-btn:focus-visible{border-color:var(--accent)}
.cp-swatch{display:block;width:26px;height:20px;border-radius:4px;border:1px solid rgba(255,255,255,.15)}
.cp-caret{font-size:10px;color:var(--muted)}
.cp-pop{position:absolute;z-index:60;right:0;top:calc(100% + 6px);background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:10px;box-shadow:0 12px 30px rgba(0,0,0,.55);display:flex;flex-direction:column;gap:4px}
.cp-row{display:flex;gap:4px}
.cp-cell{width:20px;height:20px;border-radius:4px;border:1px solid rgba(0,0,0,.35);padding:0;cursor:pointer}
.cp-cell:hover{transform:scale(1.15)}
.cp-cell.on{outline:2px solid var(--accent);outline-offset:1px}
.cp-more{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:12.5px;color:var(--muted);cursor:pointer}
.cp-custom{width:30px;height:24px;padding:0;border:1px solid var(--border);border-radius:5px;background:none;cursor:pointer}
@media (max-width:520px){.cp-cell{width:18px;height:18px}.cp-pop{right:-8px}}
.op-style-sel{width:auto;padding:5px 8px;font-size:12.5px}
@media (max-width:520px){.op-style-row{flex-wrap:wrap}.op-style-cols{flex-wrap:wrap;justify-content:flex-end}}
/* Zona de las velas (debajo del lienzo transparente del gráfico) */
.op-plotbg{position:absolute;left:0;top:0;z-index:0;pointer-events:none;box-sizing:border-box}
.op-chart>.tv-lightweight-charts{position:relative;z-index:1}
/* Recuadro claro: letras, botones y casillas oscuros para que se vean */
.op-chartcard.op-light{--text:#1c1c1f;--muted:#5d606b;--border:#c9cbd2;--panel:#f1f2f5;--panel2:#ffffff;--bg:#ffffff;--accentbg:rgba(76,125,255,.2);--accent:#2563eb;--gain:#2563eb;--gainbg:37,99,235;color:var(--text)}
.op-chartcard.op-light .op-attr a{color:var(--muted)}
/* Filtro de símbolos: etiquetas + buscador */
.fpick{display:flex;flex-direction:column;gap:6px}
.fpick.disabled{opacity:.45;pointer-events:none}
.fchips{display:flex;flex-wrap:wrap;gap:6px}
.fchips:empty{display:none}
.fchip{display:inline-flex;align-items:center;gap:4px;background:var(--accentbg);border:1px solid var(--accent);color:var(--accent);border-radius:999px;padding:2px 4px 2px 10px;font-size:12.5px;font-weight:600}
.fchip-x{background:none;border:0;color:inherit;padding:0 4px;font-size:12px;line-height:1;border-radius:50%}
.fchip-x:hover{background:rgba(76,125,255,.25)}
.fpick .symsearch{flex:none}

/* Rendimiento en el móvil: tarjetas compactas */
@media (max-width:640px){
 .hero{padding:12px 14px;margin-bottom:8px;border-radius:10px}
 .hero-v{font-size:28px;margin:2px 0 4px}
 .hero .t-sub{font-size:11px}
 .tiles{gap:6px;margin-bottom:8px}
 .tile{padding:8px 10px;border-radius:8px}
 .tile .t-label{font-size:11px}
 .tile .t-value{font-size:16px;margin-top:1px}
 .tile .t-sub{font-size:10.5px;margin-top:1px}
 .tile .t-sub.minor{display:none}
 .pcard{padding:12px 12px;border-radius:10px}
}

/* Operar: una sola línea arriba (símbolo con lupa · temporalidades · cuenta) */
.op-top{margin-bottom:12px;gap:10px}
.op-top .tfs{flex:0 1 auto}
.op-accsel{margin-left:auto}
.op-accsel .perfsel{min-width:200px}
.op-symwrap{position:relative;flex:0 0 auto}
.op-symbtn{display:inline-flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:7px 12px;color:var(--text);font-size:15px}
.op-symbtn svg{color:var(--muted)}
.op-symbtn:hover,.op-symbtn:focus-visible{border-color:var(--accent)}.op-symbtn:hover svg{color:var(--accent)}
.op-symwrap .symsearch{width:260px}
.op-symwrap .op-sym{width:100%;min-width:0}
@media (max-width:900px){.op-accsel{margin-left:0;flex:1 1 100%}.op-accsel .perfsel{width:100%}}

/* Operar: lupa, nombre del símbolo sobre el gráfico y botones encima */
.op-symbtn{padding:8px 10px}
.op-symlabel{position:absolute;top:6px;left:8px;z-index:4;pointer-events:none;font-size:12px;color:var(--muted);white-space:nowrap;max-width:70%;overflow:hidden;text-overflow:ellipsis}
.op-symlabel b{color:var(--text);font-weight:600}
.op-cardhead{display:flex;justify-content:flex-end;padding:0 2px 8px}
.op-cardhead .op-quick{margin-left:0}
.op-qbtn.place{min-width:160px}
.op-qbtn.place.buy{background:var(--green);color:#06281c}.op-qbtn.place.sell{background:var(--red);color:#2a0a0a}
/* gráfico ampliado: barra de arriba más fina */
.op-chartcard.big{padding:4px 8px 6px}
.op-chartcard.big .op-bighead{padding:0 0 4px;gap:8px}
.op-chartcard.big .op-qbtn{padding:4px 12px;min-width:104px}
.op-chartcard.big .op-attr{padding-top:3px}
.op-chartcard.big .tfs .tab{padding:3px 8px}
.op-cardhead .op-qbtn{padding:4px 12px;min-width:100px;font-size:13px}
.op-cardhead .op-qrisk input,.op-cardhead .op-qlots input{padding-top:4px;padding-bottom:4px}
@media (max-width:700px),(max-height:500px) and (pointer:coarse) and (orientation:landscape){.op-qbtn.place{grid-column:1/-1}.op-cardhead{padding-bottom:6px}}
/* Vender / comprar dentro del gráfico (sin ampliar), arriba a la derecha */
.op-quickover{position:absolute;top:6px;right:68px;z-index:5}
.op-quickover .op-quick{margin:0;gap:6px;background:var(--panel);opacity:.95;border:1px solid var(--border);border-radius:8px;padding:4px 6px;display:flex;width:auto;flex-wrap:nowrap}
.op-quickover .op-qbtn{padding:3px 10px;min-width:86px;font-size:12.5px}
.op-quickover .op-qbtn small{font-size:10px}
.op-quickover .op-qlots input{width:60px;padding:3px 4px}
.op-quickover .op-qpips{font-size:10.5px}
.op-quickover .op-qbtn.place{min-width:140px}
/* botones con icono, sin texto */
.op-icon{display:inline-flex;align-items:center;justify-content:center;padding:5px 7px;line-height:0}
.op-icon svg{display:block}
.op-credit{font-size:11px}
@media (max-width:700px),(max-height:500px) and (pointer:coarse) and (orientation:landscape){
 .op-quickover{top:4px;right:46px}
 .op-quickover .op-quick{display:flex;grid-template-areas:none;padding:3px 4px;gap:4px}
 .op-quickover .op-qpips{display:none}
 .op-quickover .op-qbtn{min-width:70px;padding:3px 6px;font-size:12px}
 .op-quickover .op-qlots input{width:50px}
 /* gráfico ampliado en el móvil: arriba vender/comprar; abajo, botones pequeños */
 .op-chartcard.big{padding:4px 4px 2px}
 .op-bigtop{padding:0 0 4px}
 .op-bigtop .op-quick{grid-template-columns:1fr auto 1fr;grid-template-areas:"sell lots buy";gap:4px 6px}
 .op-bigtop .op-qbtn{padding:4px 6px;font-size:13px}
 .op-bigtop .op-qpips{font-size:10.5px;justify-content:center}
 .op-bigbottom{padding:4px 0 0;gap:6px}
 .op-bigbottom .op-attr-l{gap:4px;flex-wrap:nowrap;align-items:center}
 .op-bigbottom .op-symbtn{padding:5px 7px}
 .op-bigbottom .tfs .tab{padding:4px 8px}
 .op-bigbottom .tfmenu{top:auto;bottom:calc(100% + 6px)}
 .op-bigbottom .op-menubtn{padding:4px 8px;font-size:12px}
 .op-bigbottom .op-closeall{padding:4px 8px;font-size:11.5px}
 .op-bigbottom .op-credit{font-size:9px;white-space:nowrap}
}
.op-credit-in{position:absolute;left:6px;bottom:30px;z-index:4;font-size:9px;color:var(--muted);opacity:.7}
@media (max-width:700px),(max-height:500px) and (pointer:coarse) and (orientation:landscape){
 .op-quickover{top:24px}
 .op-bigbottom .op-menuarrow{display:none}
 .op-bigbottom .op-attr-l{width:100%}
 .op-bigbottom .op-menubtn{margin-left:auto}
}
/* Móviles con esquinas redondeadas y barra de inicio (iPhone…): nada pegado a los bordes */
:root{--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px)}
.main{padding-bottom:calc(40px + var(--sab));padding-left:max(26px,var(--sal));padding-right:max(26px,var(--sar))}
@media (max-width:900px){.main{padding-left:max(14px,var(--sal));padding-right:max(14px,var(--sar))}
 .side{padding-top:calc(18px + var(--sat));padding-bottom:calc(18px + var(--sab))}}
.op-chartcard.big{padding-top:calc(4px + var(--sat));padding-left:calc(8px + var(--sal));padding-right:calc(8px + var(--sar));padding-bottom:calc(6px + var(--sab))}
@media (max-width:700px),(max-height:500px) and (pointer:coarse) and (orientation:landscape){
 .op-chartcard.big{padding:calc(4px + var(--sat)) calc(4px + var(--sar)) calc(4px + var(--sab)) calc(4px + var(--sal))}
 /* la fila de abajo, separada de las esquinas curvas */
 .op-bigbottom{padding:6px 14px 2px}
}
#modals .overlay{padding-top:calc(28px + var(--sat));padding-bottom:calc(28px + var(--sab))}
/* Vender / comprar dentro del panel de trading */
.op-panelquick{margin:6px 0 12px}
.op-panelquick .op-quick,.op-mdrop .op-quick{margin:0;display:grid;width:100%;grid-template-columns:1fr auto 1fr;grid-template-areas:"pips pips pips" "sell lots buy";gap:4px 8px;flex-wrap:nowrap}
.op-panelquick .op-qpips,.op-mdrop .op-qpips{grid-area:pips;display:flex;flex-direction:row;gap:10px;justify-content:center;flex-wrap:wrap}
.op-panelquick .op-qbtn.sell,.op-mdrop .op-quick .op-qbtn.sell{grid-area:sell}
.op-panelquick .op-qbtn.buy,.op-mdrop .op-quick .op-qbtn.buy{grid-area:buy}
.op-panelquick .op-qlots,.op-mdrop .op-qlots{grid-area:lots}
.op-panelquick .op-qbtn.place,.op-mdrop .op-qbtn.place{grid-column:1/-1;grid-row:2}
.op-panelquick .op-qbtn,.op-mdrop .op-qbtn{min-width:0;padding:6px 8px}
.op-panelquick .op-qlots input,.op-mdrop .op-qlots input{width:62px}
/* móvil ampliado: botones de trading rápido arriba a la derecha del gráfico */
.op-mtrade{position:absolute;top:4px;right:44px;z-index:6;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.op-mrow{display:flex;gap:6px}
.op-mbtn{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:32px;padding:0 8px;background:var(--panel);border:1px solid var(--border);border-radius:8px;color:var(--text);opacity:.95}
.op-mbtn.on{border-color:var(--accent);color:var(--accent);background:var(--accentbg)}
.op-mbtn-txt{font-size:12px;font-weight:600}
.op-mdrop{width:min(320px,calc(100vw - 70px));background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:6px;box-shadow:0 8px 22px rgba(0,0,0,.45)}
.op-mlimits{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.op-mlimits p{grid-column:1/-1;margin:0 2px;font-size:11.5px}
.op-mlimits .op-qbtn,.op-mlimits .op-qbtn.buy,.op-mlimits .op-qbtn.sell{min-width:0;padding:7px 8px;grid-area:auto}
.op-panelquick .op-quick.pending,.op-mdrop .op-quick.pending{grid-template-columns:auto 1fr;grid-template-areas:"pips pips" "lots place"}
.op-panelquick .op-quick.pending .op-qbtn.place,.op-mdrop .op-quick.pending .op-qbtn.place{grid-area:place;grid-column:auto;grid-row:auto}
/* iPhone: no hacer zoom al escribir (pasa con letra de menos de 16 px) */
@media (max-width:900px) and (pointer:coarse){input,select,textarea{font-size:16px}}
/* desplegable de arriba (móvil): solo vender · lotes · comprar */
.op-mdrop .op-qpips{display:none}
.op-mdrop .op-quick{grid-template-areas:"sell lots buy"}
/* orden límite rápida: el panel solo asoma con el botón de «Colocar…» */
.op-bigbody .op-panel.peek{max-height:none;padding:8px 10px}
.op-panel.peek>:not(.op-panelquick){display:none}
.op-panel.peek .op-panelquick{margin:0}
.op-panel.peek .op-qpips{display:none}
.op-panel.peek .op-quick.pending{grid-template-areas:"lots place"}
.side-back{position:fixed;inset:0;z-index:14;background:transparent}
/* Aviso de precio sin actualizar (encima del gráfico) y «Enviando orden…» */
.op-stale{position:absolute;left:50%;bottom:40px;transform:translateX(-50%);z-index:6;background:rgba(120,30,30,.92);color:#fff;font-size:12px;font-weight:600;padding:5px 10px;border-radius:6px;white-space:nowrap;pointer-events:none;max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis}
.op-sending{position:fixed;left:50%;top:calc(var(--sat,0px) + 12px);transform:translateX(-50%);z-index:60;background:#0c0e15;color:#8fb0ff;border:1px solid #4c7dff;font-weight:600;font-size:14px;padding:8px 16px;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.5);pointer-events:none}
.op-stale.offline,.net-bar.offline{background:rgba(150,20,20,.96)}
.net-bar{position:fixed;left:50%;top:calc(var(--sat,0px) + 8px);transform:translateX(-50%);z-index:70;background:rgba(120,30,30,.94);color:#fff;font-size:13px;font-weight:600;padding:7px 14px;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.5);pointer-events:none;max-width:calc(100% - 24px);text-align:center}
@media (max-width:700px),(max-height:500px) and (pointer:coarse) and (orientation:landscape){.op-stale{white-space:normal;text-align:center;width:max-content;max-width:calc(100% - 70px)}}
.op-stale,.net-bar{white-space:pre-line;text-align:center;line-height:1.35}
/* Móvil: primero solo las temporalidades favoritas, con «+» para ver todas */
.tfmenu.tfmini{display:flex;flex-wrap:wrap;gap:6px;width:auto;max-width:min(260px,calc(100vw - 32px));padding:8px}
.tfmini .tab{min-width:44px}
.tfmini-more{font-weight:700;font-size:16px}
/* «✓ Compra 0,17 FB» abajo, se va solo */
.op-toast{position:fixed;left:50%;bottom:calc(var(--sab,0px) + 22px);transform:translateX(-50%);z-index:60;background:#14301f;color:#7ee2a8;border:1px solid #2f8a57;font-weight:600;font-size:14px;padding:9px 16px;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.5);pointer-events:none;transition:opacity .45s;max-width:calc(100% - 32px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.op-toast.bye{opacity:0}
/* Buscador de símbolo abierto desde abajo (gráfico ampliado del móvil): arriba del todo */
.symsearch.symfloat{position:fixed;left:12px;right:12px;top:calc(var(--sat,0px) + 10px);z-index:90;width:auto}
.symsearch.symfloat .op-sym{width:100%;min-width:0;font-size:16px;padding:10px 12px;box-shadow:0 8px 24px rgba(0,0,0,.55);border-color:var(--accent)}
.symsearch.symfloat .symlist{max-height:45vh;min-width:0}
/* Bajar para actualizar (móvil) */
.ptr{position:fixed;left:50%;top:calc(var(--sat,0px) + 4px);z-index:95;display:flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--border);color:var(--text);border-radius:999px;padding:7px 14px 7px 10px;font-size:13px;font-weight:600;box-shadow:0 6px 18px rgba(0,0,0,.5);pointer-events:none;opacity:0;transform:translate(-50%,0)}
.ptr-i{display:inline-block;font-size:18px;line-height:1;color:var(--muted)}
.ptr.ready .ptr-i,.ptr.spin .ptr-i{color:var(--accent)}
.ptr.spin .ptr-i{animation:ptrspin .8s linear infinite}
@keyframes ptrspin{to{transform:rotate(360deg)}}
.op-retry{margin-left:10px}
/* Cuentas: cada cuenta se despliega con sus operaciones */
.acc-row{cursor:pointer}
.acc-row:hover{background:rgba(76,125,255,.04)}
.acc-row.open{background:var(--accentbg)}
.acc-detail{padding:12px 16px 14px 58px;background:var(--panel2);border-top:1px solid var(--border);box-shadow:inset 3px 0 0 var(--accent)}
.acc-detail-h{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.acc-detail-h .btn{display:inline-flex;align-items:center;gap:6px}
.acc-detail p{margin:6px 0}
.acc-detail .op-row:first-child{border-top:0}
@media (max-width:700px),(max-height:500px) and (pointer:coarse) and (orientation:landscape){.acc-detail{padding:10px 12px 12px 14px}}
/* «?» de ayuda junto a un estado */
.qhelp{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:6px;border-radius:50%;border:1px solid var(--accent);background:transparent;color:var(--accent);font-size:11px;font-weight:700;padding:0;line-height:1;cursor:pointer;vertical-align:middle}
.qhelp:hover{background:var(--accentbg)}
/* ===== Gráfico (siempre a pantalla completa) con paneles a la derecha ===== */
.op-chartcard.big{gap:0}
.op-bighead{flex-wrap:nowrap;min-width:0}
.op-logo{flex:none;width:38px;height:38px;display:grid;place-items:center;border-radius:9px;border:1px solid var(--border);background:var(--bg);color:var(--accent);padding:0;cursor:pointer}
.op-logo:hover,.op-logo:focus-visible{border-color:var(--accent);box-shadow:0 0 0 3px var(--accentbg)}
.op-accchip{flex:0 1 auto;min-width:0;max-width:230px;display:inline-flex;align-items:center;gap:4px;background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:7px 10px;color:var(--text);font-size:13px;white-space:nowrap}
.op-accchip.master{border-color:var(--accent)}
.op-accchip-n{overflow:hidden;text-overflow:ellipsis;font-weight:600}
.op-accchip:hover{border-color:var(--accent)}
.op-bigbody{gap:0}
.op-bigbody .op-chart{border-radius:0}
.op-bigbody .op-rpanel{width:340px;flex:none;margin:0 0 0 8px;padding:0;overflow-y:auto;border-radius:10px;display:flex;flex-direction:column}
.op-rpanel.op-rp-trade,.op-rpanel:not(.op-rp-acc):not(.op-rp-list){padding:0 14px 14px}
.op-rp-h{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:8px;padding:12px 14px;margin:0 -14px 6px;background:var(--panel);border-bottom:1px solid var(--border)}
.op-rp-acc .op-rp-h,.op-rp-list .op-rp-h{margin:0}
.op-rp-h h3{margin:0;font-size:15px;flex:1}
.op-rp-x{background:none;border:0;color:var(--muted);font-size:15px;padding:4px 6px;border-radius:6px;cursor:pointer}
.op-rp-x:hover{color:var(--text);background:var(--panel2)}
.op-rp-b{padding:10px;display:flex;flex-direction:column;gap:8px}
.op-rail{width:54px;flex:none;margin-left:8px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 0;background:var(--panel);border:1px solid var(--border);border-radius:10px}
.op-rail-sep{flex:1}
.op-railbtn{width:42px;height:42px;display:grid;place-items:center;border-radius:10px;border:1px solid transparent;background:none;color:var(--muted);cursor:pointer;padding:0}
.op-railbtn svg{width:22px;height:22px}
.op-railbtn:hover{color:var(--text);background:var(--panel2)}
.op-railbtn.on{color:var(--accent);background:var(--accentbg);border-color:rgba(76,125,255,.45)}
/* tarjetas de cuentas */
.op-acc{border:1px solid var(--border);border-radius:10px;padding:9px 10px;background:var(--panel2);cursor:pointer}
.op-acc:hover{border-color:#3d3d44}
.op-acc.master{border-color:var(--accent);box-shadow:inset 0 0 0 1px rgba(76,125,255,.22)}
.op-acc.sel{background:var(--accentbg)}
.op-acc.off{opacity:.7}
.op-acc-h{display:flex;align-items:center;gap:6px;min-width:0}
.op-acc-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.op-acc-star{background:none;border:0;padding:0 2px;font-size:16px;line-height:1;color:var(--muted);cursor:pointer}
.op-acc-star.fav{color:var(--accent)}
.op-acc-tag{flex:none;font-size:10.5px;padding:1px 8px;border-radius:999px;border:1px solid var(--border);color:var(--muted)}
.op-acc-tag.m{color:var(--accent);border-color:var(--accent)}
.op-acc-m{display:flex;justify-content:space-between;gap:8px;margin-top:4px;font-size:12.5px;color:var(--muted)}
.op-acc-m b{color:var(--text)}.op-acc-m b.pos{color:var(--gain)}.op-acc-m b.neg{color:var(--red)}
.op-acc-ops{margin-top:6px}
.op-rpanel .op-row{grid-template-columns:auto 1fr auto;row-gap:4px;gap:4px 8px;padding:7px 0;font-size:12.5px}
.op-rpanel .op-row .muted{grid-column:1/-1}
.op-rpanel .op-acts{grid-column:1/-1;justify-content:flex-start;gap:5px}
.op-rpanel .op-acts .btn{padding:3px 9px;font-size:12px}
/* lista de seguimiento */
.op-wl{gap:2px}
.op-wl-g{display:flex;align-items:center;gap:4px;margin-top:8px}
.op-wl-g:first-child{margin-top:0}
.op-wl-gname{flex:1;text-align:left;background:none;border:0;color:var(--muted);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:4px 2px;cursor:pointer}
.op-wl-ic{background:none;border:1px solid transparent;color:var(--muted);border-radius:6px;padding:1px 7px;font-size:14px;cursor:pointer}
.op-wl-ic:hover{color:var(--accent);border-color:var(--border)}
.op-wl-row{display:grid;grid-template-columns:20px minmax(0,1fr) auto 62px 20px;align-items:center;gap:6px;padding:7px 6px;border-radius:7px;cursor:pointer;font-variant-numeric:tabular-nums}
@media (hover:hover){.op-wl-row:hover{background:var(--panel2)}}
.op-wl-row.on{background:var(--accentbg)}
.op-wl-s{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.op-wl-p{text-align:right}
.op-wl-d{text-align:right;font-size:12px}
.op-wl-star{background:none;border:0;padding:0;color:var(--muted);font-size:15px;line-height:1;cursor:pointer}
.op-wl-star.fav{color:var(--accent)}
.op-wl-del{background:none;border:0;padding:0;color:var(--muted);font-size:12px;opacity:0;cursor:pointer}
@media (hover:hover){.op-wl-row:hover .op-wl-del{opacity:1}}
.op-wl-del:hover{color:var(--red)}
.op-wl-add{padding:4px 0}.op-wl-add .symsearch{width:100%}.op-wl-add .op-sym{width:100%;min-width:0}
.op-wl-empty{padding:2px 8px;margin:0}
.op-wl-newbtn{align-self:flex-start;margin-top:10px}
.op-wl-new{display:flex;gap:6px}.op-wl-new input{flex:1;min-width:0}
/* menú de la web desde el gráfico */
.op-navmenu{position:fixed;z-index:95;width:240px;background:var(--panel2);border:1px solid var(--border);border-radius:12px;padding:8px;box-shadow:0 16px 36px rgba(0,0,0,.55);display:flex;flex-direction:column;gap:2px}
.op-navmenu-h{display:flex;align-items:center;gap:8px;padding:6px 8px 10px;color:var(--accent)}
.op-navmenu-h b{color:var(--text)}
.op-navmenu button{background:none;border:0;text-align:left;padding:9px 10px;border-radius:8px;color:var(--text);font-size:14px;cursor:pointer}
.op-navmenu button:hover{background:var(--panel)}
.op-navmenu button.on{color:var(--accent);background:var(--accentbg)}
.op-navmenu-sep{height:1px;background:var(--border);margin:6px 4px}
/* móvil: barra de abajo y panel que sube */
.op-tabs{display:flex;justify-content:space-around;gap:4px;padding:6px 6px 0;border-top:1px solid var(--border);margin-top:4px}
.op-tabbtn{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:0;color:var(--muted);font-size:10.5px;padding:4px 0;cursor:pointer}
.op-tabbtn svg{width:22px;height:22px}
.op-tabbtn.on{color:var(--accent)}
.op-mhead{gap:6px}
.op-mhead .op-accchip{margin-left:auto;max-width:42vw;padding:6px 8px;font-size:12px}
.op-mhead .op-logo{width:34px;height:34px}
@media (max-width:760px),(max-height:500px) and (pointer:coarse) and (orientation:landscape){
 .op-bigbody .op-rpanel{position:absolute;z-index:8;left:0;right:0;bottom:0;width:auto;margin:0;max-height:62%;border-radius:14px 14px 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.55)}
}
/* Trading en el ordenador: a mercado se usan los botones de arriba (no se repiten en el panel) */
.op-rpanel.desk .op-panelquick .op-quick:not(.pending){display:none}
.op-rpanel.desk .op-panelquick:has(.op-quick:not(.pending)){margin:0}
/* panel Operaciones */
.op-ops-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:8px 10px}
.op-ops-sum div{display:flex;flex-direction:column;gap:2px;font-size:12px}
.op-ops-sum b{font-size:13.5px;font-variant-numeric:tabular-nums}
.op-ops-sum b.pos{color:var(--gain)}.op-ops-sum b.neg{color:var(--red)}
.op-ops-closeall{align-self:flex-start;margin-top:4px}
.op-rp-accname{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* lista de seguimiento: ordenar */
.op-wl-move{display:inline-flex;gap:2px}
.op-wl-move .op-wl-ic{font-size:10px;padding:2px 6px}
.op-wl-move .op-wl-ic:disabled{opacity:.3}
.op-wl-del.show{opacity:1}
.op-wl-edit.on{border-color:var(--accent);color:var(--accent)}
.op-tabbtn{font-size:10px}
/* panel Historial */
.op-hist-f{display:flex;flex-direction:column;gap:6px}
.op-hist-sel{width:100%}
.op-hist-dates{display:flex;align-items:center;gap:6px}.op-hist-dates input{flex:1;min-width:0}
.op-hist{display:flex;flex-direction:column;gap:6px}
.op-hist-sum{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:10px}
.op-hist-sum div{display:flex;justify-content:space-between;gap:6px;font-size:12.5px}
.op-hist-sum div.tot{border-top:1px solid var(--border);padding-top:6px}
.op-hist-sum b{font-variant-numeric:tabular-nums}.op-hist-sum b.pos,.op-hist-row b.pos{color:var(--gain)}.op-hist-sum b.neg,.op-hist-row b.neg{color:var(--red)}
.op-hist-row{border-top:1px solid var(--border);padding:7px 2px;font-size:12.5px;font-variant-numeric:tabular-nums}
.op-hist-l1{display:grid;grid-template-columns:62px 1fr auto auto;gap:8px;align-items:center}
.op-hist-l1 b:last-child{text-align:right;min-width:78px}
.op-hist-l2{font-size:11.5px;margin-top:2px}
.op-tabs .op-tabbtn span{white-space:nowrap}
@media (max-width:420px){.op-tabbtn{font-size:9.5px}.op-tabbtn svg{width:20px;height:20px}}
/* Anchos de los paneles: Cuentas más ancho; Operaciones, Historial y Seguimiento más estrechos y apretados */
.op-bigbody .op-rpanel{margin-left:4px}
.op-bigbody .op-rpanel.op-rp-acc{width:380px}
.op-bigbody .op-rpanel.op-rp-list,.op-bigbody .op-rpanel.op-rp-ops,.op-bigbody .op-rpanel.op-rp-hist{width:290px}
.op-rail{margin-left:4px;width:48px}
.op-railbtn{width:38px;height:38px}
.op-rp-ops .op-rp-b,.op-rp-hist .op-rp-b,.op-rp-list .op-rp-b{padding:8px;gap:6px}
.op-rp-ops .op-rp-h,.op-rp-hist .op-rp-h,.op-rp-list .op-rp-h{padding:10px 12px}
.op-rpanel:not(.op-rp-acc):not(.op-rp-list):not(.op-rp-trade){padding:0 10px 10px}
.op-rp-ops .op-ops-sum{padding:6px 8px;gap:4px}
.op-rp-ops .op-row,.op-rp-acc .op-row{padding:5px 0}
.op-hist-sum{padding:8px;gap:4px 10px}
.op-hist-row{padding:5px 0}
.op-hist-l1{grid-template-columns:52px 1fr auto auto;gap:6px}
.op-hist-l1 b:last-child{min-width:68px}
.op-wl-row{padding:5px 4px;grid-template-columns:18px minmax(0,1fr) auto 56px 16px;gap:5px}
.op-wl-g{margin-top:6px}
@media (max-width:760px),(max-height:500px) and (pointer:coarse) and (orientation:landscape){.op-bigbody .op-rpanel.op-rp-acc,.op-bigbody .op-rpanel.op-rp-list,.op-bigbody .op-rpanel.op-rp-ops,.op-bigbody .op-rpanel.op-rp-hist{width:auto;margin:0}}
.op-rpanel .op-hist-sum{grid-template-columns:1fr;gap:3px}
.op-rpanel .op-hist-sum b{white-space:nowrap}
.op-rpanel .op-hist-sum div.tot{padding-top:4px}
.op-rpanel .op-hist-sum div.tot+div.tot{border-top:0;padding-top:0}
.op-rpanel .op-ops-sum b{white-space:nowrap;font-size:12.5px}
/* Lista de seguimiento: arrastrar para ordenar */
.op-wl-row,.op-wl-g{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.op-wl-row.dragging,.op-wl-g.dragging{opacity:.35}
.op-wl-ghost{position:fixed;left:0;top:0;z-index:100;pointer-events:none;background:var(--panel2);border:1px solid var(--accent);border-radius:8px;box-shadow:0 10px 26px rgba(0,0,0,.55);opacity:.95}
.op-wl-row.drop-before,.op-wl-g.drop-before{box-shadow:inset 0 2px 0 var(--accent)}
.op-wl-row.drop-after,.op-wl-g.drop-after{box-shadow:inset 0 -2px 0 var(--accent)}
.op-grid-lbl{display:flex;align-items:center;gap:8px;cursor:pointer}
.op-grid-row{align-items:flex-start}
/* varias operaciones del mismo lado: recuadro del precio medio */
.op-tag.op-avg{border-left-width:4px;font-weight:600}
.op-avg-n{font-size:11px;color:var(--muted);background:var(--panel);border:1px solid var(--border);border-radius:999px;padding:0 6px}
/* barra de arriba del gráfico siempre en una sola línea */
.op-bighead .tfs{flex-wrap:nowrap;flex:0 1 auto;min-width:0;overflow:visible}
.op-bighead .op-quick{flex-wrap:nowrap;min-width:0}
.op-bighead .op-qpips{white-space:nowrap;font-size:11.5px}
@media (max-width:1350px){.op-bighead .op-qpips{display:none}}
.op-stepnote{margin:4px 0}
/* Recuadros del gráfico con el borde del color de su línea:
   Buy azul, Sell rojo, SL rojo y TP verde */
.op-tag.buy{border:1.5px solid #3b82f6;border-left-width:3px}
.op-tag.sell{border:1.5px solid var(--red);border-left-width:3px}
.op-tag.op-lvl.sl{border:1.5px solid var(--red);border-left-width:3px}
.op-tag.op-lvl.tp{border:1.5px solid var(--pos-tp,var(--gain));border-left-width:3px}
.op-tag.op-avg{border-width:2px;border-left-width:4px}
.op-tag.on{border-color:var(--accent)}
/* colores de las operaciones (se pueden cambiar en Personalizar) */
.op-tag.buy{border-color:var(--pos-buy,var(--green))}
.op-tag.sell{border-color:var(--pos-sell,var(--red))}
.op-tag.op-lvl.sl{border-color:var(--pos-sl,var(--red))}
.op-tag.op-lvl.tp{border-color:var(--pos-tp,var(--green))}
.op-tag.on{border-color:var(--accent)}
.op-lvl-more{cursor:pointer;color:var(--text)}
.op-lvl-more:hover{border-color:var(--accent);color:var(--accent)}
.op-lvl-open{box-shadow:0 4px 14px rgba(0,0,0,.55)}
/* Ajustes del gráfico por apartados */
.op-style-sec{margin:10px 0 0;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);border-top:1px solid var(--border);padding-top:12px}
.op-style-sec:first-child{border-top:0;padding-top:0;margin-top:0}
.op-style-sw{display:inline-flex;align-items:center;cursor:pointer}
.op-style-sw input{width:18px;height:18px;margin:0;accent-color:var(--accent)}
.op-style-sub{display:flex;flex-direction:column;gap:8px;padding-left:14px;border-left:2px solid var(--border)}
.op-style-sub .op-style-row>span{color:var(--muted);font-size:13px}
.op-style-sel{min-width:0}
#modals .modal:has(.op-style){max-height:calc(100vh - 56px);overflow-y:auto}
/* recuadros de las operaciones: fondo elegido y borde que se puede quitar */
.op-chartcard .op-tag{background:var(--pos-tag-bg,var(--panel2))}
.op-notagborder .op-tag:not(.on){border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent}
.op-tag-light .op-tag{color:#1a1a1d}.op-tag-light .op-tag .op-tag-side{color:#55565c}
.op-style-row.g{display:grid;grid-template-columns:minmax(0,1fr) 24px auto auto;gap:8px;align-items:center}
.op-style-row.g>:nth-child(3),.op-style-row.g>:nth-child(4){justify-self:end}
.op-style-row.g select{max-width:170px}
@media (max-width:520px){.op-style-row.g{grid-template-columns:minmax(0,1fr) 22px auto auto;gap:6px}.op-style-row.g select{max-width:120px;font-size:13px}}
.op-style-row.g{grid-template-columns:minmax(0,1fr) 24px 70px 70px}
.op-style-row.g.sel{grid-template-columns:minmax(0,1fr) 0 auto auto}
.op-style-row.g.sel>:nth-child(2){display:none}
@media (max-width:520px){.op-style-row.g{grid-template-columns:minmax(0,1fr) 22px 64px 64px}}
/* Cierre programado (Editar cuenta) */
/* (22/10/2026) como las demás casillas (Cuenta activa, Permitir operar desde la web), sin recuadro */
.ac-box{margin:0}
.ac-box .check{margin:4px 0}
.ac-opts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:10px 0 4px 26px}
.ac-row{display:flex;align-items:center;gap:8px}
.ac-time{width:auto;padding:6px 8px;font-variant-numeric:tabular-nums}
.ac-days{display:flex;gap:4px}
.ac-day{width:30px;height:30px;border-radius:50%;border:1px solid var(--border);background:var(--bg);color:var(--muted);font-weight:600;font-size:12px;cursor:pointer;padding:0}
.ac-day.on{background:var(--accentbg);border-color:var(--accent);color:var(--accent)}
.ac-box .small-note{margin:2px 0 8px 26px;font-size:12px}
.ac-time{background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:8px;color-scheme:dark}
/* letras de los recuadros según su fondo, y borde de color propio */
.op-chartcard .op-tag{color:var(--pos-tag-fg,var(--text))}
.op-chartcard .op-tag .op-tag-side,.op-chartcard .op-tag .muted,.op-chartcard .op-tag .op-tag-x{color:var(--pos-tag-muted,var(--muted))}
.op-chartcard .op-tag .op-tag-pl.pos{color:var(--gain)}.op-chartcard .op-tag .op-tag-pl.neg{color:var(--red)}
.op-tagborder-own .op-tag:not(.on){border-color:var(--pos-tag-border)!important}
/* elegir línea con dibujo */
.op-linepick{display:inline-flex;align-items:center;gap:4px;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:5px 6px;color:var(--text);cursor:pointer}
.op-linepick:hover{border-color:var(--accent)}
.op-linepick-c{font-size:10px;color:var(--muted)}
.op-linepop{position:fixed;z-index:200;background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:6px;box-shadow:0 12px 28px rgba(0,0,0,.55);display:flex;flex-direction:column;gap:2px}
.op-linepop button{background:none;border:0;border-radius:6px;padding:7px 8px;color:var(--text);cursor:pointer;display:flex}
.op-linepop button:hover{background:var(--panel)}
.op-linepop button.on{background:var(--accentbg);color:var(--accent)}
.op-style-row.g>:nth-child(3).op-linepick,.op-style-row.g>:nth-child(4).op-linepick{justify-self:end}

/* ---------- gráfico nuevo (KLineChart): dibujos e indicadores ---------- */
.op-chart>.kc-root{position:absolute;inset:0;z-index:1}
.kc-root.kc-ns *{cursor:ns-resize!important}
.kc-root.kc-pt *{cursor:pointer!important}
.kc-tools{width:40px;flex:none;margin-right:4px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;background:var(--panel);border:1px solid var(--border);border-radius:10px;overflow-y:auto;scrollbar-width:none}
.kc-tools::-webkit-scrollbar{display:none}
.kc-tb{width:32px;height:32px;flex:none;display:flex;align-items:center;justify-content:center;border:0;border-radius:6px;background:transparent;color:var(--muted);cursor:pointer;padding:0}
.kc-tb:hover{background:var(--panel2);color:var(--text)}
.kc-tb.on{background:var(--accentbg);color:var(--accent)}
.kc-tb.danger:hover{color:var(--red)}
.kc-tgroup{position:relative;display:flex;align-items:center}
.kc-tb-more{position:absolute;right:-5px;bottom:1px;width:10px;height:14px;border:0;background:transparent;color:var(--muted);font-size:11px;line-height:1;padding:0;cursor:pointer;opacity:.6}
.kc-tb-more:hover{opacity:1;color:var(--text)}
.kc-sep{width:22px;height:1px;background:var(--border);margin:4px 0;flex:none}
.kc-flyout{position:fixed;z-index:60;min-width:210px;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:6px;box-shadow:0 12px 30px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:2px}
.kc-flyout button{display:flex;align-items:center;gap:10px;border:0;background:transparent;color:var(--text);padding:7px 10px;border-radius:6px;cursor:pointer;text-align:left;font:inherit;font-size:13px}
.kc-flyout button:hover{background:var(--panel2)}
.kc-flyout button.on{color:var(--accent)}
.kc-flyout svg{color:var(--muted);flex:none}
.kc-edit{position:absolute;top:30px;left:50%;transform:translateX(-50%);z-index:9;display:flex;align-items:center;gap:4px;padding:4px 6px;background:var(--panel);border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.35);white-space:nowrap}
.kc-edit-n{font-size:12px;color:var(--muted);padding:0 4px}
.kc-eb{min-width:30px;height:28px;display:flex;align-items:center;justify-content:center;border:0;border-radius:6px;background:transparent;color:var(--text);cursor:pointer;padding:0 4px;font:inherit;font-weight:600}
.kc-eb:hover{background:var(--panel2)}
.kc-eb.on{color:var(--accent);background:var(--accentbg)}
.kc-eb.danger:hover{color:var(--red)}
.kc-eb svg{width:18px;height:18px}
.kc-edit .cp-btn{height:28px}
.kc-pop{position:fixed;z-index:70;background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:4px;box-shadow:0 10px 26px rgba(0,0,0,.4);display:flex;flex-direction:column;gap:2px}
.kc-pop button{border:0;background:transparent;color:var(--text);padding:6px 10px;border-radius:6px;cursor:pointer;display:flex;align-items:center}
.kc-pop button:hover{background:var(--panel2)}
.kc-pop button.on{background:var(--accentbg)}
.op-indbtn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border:1px solid var(--border);border-radius:8px;background:transparent;color:var(--text);cursor:pointer;font:inherit;font-size:13px;flex:none}
.op-indbtn:hover{background:var(--panel2)}
.op-indbtn:not(.op-laybtn) i{font-style:italic;font-family:Georgia,serif;font-weight:700;color:var(--accent)}
.kc-ind-on{margin-bottom:8px}
.kc-ind-q{width:100%;box-sizing:border-box;margin:4px 0 6px}
.kc-ind-list{max-height:46vh;overflow-y:auto}
.kc-ind-row{display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;padding:7px 8px;border-radius:8px}
.kc-ind-row.add{border:0;background:transparent;color:var(--text);cursor:pointer;text-align:left;font:inherit}
.kc-ind-row.add:hover{background:var(--panel2)}
.kc-ind-row.on{background:var(--panel2);margin-bottom:4px}
.kc-ind-name{flex:1;min-width:0}
.kc-ind-plus{color:var(--accent);font-size:18px;line-height:1}
.kc-x{min-width:32px}
.kc-ind-params{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:4px 12px;margin-bottom:6px}
/* móvil: lápiz abajo a la izquierda y las herramientas encima del gráfico */
.kc-pencil{position:absolute;left:6px;bottom:34px;z-index:7;width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:var(--panel);color:var(--text);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.35);padding:0}
.kc-pencil.on{background:var(--accent);border-color:var(--accent);color:var(--on)}
.kc-tools.m{position:absolute;left:6px;top:28px;bottom:78px;z-index:7;margin:0;width:42px;box-shadow:0 6px 20px rgba(0,0,0,.4)}
.kc-tools.m.hidden{display:none}
.op-mhead .op-indbtn{height:28px;padding:0 8px}
@media (max-width:700px),(max-height:500px) and (pointer:coarse) and (orientation:landscape){.kc-edit{top:auto;bottom:80px;max-width:calc(100% - 60px);overflow-x:auto}}
.kc-ind-q{background:var(--panel2);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:9px 11px;font:inherit}
.kc-ind-q:focus{outline:none;border-color:var(--accent)}
.upd-bar{position:fixed;left:50%;top:calc(10px + var(--sat,0px));transform:translateX(-50%);z-index:90;display:flex;align-items:center;gap:12px;padding:8px 10px 8px 14px;background:var(--panel2);border:1px solid var(--accent);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.5);font-size:13px;white-space:nowrap}
/* ajustes de un dibujo */
.kc-ds{max-height:62vh;overflow-y:auto;padding-right:4px}
.kc-ds-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;flex-wrap:wrap}
.kc-ds-row>span{color:var(--text);font-size:13px}
.kc-ds-c{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.kc-ds-chk{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text);cursor:pointer}
.kc-ds-range{display:inline-flex;align-items:center;gap:6px}
.kc-ds-range input{width:110px;accent-color:var(--accent)}
.kc-ds-op{font-size:12px;color:var(--muted);min-width:34px;text-align:right}
.kc-ds-text{width:100%;box-sizing:border-box;background:var(--panel2);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:8px 10px;font:inherit;resize:vertical;margin-bottom:4px}
.kc-ds-text:focus{outline:none;border-color:var(--accent)}
.kc-fib-lv{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:4px 12px;margin-bottom:6px}
.kc-fib-row{display:flex;align-items:center;gap:6px}
.kc-fib-v{width:70px;background:var(--panel2);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:4px 6px;font:inherit}
.kc-x2{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:12px;padding:2px 4px}
.kc-x2:hover{color:var(--red)}
.kc-fib-lv>.btn{justify-self:start}
.kc-ds .kc-ds-c input[type=number],.kc-ds .kc-fib-v{width:84px;flex:none;padding:5px 8px}
.kc-ds .kc-ds-c input[type=checkbox],.kc-ds .kc-fib-row input[type=checkbox],.kc-ds .kc-ds-chk input{width:auto;flex:none;margin:0}
.kc-ds .kc-ds-c select{width:auto}
.cp-pop.cp-fixed{position:fixed;right:auto;top:auto;z-index:200}
/* ordenador: columna de la derecha de arriba abajo (Trading arriba, separado; lo demás debajo) */
.op-chartcard.big.railfull{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto;column-gap:0}
.op-chartcard.big.railfull>.op-bighead{grid-column:1;grid-row:1;min-width:0}
.op-chartcard.big.railfull>.op-bigbody{grid-column:1;grid-row:2;min-height:0}
.op-chartcard.big.railfull>.op-chartmsg{grid-column:1;grid-row:3}
.op-chartcard.big.railfull>.op-railtop{grid-column:2;grid-row:1;align-self:stretch;margin:0 0 4px 10px;width:48px;display:flex;align-items:center;justify-content:center;background:var(--panel);border:1px solid var(--border);border-radius:10px;box-sizing:border-box}
.op-chartcard.big.railfull>.op-rail{grid-column:2;grid-row:2/4;margin-left:10px;min-height:0}
.op-chartcard.big.railfull .op-bigbody .op-rpanel{margin-right:0}
/* (22/10/2026) grupos de dibujos con títulos y estrella de favoritos */
.kc-flyout{overflow-y:auto;min-width:250px}
.kc-fly-h{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:8px 10px 3px}
.kc-fly-row{display:flex;align-items:center;border-radius:6px}
.kc-fly-row:hover{background:var(--panel2)}
.kc-flyout .kc-fly-row button{background:transparent}
.kc-flyout .kc-fly-tool{flex:1;min-width:0}
.kc-fly-row.on .kc-fly-tool{color:var(--accent)}
.kc-flyout .kc-fly-star{flex:none;padding:6px 8px;color:var(--muted);opacity:0;transition:opacity .1s}
.kc-fly-row:hover .kc-fly-star,.kc-fly-star.on,.kc-fly-star:focus-visible{opacity:1}
.kc-flyout .kc-fly-star.on svg{color:#ffb300;fill:#ffb300}
.kc-flyout .kc-fly-star:hover svg{color:#ffb300}
@media (hover:none){.kc-flyout .kc-fly-star{opacity:1}}
/* menú del botón derecho y de la papelera */
.kc-menu{position:fixed;z-index:80;min-width:250px;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:5px;box-shadow:0 12px 30px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:1px}
.kc-menu button{display:flex;align-items:center;gap:10px;border:0;background:transparent;color:var(--text);padding:7px 10px;border-radius:6px;cursor:pointer;text-align:left;font:inherit;font-size:13px}
.kc-menu button:hover:not(:disabled),.kc-menu button:focus-visible{background:var(--panel2);outline:none}
.kc-menu button:disabled{opacity:.45;cursor:default}
.kc-menu button.danger:hover:not(:disabled){color:var(--red)}
.kc-menu svg,.kc-menu-i{width:16px;height:16px;flex:none;color:var(--muted)}
.kc-menu-l{flex:1}
.kc-menu-k{color:var(--muted);font-size:12px;margin-left:16px}
.kc-menu-sep{height:1px;background:var(--border);margin:4px 6px}
/* barra de dibujos favoritos (se arrastra por el asa) */
.kc-favbar{position:absolute;z-index:8;display:flex;align-items:center;gap:2px;padding:3px 4px;background:var(--panel);border:1px solid var(--border);border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.kc-fav-grip{display:flex;align-items:center;color:var(--muted);cursor:grab;padding:0 2px;touch-action:none}
.kc-fav-grip:active{cursor:grabbing}
.kc-favbar .kc-tb{width:30px;height:30px}
/* emoticonos */
.kc-emoji{position:fixed;z-index:80;width:min(320px,calc(100vw - 16px));max-height:min(420px,calc(100vh - 16px));overflow-y:auto;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:8px;box-shadow:0 12px 30px rgba(0,0,0,.45)}
.kc-emoji-h{font-size:12px;color:var(--muted);padding:2px 4px 6px}
.kc-emoji-g{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:6px 4px 2px}
.kc-emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px}
.kc-emoji-grid button{border:0;background:transparent;border-radius:6px;font-size:20px;line-height:1;padding:6px 0;cursor:pointer;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif}
.kc-emoji-grid button:hover{background:var(--panel2)}
/* pantalla completa: solo el gráfico */
.op-fullbtn{padding:0 7px}
.op-fullbtn svg{color:var(--muted)}
.op-fullbtn:hover svg{color:var(--text)}
body.kc-full .op-chart{position:fixed!important;inset:0;z-index:100;height:auto!important;margin:0;background:var(--panel);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
body.kc-full .op-chart>.kc-favbar,body.kc-full .op-chart>.kc-pencil,body.kc-full .op-chart>.kc-tools,body.kc-full .op-chart>.op-mtrade,body.kc-full .op-chart>.kc-edit{display:none!important}
.kc-fullx{display:none}
body.kc-full .kc-fullx{display:flex;position:absolute;right:calc(70px + env(safe-area-inset-right));top:calc(8px + env(safe-area-inset-top));z-index:9;width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:var(--panel);color:var(--text);align-items:center;justify-content:center;font-size:16px;padding:0;box-shadow:0 4px 14px rgba(0,0,0,.35)}
body.kc-drawing .op-overlay,body.kc-drawing .op-overlay *{pointer-events:none!important}
/* (22/10/2026) varios gráficos en la pantalla */
.op-multi{flex:1;min-width:0;min-height:0;display:grid;gap:4px;position:relative}
.op-cell{position:relative;min-width:0;min-height:0;border:1px solid var(--border);border-radius:6px;overflow:hidden}
.op-cell.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.op-cell>.op-chart{width:100%;height:100%!important}
.op-cell:not(.active){cursor:pointer}
.op-cell>.kc-root{position:absolute;inset:0}
.op-cell>.op-plotbg{position:absolute;inset:0}
.op-mini-msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:10px;color:var(--muted);font-size:12px;z-index:2;pointer-events:none}
.op-mini-msg.hidden{display:none}
.op-laybtn{padding:0 8px}
.km-ico{display:inline-grid;width:20px;height:16px;gap:1.5px}
.km-ico i{border:1.4px solid currentColor;border-radius:2px;min-width:0;min-height:0}
.op-laybtn .km-ico{color:var(--muted)}
.op-laybtn:hover .km-ico{color:var(--text)}
.km-panel{position:fixed;z-index:80;width:min(440px,calc(100vw - 16px));max-height:calc(100vh - 80px);overflow-y:auto;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:8px 10px;box-shadow:0 12px 30px rgba(0,0,0,.45)}
.km-row{display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding:4px 0;border-bottom:1px solid var(--border)}
.km-n{width:22px;color:var(--muted);font-size:12px;text-align:center;flex:none}
.km-lay{border:0;background:transparent;color:var(--muted);padding:5px 6px;border-radius:6px;cursor:pointer;display:flex}
.km-lay:hover{background:var(--panel2);color:var(--text)}
.km-lay.on{background:var(--accentbg);color:var(--accent)}
.km-lay .km-ico{width:24px;height:18px}
.km-sec{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:10px 2px 4px}
.km-sync{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 2px;cursor:pointer;font-size:13px;color:var(--text)}
.km-sync small{display:block;color:var(--muted);font-size:11px;margin-top:1px}
.km-sync input{width:auto;flex:none;accent-color:var(--accent)}
/* pantalla completa con varios gráficos: todos */
body.kc-full .op-multi{position:fixed;inset:0;z-index:100;background:var(--panel);padding:2px}
body.kc-full .op-multi .op-chart{position:relative!important;inset:auto;z-index:auto;padding:0;height:100%!important;width:100%}
/* deshacer / rehacer */
.op-undo,.op-redo{padding:0 7px}
.op-undo svg,.op-redo svg{color:var(--muted)}
.op-undo:hover:not(:disabled) svg,.op-redo:hover:not(:disabled) svg{color:var(--text)}
.op-undo:disabled,.op-redo:disabled{opacity:.4;cursor:default}
/* (23/10/2026) «Mis scripts» */
.ks-sec{margin-bottom:8px}
.ks-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ks-bad{color:var(--red);font-size:12px}
.ks-top{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.ks-name{flex:1;min-width:160px;background:var(--panel2);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:8px 10px;font:inherit}
.ks-top select{width:auto}
.ks-code{width:100%;box-sizing:border-box;min-height:260px;background:var(--panel2);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:10px 12px;font:13px/1.5 ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;tab-size:2;resize:vertical;white-space:pre;overflow:auto}
.ks-code:focus,.ks-name:focus{outline:none;border-color:var(--accent)}
.ks-msg{font-size:13px;margin:6px 2px;color:var(--green)}
.ks-msg.bad{color:var(--red)}
.ks-help{margin:6px 0;font-size:13px}
.ks-help summary{cursor:pointer;color:var(--accent)}
.ks-help-r{display:grid;grid-template-columns:170px 1fr;gap:8px;padding:4px 0;border-bottom:1px solid var(--border)}
.ks-help-r b{font-weight:600;color:var(--text)}
.ks-help-r code{font:12px/1.4 ui-monospace,Consolas,monospace;color:var(--muted);white-space:pre-wrap}
@media (max-width:700px),(max-height:500px) and (pointer:coarse) and (orientation:landscape){.ks-help-r{grid-template-columns:1fr}}
/* (23/10/2026) ventana de Indicadores con carpetas, como TradingView */
.modal.ki-modal{width:min(980px,calc(100vw - 24px));max-width:none}
.ki-head{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.ki-head h2{margin:0;flex:none}
.ki-head .ki-q{flex:1;margin:0}
.ki-wrap{display:grid;grid-template-columns:210px minmax(0,1fr);gap:12px;height:min(560px,calc(100vh - 220px))}
.ki-nav{display:flex;flex-direction:column;gap:2px;overflow-y:auto;border-right:1px solid var(--border);padding-right:8px}
.ki-g{font-size:11px;letter-spacing:.05em;color:var(--muted);padding:10px 10px 4px}
.ki-nb{display:flex;align-items:center;gap:10px;border:0;background:transparent;color:var(--text);padding:9px 10px;border-radius:8px;cursor:pointer;font:inherit;font-size:14px;text-align:left}
.ki-nb:hover{background:var(--panel2)}
.ki-nb.on{background:var(--panel2);font-weight:600}
.ki-nb svg{color:var(--muted);flex:none}
.ki-nb.on svg{color:var(--accent)}
.ki-count{margin-left:auto;font-size:11px;background:var(--accentbg);color:var(--accent);border-radius:10px;padding:1px 7px}
.ki-body{overflow-y:auto;min-width:0;padding-right:4px}
.ki-chips{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 8px}
.ki-chip{border:1px solid var(--border);background:transparent;color:var(--text);border-radius:16px;padding:5px 12px;cursor:pointer;font:inherit;font-size:13px}
.ki-chip:hover{background:var(--panel2)}
.ki-chip.on{background:var(--text);color:var(--bg);border-color:var(--text)}
.ki-th{display:grid;grid-template-columns:1fr;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:6px 10px 6px 40px}
.ki-th.ki-cols{grid-template-columns:minmax(0,1fr) 130px 70px 60px}
.ki-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto auto auto;align-items:center;gap:8px;padding:6px 10px 6px 6px;border-radius:8px;cursor:pointer;min-height:36px}
.ki-row:hover,.ki-row:focus-visible{background:var(--panel2);outline:none}
.ki-row.static{grid-template-columns:minmax(0,1fr) auto;cursor:default;padding-left:12px}
.ki-row.ki-added{background:var(--accentbg)}
.ki-name{display:flex;flex-direction:column;min-width:0}
.ki-name span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.ki-name small{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ki-col{color:var(--muted);font-size:13px;min-width:70px;text-align:left}
.ki-col.ki-author{min-width:130px;color:var(--accent)}
.ki-acts{display:flex;align-items:center;gap:4px;justify-content:flex-end}
.ki-star{border:0;background:transparent;color:var(--muted);padding:4px;cursor:pointer;display:flex;border-radius:6px;opacity:.35}
.ki-row:hover .ki-star,.ki-star.on,.ki-star:focus-visible{opacity:1}
.ki-star.on svg{color:#ffb300;fill:#ffb300}
.ki-star:hover svg{color:#ffb300}
.ki-top{display:flex;align-items:center;gap:12px;margin:2px 0 10px;flex-wrap:wrap}
.ki-empty{padding:18px 10px}
.ki-pub{color:var(--green)}
.ki-have{color:var(--green);font-weight:700;padding:0 6px}
.ki-lbl{display:block;font-size:13px;color:var(--muted);margin:10px 0 4px}
@media (hover:none){.ki-star{opacity:1}}
@media (max-width:700px),(max-height:500px) and (pointer:coarse) and (orientation:landscape){
 .ki-head{flex-direction:column;align-items:stretch;gap:8px}
 .ki-wrap{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);height:calc(100vh - 230px)}
 .ki-nav{flex-direction:row;align-items:center;overflow-x:auto;overflow-y:hidden;border-right:0;border-bottom:1px solid var(--border);padding:0 0 6px;scrollbar-width:none}
 .ki-nb{flex:none}
 .ki-g{display:none}
 .ki-nb{white-space:nowrap;padding:7px 10px;font-size:13px}
 .ki-th.ki-cols{grid-template-columns:minmax(0,1fr) 90px 50px}
 .ki-col.ki-author{min-width:90px}
 .ki-col{min-width:44px}
 .ki-row{grid-template-columns:28px minmax(0,1fr) auto auto}
}

/* (22/10/2026) Barra de arriba del ordenador cuando no cabe todo (tablet, ventana pequeña): ver opFitHead */
.op-bighead:not(.op-mhead)>.tf-compact{display:none}
.op-bighead>.op-indbtn{flex-shrink:0}
.op-bighead.fit-1 .op-indbtn>span:not(.km-ico),.op-bighead.fit-1 .op-qpips{display:none}
.op-bighead.fit-2>.tfs:not(.tf-compact){display:none}
.op-bighead.fit-2>.tf-compact{display:flex}
.op-bighead.fit-3{gap:6px}
.op-bighead.fit-3 .op-accchip{max-width:120px;padding:6px 8px}
.op-bighead.fit-3 .op-quick{gap:6px}
.op-chartcard.big .op-bighead.fit-3 .op-qbtn,.op-bighead.fit-3 .op-qbtn{min-width:0;padding-left:10px;padding-right:10px}
.op-bighead.fit-3 .op-qrisk input{width:46px}
.op-bighead.fit-3 .symsearch{flex-basis:150px}
.op-bighead.fit-4 .op-undo,.op-bighead.fit-4 .op-redo,.op-bighead.fit-4 .op-laybtn{display:none}
.op-bighead.fit-5{flex-wrap:wrap;row-gap:6px}

/* (22/10/2026) Paneles de indicadores escondidos: botón para volver a sacarlos */
.kc-panes-pill{position:absolute;left:8px;bottom:34px;z-index:6;width:30px;height:30px;border:1px solid var(--border);background:var(--panel);color:var(--text);opacity:.92;border-radius:50%;padding:0;font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.kc-panes-pill:not(.up){bottom:auto}
.kc-panes-pill:hover{opacity:1;border-color:var(--accent)}

/* (22/10/2026) Cuenta con «solo estos símbolos» y el del gráfico no está */
.op-quick.blocked .op-qbtn.sell,.op-quick.blocked .op-qbtn.buy{opacity:.38}
.op-notallowed{margin:0 0 10px;padding:8px 10px;border-radius:8px;background:rgba(242,54,69,.12);border:1px solid rgba(242,54,69,.4);color:var(--text);font-size:13px}
.webopts{margin:2px 0 10px 26px}
.webchart{gap:8px}
/* (22/10/2026) móvil: el botón «▴ Indicadores», a la derecha del lápiz de dibujos */
.op-chartcard.narrow .kc-panes-pill{left:50px;bottom:38px}
.op-chartcard.narrow .kc-panes-pill:not(.up){bottom:auto}

/* (22/10/2026) Móvil: los paneles (menos Trading) a pantalla completa, con la barra de abajo siempre a mano */
@media (max-width:760px),(max-height:500px) and (pointer:coarse) and (orientation:landscape){
 .op-bigbody .op-rpanel.op-full{position:fixed;top:0;left:0;right:0;bottom:var(--optabs-h,64px);max-height:none;height:auto;border-radius:0;z-index:60;box-shadow:none;padding-top:env(safe-area-inset-top)}
 .op-chartcard.narrow .op-tabs{position:relative;z-index:61}
 .op-sheet-grip{display:flex;justify-content:center;align-items:center;height:24px;margin:0 -14px;cursor:ns-resize;touch-action:none;flex:none}
 .op-bigbody .op-rpanel{overflow-x:hidden;overscroll-behavior:contain;touch-action:pan-y}
 .op-rp-h.op-sheet-drag{touch-action:none;cursor:ns-resize}
 body.op-big{overscroll-behavior:none}
 .op-sheet-grip span{width:44px;height:5px;border-radius:3px;background:var(--border)}
 body.op-setopen #modals .overlay:has(.op-stylemodal){bottom:var(--optabs-h,64px);padding:0;align-items:stretch;justify-content:stretch}
 .modal.op-stylemodal{width:100%;max-width:none;height:100%;max-height:none;margin:0;border-radius:0;overflow-y:auto;padding-top:calc(16px + env(safe-area-inset-top))}
}
.op-sheet-grip{display:none}
@media (max-width:760px),(max-height:500px) and (pointer:coarse) and (orientation:landscape){.op-sheet-grip{display:flex}}
.op-stylemodal{position:relative}
.op-style-x{position:absolute;right:12px;top:12px;width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:var(--panel2);color:var(--text);font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}

/* (22/10/2026) Filas como en MetaTrader (Operaciones, Historial, Cuentas) */
.mt-row{padding:8px 2px;border-top:1px solid var(--border);font-variant-numeric:tabular-nums;font-size:13px}
.op-rows>.mt-row:first-child{border-top:0}
.mt-l1,.mt-l2{display:flex;align-items:baseline;gap:6px;min-width:0}
.mt-sym{font-weight:700}
.mt-side{font-size:12.5px}.mt-side.buy{color:#3d8bfd}.mt-side.sell{color:var(--red)}
.mt-r{margin-left:auto;text-align:right;white-space:nowrap}
.mt-l1 .mt-r{font-size:13.5px}.mt-l1 .mt-r.pos,.mt-l1 .mt-r .pos{color:var(--gain)}.mt-l1 .mt-r.neg,.mt-l1 .mt-r .neg{color:var(--red)}
.mt-l2{font-size:11.5px;color:var(--muted);margin-top:2px}
.mt-acts{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap}
.mt-acts .btn{padding:3px 9px;font-size:12px}
.mt-sec{display:flex;align-items:center;justify-content:space-between;margin:10px 0 2px;padding:0 2px;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.mt-dots{background:none;border:0;color:var(--text);font-size:20px;line-height:1;padding:0 6px 4px;cursor:pointer;border-radius:6px}
.mt-dots:hover{background:var(--panel2)}
/* el logo de RCM de fondo en lo vacío */
.rcm-wm{display:flex;justify-content:center;align-items:center;padding:36px 0;color:var(--accent);opacity:.2;pointer-events:none}
.rcm-wm.dark{color:#000;opacity:.22}
.rcm-wm.small{padding:6px 0 10px}.rcm-wm.small svg{width:72px;height:72px}
.op-chart>.rcm-wm.op-chart-wm{position:absolute;inset:0;padding:0;z-index:0}
.op-chart>.rcm-wm.op-chart-wm svg{width:min(180px,40%);height:auto}
.op-help{position:relative;overflow:hidden}
.op-help>.rcm-wm.bgfill{position:absolute;right:-10px;bottom:-20px;padding:0;opacity:.1}
.op-help>.rcm-wm.bgfill svg{width:220px;height:220px}

/* (22/10/2026) parcial de las que ganan */
.mt-plan{display:flex;flex-direction:column;gap:4px;margin:8px 0;font-size:13px}
.mt-plan-r{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-top:1px solid var(--border)}
.mt-pct{width:64px}.mt-pctl{display:inline-flex;align-items:center;gap:4px}

/* (22/10/2026) Móvil: Ajustes como una página más, encima del gráfico y con la barra de abajo a la vista */
.op-setpage{position:fixed;top:0;left:0;right:0;bottom:var(--optabs-h,64px);z-index:19;margin:0;border-radius:0;border:0;overflow-y:auto;overscroll-behavior:contain;padding:env(safe-area-inset-top) 0 0}
.op-setpage>.modal{max-width:none;border:0;border-radius:0;background:transparent;padding:16px 14px 20px;position:relative}
.op-mhead .op-setbtn{height:28px;padding:0 7px}
.op-mhead>*,.op-bighead.op-mhead>.tfs{flex-shrink:0}
.op-mhead .op-accchip{flex-shrink:1;min-width:0;max-width:34vw}
.mt-pctl input.mt-pct{width:70px;flex:none}

/* (22/10/2026) móvil: en el gráfico, nada de «tirar para recargar» del navegador */
html:has(body.op-big){overscroll-behavior:none}
/* (22/10/2026) ⚙ de cada cuenta en Gráfico → Cuentas */
.op-acc-gear{margin-left:6px;background:none;border:0;color:var(--muted);padding:2px;border-radius:6px;display:inline-flex;cursor:pointer}
.op-acc-gear svg{width:16px;height:16px}
.op-acc-gear:hover{color:var(--text);background:var(--panel2)}
.op-acc-gear.on{color:var(--accent)}

/* (22/10/2026) ⚙ de la cuenta: gráfico (o gráficos) al abrir */
.accchart-cells{display:flex;flex-direction:column;gap:8px;margin:6px 0 8px}
.accchart-row{display:grid;grid-template-columns:110px minmax(0,1fr) 170px 28px;gap:8px;align-items:center}
.accchart-n{font-size:13px;color:var(--muted)}
.accchart-x{background:none;border:0;color:var(--muted);font-size:14px;cursor:pointer;border-radius:6px;padding:4px}
.accchart-x:hover{color:var(--red);background:var(--panel2)}
.accchart-x.hidden{display:block;visibility:hidden}
.accchart-more{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.accchart-lays{margin:4px 0 8px}
.accchart-lays>label{display:block;font-size:13px;color:var(--muted);margin-bottom:4px}
.accchart-lays .km-row{border:0;padding:0}
@media (max-width:620px){.accchart-row{grid-template-columns:1fr 1fr 28px}.accchart-n{grid-column:1/-1}.accchart-row .symsearch{grid-column:1/-1}}

/* (22/10/2026) rayas para agrandar/achicar los gráficos y los paneles de la derecha */
.km-split{position:absolute;z-index:12;background:transparent;touch-action:none}
.km-split.v{width:8px;cursor:col-resize}
.km-split.h{height:8px;cursor:row-resize}
.km-split::after{content:"";position:absolute;background:var(--accent);opacity:0;transition:opacity .12s}
.km-split.v::after{left:3px;top:0;bottom:0;width:2px}
.km-split.h::after{top:3px;left:0;right:0;height:2px}
.km-split:hover::after,.km-split.on::after{opacity:.7}
.op-rp-grip{flex:none;width:8px;margin:0 -4px 0 0;cursor:col-resize;position:relative;z-index:6;touch-action:none}
.op-rp-grip::after{content:"";position:absolute;left:3px;top:0;bottom:0;width:2px;background:var(--accent);opacity:0;transition:opacity .12s}
.op-rp-grip:hover::after,.op-rp-grip.on::after{opacity:.7}
/* lista de seguimiento con columnas, como TradingView: Símbolo · Último · Cbo · Cbo % */
.op-wl-row,.op-wl-head{grid-template-columns:18px minmax(92px,1.6fr) minmax(64px,1fr) minmax(64px,1fr) minmax(60px,1fr) 16px!important}
/* (23/10/2026) como TradingView: al estrecharla, primero se va el «Cbo»; más estrecha no se deja */
.op-rpanel.op-rp-list{container-type:inline-size;overflow-x:hidden}
@container (max-width: 380px){
 .op-wl-row,.op-wl-head{grid-template-columns:18px minmax(92px,1.6fr) minmax(64px,1fr) minmax(60px,1fr) 16px!important}
 .op-wl-c,.op-wl-head span:nth-child(4){display:none}
 .op-wl-newbtn .t{display:none}
}
.op-wl-head{display:grid;gap:5px;padding:2px 4px 4px;font-size:11px;color:var(--muted);border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--panel);z-index:2}
.op-wl-head span{text-align:right}.op-wl-head span:nth-child(2){text-align:left}
.op-wl-c{text-align:right;font-size:12px}
.op-wl-c.pos,.op-wl-d.pos{color:var(--gain)}.op-wl-c.neg,.op-wl-d.neg{color:var(--red)}
@media (min-width:761px){.op-bigbody .op-rpanel.op-rp-list{width:400px}}

/* (22/10/2026) iconos de los símbolos */
.symico{display:inline-flex;align-items:center;flex:none;width:var(--sz,18px);height:var(--sz,18px);position:relative;margin-right:6px;vertical-align:middle}
.symico-d{width:100%;height:100%;border-radius:50%;color:#fff;font-size:calc(var(--sz,18px) * .5);font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1;letter-spacing:-.02em;font-style:normal;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.symico.pair{width:calc(var(--sz,18px) * 1.35)}
.symico.pair .symico-d{position:absolute;width:var(--sz,18px);height:var(--sz,18px);top:0}
.symico.pair .a{left:0;z-index:1;width:calc(var(--sz,18px) * .8);height:calc(var(--sz,18px) * .8);font-size:calc(var(--sz,18px) * .42)}
.symico.pair .b{right:0;top:calc(var(--sz,18px) * .2);width:calc(var(--sz,18px) * .8);height:calc(var(--sz,18px) * .8);font-size:calc(var(--sz,18px) * .42)}
.op-wl-s{display:flex;align-items:center;min-width:0}.op-wl-s>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.symopt b{display:inline-flex;align-items:center}
.op-wl-newbtn{margin-left:auto;padding:3px 8px;font-size:12px}
.op-rp-h .op-wl-newbtn+.op-rp-x{margin-left:6px}
/* alertas */
.al-tabs{display:flex;gap:4px;margin-bottom:8px}
.al-tab{flex:1;background:var(--panel2);border:1px solid var(--border);color:var(--muted);border-radius:8px;padding:5px 8px;font-size:12.5px;cursor:pointer}
.al-tab.on{color:var(--text);border-color:var(--accent)}
.al-list{display:flex;flex-direction:column}
.al-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;gap:6px;align-items:center;padding:8px 2px;border-top:1px solid var(--border);font-size:12.5px}
.al-row:first-child{border-top:0}
.al-row.off .al-main b{opacity:.6}
.al-main{display:flex;flex-direction:column;min-width:0;cursor:pointer}
.al-main b,.al-main small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.al-st{font-size:11px;padding:1px 6px;border-radius:9px;border:1px solid var(--border)}
.al-st.pos{color:var(--green);border-color:rgba(38,166,154,.5)}.al-st.accent{color:var(--accent);border-color:var(--accent)}
.al-add{font-size:18px;margin-left:auto}
.al-empty{text-align:center;margin-top:-20px}
.al-grid{display:grid;grid-template-columns:120px minmax(0,1fr);gap:10px 12px;align-items:center;margin:12px 0}
.al-grid>label{color:var(--muted);font-size:13px}
.al-cond{display:grid;grid-template-columns:auto minmax(0,1fr) 130px;gap:8px;align-items:center}
.al-exp{display:flex;gap:8px;flex-wrap:wrap}
.al-not{display:flex;flex-direction:column;gap:2px}
@media (max-width:620px){.al-grid{grid-template-columns:1fr}.al-cond{grid-template-columns:1fr 1fr}.al-cond>span{display:none}}
#al-toasts{position:fixed;bottom:16px;left:16px;flex-direction:column-reverse;z-index:200;display:flex;gap:8px;max-width:min(360px,calc(100vw - 24px))}
.al-toast{display:flex;gap:10px;align-items:flex-start;background:var(--panel);border:1px solid var(--accent);border-radius:10px;padding:10px 12px;box-shadow:0 10px 30px rgba(0,0,0,.45);transition:opacity .5s}
.al-toast.bye{opacity:0}
.al-toast-i{color:var(--accent);flex:none}
.al-toast-b{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:13px}
.al-toast-x{margin-left:auto;background:none;border:0;color:var(--muted);cursor:pointer;font-size:13px}
.kc-axplus{position:absolute;z-index:30;width:17px;height:17px;border-radius:2px 0 0 2px;border:0;background:#4c525e;color:#fff;font-size:14px;line-height:1;padding:0 0 1px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.kc-axplus:hover{background:var(--accent);color:#17171a}
@media (min-width:761px){.op-bigbody .op-rpanel.op-rp-alerts{width:340px}}
.op-rpanel.op-rp-alerts{padding:0 10px 10px}

/* (22/10/2026) lista de seguimiento estrecha: como en TradingView, primero desaparece «Cbo»
   (símbolo, última y cambio % se ven siempre); y el panel nunca se desplaza de lado */
@media (min-width:761px){.op-bigbody .op-rpanel{overflow-x:hidden}}
.op-rp-h h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* (23/10/2026) alertas abajo, junto a los ajustes; barra de dibujos favoritos también en el móvil */
.op-rail-gap{height:10px;flex:none}
.kc-fav-grip{touch-action:none}
@media (max-width:760px),(max-height:500px) and (pointer:coarse) and (orientation:landscape){
 .kc-favbar{flex-wrap:wrap;max-width:calc(100% - 70px)}
 .kc-favbar .kc-tb{width:34px;height:34px}
}
/* historial: la operación pinchada, con «Ver en el gráfico» */
.mt-row.hist{cursor:pointer}
.mt-row.hist:hover{background:var(--panel2)}
.mt-row.hist.on{background:var(--panel2);border-radius:8px}
.mt-row .mt-acts.hist{margin-top:6px}
.op-tradechip{position:absolute;left:50%;transform:translateX(-50%);bottom:40px;z-index:9;display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--accent);border-radius:16px;padding:4px 6px 4px 12px;font-size:12px;box-shadow:0 4px 14px rgba(0,0,0,.35);white-space:nowrap;max-width:calc(100% - 20px);overflow:hidden}
.op-tradechip button{background:none;border:0;color:var(--muted);cursor:pointer;font-size:13px;padding:2px 6px}

/* (26/10/2026) Rendimiento: selector compacto (todas · grupos · cuentas) y el % bien grande */
.perfpick{position:relative;min-width:240px;max-width:100%}
.perfpick-btn{display:flex;align-items:center;gap:10px;width:100%;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:7px 12px;color:var(--text);cursor:pointer;text-align:left;font:inherit}
.perfpick-btn:hover{border-color:var(--accent)}
.pp-l{display:flex;flex-direction:column;min-width:0;flex:1}
.pp-l b,.pp-l small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-l small{font-size:11px}
.pp-caret{color:var(--muted);font-size:12px}
.perfpick-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:60;min-width:100%;width:max-content;max-width:min(420px,calc(100vw - 24px));max-height:min(70vh,520px);overflow:auto;background:var(--panel);border:1px solid var(--border);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.35);padding:6px}
.pp-item{display:flex;align-items:center;gap:14px;width:100%;background:none;border:0;border-radius:7px;padding:9px 10px;color:var(--text);cursor:pointer;text-align:left;font:inherit}
.pp-item:hover{background:var(--panel2,rgba(127,127,127,.12))}
.pp-item.on{background:color-mix(in srgb,var(--accent) 16%,transparent)}
.pp-item.all .pp-n,.pp-item.grp .pp-n{font-weight:600}
.pp-item.sub{padding-left:34px}
.pp-n{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-arrow{display:inline-block;width:16px;color:var(--muted)}
.pp-r{font-size:12px;font-weight:600;white-space:nowrap}
.pp-sep{font-size:11px;text-transform:uppercase;letter-spacing:.5px;padding:8px 10px 4px}
.hero-row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:4px 0 6px}
.hero-row .hero-v{margin:0}
.hero-pct{font-size:30px;font-weight:700;line-height:1.1;padding:2px 12px;border-radius:10px;background:color-mix(in srgb,currentColor 13%,transparent)}
@media (max-width:520px){.hero-pct{font-size:24px}}
@media (max-width:900px){.perfpick{flex:1 1 100%}.perfpick-menu{left:0;right:auto;width:100%}}
.mt-acts.hist{align-items:center}
.mt-pct{font-weight:700;font-size:13px;padding:2px 8px;border-radius:6px;background:color-mix(in srgb,currentColor 12%,transparent)}
.mt-pct.pos{color:var(--gain)}.mt-pct.neg{color:var(--red)}

/* (26/10/2026) avisos de alerta abajo a la izquierda (en el móvil, encima de la barra de abajo) */
@media (max-width:900px){#al-toasts{bottom:calc(84px + env(safe-area-inset-bottom));left:10px;right:10px;max-width:none}}
/* historial: «Ver en el gráfico» y el % en la misma línea, sin salirse */
.mt-row .mt-acts.hist{flex-wrap:nowrap;align-items:center;justify-content:space-between}
.mt-acts.hist .mt-pct{margin-left:auto;font-size:12px;padding:2px 7px;flex:none}
/* notificaciones en el panel de alertas */
.al-push{display:flex;flex-direction:column;gap:6px;border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin-bottom:10px;font-size:13px}
.al-push-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.al-push-h b{margin-right:auto}
.al-push .ok{color:var(--green);font-weight:600}

/* (27/10/2026) Gráfico sin cargar (cuenta desactivada, error…): con los colores de cada uno */
.op-chart>.op-plotbg.op-plotbg-empty{inset:0}
/* (27/10/2026) Gráfico → Cuentas: candado (no abre operaciones) y desplegable de desconectadas */
.op-acc-lock{flex:none;font-size:12px;line-height:1;opacity:.75;cursor:help}
.op-acc-off{margin-top:4px}
.op-acc-offbtn{display:flex;align-items:center;gap:6px;width:100%;background:none;border:1px dashed var(--border);border-radius:10px;padding:8px 10px;color:var(--muted);font:inherit;font-size:13px;cursor:pointer;text-align:left}
.op-acc-offbtn:hover{color:var(--text);border-color:#3d3d44}
.op-acc-offbtn i{font-style:normal;width:12px}
.op-acc-offlist{display:flex;flex-direction:column;gap:8px;margin-top:8px}
/* (27/10/2026) ⚙ de la cuenta en el gráfico */
.accset-sw{align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}
.accset-sw input{margin-top:3px}
.accset-sw span{display:flex;flex-direction:column;gap:2px}
.accset-sw small{font-size:12px;line-height:1.35}
.accset-sum{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;margin:14px 0 4px;font-size:13px}
.accset-sum dt{color:var(--muted)}
.accset-sum dd{margin:0;color:var(--text);overflow-wrap:anywhere}
.accset-actions{flex-wrap:wrap}
.accset-actions .accset-perf{margin-left:auto}
/* (27/10/2026) ⚙ de la cuenta: todo en una ventana; «Datos de la cuenta» aparte */
.idmode .idhide{display:none!important}
.accset .accset-sub{margin:6px 0 4px 28px}
.accset-sec{margin-top:16px;padding-top:12px;border-top:1px solid var(--border)}
.accset-sec h3{margin:0 0 10px;font-size:14px}

/* (27/10/2026) % total de cada cuenta (Cuentas y Gráfico → Cuentas) */
.acc-pct{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.acc-pct.pos{color:var(--gain)}.acc-pct.neg{color:var(--red)}.acc-pct.muted{color:var(--muted)}
.op-acc-h .acc-pct{flex:none;font-size:12px}
/* (27/10/2026) flecha de volver en una ventana (Datos de la cuenta → Ajustes) */
.modal h2.with-back{display:flex;align-items:center;gap:8px}
.modal-back{flex:none;width:32px;height:32px;border-radius:8px;border:1px solid var(--border);background:var(--panel2);color:var(--text);font-size:18px;line-height:1;cursor:pointer}
.modal-back:hover{border-color:var(--accent);color:var(--accent)}

/* (27/10/2026) último saldo conocido (cuenta desactivada o desconectada) */
.bal-old,.op-acc-m b.bal-old{color:var(--muted)}

/* (27/10/2026) Historial: comisión (y swap) de cada operación */
.mt-l3{display:flex;align-items:baseline;gap:6px;min-width:0;font-size:11.5px;color:var(--muted);margin-top:2px}
.mt-l3 b{font-weight:600;color:var(--text)}.mt-l3 b.neg{color:var(--red)}.mt-l3 b.pos{color:var(--gain)}
.mt-l3>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* (27/10/2026) «+» del ordenador: no recoge el ratón (va fluido y no tapa la cruz); se marca al pasar por encima */
.kc-axplus-d{pointer-events:none}
.kc-axplus-d.hot{background:var(--accent);color:#17171a}
/* «+» de la cruz en el móvil: más grande para el dedo */
/* (27/10/2026) del mismo tamaño que la etiqueta del precio, también en el móvil */
.kc-axplus-m{width:17px;height:17px;font-size:14px}

/* (27/10/2026) Alertas: ✕ en vez de papelera */
.op-wl-ic.al-del{font-size:13px}

/* (27/10/2026) avisos de cierre (Alertas) */
.al-close{margin-top:8px}
.al-close-h{gap:8px;align-items:center}
.al-chips{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 4px}
.al-chips.off{opacity:.45}
.al-chip{border:1px solid var(--border);background:var(--panel2);color:var(--muted);border-radius:999px;padding:3px 10px;font:inherit;font-size:12px;cursor:pointer}
.al-chip.on{border-color:var(--accent);color:var(--accent);background:var(--accentbg)}
.al-chip:disabled{cursor:default}
/* (27/10/2026) botones de las operaciones abiertas: en el panel estrecho, más pequeños y en una sola fila */
.op-rp-b{container-type:inline-size}
@container (max-width:360px){
 .mt-acts{flex-wrap:nowrap;gap:4px}
 .mt-acts .btn{padding:3px 7px;font-size:11.5px;flex:0 1 auto;min-width:0;white-space:nowrap}
 .mt-acts .mt-view .t{display:none}
}

/* (27/10/2026) Calendario económico (Myfxbook incrustado) */
.cal-card{padding:0;overflow:hidden;display:flex;flex-direction:column;height:calc(100vh - 110px);min-height:420px}
.cal-bar{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--border)}
.cal-group{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cal-group>.muted{font-size:12px;margin-right:2px}
.cal-end{margin-left:auto}
.cal-chip{border:1px solid var(--border);background:var(--panel2);color:var(--muted);border-radius:999px;padding:4px 11px;font:inherit;font-size:12.5px;cursor:pointer}
.cal-chip.on{border-color:var(--accent);color:var(--accent);background:var(--accentbg)}
.cal-body{flex:1;min-height:0;display:flex}
.cal-wrap{flex:1;min-width:0;min-height:0;background:#fff;position:relative}
.cal-body.with-side .cal-wrap{flex:0 1 790px;min-width:600px}
/* panel de mercados (a la derecha del calendario, si cabe) */
.cal-side{flex:1 1 300px;min-width:0;container-type:inline-size;border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;background:var(--panel)}
.cal-side.hidden{display:none}
/* en el móvil: debajo del calendario, como un cuadro más (sin desplazamiento propio) */
.cal-side.cal-side-below{flex:none;border:1px solid var(--border);border-radius:12px;margin-top:12px;overflow:visible}
.cal-side-below .cal-mk-list{overflow:visible;flex:none}
.cal-mk-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:12px 14px 6px;font-size:14px}
.cal-mk-h .muted{font-size:11.5px}
.cal-mk-tabs{display:flex;flex-wrap:wrap;gap:4px 14px;padding:4px 14px 8px;border-bottom:1px solid var(--border)}
.cal-mk-tab{background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);font:inherit;font-size:13px;padding:5px 0;cursor:pointer}
.cal-mk-tab.on{color:var(--accent);border-bottom-color:var(--accent)}
.cal-mk-list{overflow:auto;flex:1;min-height:0}
.cal-mk-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:4px 14px;align-items:center;width:100%;background:none;border:0;border-bottom:1px solid var(--border);color:var(--text);font:inherit;font-size:13px;padding:9px 14px;text-align:left;cursor:pointer;font-variant-numeric:tabular-nums}
.cal-mk-row:hover{background:var(--panel2)}
.cal-mk-n{display:flex;align-items:center;min-width:0;font-weight:600}
.cal-mk-n>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-mk-p{text-align:right}
.cal-mk-c,.cal-mk-d{text-align:right;min-width:62px}
.cal-mk-c.pos,.cal-mk-d.pos{color:var(--gain)}
.cal-mk-c.neg,.cal-mk-d.neg{color:var(--red)}
.cal-mk-note{padding:14px;font-size:12.5px}
.cal-mk-note:empty{display:none}
@container (max-width:420px){.cal-mk-c{display:none}}
.cal-wrap.dark{background:#141416}
/* (27/10/2026) los calendarios se apilan: el nuevo carga escondido detrás y aparece cuando está listo */
.cal-frame{position:absolute;left:0;top:0;display:block;width:100%;height:100%;border:0;background:#fff;transition:opacity .2s;transform-origin:0 0}
.cal-frame.loading{opacity:0;pointer-events:none;z-index:0}
.cal-frame:not(.loading){z-index:1}
.cal-loading{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:var(--panel)}
.cal-loading.hidden{display:none}
/* oscuro: los colores del calendario, invertidos (los de impacto se quedan en su tono) */
.cal-frame.dark{filter:invert(.92) hue-rotate(180deg)}
.cal-foot{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;justify-content:space-between;padding:8px 14px;border-top:1px solid var(--border)}
.cal-credit{font-size:13px;color:#888}
.cal-credit a{color:#888;text-decoration:none}
/* botón «Filtros» y su ventana */
.cal-top{flex-wrap:nowrap}
.cal-top h1{font-size:20px;font-weight:600}
.cal-fbtn{background:var(--panel2);color:var(--muted);border:1px solid var(--border);display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;cursor:pointer;flex:none}
.cal-fbtn:hover,.cal-fbtn[aria-expanded="true"]{border-color:var(--accent);color:var(--accent)}
.cal-pop-gear{width:300px}
.cal-shade{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.35)}
.cal-pop{position:fixed;z-index:61;top:76px;right:28px;width:360px;max-width:calc(100vw - 32px);max-height:calc(100vh - 100px);overflow:auto;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px 16px 16px;box-shadow:0 12px 40px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:8px}
.cal-pop.hidden,.cal-shade.hidden{display:none}
.cal-pop-h{display:flex;align-items:center;justify-content:space-between;font-size:15px}
.cal-pop-x{background:none;border:0;color:var(--muted);font-size:16px;cursor:pointer;padding:2px 6px}
.cal-pop-s{font-size:12px;color:var(--muted);margin-top:6px}
.cal-pop-ok{margin-top:10px;align-self:stretch}
@media (max-width:900px){.cal-top h1{font-size:17px}.cal-fbtn{width:34px;height:34px}.cal-foot{padding:6px 10px}.cal-foot .small-note{font-size:11px}.cal-credit{font-size:11.5px}
 .cal-pop{top:auto;bottom:0;left:0;right:0;width:auto;max-width:none;border-radius:16px 16px 0 0;padding-bottom:calc(16px + env(safe-area-inset-bottom))}}
.cal-fbtn svg{width:18px;height:18px;flex:none}

/* ---------- (27/10/2026) modo claro: lo que tenía un color fijo pensado para lo oscuro ---------- */
[data-theme="light"] .log{color:#3a3a40}
[data-theme="light"] .op-acc:hover,[data-theme="light"] .op-acc-offbtn:hover{border-color:#b9b9c2}
[data-theme="light"] .overlay{background:rgba(20,20,28,.35)}
[data-theme="light"] .cal-shade{background:rgba(20,20,28,.25)}
[data-theme="light"] .cal-pop{box-shadow:0 12px 40px rgba(20,20,40,.18)}
[data-theme="light"] .cal-credit,[data-theme="light"] .cal-credit a{color:#6a6a73}

/* ---------- (27/10/2026) Ajustes ---------- */
.set-sec h2{font-size:15px;font-weight:600;margin:0 0 8px}
.set-box{background:var(--panel);border:1px solid var(--border);border-radius:12px}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;padding:13px 16px;border-top:1px solid var(--border)}
.set-row:first-child{border-top:0}
.set-txt{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 260px}
.set-txt .muted{font-size:12.5px}
.set-ctl{display:flex;justify-content:flex-end;flex:0 1 auto;min-width:0}
.set-ctl:empty{display:none}
.set-seg{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.set-seg button{background:var(--panel2);border:1px solid var(--border);border-radius:999px;padding:6px 13px;color:var(--muted);font-size:13px;cursor:pointer}
.set-seg button.on{border-color:var(--accent);color:var(--accent);background:var(--accentbg)}
.set-seg button:disabled{opacity:.45;cursor:default}
.set-seg.off{opacity:.5}
.set-btns{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.set-sel{background:var(--panel2);border:1px solid var(--border);border-radius:8px;padding:7px 10px;color:var(--text);min-width:200px}
.set-switch{position:relative;display:inline-flex;width:42px;height:24px;flex:none;cursor:pointer}
.set-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.set-knob{width:100%;height:100%;border-radius:12px;background:var(--panel2);border:1px solid var(--border);transition:background .15s,border-color .15s;position:relative}
.set-knob::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--muted);transition:transform .15s,background .15s}
.set-switch input:checked+.set-knob{background:var(--accentbg);border-color:var(--accent)}
.set-switch input:checked+.set-knob::after{transform:translateX(18px);background:var(--accent)}
.set-switch input:focus-visible+.set-knob{outline:2px solid var(--accent);outline-offset:2px}
.set-foot{margin-top:18px}
.set-foot a{color:var(--accent)}
@media (max-width:700px){.set-row{flex-direction:column;align-items:stretch;gap:10px}.set-txt,.set-ctl{flex:none}.set-ctl,.set-seg,.set-btns{justify-content:flex-start}.set-sel{width:100%}}
.set-row-wrap{flex-wrap:wrap}
.set-sub{flex:1 0 100%;display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;padding:12px 0 2px;border-top:1px dashed var(--border);
  max-height:120px;overflow:hidden;transition:max-height .2s ease,opacity .2s ease,padding .2s ease}
.set-sub.closed{max-height:0;opacity:0;padding:0;border-top-color:transparent;pointer-events:none}
.set-sub>.muted{font-size:13px}
@media (max-width:700px){.set-sub{flex:none;justify-content:flex-start}}
/* (27/10/2026) vista previa en «Ajustes del gráfico» */
.op-prev{position:relative;border:1px solid var(--border);border-radius:10px;overflow:hidden;margin:4px 0 12px;position:sticky;top:-1px;z-index:2;background:var(--panel)}
.op-prev-cv{display:block;width:100%;height:190px}
.op-prev-tag{position:absolute;left:8px;top:6px;font-size:11px;background:rgba(0,0,0,.35);color:#fff;padding:1px 7px;border-radius:999px}
@media (max-width:700px){.op-prev-cv{height:150px}}
/* (27/10/2026) el logo sigue al tema (en claro, la línea del gráfico va oscura) */
.brand .logo path:first-child{stroke:var(--accent)}
.brand .logo path:last-child{stroke:var(--text)}
/* (27/10/2026) modo claro en azul: letras blancas sobre el azul y el gráfico claro sin dorado */
[data-theme="light"] .op-chartcard.op-light{--accentbg:rgba(37,99,235,.12)}
[data-theme="light"] .helpbtn:hover,[data-theme="light"] .helpbtn[aria-expanded=true],[data-theme="light"] .kc-axplus:hover,[data-theme="light"] .kc-axplus-d.hot{color:#fff}
/* (27/10/2026) Rendimiento: % de cada día y semana, y calendario ampliado */
.cal-vs{display:flex;flex-direction:column;align-items:flex-end;min-width:0;max-width:100%;overflow:hidden}
.cal-p{font-size:10px;font-weight:600;color:var(--muted);white-space:nowrap;line-height:1.2}
.cal-w{flex-direction:column;gap:1px}
.cal-wp{font-size:10px;font-weight:600;opacity:.85}
.perf-cal .calnav{flex-wrap:wrap}
.cal-zoom{margin-right:6px}
.perf-cal.wide .cal{gap:6px}
.perf-cal.wide .cal-d{min-height:74px;padding:7px 9px}
.perf-cal.wide .cal-v{font-size:14px}
.perf-cal.wide .cal-p{font-size:11.5px}
.perf-cal.wide .cal-n{font-size:12px}
.perf-cal.wide .cal-w{font-size:13.5px}
.perf-cal.wide .cal-wp{font-size:11.5px}
.perf-cal.wide+.pcard{margin-top:12px}
.syms.wide{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:10px 28px}
@media (max-width:620px){.cal-p{display:none}.cal-wp{font-size:8.5px;white-space:nowrap;letter-spacing:-.2px}.cal-zoom{display:none}}
.accset-h-note{font-weight:400;font-size:12px}
.accset-chart{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--panel2);border:1px solid var(--border);border-radius:8px;padding:10px 12px}
.accset-chart-s{min-width:0;overflow-wrap:anywhere}
/* (27/10/2026) el botón «SL»/«TP» que se saca del recuadro desaparece; el de muestra (TP recogido) parpadea un poco */
.op-chip.op-chip-out{display:none}
.op-chip-ghost{animation:opGhost .9s ease-in-out infinite alternate}
@keyframes opGhost{from{opacity:.55}to{opacity:1}}
/* (27/10/2026) puntos para estirar un dibujo desde el centro de sus lados */
.kc-edges{position:absolute;left:0;top:0;width:0;height:0;z-index:25}
.kc-edge{position:absolute;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:var(--panel);border:2px solid var(--kc-edge,#2962ff);box-shadow:0 0 0 2px rgba(0,0,0,.15);touch-action:none}
.kc-edge:hover{transform:scale(1.25)}
@media (pointer:coarse){.kc-edge{width:18px;height:18px;margin:-9px 0 0 -9px}}
/* (27/10/2026) Móvil en horizontal: la barra de abajo pasa a una columna a la derecha (se gana alto para el gráfico) */
@media (max-height:500px) and (pointer:coarse) and (orientation:landscape){
 .op-chartcard.big.narrow{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto;column-gap:0}
 .op-chartcard.big.narrow>.op-bighead{grid-column:1;grid-row:1;min-width:0}
 .op-chartcard.big.narrow>.op-bigbody{grid-column:1;grid-row:2;min-height:0}
 .op-chartcard.big.narrow>.op-chartmsg{grid-column:1;grid-row:3}
 .op-chartcard.big.narrow>.op-tabs{grid-column:2;grid-row:1/4;flex-direction:column;justify-content:space-evenly;gap:2px;margin:0 0 0 6px;padding:2px 0 2px 6px;border-top:0;border-left:1px solid var(--border);width:62px;overflow-y:auto}
 .op-chartcard.big.narrow>.op-tabs .op-tabbtn{flex:0 1 auto;padding:3px 0;font-size:9px}
 .op-chartcard.big.narrow>.op-tabs .op-tabbtn svg{width:19px;height:19px}
 .op-bigbody .op-rpanel.op-full{bottom:0;right:var(--optabs-w,64px)}
 .op-setpage{bottom:0;right:var(--optabs-w,64px)}
 body.op-setopen #modals .overlay:has(.op-stylemodal){bottom:0;right:var(--optabs-w,64px)}
}
.op-accchip-i{display:none}
/* (27/10/2026) Móvil en horizontal: los botones de arriba van en una columna a la izquierda; la cuenta, solo con su icono */
@media (max-height:500px) and (pointer:coarse) and (orientation:landscape){
 .op-chartcard.big.narrow{grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr) auto}
 .op-chartcard.big.narrow>.op-bighead.op-mhead{grid-column:1;grid-row:1/3;flex-direction:column;flex-wrap:nowrap;align-items:center;justify-content:flex-start;gap:6px;
   padding:2px 6px 2px 0;margin-right:6px;border-right:1px solid var(--border);width:52px;overflow:visible;position:relative;z-index:30}
 .op-chartcard.big.narrow>.op-bigbody{grid-column:2;grid-row:1}
 .op-chartcard.big.narrow>.op-chartmsg{grid-column:2;grid-row:2}
 .op-chartcard.big.narrow>.op-tabs{grid-column:3;grid-row:1/3}
 .op-mhead>*{max-width:44px}
 .op-mhead .op-logo{width:38px;height:38px}
 .op-mhead .op-accchip{margin:auto 0 0;max-width:44px;width:40px;height:38px;padding:0;display:inline-flex;align-items:center;justify-content:center}
 .op-mhead .op-accchip-i{display:inline-flex}
 .op-mhead .op-accchip-i svg{width:20px;height:20px}
 .op-mhead .op-accchip-n,.op-mhead .op-accchip-c{display:none}
 .op-mhead .tf-compact>button{font-size:11.5px;padding:3px 4px;max-width:46px;letter-spacing:-.3px}
}
/* (27/10/2026) panel de Trading más ordenado: bloques con su separación */
.op-panel .op-psec{display:flex;flex-direction:column;gap:10px;padding:12px 0;border-top:1px solid var(--border)}
.op-panel .op-psec:first-of-type{border-top:0}
.op-panel .op-psec .field{margin:0}
.op-panel .op-mtlvs{gap:10px}
.op-panel .op-mtlv::placeholder{color:var(--muted);opacity:.8}

/* ==========================================================================
   (28/10/2026) ESTILO NUEVO: oscuro con degradados azules, botones en píldora,
   letra Geist (alojada aquí, en /static/fonts) y logo azul y blanco.
   Solo cambia el aspecto: misma distribución y mismas funciones.
   Para volver al aspecto anterior: recuperar style.css, index.html, login.html,
   theme.js, los iconos y web/icons.py de «Copias RCM Trader Hub\Copia 2026-10-28 antes del rediseño».
   ========================================================================== */
@font-face{font-family:"Geist";src:url("/static/fonts/Geist-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("/static/fonts/GeistMono-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
body{font-family:"Geist","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
button,input,select,textarea{font-family:inherit}
.log{font-family:"Geist Mono",Consolas,"Courier New",monospace}

/* fondo con degradados difuminados */
:where(:root:not([data-theme="light"])) body{background:
  radial-gradient(45% 40% at 72% -5%,rgba(76,125,255,.22),rgba(76,125,255,0) 70%),
  radial-gradient(35% 35% at 100% 60%,rgba(110,86,255,.10),rgba(110,86,255,0) 70%),
  radial-gradient(30% 30% at 20% 100%,rgba(56,189,248,.07),rgba(56,189,248,0) 70%),
  #05060a;background-attachment:fixed}
:where(:root[data-theme="light"]) body{background:
  radial-gradient(45% 40% at 72% -5%,rgba(76,125,255,.12),rgba(76,125,255,0) 70%),
  radial-gradient(35% 35% at 100% 60%,rgba(110,86,255,.06),rgba(110,86,255,0) 70%),
  #f5f7fb;background-attachment:fixed}

/* menú lateral */
:where(:root:not([data-theme="light"])) .side{background:#07080d;border-right:1px solid rgba(255,255,255,.06)}
:where(:root[data-theme="light"]) .side{background:#ffffff}
.brand{font-size:16px;letter-spacing:-.02em;font-weight:600;margin-bottom:22px}
.brand b{color:var(--text)}
.brand span{font-weight:400;color:var(--muted)}
.brand span b{font-weight:600}
.nav button{border-radius:12px}
.nav button.on{background:var(--accentbg);color:var(--text);font-weight:500;box-shadow:inset 2px 0 0 var(--accent)}
:where(:root:not([data-theme="light"])) .nav button:hover{background:rgba(255,255,255,.05)}
:where(:root:not([data-theme="light"])) .nav button.on{background:rgba(255,255,255,.08)}
:where(:root:not([data-theme="light"])) .side .foot{border-top:1px solid rgba(255,255,255,.06)}

/* títulos */
.top h1{font-size:34px;letter-spacing:-.035em;font-weight:600}
h1,h2{letter-spacing:-.025em}

/* botones en píldora */
.btn{border-radius:999px}
.op-qbtn{border-radius:12px}
:where(:root:not([data-theme="light"])) .btn{background:#f4f6fa;color:#0a0b10}
:where(:root:not([data-theme="light"])) .btn:hover{filter:none;background:#ffffff}
:where(:root:not([data-theme="light"])) .btn.cal-fbtn{background:var(--panel2);color:var(--muted)}
.btn.cal-fbtn:hover,.btn.cal-fbtn[aria-expanded="true"]{color:var(--accent)}
.op-chartcard.op-light .btn:where(:not(.ghost,.danger,.op-qbtn,.op-go,.cal-fbtn)){background:var(--accent);color:#ffffff}
.btn.ghost{background:rgba(127,140,170,.08);border:1px solid var(--border);color:var(--text)}
:where(:root:not([data-theme="light"])) .btn.ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.10);color:var(--text)}
:where(:root:not([data-theme="light"])) .btn.ghost:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.16)}
.btn.danger{background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.45)}
:where(:root:not([data-theme="light"])) .btn.danger{background:rgba(248,113,113,.08);color:#fca5a5}
:where(:root:not([data-theme="light"])) .btn.danger:hover{background:rgba(248,113,113,.16)}
.btn:disabled{opacity:.5}
.tab{border-radius:999px}
:where(:root:not([data-theme="light"])) .tab{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
.tab.on{background:rgba(76,125,255,.18);border-color:rgba(76,125,255,.45)}
:where(:root:not([data-theme="light"])) .tab.on{color:#c3d3ff;border-color:rgba(143,176,255,.35)}

/* tarjetas y cajas */
.tile{border-radius:16px}
.pcard,.hero,.table,.set-box{border-radius:20px}
.banner{border-radius:14px;border-left:3px solid var(--accent)}
.modal{border-radius:22px;box-shadow:0 30px 90px rgba(0,0,0,.35)}
:where(:root:not([data-theme="light"])) .tile,:where(:root:not([data-theme="light"])) .pcard,:where(:root:not([data-theme="light"])) .table,
:where(:root:not([data-theme="light"])) .set-box,:where(:root:not([data-theme="light"])) .banner,:where(:root:not([data-theme="light"])) .soon,:where(:root:not([data-theme="light"])) .log{
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01)),#0b0d13;border-color:rgba(255,255,255,.075)}
:where(:root:not([data-theme="light"])) .hero{background:radial-gradient(70% 120% at 100% 0%,rgba(76,125,255,.16),rgba(76,125,255,0) 65%),#0b0d13;border-color:rgba(255,255,255,.075)}
:where(:root[data-theme="light"]) .hero{background:radial-gradient(70% 120% at 100% 0%,rgba(76,125,255,.10),rgba(76,125,255,0) 65%),#ffffff}
:where(:root:not([data-theme="light"])) .modal{border:1px solid rgba(255,255,255,.09);box-shadow:0 30px 90px rgba(0,0,0,.6)}
.auth .card{border-radius:24px}
:where(:root:not([data-theme="light"])) .auth .card{background:radial-gradient(80% 60% at 50% 0%,rgba(76,125,255,.16),rgba(76,125,255,0) 70%),#0b0d13;border-color:rgba(255,255,255,.08)}

/* tabla de Cuentas */
.table .row.head{font-size:11px;letter-spacing:.07em;text-transform:uppercase}
.table .row.acc-row{transition:background .15s}
@media (min-width:901px){.table{padding:4px 6px}.table .row.acc-row{padding-top:16px;padding-bottom:16px}}
.top .pill{border-radius:999px;background:rgba(52,211,153,.08);border:1px solid rgba(52,211,153,.25)}

/* campos */
input[type=text],input[type=password],input[type=email],input[type=number],select{border-radius:12px}
:where(:root:not([data-theme="light"])) input[type=text],:where(:root:not([data-theme="light"])) input[type=password],:where(:root:not([data-theme="light"])) input[type=email],
:where(:root:not([data-theme="light"])) input[type=number],:where(:root:not([data-theme="light"])) select{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.09)}
input:focus,select:focus{box-shadow:0 0 0 3px rgba(76,125,255,.18)}
:where(:root:not([data-theme="light"])) .switch{background:#2a2e38}
.switch.on:after{background:#ffffff}

/* menús y ventanas que salen encima */
.kc-flyout,.kc-menu,.kc-pop,.km-panel,.op-mdrop,.perfpick-menu,.cal-pop{border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.35)}
:where(:root:not([data-theme="light"])) .kc-flyout,:where(:root:not([data-theme="light"])) .kc-menu,:where(:root:not([data-theme="light"])) .kc-pop,:where(:root:not([data-theme="light"])) .km-panel,
:where(:root:not([data-theme="light"])) .op-mdrop,:where(:root:not([data-theme="light"])) .perfpick-menu,:where(:root:not([data-theme="light"])) .cal-pop{border-color:rgba(255,255,255,.09);box-shadow:0 18px 50px rgba(0,0,0,.55)}

/* gráfico: solo el marco */
.op-chartcard{border-radius:18px}
.op-chartcard.big{border-radius:0}
.op-rail,.kc-tools{border-radius:14px}
.op-symbtn,.op-accchip,.perfpick-btn,.perfsel,.op-sym{border-radius:999px}

/* barras de desplazamiento finas */
:where(:root:not([data-theme="light"])) ::-webkit-scrollbar{width:10px;height:10px}
:where(:root:not([data-theme="light"])) ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.10);border-radius:99px;border:2px solid transparent;background-clip:padding-box}
:where(:root:not([data-theme="light"])) ::-webkit-scrollbar-track{background:transparent}

/* (28/10/2026) Gráfico con recuadro claro: sus paneles (lista de seguimiento,
   cuenta, operaciones, historial…) también claros, aunque la web esté en oscuro */
.op-chartcard.op-light :is(.pcard,.tile,.table,.set-box,.banner,.soon,.log,.hero){background:var(--panel);border-color:var(--border);color:var(--text)}
.op-chartcard.op-light :is(.op-rp-h,.op-wl-head){background:var(--panel)}
.op-chartcard.op-light .btn.ghost{background:rgba(0,0,0,.04);border-color:var(--border);color:var(--text)}
.op-chartcard.op-light .btn.ghost:hover{background:rgba(0,0,0,.08)}
.op-chartcard.op-light .btn.danger{background:rgba(220,59,59,.06);border-color:rgba(220,59,59,.45);color:#c42b2b}
.op-chartcard.op-light .tab{background:transparent;border-color:var(--border);color:var(--muted)}
.op-chartcard.op-light .tab.on{background:var(--accentbg);border-color:var(--accent);color:var(--accent)}
.op-chartcard.op-light :is(input[type=text],input[type=password],input[type=email],input[type=number],select){background:#ffffff;border-color:var(--border);color:var(--text)}
.op-chartcard.op-light .switch{background:var(--border)}
.op-chartcard.op-light ::-webkit-scrollbar-thumb{background:rgba(0,0,0,.18);border-radius:99px;border:2px solid transparent;background-clip:padding-box}

/* (28/10/2026) Buy en azul (para volver al verde: borrar este bloque) */
:root{--buy:#2962ff}
.op-qbtn.buy,.op-go.buy,.op-qbtn.place.buy{background:var(--buy);color:#ffffff}
.segbtn button.on.buy{border-color:var(--buy);color:var(--gain);background:rgba(41,98,255,.12)}

/* (28/10/2026) Cuentas: las casillas solo salen al pulsar «Editar varias» */
.acc-table:not(.selmode) .row .c-chk,.acc-table:not(.selmode) .row.head>span:first-child{display:none}
@media (min-width:901px){.acc-table:not(.selmode) .row{grid-template-columns:.55fr 1.4fr .75fr 1.15fr minmax(98px,1fr) minmax(76px,.7fr) minmax(84px,.9fr) 1.35fr 88px 46px 60px}}
@media (max-width:900px){.acc-table:not(.selmode) .row{grid-template-columns:minmax(0,1fr) auto auto auto;grid-template-areas:"name name sw edit" "sub money money money" "ops ops ops ops"}}
.acc-table.selmode .row.acc-row{cursor:pointer}

/* (28/10/2026) paleta de colores: «Predeterminado» arriba */
.cp-def{display:flex;align-items:center;gap:8px;width:100%;margin:0 0 8px;padding:6px 8px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--text);font-size:12.5px}
.cp-def:hover{border-color:var(--accent)}
.cp-def.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accentbg)}
.cp-def-sw{width:18px;height:18px;border-radius:4px;border:1px solid var(--border);flex:none}

/* (28/10/2026) Ajustes del gráfico: en el iPhone ya no se mueve hacia los lados */
.op-setpage,.op-stylemodal{overflow-x:hidden;touch-action:pan-y}
.op-setpage>.modal,.op-stylemodal{box-sizing:border-box;width:100%;min-width:0}
.op-style,.op-style-row,.op-style-row.g>*{min-width:0;max-width:100%}
.op-style-row.g.sel select{max-width:min(210px,52vw)}
@media (max-width:520px){.op-linepick svg{width:44px}.op-style-row.g>:nth-child(3).op-linepick,.op-style-row.g>:nth-child(4).op-linepick{max-width:64px;overflow:hidden}}

/* (28/10/2026) «Vista previa»: se ve el gráfico de verdad y abajo una barrita pequeña */
.op-pv-hide{display:none!important}
.op-pvbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom));z-index:200;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;
  max-width:calc(100vw - 24px);padding:8px 10px;border-radius:999px;background:var(--panel);border:1px solid var(--border);box-shadow:0 12px 34px rgba(0,0,0,.45)}
.op-pvbar-t{font-size:12px;color:var(--muted);padding:0 6px}
@media (max-width:900px){.op-pvbar{bottom:calc(var(--optabs-h,64px) + 10px);border-radius:16px}}

/* (28/10/2026) Paneles del gráfico (Trading, Cuentas, Lista de seguimiento, Operaciones,
   Historial, Alertas): mismo fondo que la barra de botones de la derecha */
.op-chartcard .op-rpanel{background:var(--panel);background-image:none;border-color:var(--border)}
/* (28/10/2026) Rendimiento: resultado total, recuadros, calendario y resultado por símbolo en verde.
   La evolución del saldo y las últimas operaciones cerradas siguen en azul. */
:root{--greenbg:52,211,153}
:root[data-theme="light"]{--greenbg:15,157,110}
.perf-green{--gain:var(--green);--gainbg:var(--greenbg)}
/* (28/10/2026) Aviso: «Algo Trading» apagado en alguna cuenta */
.algo-bar{position:fixed;left:50%;top:calc(var(--sat,0px) + 8px);transform:translateX(-50%);z-index:71;background:rgba(150,24,24,.97);color:#fff;font-size:13px;font-weight:600;padding:8px 16px;border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,.5);pointer-events:none;max-width:calc(100% - 24px);white-space:pre-line;text-align:center;line-height:1.4}
#netbar~.algo-bar,.algo-bar~#netbar{top:calc(var(--sat,0px) + 64px)}
/* (28/10/2026) menú lateral opaco (en el móvil se veía lo de detrás a través del menú) */
/* (28/10/2026) Cuenta desconectada: el gráfico se queda y el aviso va en medio */
.op-stale.acc-off,.op-mini-msg.acc-off{top:50%;bottom:auto;left:50%;transform:translate(-50%,-50%);background:rgba(10,12,20,.88);color:#fff;border:1px solid rgba(248,113,113,.55);box-shadow:0 10px 30px rgba(0,0,0,.45);border-radius:14px;padding:10px 18px;font-size:13px;font-weight:600;white-space:pre-line;text-align:center;line-height:1.4;width:max-content;max-width:calc(100% - 40px)}
.op-stale.acc-off:first-line,.op-mini-msg.acc-off:first-line{color:#fca5a5;font-size:14px}
.op-mini-msg.acc-off{position:absolute;inset:auto;display:block;padding:8px 14px;font-size:12px;z-index:3}
/* ==========================================================================
   (28/10/2026) Cuentas: cada cuenta en su recuadro con las esquinas redondeadas,
   un poco separadas y con el azul de la web. «Cerrar» y «Editar» van dentro del
   desplegable; sin columna «Operaciones» y con «Beneficio» (en dinero).
   ========================================================================== */
@media (min-width:901px){
 .acc-table:not(.selmode) .row{grid-template-columns:.55fr 1.4fr .75fr 1.15fr minmax(98px,1fr) minmax(96px,.95fr) minmax(76px,.7fr) minmax(84px,.85fr) 1.3fr 46px}
 .acc-table.selmode .row{grid-template-columns:30px .55fr 1.4fr .75fr 1.15fr minmax(98px,1fr) minmax(96px,.95fr) minmax(76px,.7fr) minmax(84px,.85fr) 1.3fr 46px}
}
@media (max-width:900px){
 .row .c-net{display:none}
 .acc-table:not(.selmode) .row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name sw" "sub money"}
 .acc-table.selmode .row{grid-template-columns:22px minmax(0,1fr) auto;grid-template-areas:"chk name sw" "chk sub money"}
}
.c-net{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.acc-table{display:flex;flex-direction:column;gap:8px;background:none!important;border:0!important;padding:0!important;box-shadow:none!important;border-radius:0!important}
.acc-table .row{border-top:0}
.acc-table .row.head{padding-top:2px;padding-bottom:2px}
.acc-table .row.acc-row{border:1px solid rgba(255,255,255,.07);border-radius:16px;
  background:linear-gradient(100deg,rgba(76,125,255,.10),rgba(76,125,255,.03) 45%,rgba(110,86,255,.03)),#0a0c14;
  transition:background .15s,border-color .15s,box-shadow .15s}
.acc-table .row.acc-row:hover{border-color:rgba(76,125,255,.35);box-shadow:0 6px 24px rgba(0,0,0,.25)}
.acc-table .row.acc-row.open{border-color:rgba(76,125,255,.5);border-bottom-left-radius:0;border-bottom-right-radius:0;
  background:linear-gradient(100deg,rgba(76,125,255,.18),rgba(76,125,255,.06) 50%,rgba(110,86,255,.05)),#0b0e18}
.acc-table .row.acc-row.off{background:linear-gradient(100deg,rgba(76,125,255,.05),rgba(76,125,255,0) 50%),#090a10}
.acc-table .acc-detail{margin-top:-9px;border:1px solid rgba(76,125,255,.5);border-top:1px solid rgba(255,255,255,.06);border-radius:0 0 16px 16px;
  background:#0b0e18;box-shadow:none;padding:12px 16px}
.acc-detail-h{gap:10px;margin-bottom:0}
.acc-detail-h .acc-edit{margin-left:auto}
.acc-detail .op-rows{margin-top:10px}
:root[data-theme="light"] .acc-table .row.acc-row{border-color:var(--border);background:linear-gradient(100deg,rgba(37,99,235,.07),rgba(37,99,235,.01) 50%),#ffffff}
:root[data-theme="light"] .acc-table .row.acc-row:hover{border-color:rgba(37,99,235,.35);box-shadow:0 6px 20px rgba(20,30,60,.08)}
:root[data-theme="light"] .acc-table .row.acc-row.open{border-color:rgba(37,99,235,.45);background:linear-gradient(100deg,rgba(37,99,235,.12),rgba(37,99,235,.03) 50%),#ffffff}
:root[data-theme="light"] .acc-table .row.acc-row.off{background:#fafbfd}
:root[data-theme="light"] .acc-table .acc-detail{border-color:rgba(37,99,235,.45);border-top-color:var(--border);background:#f7f9fd}
/* (28/10/2026) Calculadora: los recuadros con el mismo color que los de Cuentas */
:root:not([data-theme="light"]) :is(.pcard.calc-in,.pcard.calc-res,.calc .pcard){border:1px solid rgba(255,255,255,.07);
  background:linear-gradient(100deg,rgba(76,125,255,.10),rgba(76,125,255,.03) 45%,rgba(110,86,255,.03)),#0a0c14}
:root[data-theme="light"] :is(.pcard.calc-in,.pcard.calc-res,.calc .pcard){border-color:var(--border);
  background:linear-gradient(100deg,rgba(37,99,235,.07),rgba(37,99,235,.01) 50%),#ffffff}
/* (28/10/2026) «Descargar la app» (menú) e «Instalar la app» (pantalla de entrar) */
.nav-extra{margin-top:6px;padding-top:6px;border-top:1px solid var(--border)}
:where(:root:not([data-theme="light"])) .nav-extra{border-top-color:rgba(255,255,255,.06)}
.nav-extra button{color:var(--muted)}
.auth{flex-direction:column}
.inst-link{margin:14px auto 0;background:none;border:0;color:var(--muted);font:inherit;font-size:13px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.inst-link:hover{color:var(--text)}
.inst-ov{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:16px}
.inst-card{width:min(420px,100%);background:var(--panel);border:1px solid var(--border);border-radius:22px;padding:22px 22px 18px;box-shadow:0 30px 90px rgba(0,0,0,.5)}
.inst-card h2{margin:0 0 10px;font-size:20px}
.inst-card ol{margin:0 0 16px;padding-left:20px;line-height:1.55;color:var(--text)}
.inst-card .btn{width:100%}