:root {
  --bg: #000000;
  --panel: #0e0f12;
  --panel2: #15171c;
  --border: #23262e;
  --text: #e3e7ec;
  --dim: #8b929d;
  --green: #26a69a;
  --red: #ef5350;
  --yellow: #ffd54a;
  --accent: #3b82f6;
}

/* Banner "entrada armada que NO entro": franja fija arriba, llamativa, se queda
   hasta que se cierra con un clic. */
#noentry-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  background: linear-gradient(90deg, #4a1414, #3a1a06);
  border-bottom: 2px solid var(--red);
  color: #ffe1b0; font-size: 16px; font-weight: 700;
  box-shadow: 0 2px 14px rgba(239,83,80,.35);
  animation: nb-pulse 1.4s ease-in-out infinite;
}
#noentry-banner.hidden { display: none; }
#noentry-banner .nb-icon {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  background: var(--red); color: #fff; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
#noentry-banner-text { flex: 1 1 auto; }
#noentry-banner-close {
  flex: 0 0 auto; background: transparent; border: 1px solid var(--red);
  color: #ffe1b0; border-radius: 6px; cursor: pointer;
  font-size: 15px; line-height: 1; padding: 5px 9px;
}
#noentry-banner-close:hover { background: var(--red); color: #fff; }
@keyframes nb-pulse {
  0%, 100% { box-shadow: 0 2px 14px rgba(239,83,80,.30); }
  50%      { box-shadow: 0 2px 22px rgba(239,83,80,.65); }
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  display: flex; flex-direction: column;
}

/* Top bar */
#topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 9px 16px; background: var(--panel); border-bottom: 1px solid var(--border);
}
.brand { font-weight: 700; letter-spacing: .5px; font-size: 16px; }
.dim { color: var(--dim); }
.badge { font-size: 12px; padding: 3px 9px; border-radius: 10px; }
.badge.maqueta { background: #2a210a; color: var(--yellow); border: 1px solid #4a3a10; }
.btn-sim { margin-left: auto; background: var(--panel2); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px; padding: 6px 12px; cursor: pointer; font-size: 14px; }
.btn-sim:hover { border-color: var(--accent); }
/* KILL-SWITCH manual. Rojo y separado del resto: se busca con la vista en
   caliente. NO pide doble clic a proposito (es un boton de panico: la friccion
   estorba); lo destructivo -FLATTEN- sigue exigiendo elegirlo en la decision. */
.btn-kill { margin-left: 14px; background: #3a1113; color: #ffd9da;
  border: 1px solid var(--red); border-radius: 6px; padding: 6px 14px;
  cursor: pointer; font-size: 14px; font-weight: 800; letter-spacing: .5px; }
.btn-kill:hover { background: var(--red); color: #fff; }
.btn-kill.armado { animation: killpulse 1s infinite; }
/* Sistema PARADO: el mismo boton reanuda. Ambar (no verde: reanudar tras un
   kill-switch no es una accion "segura", pide atencion). */
.btn-kill.reanudar { background: #3a2a08; color: #ffe0a3; border-color: var(--yellow); }
.btn-kill.reanudar:hover { background: var(--yellow); color: #1a1400; }
@keyframes killpulse { 0%,100% { background: var(--red); color: #fff; }
                       50% { background: #3a1113; color: #ffd9da; } }

.col-title { padding: 8px 12px; font-size: 12px; letter-spacing: 1px;
  color: var(--dim); border-bottom: 1px solid var(--border); }

/* Layout: middle (3 cols) + barra de eventos abajo */
#layout { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#middle { flex: 1; display: flex; min-height: 0; }

/* Watchlist */
#watchlist-col {
  width: 290px; min-width: 290px; background: var(--panel);
  border-right: 1px solid var(--border); display: flex; flex-direction: column;
}
.wl-head, #watchlist li {
  display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; gap: 6px;
  align-items: center; padding: 8px 12px;
}
.wl-head { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .5px;
  border-bottom: 1px solid var(--border); }
.wl-head span:not(:first-child), #watchlist li span:not(.sym):not(.new-dot) { text-align: right; font-variant-numeric: tabular-nums; }
#watchlist { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
#watchlist li { border-bottom: 1px solid #16181d; cursor: pointer; font-size: 15px; position: relative; }
#watchlist li:hover { background: var(--panel2); }
#watchlist li.selected { background: #16202e; box-shadow: inset 3px 0 0 var(--accent); }
#watchlist li .sym { font-weight: 700; }
#watchlist li .up { color: var(--green); }
#watchlist li .down { color: var(--red); }
.new-dot { position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
  width: 8px; height: 8px; border-radius: 50%; background: var(--red);
  box-shadow: 0 0 6px var(--red); animation: pulse 1.1s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
#watchlist li.is-new { background: #1c1010; }
/* Accion con DECISION pendiente (entrada/locate): marco naranja, llama la atencion */
#watchlist li.wl-decision { background: #281c06; box-shadow: inset 3px 0 0 #ff9800; }
#watchlist li.wl-decision.selected { box-shadow: inset 3px 0 0 #ff9800, inset 0 0 0 1px #ff9800; }
#watchlist li.wl-decision .sym { color: #ffd54a; }
/* Pidiendo locates (espera / bucle / confirmar): ESTELA blanca girando alrededor
   del borde del ticker, como un "cargando". El ::after es un conic-gradient
   enmascarado al borde (xor) y el angulo --wl-ang se anima -> la luz da vueltas. */
@property --wl-ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
#watchlist li.wl-locating { position: relative; background: #1a1d22; }
#watchlist li.wl-locating::after {
  content: ""; position: absolute; inset: 0; border-radius: 5px; padding: 2px;
  background: conic-gradient(from var(--wl-ang),
    rgba(205,214,224,0) 0deg, rgba(205,214,224,0) 250deg,
    #cdd6e0 320deg, #ffffff 350deg, rgba(205,214,224,0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: wlTrail 1.1s linear infinite; pointer-events: none; z-index: 2;
}
@keyframes wlTrail { to { --wl-ang: 360deg; } }
/* Locate disponible pendiente de confirmar compra: marco plata (fijo). */
#watchlist li.wl-locate { background: #1a1d22; box-shadow: inset 3px 0 0 #cdd6e0; }
#watchlist li.wl-locate .sym { color: #dfe6ee; }
/* Marca de "ya tiene shares localizadas": candado plata + cantidad. */
.wl-loc-mark { margin-left: 6px; font-size: 11px; font-weight: 700; color: #cdd6e0;
  background: #20242b; border: 1px solid #3a414c; border-radius: 4px; padding: 0 4px;
  font-variant-numeric: tabular-nums; vertical-align: middle; }

/* Tag "dormido en D-1": no cotizó el día previo (halt / cero volumen) -> investigar */
.wl-resc { margin-left: 6px; font-size: 10px; font-weight: 700; color: #ff8a65;
  background: #2a1208; border: 1px solid #5a2a18; border-radius: 3px; padding: 0 3px;
  vertical-align: middle; cursor: help; }

/* Badge "tope de entradas alcanzado": ya operado hoy, no re-entra. Rojo, visible. */
.wl-noreentra { margin-left: 6px; font-size: 10px; font-weight: 800; color: #fff;
  background: #b3261e; border: 1px solid #e5534b; border-radius: 3px; padding: 0 4px;
  letter-spacing: 0.5px; vertical-align: middle; cursor: help; }

/* Banner prominente ENCIMA de los graficos cuando el ticker seleccionado agoto
   el tope de entradas del dia. */
.tope-banner { background: #b3261e; color: #fff; font-weight: 800; font-size: 13px;
  text-align: center; padding: 6px 10px; letter-spacing: 0.5px; border-radius: 4px;
  margin: 4px 0 2px 0; }
.tope-banner.hidden { display: none; }

/* Watchlist preliminar (pre-scan Dia 1) */
#prescan-col { display: flex; flex-direction: column; border-top: 1px solid var(--border);
  max-height: 38%; }
#prescan-col.hidden { display: none; }
#prescan-col .col-title { color: #8aa0c0; }
.ps-head, #prescan-list li {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 6px;
  padding: 5px 12px; align-items: center;
}
.ps-head { font-size: 11px; color: var(--dim); text-transform: uppercase;
  letter-spacing: .5px; border-bottom: 1px solid var(--border); }
.ps-head span:not(:first-child), #prescan-list li span:not(.ps-sym) {
  text-align: right; font-variant-numeric: tabular-nums; }
#prescan-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
#prescan-list li { border-bottom: 1px solid #16181d; cursor: pointer; font-size: 14px; }
#prescan-list li:hover { background: var(--panel2); }
#prescan-list li.selected { background: #16202e; box-shadow: inset 3px 0 0 var(--accent); }
.ps-sym { font-weight: 700; }
.ps-gap { color: var(--green); }
.ps-reb { font-size: 10px; font-weight: 700; color: #ffb74d; border: 1px solid #5a4420;
  background: #2a2008; border-radius: 3px; padding: 0 3px; vertical-align: middle; }

/* Detalle */
#detail { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#detail-bar {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 10px 18px; border-bottom: 1px solid var(--border); background: var(--panel);
}
#d-symbol { font-size: 30px; font-weight: 800; letter-spacing: .5px; }
.params, .position { display: flex; gap: 22px; flex-wrap: wrap; }
.params .p, .position .p { display: flex; flex-direction: column; }
.params .p .k, .position .p .k { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .5px; }
.params .p .v, .position .p .v { font-size: 17px; font-variant-numeric: tabular-nums; }
.position { padding: 6px 14px; background: #10131a; border: 1px solid var(--border); border-radius: 6px; }
.position.hidden { display: none; }
.v.pos { color: var(--green); } .v.neg { color: var(--red); }
.btn-locates { margin-left: auto; background: #10261c; color: #6ee7b7;
  border: 1px solid #1f5c40; border-radius: 6px; padding: 9px 18px; cursor: pointer; font-weight: 700; font-size: 15px; }
.btn-locates:hover { background: #14352a; }
.btn-locates .loc-count { margin-left: 9px; padding-left: 9px; border-left: 1px solid #1f5c40;
  font-weight: 600; font-size: 13px; color: #9fe7c4; }
.btn-locates .loc-count.has { color: #6ee7b7; }
/* Pedido de locate EN CURSO: el boton pasa a CANCELAR (rojo). */
.btn-locates.locating { background: #2a1416; color: #fca5a5; border-color: #7f2d2d;
  animation: locBtnPulse 1.1s ease-in-out infinite; }
.btn-locates.locating:hover { background: #3a1a1d; }
.btn-locates.locating .loc-count { border-left-color: #7f2d2d; color: #fca5a5; }

/* Boton DESCARTAR (secundario, gris): quita el ticker de entradas/anticipacion. */
.btn-descartar { margin-left: 8px; background: #24181a; color: #d69a9a;
  border: 1px solid #5a2f34; border-radius: 6px; padding: 9px 14px; cursor: pointer;
  font-weight: 700; font-size: 13px; letter-spacing: 0.3px; }
.btn-descartar:hover { background: #331d21; color: #f0b5b5; }
/* Detalle del locate ya conseguido (ruta - broker - coste efectivo), junto al
   boton PEDIR LOCATES. Vacio si no hay locate o si hay pedido en curso. */
.locate-detail { font-size: 15px; font-weight: 600; color: var(--dim);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.locate-detail:not(:empty)::before { content: "🔒 "; }
.locate-detail .loc-cost { color: var(--red); }
@keyframes locBtnPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(252,165,165,.0); }
  50% { box-shadow: 0 0 0 3px rgba(252,165,165,.18); } }

/* Charts: la de 1-min mas ancha */
#charts { flex: 1; display: flex; gap: 1px; background: var(--border); min-height: 0; }
.chart-wrap { display: flex; flex-direction: column; background: var(--bg); min-width: 0; }
.chart-wrap.daily { flex: 1; }
.chart-wrap.intra { flex: 1.4; }
.chart-title { padding: 6px 12px; font-size: 12px; color: var(--dim);
  letter-spacing: 1px; background: var(--panel); border-bottom: 1px solid var(--border); }
.vwap-tag { color: var(--yellow); }
.btn-mini { float: right; background: var(--panel2); color: var(--dim);
  border: 1px solid var(--border); border-radius: 4px; padding: 1px 8px;
  cursor: pointer; font-size: 11px; }
.btn-mini:hover { border-color: var(--accent); color: var(--text); }
#pnl-positions tr.closed td { opacity: 0.55; }
/* Multi-broker: cabecera de cada tabla de posiciones (GUARDIAN / SAGE). */
#pnl-positions tr.broker-hd td { padding: 8px 12px 3px; border-bottom: 1px solid #2a2e36;
  text-align: left; }
#pnl-positions tr.broker-hd .broker-name { font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--accent); font-size: 13px; }
#pnl-positions tr.broker-hd .broker-meta { float: right; color: var(--dim); font-size: 12px;
  font-weight: 400; text-transform: none; letter-spacing: 0; }
#pnl-positions tr.broker-empty td { color: var(--dim); font-style: italic; text-align: left;
  padding: 3px 12px 8px; }
.chart, .chart-box { flex: 1; position: relative; min-height: 0; }
.chart { width: 100%; height: 100%; }
.chart-box .chart { position: absolute; inset: 0; }
/* La grafica de 1-min deja un MARGEN a la derecha (gutter) para las etiquetas de
   ordenes, fuera del area de velas, a la derecha del eje de precios. width:auto
   es CLAVE: si no, ".chart { width:100% }" gana y el chart ocupa todo (el gutter
   caeria ENCIMA de las velas). Con width auto manda left:0 + right:124px. */
#chart-intraday { right: 124px; width: auto; }

/* Etiquetas de ORDENES: chip con fondo anclado al NIVEL de precio, en el gutter
   DERECHO (fuera de las velas, a la derecha del eje de precios). */
#order-labels { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
#order-labels .olbl { position: absolute; left: calc(100% - 122px); right: auto;
  transform: translateY(-50%); max-width: 118px; overflow: hidden; text-overflow: ellipsis;
  background: rgba(8,10,14,0.9); border: 1px solid; border-radius: 4px;
  padding: 2px 6px; font-size: 12px; font-weight: 600; white-space: nowrap;
  font-variant-numeric: tabular-nums; line-height: 1.5; }

/* Niveles CANDIDATOS (entrada/stop propuestos, sin confirmar): linea + chip que
   IRRADIAN y parpadean (como la barra de decision) para indicar "propuesto". */
#candidate-glow { position: absolute; left: 0; top: 0; bottom: 0; right: 124px;
  pointer-events: none; z-index: 2; overflow: hidden; }
#candidate-glow .cand-line { position: absolute; left: 0; right: 0; height: 2px;
  transform: translateY(-50%); animation: candPulse 1.4s ease-in-out infinite; }
@keyframes candPulse {
  0%,100% { opacity: .45; box-shadow: 0 0 5px 0 currentColor; }
  50%     { opacity: 1;   box-shadow: 0 0 14px 1px currentColor; }
}
#order-labels .olbl.pulse { animation: chipPulse 1.4s ease-in-out infinite; }
@keyframes chipPulse {
  0%,100% { opacity: .62; box-shadow: 0 0 4px 0 currentColor; }
  50%     { opacity: 1;   box-shadow: 0 0 12px 0 currentColor; }
}

/* Bandas premarket/postmarket (overlay, encima del fondo negro) */
#session-bands { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
#session-bands .band { position: absolute; top: 0; bottom: 0; background: rgba(150,160,175,0.13); }
#session-bands .band::after { content: attr(data-label); position: absolute; top: 5px; left: 5px;
  font-size: 10px; color: #aab2bd; letter-spacing: 1px; }

/* Columna derecha: P&L + ordenes */
#info-col { width: 452px; min-width: 452px; background: var(--panel);
  border-left: 1px solid var(--border); display: flex; flex-direction: column; }
.info-card { border-bottom: 1px solid var(--border); }
#pnl-body { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; padding: 10px 14px; }
#pnl-body .p { display: flex; flex-direction: column; }
#pnl-body .k { font-size: 11px; color: var(--dim); text-transform: uppercase; }
#pnl-body .v { font-size: 18px; font-variant-numeric: tabular-nums; }
#pnl-body .v.big { font-size: 23px; font-weight: 700; }
#pnl-positions { width: 100%; border-collapse: collapse; margin: 4px 0 8px; font-size: 14px;
  font-variant-numeric: tabular-nums; }
#pnl-positions th { color: var(--dim); font-weight: 500; text-transform: uppercase;
  font-size: 10px; text-align: right; padding: 3px 6px; border-bottom: 1px solid var(--border); }
#pnl-positions th:first-child, #pnl-positions td:first-child { text-align: left; padding-left: 12px; }
#pnl-positions td { text-align: right; padding: 4px 5px; border-bottom: 1px solid #16181d; }
#pnl-positions td.sym { font-weight: 700; }
/* Badge de trade PARTIDO entre brokers (B.3c): mismo ticker en las dos tablas. */
.split-badge { font-size: 9px; font-weight: 800; letter-spacing: .5px;
  color: var(--accent); border: 1px solid var(--accent); border-radius: 4px;
  padding: 0 3px; margin-left: 5px; vertical-align: middle; white-space: nowrap; }
#pnl-positions td.dim { color: var(--dim); }
#pnl-positions .pos { color: var(--green); } #pnl-positions .neg { color: var(--red); }
#pnl-positions tbody tr, #pnl-positions tr[data-sym] { cursor: pointer; }
#pnl-positions tr[data-sym]:hover { background: var(--panel2); }
#pnl-positions tr.row-sel { background: #16202e; box-shadow: inset 3px 0 0 var(--accent); }
.info-block { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#orders-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
#orders-list li { padding: 8px 14px; border-bottom: 1px solid #16181d; font-size: 14px;
  display: flex; justify-content: space-between; gap: 8px; font-variant-numeric: tabular-nums; }
#orders-list .side-buy { color: var(--green); } #orders-list .side-ss { color: var(--red); }
#orders-list .otype { color: var(--dim); }

/* Pop-up de decision interactiva (kill-switch, modo asistido) */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.72); display: flex;
  align-items: center; justify-content: center; z-index: 1000; }
.modal.hidden { display: none; }
.modal-box { background: var(--panel2); border: 1px solid var(--red); border-radius: 10px;
  padding: 24px 28px; max-width: 520px; box-shadow: 0 0 36px rgba(239,83,80,0.45); }
.modal-q { font-size: 17px; line-height: 1.4; margin-bottom: 18px; color: var(--text); }
.modal-opts { display: flex; gap: 10px; flex-wrap: wrap; }
.modal-opts button { background: var(--panel); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 11px 18px; cursor: pointer; font-size: 15px; font-weight: 600; }
.modal-opts button:hover { border-color: var(--accent); background: var(--bg); }

/* ----- Decision asistida: tinte calido + barra inferior ----- */
/* Tinte: overlay calido sobre toda la app cuando hay decision pendiente.
   No bloquea clics (pointer-events:none) y deja ver las graficas debajo. */
#decision-tint {
  position: fixed; inset: 0; z-index: 800; pointer-events: none;
  background: radial-gradient(ellipse at 50% 120%, rgba(255,176,32,0.20), rgba(255,140,0,0.10) 60%, rgba(255,120,0,0.04) 100%);
  opacity: 0; transition: opacity .25s ease;
}
body.decision-active #decision-tint { opacity: 1; }
body.decision-active #topbar { border-bottom-color: #ff9800; box-shadow: 0 0 18px rgba(255,152,0,0.35); }
/* Modo PEDIR LOCATES manual: mismo aspecto pero en PLATA/gris (distinto del
   naranja de las senales de entrada). Tinte plateado + topbar plata. */
body.manual-locate #decision-tint { opacity: 1;
  background: radial-gradient(ellipse at 50% 120%, rgba(205,214,224,0.16), rgba(170,178,189,0.08) 60%, rgba(150,160,175,0.03) 100%); }
body.manual-locate #topbar { border-bottom-color: #cdd6e0; box-shadow: 0 0 18px rgba(205,214,224,0.30); }
/* RESERVAR el espacio de la barra: el contenido (graficas) se encoge por encima
   y la barra NUNCA tapa nada. La altura real la mide el JS en --assist-h. */
body.decision-active, body.manual-locate { padding-bottom: var(--assist-h, 132px); }

/* Barra de decision anclada abajo (no tapa las graficas: ver reserva arriba) */
.assist {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  display: flex; align-items: center; gap: 26px;
  padding: 11px 24px 14px; min-height: 96px;
  background: linear-gradient(180deg, #241a06, #1a1304);
  border-top: 3px solid #ff9800;
  box-shadow: 0 -8px 36px rgba(255,152,0,0.30);
  animation: assistPulse 1.6s ease-in-out infinite;
}
.assist.hidden { display: none; }
@keyframes assistPulse {
  0%,100% { border-top-color: #ff9800; box-shadow: 0 -8px 30px rgba(255,152,0,0.22); }
  50%     { border-top-color: #ffd54a; box-shadow: 0 -8px 44px rgba(255,176,32,0.45); }
}
/* Barra en modo PEDIR LOCATES manual: misma estructura, color PLATA. */
body.manual-locate .assist {
  background: linear-gradient(180deg, #1c2026, #14171b);
  border-top-color: #cdd6e0; box-shadow: 0 -8px 36px rgba(205,214,224,0.28);
  animation: manualPulse 1.6s ease-in-out infinite;
}
@keyframes manualPulse {
  0%,100% { border-top-color: #aab2bd; box-shadow: 0 -8px 30px rgba(205,214,224,0.18); }
  50%     { border-top-color: #eef2f7; box-shadow: 0 -8px 44px rgba(225,232,240,0.42); }
}
body.manual-locate .assist-kind { color: #cdd6e0; }
/* Contador de cola en la esquina inferior DERECHA (p.ej. 1/2) */
.assist-counter { position: absolute; right: 22px; bottom: 6px;
  font-size: 16px; font-weight: 800; color: #ffb020; font-variant-numeric: tabular-nums;
  letter-spacing: 1px; display: flex; align-items: center; gap: 8px; }
.assist-counter button { background: #3a2b08; color: #ffd54a; border: 1px solid #5a4710;
  border-radius: 5px; padding: 2px 10px; cursor: pointer; font-size: 15px; font-weight: 800; }
.assist-counter button:hover { background: #4a3a10; border-color: #ff9800; }
.assist-info { display: flex; flex-direction: column; gap: 7px; min-width: 0; flex: 1; }
.assist-head { display: flex; align-items: baseline; gap: 14px; }
#assist-sym { font-size: 38px; font-weight: 800; letter-spacing: .5px; color: #fff; }
.assist-kind { font-size: 17px; font-weight: 700; letter-spacing: .6px;
  color: #ffd54a; text-transform: uppercase; }
/* Badge del RR (riesgo/beneficio) en la cabecera de la barra: tick si cumple el
   minimo del Modelo C, cruz si no. Silencioso (hidden) si no se puede calcular. */
.assist-rr { font-size: 17px; font-weight: 800; letter-spacing: .4px;
  padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.assist-rr.rr-ok  { color: #34d399; background: rgba(52, 211, 153, .13);
  border: 1px solid rgba(52, 211, 153, .45); }
.assist-rr.rr-bad { color: #f87171; background: rgba(248, 113, 113, .13);
  border: 1px solid rgba(248, 113, 113, .45); }
.assist-rr.hidden { display: none; }
/* Estado "pidiendo locates..." (hueco mientras llega la inquiry) */
.assist-inquiring { font-size: 23px; color: #ffd54a; display: flex; align-items: center; gap: 12px; }
.assist-inquiring .spin { width: 16px; height: 16px; border: 2px solid #5a4710;
  border-top-color: #ffd54a; border-radius: 50%; display: inline-block;
  animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Rutas de locate disponibles (stage located): compactas, en linea con las metricas */
.routes-line { display: flex; gap: 10px; flex-wrap: wrap; }
.routes-line .route { font-size: 15px; padding: 4px 11px; border-radius: 5px;
  background: #2a2008; border: 1px solid #4a3a10; color: #d9c79a; font-variant-numeric: tabular-nums; }
.routes-line .route.r-chosen { background: #14352a; border-color: #1f5c40; color: #6ee7b7; font-weight: 700; }
.assist-metrics { display: flex; gap: 30px; flex-wrap: wrap; align-items: flex-end; }
.assist-metrics .m { display: flex; flex-direction: column; gap: 2px; }
.assist-metrics .m .k { font-size: 13px; color: #c9a24a; text-transform: uppercase; letter-spacing: .5px; }
.assist-metrics .m .v { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.assist-metrics .m .v.warn { color: #ffb020; }
.assist-metrics .m .v.ok { color: var(--green); }
.assist-metrics .m .v.bad { color: var(--red); }
/* Input editable de shares en el pre-pedido manual de locates */
.assist-metrics .ml-shares { width: 100px; background: #1a1304; color: var(--text);
  border: 1px solid #ff9800; border-radius: 5px; padding: 2px 8px; margin-top: 1px;
  font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.assist-metrics .ml-shares:focus { outline: none; border-color: #ffd54a; }
.assist-actions { display: flex; gap: 12px; align-items: center; padding-right: 48px; }
.assist-actions button {
  border: none; border-radius: 8px; padding: 13px 24px; cursor: pointer;
  font-size: 17px; font-weight: 800; letter-spacing: .3px; line-height: 1.15;
}
.assist-actions .act-locate { background: #b26a00; color: #fff; }
.assist-actions .act-locate:hover { background: #d07e00; }
.assist-actions .act-accept { background: #1f9e5a; color: #fff; }
.assist-actions .act-accept:hover { background: #24b768; }
.assist-actions .act-reject { background: #3a2020; color: #ff9a96; border: 1px solid #5c2a2a; }
.assist-actions .act-reject:hover { background: #4a2626; }

/* Goteo de eventos */
#eventbar { height: 140px; background: var(--panel); border-top: 1px solid var(--border);
  display: flex; flex-direction: column; }
#events { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1;
  font-family: "SF Mono", Consolas, Menlo, monospace; font-size: 13px; }
#events li { padding: 3px 14px; display: flex; gap: 12px; border-bottom: 1px solid #121317; }
#events .t { color: var(--dim); }
#events .sev-crit { color: var(--red); } #events .sev-imp { color: var(--yellow); } #events .sev-info { color: var(--dim); }

/* =====================================================================
   RESPONSIVE / MOVIL (acceso via Tailscale, S3.3). En pantallas estrechas
   las 3 columnas fijas + graficas lado a lado no caben: se apila todo en
   vertical y la pagina hace scroll natural. Las graficas (autoSize) se
   redimensionan solas al darles un alto fijo al contenedor.
   ===================================================================== */
@media (max-width: 860px) {
  html, body { height: auto; min-height: 100%; }

  /* La pagina entera scrollea en vez de paneles de alto fijo con scroll interno */
  #layout { flex: none; }
  #middle { flex: none; flex-direction: column; }
  #detail { flex: none; min-width: 0; }

  /* Watchlist e info: ancho completo, apiladas, con tope de alto (scrollean) */
  #watchlist-col, #info-col {
    width: 100%; min-width: 0; border-left: none; border-right: none;
    border-bottom: 1px solid var(--border); border-top: 1px solid var(--border);
  }
  #watchlist { max-height: 34vh; }
  #orders-list { max-height: 32vh; }

  /* Graficas: una encima de otra, con alto fijo para que se vean de verdad */
  #charts { flex: none; flex-direction: column; }
  .chart-wrap.daily, .chart-wrap.intra { flex: none; height: 240px; }

  /* Gutter de etiquetas de ordenes mas estrecho (124px se come medio movil) */
  #chart-intraday, #candidate-glow { right: 74px; }
  #order-labels .olbl { left: calc(100% - 72px); max-width: 68px; font-size: 11px; padding: 1px 4px; }

  /* Cabeceras mas compactas */
  #topbar { flex-wrap: wrap; gap: 10px; padding: 8px 12px; }
  .brand { font-size: 15px; }
  #detail-bar { gap: 12px 16px; padding: 8px 12px; }
  #d-symbol { font-size: 24px; }
  .params .p .v, .position .p .v { font-size: 15px; }
  #eventbar { height: 104px; }

  /* Pop-up kill-switch: que no se salga del ancho */
  .modal-box { max-width: 92vw; padding: 18px 20px; }

  /* Barra de decision asistida: apilada y botones grandes (tactil). El alto real
     lo mide el JS (--assist-h) y reserva el espacio, asi que no tapa nada. */
  .assist { flex-direction: column; align-items: stretch; gap: 12px; padding: 12px 14px 16px; }
  #assist-sym { font-size: 26px; }
  .assist-head { gap: 10px; flex-wrap: wrap; }
  .assist-kind { font-size: 13px; }
  .assist-metrics { gap: 12px 18px; }
  .assist-metrics .m .v { font-size: 19px; }
  .assist-metrics .m .k { font-size: 11px; }
  .assist-metrics .ml-shares { font-size: 18px; width: 92px; }
  .assist-actions { padding-right: 0; flex-wrap: wrap; gap: 10px; }
  .assist-actions button { flex: 1 1 130px; padding: 14px 12px; font-size: 15px; }
  .assist-counter { position: static; align-self: flex-end; }
}