/* MX360 Plataforma, etapa 4: painel lateral (watchlist, book, negocios), minimizavel com a tela deitada */
.stage{display:grid;grid-template-columns:minmax(0,1fr) clamp(250px,38vw,340px);gap:10px;min-height:0;padding:0 var(--pad) 10px}
.stage[data-side="min"]{grid-template-columns:minmax(0,1fr) 46px}

.side{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:0 1px 2px rgba(var(--shadow-rgb),.4),0 18px 48px rgba(var(--shadow-rgb),.35)}
.side-tabs{display:flex;flex:none;align-items:center;gap:2px;padding:6px;border-bottom:1px solid var(--line);background:rgba(var(--surface2-rgb),.5)}
.side-tab{flex:1;min-height:40px;padding:6px 10px;border:0;border-radius:7px;background:none;color:var(--muted);font-size:.82rem;font-weight:700;cursor:pointer;transition:color .15s,background .15s}
.side-tab:hover{background:rgba(var(--ink-rgb),.06);color:var(--text)}
.side-tab[aria-selected="true"]{background:rgba(var(--primary-rgb),.12);color:var(--primary);box-shadow:inset 0 -2px 0 var(--primary)}
.side-body{flex:1;min-height:0;display:flex;flex-direction:column}
.pane{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto}

/* botao de minimizar (so aparece com a tela deitada) */
.side-min{flex:none;width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:7px;background:none;color:var(--muted);cursor:pointer;transition:color .15s,background .15s}
.side-min:hover{background:rgba(var(--ink-rgb),.07);color:var(--text)}
.side-min svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.side-label{display:none}
.side[data-min="true"] .side-tab,.side[data-min="true"] .side-body{display:none}
.side[data-min="true"] .side-tabs{flex-direction:column;justify-content:flex-start;gap:10px;padding:6px 0;border-bottom:0;background:none}
.side[data-min="true"] .side-min svg{transform:rotate(180deg)}
.side[data-min="true"] .side-label{display:block;writing-mode:vertical-rl;transform:rotate(180deg);color:var(--muted);font-size:.78rem;font-weight:700;letter-spacing:.04em}

/* watchlist */
.watch{list-style:none;margin:0;padding:6px;display:flex;flex-direction:column;gap:2px}
.watch-row{width:100%;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto;align-items:center;gap:8px;min-height:52px;padding:6px 10px;border:0;border-left:3px solid transparent;border-radius:8px;background:none;text-align:left;cursor:pointer;transition:background .15s}
.watch-row:hover{background:rgba(var(--ink-rgb),.05)}
.watch-row[aria-current="true"]{background:rgba(var(--gold-rgb),.08);border-left-color:var(--gold)}
.w-sym{display:flex;flex-direction:column;min-width:0}
.w-sym b{font-size:.9rem;font-weight:700}
.w-sym i{font-style:normal;font-size:.72rem;color:var(--muted)}
.w-last{text-align:right;font-size:.9rem;font-weight:600}
.w-chg{min-width:70px;padding:3px 6px;border-radius:6px;background:rgba(var(--ink-rgb),.06);color:var(--muted);font-size:.78rem;font-weight:700;text-align:center}
.w-last[data-dir="up"],.w-chg[data-dir="up"]{color:var(--pos)}
.w-last[data-dir="down"],.w-chg[data-dir="down"]{color:var(--neg)}
.w-chg[data-dir="up"]{background:rgba(var(--primary-rgb),.1)}
.w-chg[data-dir="down"]{background:rgba(var(--down-rgb),.12)}

/* book e negocios */
.book-head{display:grid;grid-template-columns:1fr 1fr 1fr;flex:none;padding:8px 12px 4px;color:var(--muted);font-size:.72rem;font-weight:600}
.book-head span:nth-child(n+2){text-align:right}
.book-side{display:flex;flex-direction:column;flex:none}
.lv,.tr{display:grid;grid-template-columns:1fr 1fr 1fr;padding:2px 12px;font-size:.8rem;line-height:1.5}
.lv{position:relative}
.lv span{position:relative;z-index:1}
.lv .q,.lv .t,.tr .q,.tr .t{text-align:right}
.lv .bar{position:absolute;top:1px;bottom:1px;right:0;width:0;transition:width .12s linear}
.asks .bar{background:rgba(var(--sell-rgb),.16)}
.bids .bar{background:rgba(var(--buy-rgb),.13)}
.asks .p{color:var(--sell)}
.bids .p{color:var(--buy)}
.book-mid{display:flex;flex:none;align-items:baseline;justify-content:space-between;gap:10px;margin:4px 0;padding:8px 12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(var(--surface2-rgb),.45)}
.book-mid b{font-family:var(--font-display);font-size:1.6rem;line-height:1;letter-spacing:.03em}
.book-mid span{color:var(--muted);font-size:.75rem}
.book-mid b[data-dir="up"]{color:var(--buy)}
.book-mid b[data-dir="down"]{color:var(--sell)}
.trades{flex:none;padding-bottom:6px}
.tr .t{color:var(--muted)}
.tr .p[data-dir="up"]{color:var(--buy)}
.tr .p[data-dir="down"]{color:var(--sell)}

/* tela deitada e baixa (celular): book com 6 niveis de cada lado */
@media (orientation:landscape) and (max-height:560px){
  .asks .lv:nth-last-child(n+7),.bids .lv:nth-child(n+7){display:none}
}

/* tela em pe (vertical): o painel vira uma barra de abas sob o grafico; o corpo abre ao tocar */
@media (max-width:1000px) and (orientation:portrait){
  .stage{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:8px}
  .panel{min-height:180px}
  .side-min{display:none}
  .side-tab{min-height:44px}
  .side-body{flex:none;height:34vh;height:34dvh}
  .side[data-open="false"] .side-body{display:none}
  .asks .lv:nth-last-child(n+7),.bids .lv:nth-child(n+7){display:none}
}
@media (pointer:coarse){.side-min{width:44px;height:44px}}
/* watchlist por categoria (Cripto, Indices, Acoes, Commodities); B3 pela brapi.dev */
.whead{position:sticky;top:0;z-index:2;display:flex;flex-direction:column;gap:6px;padding:8px 8px 6px;border-bottom:1px solid var(--line);background:var(--surface)}
.wcat{display:flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:9px;background:rgba(var(--surface2-rgb),.6)}
.wcat-b{flex:1 1 auto;min-width:0;min-height:34px;padding:4px 6px;border:0;border-radius:7px;background:none;color:var(--muted);font-size:.74rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:color .15s,background .15s}
.wcat-b:hover{background:rgba(var(--ink-rgb),.06);color:var(--text)}
.wcat-b[aria-selected="true"]{background:rgba(var(--gold-rgb),.16);color:var(--gold);box-shadow:inset 0 -2px 0 var(--gold)}
.wtools{display:flex;gap:6px}
.wq{flex:1;min-width:0;height:36px;padding:0 10px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface-2);color:var(--text);font:inherit;font-size:.82rem}
.wq::placeholder,.wtok-i::placeholder{color:var(--faint)}
.wq:focus,.wtok-i:focus{outline:none;border-color:var(--gold)}
.wkey{flex:none;margin-left:auto;height:36px;padding:0 12px;border:1px solid var(--line-strong);border-radius:8px;background:none;color:var(--gold);font-size:.76rem;font-weight:700;white-space:nowrap;cursor:pointer}
.wkey:hover,.wkey[aria-expanded="true"]{border-color:var(--gold)}
.wtok{display:grid;gap:7px;padding:9px 10px;border:1px solid rgba(var(--gold-rgb),.35);border-radius:9px;background:rgba(var(--gold-rgb),.06);color:var(--muted);font-size:.76rem;line-height:1.45}
.wtok p{margin:0}
.wtok-r{display:flex;gap:6px}
.wtok-i{flex:1;min-width:0;height:36px;padding:0 9px;border:1px solid var(--line-strong);border-radius:7px;background:var(--surface-2);color:var(--text);font:inherit;font-size:.8rem}
.wtok-s,.wtok-d{flex:none;height:36px;padding:0 11px;border-radius:7px;font-size:.76rem;font-weight:700;cursor:pointer}
.wtok-s{border:1px solid var(--gold);background:var(--gold);color:var(--on-accent)}
.wtok-d{border:1px solid var(--line-strong);background:none;color:var(--muted)}
.wtok-d:hover{border-color:var(--down);color:var(--down)}
.wtok-st{color:var(--text)}
.wnote{margin:0;color:var(--muted);font-size:.72rem;line-height:1.4}
.wnote:empty{display:none}
.wnote button{padding:0;border:0;background:none;color:var(--gold);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}
.w-sym.w-b3{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:9px;align-items:center}
.w-sym.w-b3 b,.w-sym.w-b3 i{grid-column:2}
.w-logo{grid-row:1/3;width:24px;height:24px;border-radius:6px;background:rgba(var(--ink-rgb),.08);object-fit:contain}
.w-sym i{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mnote{flex:none;margin:10px 12px 4px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;color:var(--muted);font-size:.76rem;line-height:1.45}
.live[data-state="delayed"]{color:var(--text)}
.live[data-state="delayed"] i{background:var(--gold)}
.cnote{position:absolute;z-index:6;left:50%;top:58px;transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px);padding:9px 14px;border:1px solid rgba(var(--gold-rgb),.55);border-radius:10px;background:rgba(var(--bg-rgb),.95);color:var(--text);font-size:.8rem;font-weight:600;line-height:1.4;text-align:center;box-shadow:0 10px 30px rgba(var(--shadow-rgb),.5)}
@media (pointer:coarse){.wcat-b,.wq,.wkey,.wtok-i,.wtok-s,.wtok-d{min-height:44px}}

/* book: barra de forca (quanto volume esta parado de cada lado) */
.bim{flex:none;margin:auto 10px 0;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:rgba(var(--surface-rgb),.96)}
.bim-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:6px;color:var(--muted);font-size:.72rem;font-weight:600}
.bim-d{font-weight:700}
.bim-d[data-dir="up"]{color:var(--delta-p)}
.bim-d[data-dir="down"]{color:var(--delta-n)}
.bim-bar{display:flex;height:10px;border-radius:5px;overflow:hidden;background:rgba(var(--ink-rgb),.06)}
.bim-bar i{height:100%;transition:width .18s linear}
.bim-fb{background:linear-gradient(90deg,rgba(var(--buy-rgb),var(--fill-a,.4)),var(--buy))}
.bim-fa{background:linear-gradient(90deg,var(--sell),rgba(var(--sell-rgb),var(--fill-a,.4)))}
.bim-f{display:flex;justify-content:space-between;gap:8px;margin-top:5px;font-size:.72rem;font-weight:600}
.bim-f span:first-child{color:var(--buy)}
.bim-f span:last-child{color:var(--sell)}

/* negocios: filtro de negociacoes grandes */
.trf{position:sticky;top:0;z-index:3;flex:none;display:flex;align-items:center;gap:6px;padding:7px 10px;border-bottom:1px solid var(--line);background:var(--surface)}
.trf-sw{min-height:32px;padding:0 10px;border:1px solid var(--line-strong);border-radius:8px;background:none;color:var(--muted);font:700 .74rem var(--font-ui);white-space:nowrap;cursor:pointer}
.trf-sw:hover{border-color:var(--gold);color:var(--text)}
.trf-sw[aria-pressed="true"]{border-color:var(--gold);background:rgba(var(--gold-rgb),.16);color:var(--gold)}
.trf-m{display:flex;gap:2px;padding:2px;border:1px solid var(--line);border-radius:8px;background:rgba(var(--surface2-rgb),.6)}
.trf-m button{min-width:30px;min-height:28px;padding:0 6px;border:0;border-radius:6px;background:none;color:var(--muted);font:700 .72rem var(--font-ui);cursor:pointer}
.trf-m button[aria-pressed="true"]{background:rgba(var(--ink-rgb),.1);color:var(--text)}
.trf[data-on="false"] .trf-m{opacity:.45}
.trf-n{margin-left:auto;color:var(--gold);font-size:.72rem;font-weight:700;white-space:nowrap}
.trf-e{flex:none;margin:12px;color:var(--muted);font-size:.76rem}
.tr-big{background:rgba(var(--gold-rgb),.1);box-shadow:inset 2px 0 0 var(--gold)}
@media (pointer:coarse){.trf-sw,.trf-m button{min-height:40px}}

/* book: painel de fluxo (dinheiro de cada lado, bid/ask, delta e CVD) */
.bfl{flex:none;margin:8px 10px 10px;padding:9px 10px 10px;border:1px solid var(--line);border-radius:10px;background:rgba(var(--surface2-rgb),.45)}
.bfl-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px;color:var(--muted);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.bfl-w{display:flex;gap:2px;padding:2px;border:1px solid var(--line);border-radius:7px;background:rgba(var(--bg-rgb),.5)}
.bfl-w button{min-width:28px;min-height:24px;padding:0 5px;border:0;border-radius:5px;background:none;color:var(--muted);font:700 .68rem var(--font-ui);letter-spacing:0;cursor:pointer}
.bfl-w button[aria-pressed="true"]{background:rgba(var(--ink-rgb),.12);color:var(--text)}
.bfl-ba{display:flex;justify-content:space-between;gap:8px;margin-bottom:8px;font-size:.74rem;font-weight:600;font-variant-numeric:tabular-nums}
.bfl-bid{color:var(--buy)}
.bfl-ask{color:var(--sell)}
.bfl-rows{display:grid;gap:5px}
.bfl-r{display:grid;grid-template-columns:52px 64px minmax(0,1fr);align-items:center;gap:8px;font-size:.74rem}
.bfl-r span{color:var(--muted)}
.bfl-r b{font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.bfl-r i{position:relative;height:7px;border-radius:4px;background:rgba(var(--ink-rgb),.07);overflow:hidden}
.bfl-r i::after{content:"";position:absolute;inset:0;width:100%;border-radius:4px}
.bfl-r i.c::after{background:linear-gradient(90deg,rgba(var(--buy-rgb),var(--fill-a,.45)),var(--buy))}
.bfl-r i.v::after{background:linear-gradient(90deg,rgba(var(--sell-rgb),var(--fill-a,.45)),var(--sell))}
.bfl-tot{display:flex;justify-content:space-between;gap:8px;margin-top:9px;padding-top:8px;border-top:1px solid var(--line);font-size:.74rem;font-weight:700;font-variant-numeric:tabular-nums}
.bfl-tot span{color:var(--muted)}
.bfl-tot span[data-dir="up"]{color:var(--delta-p)}
.bfl-tot span[data-dir="down"]{color:var(--delta-n)}

/* book: medidor de confluencia */
.bcf{flex:none;margin:10px 10px 2px;padding:10px;border:1px solid var(--line);border-radius:10px;background:rgba(var(--surface2-rgb),.45)}
.bcf[data-dir="up"]{border-color:rgba(var(--primary-rgb),.4);background:rgba(var(--primary-rgb),.06)}
.bcf[data-dir="down"]{border-color:rgba(var(--down-rgb),.4);background:rgba(var(--down-rgb),.07)}
.bcf-top{display:flex;align-items:center;gap:10px}
.bcf-i{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:rgba(var(--ink-rgb),.07);color:var(--muted);font-size:.8rem}
.bcf[data-dir="up"] .bcf-i{background:rgba(var(--agrc-rgb),.14);color:var(--agr-c)}
.bcf[data-dir="down"] .bcf-i{background:rgba(var(--agrv-rgb),.16);color:var(--agr-v)}
.bcf-t{display:flex;flex-direction:column;min-width:0}
.bcf-t b{font-size:.84rem;font-weight:700}
.bcf[data-dir="up"] .bcf-t b{color:var(--agr-c)}
.bcf[data-dir="down"] .bcf-t b{color:var(--agr-v)}
.bcf-t span{color:var(--muted);font-size:.72rem}
.bcf-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.bcf-c{padding:3px 8px;border:1px solid var(--line);border-radius:999px;color:var(--faint);font-size:.68rem;font-weight:700}
.bcf-c[data-dir="up"]{border-color:rgba(var(--agrc-rgb),.45);background:rgba(var(--agrc-rgb),.1);color:var(--agr-c)}
.bcf-c[data-dir="down"]{border-color:rgba(var(--agrv-rgb),.45);background:rgba(var(--agrv-rgb),.12);color:var(--agr-v)}
@media (pointer:coarse){.bfl-w button{min-height:32px;min-width:34px}}

/* aba Agente: confluencia entre todos os indicadores */
.ag{flex:none;margin:10px;padding:12px;border:1px solid var(--line);border-radius:12px;background:rgba(var(--surface2-rgb),.45)}
.ag-top{display:flex;align-items:center;gap:12px}
.ag-i{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:rgba(var(--ink-rgb),.07);color:var(--muted);font-size:.95rem}
.ag-top[data-dir="up"] .ag-i{background:rgba(var(--agrc-rgb),.14);color:var(--agr-c)}
.ag-top[data-dir="down"] .ag-i{background:rgba(var(--agrv-rgb),.16);color:var(--agr-v)}
.ag-t{display:flex;flex-direction:column;min-width:0}
.ag-t b{font-size:.95rem;font-weight:700}
.ag-top[data-dir="up"] .ag-t b{color:var(--agr-c)}
.ag-top[data-dir="down"] .ag-t b{color:var(--agr-v)}
.ag-t span{color:var(--muted);font-size:.76rem}
.ag-bar{display:flex;height:10px;margin-top:11px;border-radius:5px;overflow:hidden;background:rgba(var(--ink-rgb),.06)}
.ag-bar i{height:100%;transition:width .3s}
.ag-bar .u{background:linear-gradient(90deg,rgba(var(--agrc-rgb),var(--fill-a,.5)),var(--agr-c))}
.ag-bar .n{background:rgba(var(--ink-rgb),.14)}
.ag-bar .d{background:linear-gradient(90deg,var(--agr-v),rgba(var(--agrv-rgb),var(--fill-a,.5)))}
.ag-leg{display:flex;justify-content:space-between;gap:8px;margin-top:6px;font-size:.72rem;font-weight:700}
.ag-leg .u{color:var(--agr-c)}
.ag-leg .n{color:var(--muted)}
.ag-leg .d{color:var(--agr-v)}
.ag-when{margin:8px 0 0;color:var(--faint);font-size:.7rem}
.ag-hint{margin-left:8px;color:var(--faint);font-size:.66rem;font-weight:600;letter-spacing:0;text-transform:none}
.ag-gs{flex:none;display:grid;gap:7px;padding:0 12px}
.ag-g{display:grid;grid-template-columns:minmax(0,1fr) 72px 44px;align-items:center;gap:8px;font-size:.76rem}
.ag-g>span{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-mini{display:flex;height:6px;border-radius:3px;overflow:hidden;background:rgba(var(--ink-rgb),.07)}
.ag-mini b{height:100%}
.ag-mini .u{background:var(--agr-c)}
.ag-mini .d{background:var(--agr-v)}
.ag-gv{text-align:right;font-weight:700;color:var(--muted)}
.ag-gv[data-dir="up"]{color:var(--pos)}
.ag-gv[data-dir="down"]{color:var(--neg)}
.ag-list{flex:none;padding-bottom:10px}
.ag-list .lay-title{padding:12px 12px 4px;color:var(--gold);font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.ag-r{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:9px;width:100%;min-height:38px;padding:4px 12px;border:0;border-top:1px solid var(--line);background:none;color:var(--text);font:500 .78rem var(--font-ui);text-align:left;cursor:pointer}
.ag-r:hover{background:rgba(var(--ink-rgb),.05)}
.ag-r[aria-pressed="true"]{background:rgba(var(--gold-rgb),.08)}
.ag-r[aria-pressed="true"]>span{color:var(--gold)}
.ag-s{font-style:normal;font-size:.7rem;color:var(--muted);text-align:center}
.ag-s[data-dir="up"]{color:var(--primary)}
.ag-s[data-dir="down"]{color:var(--down)}
.ag-r b{color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}
@media (pointer:coarse){.ag-r{min-height:44px}}