/* ============================================================
   PipReplay — identidad visual propia (dark first)
   Paleta violeta/índigo: fondos #0a0a13/#131221/#191830 · borde #28263f
   Texto #ffffff/#c9c7dc/#8f8dab · acento #7c5cff · verde #10b981 · rojo #e5484d
   Tipografía: Manrope (variable, local)
   ============================================================ */

/* ---------- tipografía: Inter (local, latin) ---------- */
@font-face{font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/inter-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/inter-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/inter-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/inter-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Manrope'; font-style:normal; font-weight:400 800; font-display:swap; src:url('fonts/manrope-latin-var.woff2') format('woff2');}

/* ---------- tokens ---------- */
:root{
  --bg:#0a0a13; --bg2:#131221; --bg3:#191830; --bg-elev:#1e1c33;
  --panel:#131221; --border:#28263f; --border-soft:#1f1d33;
  --text:#ffffff; --muted:#c9c7dc; --text3:#8f8dab;
  --accent:#7c5cff; --accent2:#6a48f0; --accent-soft:rgba(124,92,255,.15);
  --green:#10b981; --red:#e5484d; --gold:#fbbf24;
  --buy:#0e9f6e; --buy-hover:#10b981; --sell:#e5484d; --sell-hover:#f2565b;
  --buy-soft:rgba(16,185,129,.14); --sell-soft:rgba(229,72,77,.13);
  --radius-xs:7px; --radius:12px; --radius-sm:9px; --radius-lg:16px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px;
  --fs-xs:11px; --fs-sm:12px; --fs-md:13px; --fs-base:14px; --fs-lg:16px; --fs-xl:21px;
  --hover:#221f3a; --border-hover:#3b3366;
  --shadow-1:0 1px 2px rgba(5,3,15,.5);
  --shadow-2:0 8px 24px rgba(5,3,15,.5);
  --shadow-3:0 18px 54px rgba(5,3,15,.65);
  --ring:0 0 0 3px rgba(124,92,255,.22);
  /* chrome flotante del gráfico (barras sobre el canvas) */
  --chrome-bg:rgba(19,18,33,.97); --chrome-line:var(--border);
  --chrome-text:#c9c7dc; --chrome-hover:#1e1c33; --chrome-active:#ffffff;
  color-scheme:dark;
}
[data-theme="light"]{
  --bg:#f4f4fb; --bg2:#ffffff; --bg3:#ecedf7; --bg-elev:#ffffff;
  --panel:#ffffff; --border:#e1e0f0; --border-soft:#e9e8f5;
  --text:#151430; --muted:#4e4c6e; --text3:#66647f;
  --accent:#6a48f0; --accent2:#5a36e0; --accent-soft:rgba(106,72,240,.10);
  --buy:#0e9f6e; --buy-hover:#0b8a5f; --sell:#e5484d; --sell-hover:#d13a3f;
  --ring:0 0 0 3px rgba(106,72,240,.16);
  --shadow-1:0 1px 2px rgba(30,20,60,.08);
  --shadow-2:0 8px 24px rgba(30,20,60,.10);
  --shadow-3:0 18px 54px rgba(30,20,60,.16);
  --hover:#e9e7f6; --border-hover:#c9c4ec;
  --chrome-bg:rgba(255,255,255,.97); --chrome-line:#e1e0f0;
  --chrome-text:#4e4c6e; --chrome-hover:#ecedf7; --chrome-active:#151430;
  color-scheme:light;
}

/* ---------- base ---------- */
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  font-family:'Manrope','Inter','Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  background:var(--bg); color:var(--text); font-size:14px; line-height:1.45;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-variant-numeric:tabular-nums;   /* dígitos de ancho fijo: datos financieros escaneables */
}
a{color:var(--accent); text-decoration:none;}
a:hover{text-decoration:underline; text-underline-offset:3px;}
button{font-family:inherit; cursor:pointer; color:inherit;}
button:disabled{cursor:not-allowed;}
::placeholder{color:var(--text3); opacity:1;}
::selection{background:rgba(124,92,255,.30);}
input,select,textarea{
  font-family:inherit; background:var(--bg3); color:var(--text);
  border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:8px 10px; font-size:13px; outline:none;
  transition:border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}
input:hover,select:hover,textarea:hover{border-color:var(--border-hover);}
input:focus,select:focus,textarea:focus{border-color:var(--accent); box-shadow:var(--ring);}
input:disabled,select:disabled,textarea:disabled{opacity:.5; cursor:not-allowed;}
input[type="checkbox"],input[type="radio"]{accent-color:var(--accent2); width:15px; height:15px;}
h1{font-size:24px; font-weight:700; letter-spacing:-.01em;}
h2{font-size:19px; font-weight:700; letter-spacing:-.01em;}
h3{font-size:15px; font-weight:600;}
.hidden{display:none !important;}
.muted{color:var(--muted);}

/* ---------- scrollbars y foco ---------- */
*{scrollbar-width:thin; scrollbar-color:rgba(148,163,184,.35) transparent;}
::-webkit-scrollbar{width:9px; height:9px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(148,163,184,.32); border-radius:20px; border:2px solid transparent; background-clip:content-box;}
::-webkit-scrollbar-thumb:hover{background:rgba(148,163,184,.55); border:2px solid transparent; background-clip:content-box;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px;}

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--bg3); color:var(--text); border:1px solid var(--border);
  padding:8px 15px; border-radius:var(--radius-sm); font-size:13px; font-weight:600;
  line-height:1.2; white-space:nowrap;
  transition:background-color .13s ease, border-color .13s ease, color .13s ease, box-shadow .13s ease, transform .05s ease;
}
.btn:hover{background:var(--bg-elev); border-color:var(--border-hover);}
.btn:active{transform:translateY(1px);}
.btn:focus-visible{outline:none; box-shadow:var(--ring); border-color:var(--accent);}
.btn.primary{background:var(--accent2); border-color:var(--accent2); color:#fff; box-shadow:var(--shadow-1);}
.btn.primary:hover{background:var(--accent); border-color:var(--accent);}
.btn.green{background:var(--buy); border-color:var(--buy); color:#fff;}
.btn.green:hover{background:var(--buy-hover); border-color:var(--buy-hover);}
.btn.red{background:var(--sell); border-color:var(--sell); color:#fff;}
.btn.red:hover{background:var(--sell-hover); border-color:var(--sell-hover);}
.btn.small{padding:5px 11px; font-size:12px; border-radius:7px;}
.btn:disabled{opacity:.45; box-shadow:none; transform:none;}

/* ---------- shell: topbar fija + rail lateral de iconos ---------- */
svg.ic{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex:none;}
#app{display:flex; flex-direction:column; height:100vh; overflow:hidden;}
.pt-top{height:52px; min-height:52px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 12px; background:var(--bg2); border-bottom:1px solid var(--border); z-index:40;}
.pt-left,.pt-right{display:flex; align-items:center; gap:8px; min-width:0;}
.pt-icon-btn{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; padding:0; background:transparent; border:1px solid transparent; border-radius:var(--radius-sm); color:var(--muted); transition:background-color .12s, color .12s;}
.pt-icon-btn:hover{background:var(--bg3); color:var(--text);}
.pt-lang{min-width:34px; height:34px; padding:0 8px; background:transparent; border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--muted); font-size:11.5px; font-weight:800; letter-spacing:.06em; transition:color .12s, border-color .12s;}
.pt-lang:hover{color:var(--text); border-color:var(--accent);}
.pt-chip-pro{display:inline-flex; align-items:center; gap:5px; height:30px; padding:0 12px; border-radius:20px; background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; font-size:11.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;}
.pt-chip-pro svg.ic{width:13px; height:13px;}
.pt-chip-pro.plan-free{cursor:pointer;}
.pt-chip-pro.plan-free:hover{filter:brightness(1.15);}
.brand{display:flex; align-items:center; gap:9px; font-weight:800; letter-spacing:2px; font-size:14.5px; white-space:nowrap; color:var(--text);}
.brand-mark{width:22px; height:22px; color:var(--accent);}
.brand-word b{color:var(--accent); font-weight:800;}
.pt-row{display:flex; flex:1; min-height:0;}
#sidebar{width:76px; min-width:76px; background:var(--bg2); border-right:1px solid var(--border); display:flex; flex-direction:column; align-items:center; gap:10px; padding:14px 6px 10px; transition:width .18s ease, min-width .18s ease;}
.rail-user{display:flex; flex-direction:column; align-items:center; gap:6px; width:100%; padding:2px 0; position:relative;}
.avatar{width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,#2a2158,#15122b); border:1px solid #3b3366; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:17px; color:#c9c2ff; position:relative;}
[data-theme="light"] .avatar{background:linear-gradient(135deg,#e6e1fa,#cfc7f2); border-color:#c5baf0; color:#4a34b8;}
.plan-badge{position:absolute; bottom:-6px; left:50%; transform:translateX(-50%); font-size:9px; font-weight:800; padding:1px 8px; border-radius:12px; background:var(--accent2); color:#fff; border:2px solid var(--bg2); letter-spacing:.04em;}
.sb-name{font-size:10.5px; font-weight:700; text-align:center; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#main-nav{display:flex; flex-direction:column; align-items:center; gap:6px; width:100%;}
#main-nav a{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; width:62px; padding:9px 2px; border-radius:var(--radius-sm); color:var(--muted); font-weight:700; font-size:9.5px; text-align:center; white-space:nowrap; overflow:hidden; transition:background-color .12s ease, color .12s ease;}
#main-nav a svg.ic{width:20px; height:20px;}
#main-nav a:hover{background:var(--bg3); color:var(--text);}
#main-nav a.active{background:var(--accent-soft); color:var(--text);}
#main-nav a.active::before{content:''; position:absolute; left:-6px; top:22%; bottom:22%; width:3px; border-radius:3px; background:var(--accent);}
#main-nav a.active em{background:rgba(255,255,255,.16);}
#sidebar:not(.rail) #main-nav a em{display:none;}
em.beta,em.new{font-style:normal; font-size:9.5px; font-weight:700; padding:2px 7px; border-radius:20px; background:var(--bg3); color:var(--muted); text-transform:uppercase; letter-spacing:.05em;}
em.new{background:rgba(16,185,129,.16); color:#34d399;}
[data-theme="light"] em.new{background:#d8f5ea; color:#0e9f6e;}
.side-footer{margin-top:auto; width:100%; display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 0 0; border-top:1px solid var(--border-soft);}
.version{font-size:9px; color:var(--text3); text-align:center; white-space:nowrap; overflow:hidden; max-width:100%;}
#auth-salir,#auth-admin{margin:4px auto 0; width:calc(100% - 8px); font-size:10.5px; padding:7px 2px;}
/* barra lateral expandida (toggle del topbar) */
#sidebar.rail{width:204px; min-width:204px; align-items:stretch; padding:14px 10px 10px;}
#sidebar.rail .rail-user{flex-direction:row; align-items:center; gap:10px; padding:2px 4px 8px;}
#sidebar.rail .avatar{width:42px; height:42px; font-size:16px;}
#sidebar.rail .sb-name{font-size:13px; text-align:left; flex:1;}
#sidebar.rail #main-nav{align-items:stretch;}
#sidebar.rail #main-nav a{flex-direction:row; justify-content:flex-start; gap:11px; width:auto; padding:9px 12px; font-size:13.5px; text-align:left;}
#sidebar.rail #main-nav a.active::before{left:-10px;}
#sidebar.rail #main-nav a span{flex:1;}
#sidebar.rail .version{font-size:11px; text-align:left;}
#sidebar.rail #auth-salir,#sidebar.rail #auth-admin{font-size:12px; padding:8px 10px;}

/* ---------- layout principal ---------- */
#main{flex:1; overflow-y:auto; padding:24px 28px 40px; position:relative; scroll-behavior:smooth;}
.page-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; gap:16px; flex-wrap:wrap;}
.page-head p{color:var(--muted); margin-top:4px; font-size:13px;}
.card{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px; box-shadow:var(--shadow-1);}
.grid{display:grid; gap:14px;}
.grid.cols-2{grid-template-columns:1fr 1fr;}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
.grid.cols-4{grid-template-columns:repeat(4,1fr);}
.grid.cols-5{grid-template-columns:repeat(5,1fr);}
.grid.cols-6{grid-template-columns:repeat(6,1fr);}

/* pestañas Testing + tarjetas de acción */
.streak-chip{border-color:var(--gold) !important;}
.testing-tabs{display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:16px;}
.testing-tabs a{display:inline-flex; align-items:center; gap:7px; padding:10px 16px; color:var(--muted); font-weight:600; font-size:13.5px; border-bottom:2px solid transparent; transition:color .12s;}
.testing-tabs a:hover{color:var(--text); text-decoration:none;}
.testing-tabs a.active{color:var(--text); border-bottom-color:var(--accent);}
.action-card{transition:border-color .13s ease, box-shadow .13s ease;}
.action-card:hover{box-shadow:var(--shadow-2);}
.action-card:has(.btn.primary){border-color:rgba(124,92,255,.45);}

/* ---------- tablas ---------- */
table.tbl{width:100%; border-collapse:collapse; font-size:13px;}
.tbl th{text-align:left; color:var(--muted); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.05em; padding:8px 10px; border-bottom:1px solid var(--border); white-space:nowrap; position:sticky; top:0; background:var(--panel); z-index:1;}
.pos-table-wrap .tbl th{background:var(--bg2);}
.tbl td{padding:9px 10px; border-bottom:1px solid var(--border-soft);}
.tbl tr:last-child td{border-bottom:none;}
.tbl tbody tr{transition:background-color .1s ease;}
.tbl tbody tr:hover td{background:var(--bg3);}
.pos{color:var(--green);} .neg{color:var(--red);}
.pill{display:inline-block; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:600; letter-spacing:.02em;}
.pill.buy{background:var(--buy-soft); color:#34d399;} .pill.sell{background:var(--sell-soft); color:#F87171;}
[data-theme="light"] .pill.buy{background:#d8f5ea; color:#15803D;}
[data-theme="light"] .pill.sell{background:#FCE2E2; color:#B91C1C;}
.pill.low{background:var(--bg-elev); color:var(--muted);} .pill.medium{background:rgba(245,158,11,.14); color:#FBBF24;} .pill.high{background:var(--sell-soft); color:#F87171;}
[data-theme="light"] .pill.medium{background:#FCEED3; color:#B45309;}
[data-theme="light"] .pill.high{background:#FCE2E2; color:#B91C1C;}

/* ---------- KPIs ---------- */
.kpi{position:relative; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg); padding:14px 16px; transition:border-color .13s ease;}
.kpi:hover{border-color:var(--border-hover);}
.kpi .k-label{color:var(--muted); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px;}
.kpi .k-value{font-size:21px; font-weight:700; letter-spacing:-.01em;}
.kpi .k-sub{font-size:12px; color:var(--muted); margin-top:3px;}
/* glifo ⓘ del tooltip de cada KPI (la explicación vive en el title de la tarjeta);
   va FUERA del .k-label para no alterar su texto */
.kpi>.k-i{position:absolute; top:12px; right:14px; cursor:pointer; opacity:.55; font-style:normal;}
.kpi>.k-i:hover{opacity:1;}

/* ---------- pestañas ---------- */
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:16px; flex-wrap:wrap;}
.tabs button{background:none; border:none; color:var(--muted); padding:10px 15px; font-weight:600; font-size:13px; border-bottom:2px solid transparent; transition:color .12s;}
.tabs button:hover{color:var(--text);}
.tabs button.active{color:var(--text); border-bottom-color:var(--accent);}

/* ---------- modal ---------- */
#modal-root{position:fixed; inset:0; pointer-events:none; z-index:600;}
.modal-back{position:absolute; inset:0; background:rgba(2,6,17,.62); display:flex; align-items:center; justify-content:center; pointer-events:auto; backdrop-filter:blur(3px);}
[data-theme="light"] .modal-back{background:rgba(15,27,45,.35);}
.modal{background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-lg); padding:22px; width:min(560px,94vw); max-height:90vh; overflow-y:auto; box-shadow:var(--shadow-3); animation:popin .16s ease;}
@keyframes popin{from{opacity:0; transform:translateY(6px) scale(.985);} to{opacity:1; transform:none;}}
.modal h3{margin-bottom:14px;}
.modal .row{display:flex; gap:10px; margin-bottom:12px;}
.modal .field{flex:1; min-width:0; display:flex; flex-direction:column; gap:5px;}
.modal label, .side-panel label, .field label{font-size:11.5px; color:var(--muted); font-weight:600; letter-spacing:.02em;}
.modal .actions{display:flex; justify-content:flex-end; gap:10px; margin-top:16px;}

/* ---------- wizard de sesión: layout por secciones ---------- */
.modal.wide{width:min(720px,94vw);}
.wz-seg{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px;}
.wz-seg .btn{justify-content:center; padding:11px 10px; font-size:13.5px;}
.wz-sec-t{display:flex; align-items:center; gap:10px; font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin:16px 0 8px;}
.wz-sec-t::after{content:""; flex:1; height:1px; background:var(--border);}
.wz-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; margin-bottom:12px;}
.wz-grid .span2{grid-column:1/-1;}
.wz-inline{display:flex; gap:6px; align-items:stretch;}
.wz-inline input, .wz-inline select{min-width:0;}
.wz-inline .btn{white-space:nowrap; display:inline-flex; align-items:center;}
#wz-asset-chips{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px;}
#wz-asset-chips .btn{padding:3px 11px; font-size:11.5px; border-radius:999px;}
.toggle-row.slim{padding:7px 12px; font-size:12.5px; color:var(--muted);}
details.wz-adv{border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg3); margin-bottom:6px;}
details.wz-adv summary{cursor:pointer; padding:10px 12px; font-size:12.5px; font-weight:600; color:var(--muted); list-style:none; display:flex; align-items:center; gap:8px; user-select:none;}
details.wz-adv summary::-webkit-details-marker{display:none;}
details.wz-adv summary::after{content:"▾"; margin-left:auto; font-size:11px; transition:transform .15s;}
details.wz-adv[open] summary{color:var(--text); border-bottom:1px solid var(--border);}
details.wz-adv[open] summary::after{transform:rotate(180deg);}
details.wz-adv .wz-adv-body{padding:12px;}
@media(max-width:640px){
  .modal.wide{padding:16px;}
  .wz-grid{grid-template-columns:1fr; gap:10px;}
  .wz-seg .btn{padding:10px 6px; font-size:12.5px;}
  .modal .actions{flex-direction:column-reverse;}
  .modal .actions .btn{width:100%;}
}
.quick-amounts{display:flex; gap:8px; margin:10px 0;}
/* segmentados del ticket de orden (Dirección Sell|Buy · Tipo Market|Limit|Stop), como FXR */
.po-seg{display:flex; gap:4px;}
.po-seg button{flex:1; background:var(--bg3); border:1px solid var(--border); color:var(--text); padding:7px 10px; border-radius:var(--radius-sm); font-weight:700; font-size:12px; cursor:pointer; transition:border-color .12s, background-color .12s;}
.po-seg button:hover{border-color:var(--border-hover);}
.po-seg button.on{background:var(--accent2); border-color:var(--accent2); color:#fff;}
.quick-amounts button{flex:1; background:var(--bg3); border:1px solid var(--border); color:var(--text); padding:7px; border-radius:var(--radius-sm); font-weight:600; font-size:12px; transition:border-color .12s, background-color .12s;}
.quick-amounts button:hover{border-color:var(--border-hover); background:var(--bg-elev);}

/* ---------- toasts ---------- */
#toast-root{position:fixed; left:18px; bottom:18px; z-index:200; display:flex; flex-direction:column; gap:8px; max-width:400px;}
.toast{background:var(--bg-elev); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:var(--radius); padding:11px 15px; min-width:260px; font-size:13px; box-shadow:var(--shadow-2); animation:slidein .2s ease;}
.toast.ok{border-left-color:var(--green);} .toast.err{border-left-color:var(--red);}
@keyframes slidein{from{transform:translateX(-16px); opacity:0;} to{transform:none; opacity:1;}}

/* ---------- sala de sesión ---------- */
#room{display:flex; flex-direction:column; flex:1; min-height:0; background:var(--bg);}
.room-top{display:flex; align-items:center; gap:10px; padding:7px 12px; border-bottom:1px solid var(--border); background:var(--bg2); flex-wrap:wrap;}
.room-top .sym{font-weight:700; font-size:15px; letter-spacing:.01em;}
/* iconos más grandes en la barra superior (petición Carlos, barra estilo FXR) */
.room-top .btn.small{font-size:14px; min-width:30px; padding:5px 8px;}
.room-top .btn.small svg{width:19px; height:19px;}
.room-top .room-ses{font-weight:700; font-size:13px; letter-spacing:.02em; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.room-top .btn.small.on{color:var(--accent2); background:var(--bg3);}
.room-top .btn.small{background:transparent; border-color:transparent; color:var(--muted);}
.room-top .btn.small:hover{background:var(--bg3); color:var(--text); border-color:transparent;}
.room-top .btn.small{display:inline-flex; align-items:center; gap:5px;}
.room-top .btn.small svg{flex:none;}
.room-top .btn.small:hover svg{color:var(--accent2);}
.room-top .tfs{display:flex; gap:2px;}
.room-top .tfs button{background:none; border:none; color:var(--muted); padding:5px 9px; border-radius:6px; font-weight:700; font-size:13px; transition:background-color .12s, color .12s;}
.room-top .tfs button:hover{background:var(--bg3); color:var(--text);}
.room-top .tfs button.active{background:var(--accent2); color:#fff;}
#main.room-mode{padding:0; overflow:hidden; display:flex; flex-direction:column;}

/* canvas del gráfico: sigue el TEMA DE LA APP (oscura por defecto,
   body[data-theme="light"] lo pasa a claro; mismas velas verde/roja de TV).
   La elección del usuario (🎨 Apariencia de la sala) pisa ambos con vars
   inline vía applyChartTheme; "Valores por defecto" = seguir el tema. */
.room-chart-wrap{flex:1; position:relative; min-height:0; overflow:hidden;   /* contenedor de viewport fijo: nada debe pintar/scrollar fuera (fav-bar arrastrada) */
  /* fix H1 oleada 9: reservar el ancho del tabstrip (44px) FUERA del área del
     gráfico — el padding reduce el content-box, así #chartCanvas (width:100%)
     y TODOS los paneles de la retícula (canvas inline width:100%) terminan
     antes del strip y el eje de precios (padR=64) queda íntegro. */
  padding-right:44px;
  --ch-bg:#0d1526; --ch-grid:rgba(148,163,184,.13); --ch-text:#b7c0cf; --ch-axis:#2a2e39;
  --ch-green:#089981; --ch-red:#f23645;
  --ch-cross:rgba(255,255,255,.12); --ch-last:rgba(255,255,255,.35);
}
body[data-theme="light"] .room-chart-wrap{
  --ch-bg:#ffffff; --ch-grid:rgba(42,46,57,.14); --ch-text:#5a6572; --ch-axis:#000;
  --ch-cross:rgba(0,0,0,.3); --ch-last:rgba(0,0,0,.4);
}
#chartCanvas, .pane-canvas{background:var(--ch-bg);}
#chartCanvas{width:100%; height:100%; display:block; cursor:crosshair;}
#chartTip{position:absolute; pointer-events:none; background:none; border:none; border-radius:6px; padding:2px 4px; font-size:11px; line-height:1.5; display:none; z-index:5; white-space:normal; max-width:min(720px, calc(100% - 60px)); color:var(--ch-text,#d1d4dc);}

/* barra de replay flotante */
.replay-bar{position:absolute; top:92px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:8px; background:var(--chrome-bg); border:1px solid var(--chrome-line); border-radius:10px; padding:6px 10px; z-index:6; box-shadow:var(--shadow-2); backdrop-filter:blur(8px);}
.replay-bar button{background:transparent; border:1px solid transparent; color:var(--chrome-text); border-radius:7px; padding:6px 10px; font-size:14px; transition:background-color .12s, color .12s;}
.replay-bar button:hover{background:var(--chrome-hover); color:var(--chrome-active);}
.replay-bar button.playing{background:var(--accent2); border-color:var(--accent2); color:#fff;}
.replay-bar input[type=range]{width:130px; accent-color:var(--accent2);}
.replay-bar #step-sel:focus{outline:none; border-color:var(--accent2,#7c5cff);}

/* barra inferior de rango + chips de indicadores.
   pointer-events:none: los clics/drag la ATRAVIESAN y llegan al canvas de cada
   gráfico (principal y paneles) → arrastrar el eje temporal zooma SU gráfico,
   como TV; los botones (5y…1d, A, 📅, %, log) siguen clicables. */
.room-rangebar{position:absolute; bottom:0; left:0; right:0; height:24px; display:flex; align-items:center; gap:6px; padding:0 8px; background:var(--bg2); border-top:1px solid var(--border); z-index:5; pointer-events:none;}
.room-rangebar button{pointer-events:auto; cursor:pointer !important;}   /* manita sobre A/5y…1d/📅/%/log: el canvas de abajo usa cursor de arrastre */
.room-rangebar button:hover{color:var(--text) !important; background:var(--bg3);}
.ind-chip{background:var(--chrome-bg); border:1px solid var(--chrome-line); border-radius:6px; padding:2px 7px; font-size:10px; display:inline-flex; gap:7px; align-items:center; color:var(--chrome-text);}
.ind-chip i{cursor:pointer; font-style:normal; opacity:.75;}
.ind-chip i:hover{opacity:1; color:var(--chrome-active);}

/* barra FXR inferior: comprar/vender + balance */
.risk-bar{display:flex; justify-content:space-between; background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px 12px; font-size:12.5px;}
.room-bottom{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 12px; border-top:1px solid var(--border); background:var(--bg2); flex-wrap:wrap;}
.room-bottom .left{display:flex; align-items:center; gap:8px;}
.btn-buy{background:var(--buy); border:none; color:#fff; font-weight:700; font-size:13px; letter-spacing:.03em; padding:10px 22px; border-radius:9px; min-width:96px; box-shadow:var(--shadow-1); transition:background-color .12s, transform .05s;}
.btn-buy:hover{background:var(--buy-hover);}
.btn-buy:active{transform:translateY(1px);}
.btn-sell{background:var(--sell); border:none; color:#fff; font-weight:700; font-size:13px; letter-spacing:.03em; padding:10px 22px; border-radius:9px; min-width:96px; box-shadow:var(--shadow-1); transition:background-color .12s, transform .05s;}
.btn-sell:hover{background:var(--sell-hover);}
.btn-sell:active{transform:translateY(1px);}
/* ▾ Buy/Sell: órdenes diferidas (Buy/Sell Limit y Stop) como TradingView */
.order-split{position:relative; display:flex; align-items:stretch;}
.order-split .btn-buy, .order-split .btn-sell{border-top-right-radius:0; border-bottom-right-radius:0;}
.order-caret{background:var(--buy-hover); border:none; border-left:1px solid rgba(255,255,255,.28); color:#fff; font-size:9px; line-height:1; padding:0 7px; cursor:pointer; border-radius:0 9px 9px 0; transition:background-color .12s;}
#sell-caret{background:var(--sell-hover);}
.order-caret:hover{filter:brightness(1.15);}
.order-caret.armed{background:var(--accent); box-shadow:inset 0 0 0 2px rgba(255,255,255,.4);}
.order-menu{position:absolute; bottom:calc(100% + 8px); left:0; min-width:260px; background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:5px; display:flex; flex-direction:column; gap:3px; z-index:300; box-shadow:0 10px 30px rgba(0,0,0,.4);}
.order-menu.hidden{display:none;}
.order-menu button{background:none; border:none; color:var(--text); text-align:left; font-size:12px; font-weight:700; padding:8px 10px; border-radius:7px; cursor:pointer; display:flex; flex-direction:column; gap:1px;}
.order-menu button span{font-size:10.5px; font-weight:400; color:var(--muted);}
.order-menu button:hover{background:var(--accent-soft);}
.order-menu .om-buy{color:var(--buy-hover);}
.order-menu .om-sell{color:var(--sell);}
.qty-box{display:flex; align-items:center; background:var(--bg3); border:1px solid var(--border); border-radius:9px; overflow:hidden;}
.qty-box button{background:none; border:none; color:var(--muted); padding:8px 10px; font-size:14px; transition:color .12s;}
.qty-box button:hover{color:var(--text);}
.qty-box input{width:64px; background:none; border:none; text-align:center; font-weight:700; font-size:14px;}
.qty-box input:focus{box-shadow:none;}
.qty-box:focus-within{border-color:var(--accent);}
.room-bottom .right{display:flex; align-items:center; gap:10px;}
.balance-chip{background:var(--bg3); border:1px solid var(--border); padding:8px 14px; border-radius:9px; font-weight:700; font-size:13px;}
.pnl-chip{font-weight:700; padding:8px 12px; border-radius:9px; background:var(--bg3); border:1px solid var(--border); font-size:13px;}
.pnl-chip.pos{color:var(--green);} .pnl-chip.neg{color:var(--red);}

/* ---------- panel lateral (órdenes/detalle) ---------- */
/* oleada 9: right:44px deja ver el tabstrip vertical cuando hay panel abierto */
.side-panel{position:absolute; top:0; right:44px; bottom:0; width:340px; background:var(--bg2); border-left:1px solid var(--border); z-index:8; display:flex; flex-direction:column; box-shadow:-8px 0 30px rgba(2,6,17,.35); pointer-events:auto;}
.side-panel .sp-head{display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--border); font-weight:700;}
.side-panel .sp-body{flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:12px;}
.side-panel .field{display:flex; flex-direction:column; gap:5px;}
.side-panel .field input, .side-panel .field select{min-width:0; width:auto;}   /* el min-width:auto del input (≈177px) desbordaba las filas de dos columnas */
.toggle-row{display:flex; align-items:center; justify-content:space-between; background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius-sm); padding:9px 12px;}
.toggle-row.arbol-sel{border-color:var(--accent);}   /* objeto seleccionado en el árbol de objetos */

/* ===== oleada 9 — tabstrip vertical del borde derecho (estructura FXR) ===== */
#room-tabstrip{position:absolute; top:0; right:0; bottom:26px; width:44px; z-index:9; display:flex; flex-direction:column; align-items:stretch; gap:2px; padding:6px 4px; background:var(--chrome-bg, var(--bg2)); border-left:1px solid var(--chrome-line, var(--border)); pointer-events:auto;}
#room-tabstrip button{display:flex; align-items:center; justify-content:center; padding:9px 0; background:none; border:none; border-radius:8px; color:var(--muted); cursor:pointer; transition:background-color .12s, color .12s;}
#room-tabstrip button:hover{background:var(--bg3); color:var(--text);}
#room-tabstrip button.on{background:var(--bg3); color:var(--accent2);}
#room-tabstrip button svg{pointer-events:none;}
/* sub-pestañas News / Order Flow en el header del panel */
.sp-tabs{display:inline-flex; gap:4px;}
.sp-tab{background:var(--bg3); border:1px solid var(--border); border-radius:8px; color:var(--muted); padding:4px 10px; font-size:12px; font-weight:600; cursor:pointer;}
.sp-tab:hover{color:var(--text);}
.sp-tab.on{background:var(--accent2); border-color:var(--accent2); color:#fff;}
/* botón FXR abajo-derecha: Show positions and orders */

/* Place Order compacto (estilo FXR): filas de dos columnas y métrica apretada */
.side-panel.po-compact{width:318px; max-width:94vw;}
.po-compact .sp-body{padding:10px 12px; gap:8px;}
.po-compact .row{display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap;}
.po-compact .row .field{flex:1; min-width:118px; gap:3px;}
.po-compact label{font-size:10.5px; letter-spacing:0;}
.po-compact input, .po-compact select{padding:6px 8px; font-size:12.5px;}
.po-compact .quick-amounts{gap:5px; margin:4px 0 6px;}
.po-compact .quick-amounts button{padding:5px 0; font-size:11px;}
.po-compact .risk-bar{padding:6px 10px; font-size:11.5px; flex-wrap:wrap; gap:4px 12px;}
.po-compact .risk-bar span{white-space:nowrap;}
.po-compact .toggle-row{padding:6px 10px;}
.po-compact [data-potype]{padding:7px 0; font-size:12px; font-weight:600;}
.po-compact [data-poside]{padding:9px 0; font-size:13px; font-weight:800;}
.po-compact .btn.small{padding:5px 10px;}
.po-compact .po-actions{position:sticky; bottom:0; margin:8px -12px 0; padding:10px 12px; background:var(--bg2); border-top:1px solid var(--border); box-shadow:0 -8px 18px rgba(2,6,17,.45); z-index:3;}
.po-compact .po-actions .btn{flex:1; justify-content:center;}
.toggle{width:38px; height:20px; background:var(--border); border-radius:20px; position:relative; cursor:pointer; transition:background-color .15s; flex:none;}
.toggle::after{content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; background:#fff; border-radius:50%; transition:left .15s; box-shadow:0 1px 2px rgba(0,0,0,.3);}
.toggle.on{background:var(--accent2);} .toggle.on::after{left:20px;}

/* noticias / journal */
.news-item{background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius-sm); padding:9px 11px; display:flex; flex-direction:column; gap:3px; cursor:pointer; transition:border-color .12s;}
.news-item:hover{border-color:var(--accent);}
.news-item .n-meta{display:flex; align-items:center; gap:8px; font-size:11px; color:var(--muted);}
.news-item .n-title{font-weight:600; font-size:13px;}
.news-item .n-vals{font-size:11px; color:var(--muted);}
.journal-item{background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 12px; display:flex; align-items:center; gap:10px; cursor:pointer; transition:border-color .12s;}
.journal-item:hover{border-color:var(--accent);}
.journal-item .j-pnl{margin-left:auto; font-weight:700;}

.tag{display:inline-block; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:600; margin-right:5px;}
.tag-excellent{background:var(--buy-soft); color:#34d399;} .tag-good{background:var(--accent-soft); color:#a78bfa;}
.tag-average{background:rgba(245,158,11,.14); color:#FBBF24;} .tag-poor{background:var(--sell-soft); color:#F87171;}
[data-theme="light"] .tag-excellent{background:#d8f5ea; color:#15803D;}
[data-theme="light"] .tag-good{background:#DBEAFE; color:#1D4ED8;}
[data-theme="light"] .tag-average{background:#FCEED3; color:#B45309;}
[data-theme="light"] .tag-poor{background:#FCE2E2; color:#B91C1C;}
.stars{color:var(--gold); letter-spacing:2px; cursor:pointer;}

/* tabla de posiciones */
.pos-table-wrap{border-top:1px solid var(--border); background:var(--bg2); max-height:220px; overflow-y:auto;}
.pos-table-wrap .tabs{padding:0 12px; margin-bottom:0;}

/* ---------- calendario ---------- */
.cal{display:grid; grid-template-columns:repeat(7,1fr); gap:6px;}
.cal .cal-head{text-align:center; color:var(--muted); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.04em; padding:6px 0;}
.cal .cal-day{background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius-sm); min-height:64px; padding:6px 8px; font-size:12px; position:relative;}
.cal .cal-day .d-num{color:var(--text3); font-size:11px;}
.cal .cal-day .d-pnl{font-weight:700; margin-top:14px;}
.cal .cal-day.today{border-color:var(--accent); box-shadow:var(--ring);}
.cal .cal-day.empty{background:transparent; border-color:transparent;}
/* ---------- educación ---------- */
.progress{height:6px; background:var(--bg3); border-radius:20px; overflow:hidden;}
.progress > div{height:100%; background:linear-gradient(90deg,var(--accent2),var(--accent)); border-radius:20px;}
.rules-list{list-style:none; display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted);}
.edu-card{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px; cursor:pointer; transition:border-color .13s, box-shadow .13s;}
.edu-card:hover{border-color:var(--accent); box-shadow:var(--shadow-2);}
.edu-card h3{margin-bottom:6px;}
.edu-card p{color:var(--muted); font-size:13px;}

.card[data-open-session]{display:flex; flex-direction:column; gap:10px; transition:border-color .13s, box-shadow .13s;}
.card[data-open-session]:hover{border-color:var(--border-hover); box-shadow:var(--shadow-2);}
.card[data-open-session] h3{font-size:16px;}
.card[data-open-session] .card-foot{display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:12px; color:var(--muted); flex-wrap:wrap;}

/* ---------- estados vacíos y bloqueos ---------- */
.empty-state{text-align:center; padding:56px 20px; color:var(--muted);}
.empty-state .big{font-size:38px; margin-bottom:14px; opacity:.85;}
.lock{position:relative;}
.lock .lock-msg{text-align:center; padding:40px 20px; color:var(--muted);}
.lock .lock-msg .big{font-size:36px;}

/* ---------- mentor ---------- */
#mentor-panel{position:fixed; right:18px; bottom:18px; width:340px; max-height:70vh; background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-3); z-index:300; display:flex; flex-direction:column; overflow:hidden;}
.mp-head{display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--border); font-weight:600;}
.mp-head button{background:none; border:none; color:var(--muted); font-size:14px;}
.mp-head button:hover{color:var(--text);}
.mp-body{flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:8px; min-height:180px;}
.mp-msg{max-width:88%; padding:9px 12px; border-radius:12px; font-size:12.5px; line-height:1.5;}
.mp-msg.bot{background:var(--bg3); align-self:flex-start;}
.mp-msg.me{background:var(--accent2); color:#fff; align-self:flex-end;}
.mp-sugs{display:flex; gap:6px; padding:0 12px 8px; flex-wrap:wrap;}
.mp-sugs button{background:var(--bg3); border:1px solid var(--border); color:var(--text); border-radius:16px; padding:4px 10px; font-size:11px; transition:border-color .12s;}
.mp-sugs button:hover{border-color:var(--border-hover);}
.mp-input{display:flex; gap:6px; padding:10px 12px; border-top:1px solid var(--border);}
.mp-input input{flex:1;}

/* ---------- overlay de login ---------- */
#auth-overlay{position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; background:var(--bg);}
.auth-card{width:min(380px,92vw); background:var(--bg2); border:1px solid var(--border); border-radius:16px; padding:30px 28px; box-shadow:var(--shadow-3);}
.auth-head{text-align:center; margin-bottom:20px;}
.auth-logo{font-size:26px;}
.auth-title{font-weight:700; font-size:17px; margin-top:6px; letter-spacing:.01em;}
.auth-sub{color:var(--muted); font-size:12.5px; margin-top:3px;}
.auth-field{display:flex; flex-direction:column; gap:5px; margin-bottom:12px;}
.auth-field label{font-size:11.5px; color:var(--muted); font-weight:600;}
.auth-field input{width:100%;}
/* label de aceptación de términos (registro y diálogo post-login): un solo
   lugar para los estilos que antes iban inline duplicados en auth.js */
.auth-terms{display:flex; gap:8px; align-items:flex-start; font-size:12px; color:var(--muted); line-height:1.5; text-align:left; margin:2px 0 10px;}
.auth-terms a{color:var(--text3); text-decoration:underline;}
.auth-go{width:100%; margin-top:4px; padding:10px;}
.auth-err{color:var(--red); font-size:12px; margin-top:8px; min-height:16px;}
.auth-toggle{display:block; text-align:center; margin-top:12px; font-size:12px;}
.auth-legal{margin-top:14px; text-align:center; font-size:12px; color:var(--text3);}
.auth-legal a{color:var(--text3); text-decoration:underline;}
.auth-legal a:hover{color:var(--text);}
.auth-loading{color:var(--muted); font-size:13px;}
/* --- acceso con Google --- */
.auth-div{display:flex; align-items:center; gap:10px; margin:12px 0 10px; color:var(--text3); font-size:11.5px;}
.auth-div::before,.auth-div::after{content:""; flex:1; height:1px; background:var(--border);}
.btn.google{display:flex; align-items:center; justify-content:center; gap:9px; width:100%; padding:10px; background:#fff; color:#1f2430; border:1px solid #dadce0; font-weight:600;}
.btn.google:hover{background:#f2f1f9;}
.btn.google svg{width:18px; height:18px; flex:none;}

/* ---------- transiciones globales ---------- */
.btn, .tabs button, .testing-tabs a, #main-nav a, .card, .kpi, .edu-card, .journal-item, .news-item, .quick-amounts button, .sb-actions button{
  transition:background-color .13s ease, border-color .13s ease, color .13s ease, box-shadow .13s ease;
}

/* ---------- barra de dibujo (chrome flotante sobre el canvas) ---------- */
#draw-toolbar .fly{position:absolute; left:59px; top:-3px; z-index:40; display:flex; flex-direction:column; min-width:210px; max-height:60vh; overflow-y:auto; background:var(--chrome-bg); border:1px solid var(--chrome-line); border-radius:9px; padding:4px; box-shadow:var(--shadow-2); backdrop-filter:blur(8px);}
#draw-toolbar .fly.hidden{display:none;}
#draw-toolbar .fly-item{display:flex; gap:8px; align-items:center; padding:5px 8px; background:none; border:none; color:var(--chrome-active); border-radius:6px; font-size:11.5px; cursor:pointer; text-align:left; white-space:nowrap;}
#draw-toolbar .fly-item:hover{background:var(--chrome-hover);}
#draw-toolbar [data-fly]{cursor:pointer;}
#draw-toolbar [data-fly]:hover{color:var(--chrome-active) !important;}

#draw-toolbar.fxr-bar{position:absolute; top:0; bottom:24px; left:0; z-index:8; display:flex; flex-direction:column; gap:3px; width:58px; padding:6px 5px; background:var(--chrome-bg); border:none; border-right:1px solid var(--chrome-line); border-radius:0; backdrop-filter:blur(8px);}
#draw-toolbar .tool-btn{display:flex; align-items:center; justify-content:center; width:46px; height:40px; background:transparent; border:none; color:var(--chrome-text); border-radius:8px; padding:0; cursor:pointer; transition:background-color .1s, color .1s; font-size:19px;}
#draw-toolbar .tool-btn svg{width:21px; height:21px;}
#draw-toolbar .tool-btn:hover{background:var(--chrome-hover); color:var(--chrome-active);}
#draw-toolbar .tool-btn.active{background:var(--chrome-hover); color:var(--chrome-active);}
#draw-toolbar .pin-btn{position:relative;}
/* split-button FXR: botón grande (46×40, icono 21px) ejecuta la default; la cuñita
   lateral derecha (▸) abre el flyout de variantes — como la barra de FXReplay */
#draw-toolbar .pin-wrap{position:relative; display:flex; flex-direction:row; align-items:center;}
#draw-toolbar .pin-main{width:46px; height:40px;}
#draw-toolbar .pin-arrow{width:11px; height:26px; display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; color:var(--chrome-text); font-size:9px; line-height:1;
  cursor:pointer; border-radius:4px; padding:0; opacity:.75;}
#draw-toolbar .pin-arrow:hover{background:var(--chrome-hover); color:var(--chrome-active); opacity:1;}
#draw-toolbar .pin-arrow{font-size:9px;}
#draw-toolbar .fly-head{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:5px 8px 6px; margin-bottom:3px; border-bottom:1px solid var(--chrome-line);
  font-size:11.5px; font-weight:700; color:var(--chrome-active); white-space:nowrap;}
#draw-toolbar .fly-close{background:none; border:none; color:var(--chrome-text); cursor:pointer;
  font-size:11px; padding:1px 4px; border-radius:4px;}
#draw-toolbar .fly-close:hover{background:var(--chrome-hover); color:var(--chrome-active);}
#draw-toolbar .fly-item.on{font-weight:700;}
#tt-collapse{width:46px; height:20px; margin:3px auto 0; background:transparent; border:none; color:var(--chrome-text); font-size:14px; cursor:pointer; border-radius:6px; line-height:1;}
#draw-toolbar .tt-sep{height:1px; min-height:1px; margin:4px 4px; background:var(--chrome-line);}
#tt-collapse:hover{background:var(--chrome-hover); color:var(--chrome-active);}
#tt-show{position:absolute; top:50%; left:0; z-index:8; width:16px; height:46px; background:var(--chrome-bg); border:1px solid var(--chrome-line); border-left:none; color:var(--chrome-text); border-radius:0 6px 6px 0; cursor:pointer; font-size:12px; padding:0;}
#tt-show.hidden{display:none;}
#draw-toolbar #tt-collapse{position:absolute; right:-15px; top:45%; width:15px; height:46px; margin:0; background:var(--chrome-bg); border:1px solid var(--chrome-line); border-left:none; border-radius:0 7px 7px 0; color:var(--chrome-text); font-size:13px;}

/* ---------- barra de favoritos flotante ---------- */
#fav-bar{position:absolute; top:10px; left:56px; z-index:9; display:flex; align-items:stretch; background:var(--chrome-bg); border:1px solid var(--chrome-line); border-radius:9px; box-shadow:var(--shadow-2); user-select:none; backdrop-filter:blur(8px);}
#fav-bar .fav-drag{display:flex; align-items:center; padding:0 6px; color:var(--chrome-text); font-size:11px; cursor:grab; border-right:1px solid var(--chrome-line);}
#fav-bar .fav-drag:active{cursor:grabbing;}
#fav-bar .fav-btns{display:flex; align-items:center; padding:2px 3px; gap:1px;}
#fav-bar .fav-btns button{display:flex; align-items:center; justify-content:center; width:34px; height:34px; background:transparent; border:none; color:var(--chrome-text); border-radius:7px; padding:0; cursor:pointer; transition:background-color .1s, color .1s;}
#fav-bar .fav-btns button:hover{background:var(--chrome-hover); color:var(--chrome-active);}
#fav-bar .fav-btns button.active{background:var(--chrome-hover); color:var(--chrome-active);}

/* ---------- menú contextual de favoritos + estrella ---------- */
#fav-menu{position:fixed; z-index:60; min-width:195px; background:var(--chrome-bg); border:1px solid var(--chrome-line); border-radius:9px; padding:4px; box-shadow:var(--shadow-2);}
#fav-menu.hidden{display:none;}
#fav-menu button{display:flex; gap:8px; align-items:center; width:100%; padding:6px 10px; background:none; border:none; color:var(--chrome-active); border-radius:6px; font-size:12px; cursor:pointer; text-align:left; white-space:nowrap;}
#fav-menu button:hover{background:var(--chrome-hover);}
#draw-toolbar .fly-item .fav-star{margin-left:auto; opacity:0; font-size:12px; color:var(--chrome-text); transition:opacity .12s;}
#draw-toolbar .fly-item:hover .fav-star{opacity:.9;}
#draw-toolbar .fly-item .fav-star:hover{transform:scale(1.15);}
#draw-toolbar .fly-item .fav-star.on{opacity:1; color:var(--gold); text-shadow:0 0 6px rgba(251,191,36,.45);}

/* ---------- popover de noticias (oleada 8): anclado al badge de la franja ---------- */
#news-pop{position:absolute; z-index:45; width:280px; max-height:70%; overflow-y:auto;
  background:rgba(15,20,30,.97); border:1px solid var(--border,#2a2e39); border-radius:10px;
  padding:10px 12px 8px; box-shadow:0 10px 28px rgba(0,0,0,.45); color:#e5e7eb; font-size:11.5px;}
body[data-theme="light"] #news-pop{background:#fff; color:#111827;}
#news-pop .np-close{position:absolute; top:6px; right:8px; background:none; border:none;
  color:inherit; opacity:.55; cursor:pointer; font-size:12px; padding:2px 4px;}
#news-pop .np-close:hover{opacity:1;}
#news-pop .np-count{margin:2px 0 6px; font-size:11px;}
#news-pop .np-row{padding:6px 0;}
#news-pop .np-row + .np-row{border-top:1px solid var(--border,#2a2e39);}
#news-pop .np-head{display:flex; gap:6px; align-items:center; margin-bottom:3px; font-size:12px; padding-right:18px;}
#news-pop .np-flag{font-size:14px;}
#news-pop .np-meta{margin-bottom:6px; line-height:1.5;}
#news-pop .np-pfa{display:flex; gap:8px; margin-bottom:6px;}
#news-pop .np-pfa > div{flex:1; border:1px solid var(--border,#2a2e39); border-radius:8px; padding:5px 8px; font-size:11px;}
#news-pop .np-pfa .muted{font-size:10px; margin-bottom:2px;}

/* ---------- responsive ---------- */
@media(max-width:1400px){
  .grid.cols-6{grid-template-columns:repeat(3,1fr);}
  .grid.cols-5{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:1280px){
  #main{padding:18px 20px 32px;}
  .side-panel{width:310px;}
}
@media(max-width:1100px){
  .grid.cols-4{grid-template-columns:1fr 1fr;}
  .grid.cols-3{grid-template-columns:1fr 1fr;}
}
@media(max-width:900px){
  /* en pantallas angostas el rail siempre queda compacto (aun si quedó expandido) */
  #sidebar, #sidebar.rail{width:76px; min-width:76px; align-items:center; padding:14px 6px 10px;}
  #sidebar .rail-user, #sidebar.rail .rail-user{flex-direction:column; gap:6px; padding:2px 0;}
  #sidebar .avatar, #sidebar.rail .avatar{width:42px; height:42px;}
  #sidebar .sb-name, #sidebar.rail .sb-name{font-size:10.5px; text-align:center; flex:none;}
  #sidebar #main-nav, #sidebar.rail #main-nav{align-items:center;}
  #sidebar #main-nav a, #sidebar.rail #main-nav a{flex-direction:column; justify-content:center; gap:4px; width:62px; padding:9px 2px; font-size:9.5px; text-align:center;}
  #sidebar #main-nav a.active::before, #sidebar.rail #main-nav a.active::before{left:-6px;}
  #sidebar .version, #sidebar.rail .version{font-size:9px; text-align:center;}
  .grid.cols-2{grid-template-columns:1fr;}
  .side-panel{width:min(300px, 88vw);}
}
@media(max-width:640px){
  .grid.cols-3, .grid.cols-4, .grid.cols-5, .grid.cols-6{grid-template-columns:1fr 1fr;}
  #main{padding:14px 12px 28px;}
  .room-bottom .left, .room-bottom .right{flex-wrap:wrap;}
  .btn-buy, .btn-sell{min-width:0; padding:10px 12px;}
  .order-split{flex:1;}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important; scroll-behavior:auto !important;}
}
/* separadores arrastrables del multigráfico (fronteras entre gráficos, como TV) */
.sep-layer{position:absolute; inset:0; z-index:6; pointer-events:none;}
.sep-h{position:absolute; pointer-events:auto; border-radius:4px; background:transparent;}
.sep-h::after{content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:var(--accent); border-radius:3px; opacity:0; transition:opacity .15s; box-shadow:0 0 0 1px rgba(0,0,0,.35); pointer-events:none;}
.sep-h.h-c{width:14px; cursor:col-resize;}
.sep-h.h-c::after{width:5px; height:38px;}
.sep-h.h-r{height:14px; cursor:row-resize;}
.sep-h.h-r::after{height:5px; width:38px;}
.sep-h:hover::after, .sep-h.dragging::after, .sep-h.sep-hint::after{opacity:.8;}
.sep-h.dragging{background:var(--accent); opacity:.22;}

/* ===== barra superior estilo TradingView (píldora de símbolo, TFs compactos, separadores) ===== */
.room-top{flex-wrap:nowrap; gap:6px; overflow-x:auto; scrollbar-width:none;}
.room-top::-webkit-scrollbar{display:none;}
.room-top:hover{scrollbar-width:thin;}
.room-top:hover::-webkit-scrollbar{display:block; height:6px;}
/* en pantallas angostas la topbar compacta sus controles para que la cámara y fullscreen no queden fuera de pantalla */
@media (max-width:1620px){
  .room-top{gap:4px;}
  .room-top .btn.small{padding:4px 6px;}
  .room-top .tfs button{padding:4px 5px;}
  .room-brand .brand-word{display:none;}
}
.tv-sym{background:var(--bg3); border:1px solid var(--border); border-radius:8px; padding:4px 12px; font-size:14px; white-space:nowrap;}
#tv-add-sym{background:var(--bg3) !important; border:1px solid var(--border) !important; color:var(--text) !important; border-radius:8px !important; padding:3px 10px !important; font-size:15px; line-height:1;}
#tv-add-sym:hover{border-color:var(--accent) !important; color:var(--accent) !important;}
.tv-sep{width:1px; height:20px; background:var(--border); flex:none;}
.tv-caret{font-size:9px; opacity:.7; margin-left:2px;}
.room-top .tfs{flex:none;}
.room-top .tfs button{padding:4px 7px; font-size:11.5px;}
#tf-more{background:none; border:none; color:var(--muted); padding:4px 7px; border-radius:6px; font-weight:700; cursor:pointer;}
#tf-more:hover{background:var(--bg3); color:var(--text);}

/* ===== modal de indicadores estilo TradingView (centrado sobre fondo oscuro) ===== */
.sp-backdrop{position:fixed; inset:0; background:rgba(1,6,16,.62); z-index:9; pointer-events:auto;}
.side-panel.tv-ind{position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:min(880px, 94vw); height:min(640px, 90vh); bottom:auto; right:auto; border:1px solid var(--border); border-radius:10px; box-shadow:0 24px 80px rgba(0,0,0,.55); z-index:10;}
.side-panel.tv-ind .sp-head{padding:14px 18px; font-size:15px;}
.side-panel.tv-ind .sp-body{padding:0; gap:0; overflow:hidden; display:block;}
.tvi-search{display:flex; align-items:center; gap:8px; margin:0; padding:12px 18px; border-bottom:1px solid var(--border); font-size:14px;}
.tvi-search input{flex:1; background:var(--bg3); border:1px solid var(--border); border-radius:8px; padding:8px 12px; color:var(--text); font-size:13px; outline:none;}
.tvi-search input:focus{border-color:var(--accent);}
.tvi-cols{display:flex; height:calc(100% - 51px);}
.tvi-side{width:190px; flex:none; border-right:1px solid var(--border); overflow-y:auto; padding:10px 8px; display:flex; flex-direction:column; gap:2px;}
.tvi-sec{font-size:10px; font-weight:700; letter-spacing:.08em; color:var(--muted); padding:10px 8px 4px;}
.tvi-nav{background:none; border:none; text-align:left; color:var(--muted); font-size:12.5px; padding:6px 10px; border-radius:6px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.tvi-nav:hover{background:var(--bg3); color:var(--text);}
.tvi-nav.on{background:var(--bg3); color:var(--accent); font-weight:600;}
.tvi-main{flex:1; overflow-y:auto; padding:10px 16px 18px;}
.tvi-colshead{display:flex; font-size:10px; font-weight:700; letter-spacing:.08em; color:var(--muted); padding:2px 8px 8px; border-bottom:1px solid var(--border);}
.tvi-colshead span:nth-child(1){flex:1;} .tvi-colshead span:nth-child(2){width:120px;} .tvi-colshead span:nth-child(3){width:90px;}
.tvi-blocktitle{font-size:10.5px; font-weight:700; letter-spacing:.06em; color:var(--muted); margin:12px 0 6px;}
.tvi-active-row{padding:6px 10px; margin-bottom:4px;}
.tvi-row{display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:6px; cursor:pointer; font-size:12.5px;}
.tvi-row:hover{background:var(--bg3);}
.tvi-star{width:18px; text-align:center; color:var(--muted); font-size:13px; flex:none; cursor:pointer;}
.tvi-star:hover{color:var(--accent);}
.tvi-star.on{color:var(--gold);}
.tvi-name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tvi-cat{width:120px; flex:none; color:var(--muted); font-size:11.5px;}
.tvi-type{width:90px; flex:none; color:var(--muted); font-size:11px;}
@media(max-width:760px){
  .tvi-side{width:140px;}
  .tvi-cat, .tvi-type, .tvi-colshead span:nth-child(2), .tvi-colshead span:nth-child(3){display:none;}
}
#data-badge{white-space:nowrap;}
#clock{white-space:nowrap; font-size:11.5px;}

/* ==== ajustes de indicador: pestañas Entradas / Estilo / Visibilidad ==== */
.ic-tabs{display:flex; gap:4px; border-bottom:1px solid var(--border); margin:10px 0 0; padding-bottom:0;}
.ic-tabs button{background:none; border:none; color:var(--muted); font-size:12.5px; font-weight:700; padding:8px 12px; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px;}
.ic-tabs button:hover{color:var(--text);}
.ic-tabs button.on{color:var(--accent2); border-bottom-color:var(--accent2);}
.ic-plots{width:170px; flex:none; max-height:300px; overflow-y:auto; border:1px solid var(--border); border-radius:8px; padding:4px; display:flex; flex-direction:column; gap:2px;}
.ic-plot{display:flex; align-items:center; gap:7px; padding:5px 7px; border-radius:6px; cursor:pointer; font-size:12px;}
.ic-plot:hover{background:var(--hover);}
.ic-plot.on{background:var(--accent-soft);}
.ic-plot input[type=checkbox]{accent-color:var(--accent); cursor:pointer;}
.ic-plotname{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ic-plotdot{width:16px; height:3px; border-radius:2px; flex:none;}
.ic-swatch{display:flex; align-items:center; gap:7px; background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:6px 9px; cursor:pointer;}
.ic-swatch span{width:26px; height:16px; border-radius:4px; border:1px solid rgba(128,140,160,.35); display:inline-block;}
.ic-swatch i{display:inline-block; width:18px; border-top-style:solid;}
.ic-select{background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:7px 9px; font-size:12.5px; cursor:pointer;}
.ic-paleta{display:grid; grid-template-columns:repeat(11, 18px); gap:4px; margin-top:12px;}
.ic-paleta button, .ic-personalizados button{width:18px; height:18px; border-radius:4px; border:1px solid rgba(128,140,160,.35); cursor:pointer; padding:0;}
.ic-paleta button:hover, .ic-personalizados button:hover{transform:scale(1.18);}
.ic-personalizados{display:flex; gap:4px; margin-top:8px; align-items:center;}
.ic-addcol{position:relative; width:18px; height:18px; border:1px dashed var(--muted); border-radius:4px; display:inline-flex; align-items:center; justify-content:center; font-size:12px; color:var(--muted); cursor:pointer;}
.ic-addcol input{position:absolute; inset:0; opacity:0; cursor:pointer;}
.ic-row{display:flex; align-items:center; gap:10px; margin-top:12px; font-size:12.5px;}
.ic-row>label{width:96px; flex:none; color:var(--muted); font-weight:600; align-self:flex-start; margin-top:6px;}
.ic-row input[type=range]{flex:1; accent-color:var(--accent);}
.ic-row b{width:40px; text-align:right; font-variant-numeric:tabular-nums;}
.ic-seg{display:flex; gap:4px; flex-wrap:wrap;}
.ic-seg{max-width:calc(100% - 106px);}
.ic-seg button{display:inline-flex; align-items:center; gap:4px; background:var(--panel); border:1px solid var(--border); color:var(--muted); border-radius:7px; padding:4px 7px; font-size:11px; cursor:pointer; white-space:nowrap;}
.ic-seg button i{display:inline-block; width:20px; border-top:2px solid currentColor;}
.ic-seg button.on{color:var(--accent2); border-color:var(--accent2); background:var(--accent-soft);}
.ic-visgrid{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px;}
.ic-visrow{display:flex; align-items:center; gap:7px; font-size:12.5px; background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:8px 12px; cursor:pointer;}
.ic-visrow input{accent-color:var(--accent); cursor:pointer;}

/* ==== menú de tipo de gráfico (junto a las temporalidades) ==== */
#ctype-menu{position:fixed; z-index:400; background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:5px; box-shadow:0 12px 32px rgba(0,0,0,.45); display:flex; flex-direction:column; gap:2px; min-width:190px;}
#ctype-menu button{display:flex; align-items:center; gap:9px; background:none; border:none; color:var(--text); padding:7px 9px; border-radius:7px; cursor:pointer; font-size:12.5px; text-align:left;}
#ctype-menu button:hover{background:var(--hover);}
#ctype-menu button.on{background:var(--accent-soft);}
#ctype-menu button span:first-of-type{flex:1;}
#ctype-menu [data-favtipo]{font-size:14px; color:var(--muted); cursor:pointer; padding:0 2px;}
#ctype-menu [data-favtipo].fav, #ctype-menu [data-favtipo]:hover{color:var(--gold);}

/* estrella de temporalidad favorita (se queda en la barra superior) */
.tf-star{position:absolute; top:-5px; right:-2px; font-size:9px; line-height:1; color:rgba(255,255,255,.25); cursor:pointer; padding:1px; transition:color .12s, transform .12s; z-index:2;}
.tf-star:hover{color:var(--gold); transform:scale(1.3);}
.tf-star.on{color:var(--gold); text-shadow:0 0 5px rgba(251,191,36,.55);}

/* TF vigente marcada dentro del menú M+ (✓ de producto) */
#tf-menu [data-tfmin].tf-actual{border-color:var(--accent2,#7c5cff); color:var(--accent2,#7c5cff); box-shadow:0 0 0 1px rgba(124,92,255,.35) inset;}
#tf-menu [data-tfmin].tf-actual::after{content:''; position:absolute; top:3px; right:3px; width:5px; height:5px; border-radius:50%; background:var(--accent2,#7c5cff);}

/* ===== Opciones de configuración del gráfico (doble clic sobre las velas) ===== */
.cfg-dialog{ display:flex; flex-direction:column; min-height:520px; }
.cfg-head{ display:flex; align-items:center; justify-content:space-between; padding:2px 4px 12px; font-size:15px; }
.cfg-x{ background:none; border:none; color:var(--muted); font-size:14px; cursor:pointer; padding:4px 8px; border-radius:6px; }
.cfg-x:hover{ background:rgba(127,127,127,.15); color:var(--text); }
.cfg-main{ display:flex; flex:1; min-height:0; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.cfg-side{ width:192px; flex:none; background:rgba(127,127,127,.05); border-right:1px solid var(--border); padding:6px; display:flex; flex-direction:column; gap:2px; }
.cfg-nav{ display:flex; align-items:center; gap:9px; padding:8px 10px; border:none; background:none; color:var(--text); font-size:12.5px; text-align:left; border-radius:6px; cursor:pointer; }
.cfg-nav:hover{ background:rgba(127,127,127,.12); }
.cfg-nav.on{ background:var(--accent2); color:#fff; }
.cfg-nav span{ width:18px; text-align:center; }
.cfg-body{ flex:1; padding:14px 18px; overflow:auto; max-height:62vh; }
.cfg-body h4{ margin:14px 0 8px; font-size:11.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); }
.cfg-body h4:first-child{ margin-top:0; }
.cfg-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:5px 0; font-size:13px; }
.cfg-row select, .cfg-row input[type="number"]{ padding:5px 8px; font-size:12.5px; }
.cfg-check{ display:flex; align-items:center; gap:8px; font-size:13px; cursor:pointer; }
.cfg-colors{ display:flex; gap:6px; }
.cfg-colors input[type="color"]{ width:34px; height:28px; padding:2px; border:1px solid var(--border); border-radius:6px; background:none; cursor:pointer; }
.cfg-alertform{ display:grid; grid-template-columns: 120px 1fr 1fr auto; gap:6px; margin:8px 0 10px; }
.cfg-alertform input, .cfg-alertform select{ padding:6px 8px; font-size:12.5px; min-width:0; }
.cfg-alert-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 9px; border:1px solid var(--border); border-radius:6px; margin-bottom:5px; font-size:12.5px; }
.cfg-alert-row.off{ opacity:.55; }
.cfg-foot{ display:flex; align-items:center; gap:6px; padding-top:12px; }
.cfg-foot select{ padding:6px 8px; font-size:12.5px; }

/* ---- selector de color propio (paleta + guardados + opacidad) ---- */
.cfg-swatch{ width:34px; height:28px; padding:0; border:1px solid var(--border); border-radius:6px; cursor:pointer; flex:none; }
.cfg-swatch.vacia{ background:repeating-conic-gradient(#777 0 25%, #555 0 50%) 0 0/10px 10px; }
.cfg-swatch:hover{ border-color:var(--accent); }
.pk-pop{ position:fixed; z-index:1300; width:246px; padding:10px; background:var(--bg3,#1e222d); border:1px solid var(--border); border-radius:10px; box-shadow:0 12px 32px rgba(0,0,0,.5); }
.pk-top{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.pk-actual{ width:34px; height:26px; border-radius:6px; border:1px solid var(--border); display:inline-block; }
.pk-grid{ display:grid; grid-template-columns:repeat(10, 1fr); gap:3px; }
.pk-cell{ width:18px; height:18px; border-radius:4px; border:1px solid rgba(255,255,255,.14); cursor:pointer; padding:0; }
.pk-cell:hover{ outline:2px solid var(--accent); outline-offset:1px; }
.pk-sin{ background:repeating-conic-gradient(#777 0 25%, #555 0 50%) 0 0/10px 10px; }
.pk-saved{ display:flex; align-items:center; gap:4px; margin-top:8px; flex-wrap:wrap; }
.pk-add{ width:22px; height:22px; border-radius:5px; border:1px dashed var(--border); background:none; color:var(--text); cursor:pointer; font-size:13px; line-height:1; }
.pk-op{ display:flex; align-items:center; gap:7px; margin-top:9px; font-size:11.5px; color:var(--muted,#9aa0aa); }
.pk-op input[type="range"]{ flex:1; }
.pk-op input[type="number"]{ width:46px; padding:3px 5px; font-size:12px; }
.pk-sect{ font-size:10px; letter-spacing:1.2px; color:var(--muted,#9aa0aa); margin:9px 0 4px; text-transform:uppercase; }
.pk-fila{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.pk-custom{ display:flex; align-items:center; gap:7px; width:100%; margin-top:9px; padding:6px 8px; border:1px solid var(--border); border-radius:7px; background:none; color:var(--text); font-size:12px; cursor:pointer; }
.pk-custom:hover{ background:var(--bg2,#2a2e39); }
.pk-cpop{ width:236px; padding:10px; }
.pk-chead{ display:flex; align-items:center; gap:6px; font-size:10px; letter-spacing:1.2px; color:var(--muted,#9aa0aa); margin-bottom:8px; text-transform:uppercase; }
.pk-cx, .pk-cgotas{ border:0; background:none; color:var(--text); cursor:pointer; font-size:13px; padding:2px 4px; border-radius:5px; }
.pk-cx:hover, .pk-cgotas:hover{ background:var(--bg2,#2a2e39); }
.pk-sv{ position:relative; height:150px; border-radius:7px; border:1px solid var(--border); cursor:crosshair; touch-action:none; }
.pk-dot{ position:absolute; width:12px; height:12px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.5); transform:translate(-50%,-50%); pointer-events:none; }
.pk-hue{ width:100%; margin:9px 0 8px; accent-color:var(--accent); height:18px; cursor:pointer; background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00); border-radius:9px; appearance:none; -webkit-appearance:none; }
.pk-hue::-webkit-slider-thumb{ appearance:none; -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:#fff; border:2px solid #333; cursor:pointer; }
.pk-cfila{ display:flex; align-items:center; gap:8px; }
.pk-cprev{ width:26px; height:26px; border-radius:6px; border:1px solid var(--border); flex:none; }
.pk-cin{ flex:1; padding:6px 8px; font-size:12px; border:1px solid var(--border); border-radius:7px; background:var(--bg2,#2a2e39); color:var(--text); }
.pk-ctabs{ display:flex; gap:4px; margin-top:8px; }
.pk-ctabs button{ flex:1; padding:5px 0; font-size:11px; border:1px solid var(--border); border-radius:6px; background:none; color:var(--muted,#9aa0aa); cursor:pointer; }
.pk-ctabs button.on{ color:var(--text); border-color:var(--accent); background:var(--bg2,#2a2e39); }
.pk-cadd{ width:100%; margin-top:9px; padding:8px 0; border:0; border-radius:8px; background:var(--accent2); color:#fff; font-size:12.5px; font-weight:700; cursor:pointer; }
.pk-cadd:hover{ background:var(--accent); }

/* ---------- Mentor: pestañas Chat/Análisis y tarjetas de insight ---------- */
#mp-content{flex:1; min-height:0; display:flex; flex-direction:column;}
.mp-tabs{display:flex; gap:4px;}
.mp-tabs button{border:1px solid var(--border); background:none; color:var(--muted); font-size:11px; padding:3px 9px; border-radius:8px; cursor:pointer; font-weight:600;}
.mp-tabs button.active{background:var(--accent2); border-color:var(--accent2); color:#fff;}
.mp-analisis{flex:1; min-height:0; overflow:auto;}
.mi-top{display:flex; gap:12px; padding:12px 14px; border-bottom:1px solid var(--border); align-items:center;}
.mi-score{display:flex; align-items:baseline; gap:6px; flex-shrink:0;}
.mi-num{font-size:32px; font-weight:700; line-height:1;}
.mi-lbl{font-size:10px; color:var(--muted); line-height:1.25; text-transform:uppercase; letter-spacing:.4px;}
.mi-resumen{font-size:11.5px; color:var(--muted); line-height:1.5; flex:1;}
.mi-cards{display:flex; flex-direction:column; gap:8px; padding:10px 12px;}
.mi-card{border:1px solid var(--border); border-left:3px solid var(--muted); border-radius:10px; padding:8px 10px; font-size:12px; line-height:1.5;}
.mi-card b{display:block; margin-bottom:2px;}
.mi-card span{color:var(--text);}
.mi-card.warn{border-left-color:#e2b93b;}
.mi-card.mal{border-left-color:var(--red);}
.mi-card.ok{border-left-color:var(--green);}
.mi-consejo{display:block; margin-top:3px; color:var(--muted) !important;}
.mp-analisis > .btn{margin:2px 12px 12px; align-self:flex-start;}

/* ---- Tours (spotlight): pulso del anillo del paso activo ---- */
.tour-spot{ animation: tour-pulso 1.8s ease-in-out infinite; }
@keyframes tour-pulso{
  0%, 100%{ box-shadow:0 0 0 9999px rgba(0,0,0,.65), 0 0 0 0 rgba(124,92,255,.40); }
  50%{ box-shadow:0 0 0 9999px rgba(0,0,0,.65), 0 0 16px 5px rgba(124,92,255,.35); }
}
@media (prefers-reduced-motion: reduce){ .tour-spot{ animation:none; } }

/* ---- Galería de capturas del gráfico (oleada 8: banda lateral derecha, FIFO máx 6) ---- */
#snap-gallery{ position:absolute; right:52px; top:50%; transform:translateY(-50%); z-index:40; display:flex; flex-direction:column; gap:6px; max-height:88%; overflow-y:auto; padding:2px; }
#snap-gallery.hidden{ display:none; }
.snap-thumb{ position:relative; flex:0 0 auto; width:72px; border:1px solid var(--border); border-radius:6px; overflow:hidden; background:var(--bg3); cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.25); }
.snap-thumb img{ display:block; width:72px; height:auto; }
.snap-thumb:hover, .snap-thumb:focus-visible{ border-color:var(--accent); }
.snap-del{ position:absolute; top:2px; right:2px; width:16px; height:16px; line-height:13px; text-align:center; font-size:10px; padding:0; border:1px solid var(--border); border-radius:50%; background:var(--bg2); color:var(--text); cursor:pointer; opacity:0; transition:opacity .12s; }
.snap-thumb:hover .snap-del, .snap-del:focus-visible{ opacity:1; }
.snap-big{ display:block; max-width:90vw; max-height:78vh; margin:10px auto 0; border:1px solid var(--border); border-radius:8px; }

/* ---- sala a pantalla completa (oleada 9 addendum): como FXR, al entrar a una sesión
   el shell (header + sidebar Testing/Live/...) se retira y la sala ocupa todo el viewport ---- */
body.room-full .pt-top, body.room-full #sidebar{ display:none; }
body.room-full #main{ padding:0; overflow:hidden; }
/* anti-destello de arranque: mismo retiro del shell pero desde el PRIMER pintado
   (lo aplica el script inline del <head>; route() retira la clase al tomar el control) */
html.room-full-boot .pt-top, html.room-full-boot #sidebar{ display:none; }
html.room-full-boot #main{ padding:0; overflow:hidden; }

/* marca PipReplay en la topbar de la sala (identidad propia, delante del símbolo) */
.room-brand{ display:flex; align-items:center; gap:7px; font-weight:800; letter-spacing:1.8px;
  font-size:12.5px; white-space:nowrap; color:var(--text); text-decoration:none; flex:none; }
.room-brand .ic{ width:17px; height:17px; color:var(--accent); }
.room-brand .brand-word b{ color:var(--accent); font-weight:800; }
.room-brand:hover{ color:var(--accent); }

/* el toggle de posiciones/órdenes vive ahora en la franja inferior (chip) */
#pos-ord-btn.on{color:var(--accent2) !important;}

/* ============================================================
   Componentes ui.js — factorías compartidas del shell:
   kpiCard (panel cristal con micro-viz), segmented, drawer
   (filtros deslizantes) y estados vacíos. Solo los usan las
   vistas nuevas; el .kpi clásico sigue intacto.
   ============================================================ */
.kicker{font-size:var(--fs-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}
/* KPI cristal: superficie con gradiente sutil + micro-viz SVG abajo */
.kpic{position:relative; display:flex; flex-direction:column; gap:var(--space-1); background:linear-gradient(180deg,var(--bg-elev),var(--panel) 62%); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--space-3) var(--space-4); overflow:hidden; transition:border-color .13s ease, transform .13s ease, box-shadow .13s ease;}
.kpic:hover{border-color:var(--border-hover); transform:translateY(-1px); box-shadow:var(--shadow-2);}
.kpic-top{display:flex; align-items:center; justify-content:space-between; gap:var(--space-2);}
.kpic-top .kicker{color:var(--text3);}
.kpic-i{font-style:normal; opacity:.5; font-size:var(--fs-xs); cursor:help;}
.kpic-i:hover{opacity:1;}
.kpic-val{font-size:var(--fs-xl); font-weight:700; letter-spacing:-.01em; line-height:1.2;}
.kpic-val.pos{color:var(--green);} .kpic-val.neg{color:var(--red);}
.kpic-sub{font-size:var(--fs-sm); color:var(--muted);}
.kpic-viz{margin-top:var(--space-1); min-height:0;}
.kpic-viz svg{display:block;}   /* el ancho lo da cada viz: líneas full-width, anillos intrínsecos */
/* segmented: grupo de opciones excluyentes (migra a .seg-mini en Analítica) */
.seg{display:inline-flex; gap:2px; background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius-sm); padding:2px;}
.seg button{background:transparent; border:none; color:var(--muted); padding:5px 11px; border-radius:var(--radius-xs); font-size:var(--fs-sm); font-weight:700; transition:background-color .12s, color .12s;}
.seg button:hover{color:var(--text); background:var(--hover);}
.seg button.on{background:var(--accent2); color:#fff;}
/* drawer: filtros en panel deslizante desde la derecha (patrón Analítica) */
.drawer-back{position:fixed; inset:0; background:rgba(2,6,17,.55); z-index:640; opacity:0; pointer-events:none; transition:opacity .18s ease; backdrop-filter:blur(2px);}
.drawer-back.open{opacity:1; pointer-events:auto;}
.drawer{position:fixed; top:0; right:0; bottom:0; width:min(360px,94vw); background:var(--bg2); border-left:1px solid var(--border); z-index:650; display:flex; flex-direction:column; box-shadow:var(--shadow-3); transform:translateX(102%); transition:transform .2s ease;}
.drawer.open{transform:none;}
.drawer-head{display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--border); font-weight:700;}
.drawer-body{flex:1; overflow-y:auto; padding:var(--space-4); display:flex; flex-direction:column; gap:var(--space-4);}
.drawer-foot{display:flex; gap:var(--space-2); padding:var(--space-3) var(--space-4); border-top:1px solid var(--border);}
.drawer-foot .btn{flex:1; justify-content:center;}
/* estado vacío compacto con acción */
.est{text-align:center; padding:var(--space-6) var(--space-4); color:var(--muted); display:flex; flex-direction:column; align-items:center; gap:var(--space-2);}
.est .est-ic{font-size:34px; line-height:1; opacity:.8;}
.est .est-t{font-weight:700; color:var(--text); font-size:var(--fs-lg);}
.est .est-h{font-size:var(--fs-md); max-width:420px;}
@media (prefers-reduced-motion: reduce){ .kpic:hover{transform:none;} .drawer{transition:none;} .drawer-back{transition:none;} }
/* heatmap anual (F3a, Analítica): 12 mini-meses, celda por día */
.hm-wrap{display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:10px;}
.hm-mes .hm-nombre{font-size:var(--fs-xs); font-weight:700; color:var(--muted); margin-bottom:4px;}
.hm-grid{display:grid; grid-template-columns:repeat(7, 1fr); gap:2px;}
.hm-c{aspect-ratio:1; border-radius:2px; background:var(--bg3);}

/* ---------- prop firms (v2) ---------- */
.firma-tile{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 6px; }
.prop-bar{ height:10px; background:var(--bg3); border-radius:5px; overflow:hidden; flex:1; }
.prop-bar > div{ height:100%; border-radius:5px; background:var(--accent); }
.prop-bar > div.ok{ background:var(--green); }
.prop-bar > div.mal{ background:var(--red); }

/* ---------- journal: calendario clicable + colores por activo ---------- */
.a-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; flex:none; }
.cal .cal-day.has-trades{ cursor:pointer; transition:border-color .12s; }
.cal .cal-day.has-trades:hover{ border-color:var(--accent); }
.cal .cal-day .d-meta{ display:flex; align-items:center; justify-content:space-between; gap:6px; margin-top:7px; font-size:10px; color:var(--muted); }
.cal .cal-day .d-dots{ display:flex; gap:3px; }

/* ---------- journal: agenda económica ---------- */
.ag-dia{ margin-bottom:12px; }
.ag-dia-head{ font-size:11px; text-transform:capitalize; color:var(--muted); margin-bottom:4px; }
.news-row{ display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:8px; cursor:pointer; }
.news-row:hover{ background:var(--bg3); }
.imp-pill{ width:8px; height:8px; border-radius:50%; flex:none; background:var(--muted); }
.imp-pill.imp-high{ background:var(--red); }
.imp-pill.imp-medium{ background:#f59e0b; }
.imp-pill.imp-low{ background:var(--muted); }