/* CANDY 2.0 — el grafico ES la aplicacion.
   Todo lo demas flota por encima: barra de iconos, HUD, tarjetas y boton de ejecucion.
   Nada de tarjetas con el grafico dentro. */

:root {
  --banner-h: 0px;
  --eje-w: 70px;      /* ancho real del eje de precios */
  --tiempo-h: 28px;   /* alto real de la escala de tiempo */
  --bg: #07080b;
  --bg-soft: #0d1016;
  --panel: rgba(16, 19, 26, 0.86);
  --panel-solid: #10131a;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.18);
  --text: #e7eaf0;
  --text-dim: #97a0b0;
  --text-faint: #5d6675;
  --accent: #ff3d81;
  --accent-soft: rgba(255, 61, 129, 0.14);
  --buy: #23c98b;
  --ema: rgba(180, 140, 255, 0.5);
  --dibujo: #7ee8fa;
  --dibujo-relleno: rgba(126, 232, 250, 0.18);
  --sell: #f2494b;
  /* Colores de las VELAS, aparte del verde/rojo del PnL: cada tema puede
     pintarlas a su manera sin tocar el resto de la interfaz. */
  --vela-alcista: var(--buy);
  --vela-bajista: var(--sell);
  --vela-borde-alcista: var(--buy);
  --vela-borde-bajista: var(--sell);
  --vela-mecha-alcista: var(--buy);
  --vela-mecha-bajista: var(--sell);
  --sl: #f2494b;
  --tp: #23c98b;
  --entry: #4ea1ff;
  --avg: #ffb547;
  --warn: #ffb547;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  --radius: 14px;
  --radius-sm: 9px;
  --grid: rgba(255, 255, 255, 0.045);
  --font: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono: 'SF Mono', 'JetBrains Mono', ui-monospace, 'Menlo', monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Tema CANDY: los colores de la casa en las velas. Alcistas del azul del botón
   MERCADO, bajistas del rosa del botón de acción. El SL sigue en rojo y el TP en
   verde a propósito, para que las líneas no se confundan con las velas. */
body[data-theme='candy'] {
  --bg: #06070c;
  --bg-soft: #0c0f17;
  --panel: rgba(15, 18, 28, 0.88);
  --panel-solid: #0f121c;
  --buy: #4ea1ff;
  --ema: rgba(201, 163, 255, 0.5);
  --dibujo: #7ee8fa;
  --dibujo-relleno: rgba(126, 232, 250, 0.18);
  --sell: #ff3d81;
  --vela-alcista: #4ea1ff;
  --vela-bajista: #ff3d81;
  --vela-borde-alcista: #4ea1ff;
  --vela-borde-bajista: #ff3d81;
  --vela-mecha-alcista: #4ea1ff;
  --vela-mecha-bajista: #ff3d81;
  --accent: #ff3d81;
  --accent-soft: rgba(255, 61, 129, 0.15);
  --entry: #7ee8fa;
  --sl: #f2494b;
  --tp: #23c98b;
  --avg: #ffb547;
  --grid: rgba(126, 232, 250, 0.055);
}

body[data-theme='light'] {
  --ema: rgba(108, 63, 212, 0.45);
  --dibujo: #0b6f86;
  --dibujo-relleno: rgba(11, 111, 134, 0.16);
  /* Velas clásicas: alcista BLANCA (hueca), bajista NEGRA, y el contorno y la
     mecha siempre en negro. Es el gráfico de libro de toda la vida. */
  --vela-alcista: #ffffff;
  --vela-bajista: #14171d;
  --vela-borde-alcista: #14171d;
  --vela-borde-bajista: #14171d;
  --vela-mecha-alcista: #14171d;
  --vela-mecha-bajista: #14171d;
  /* Gris de trabajo, no blanco de folio: el blanco a pantalla completa cansa
     la vista, y ademas las velas alcistas (blancas) resaltan sobre gris. */
  --bg: #dde1e8;
  --bg-soft: #eef0f4;
  --panel: rgba(249, 250, 252, 0.94);
  --panel-solid: #f7f8fb;
  --border: rgba(10, 15, 30, 0.14);
  --border-strong: rgba(10, 15, 30, 0.28);
  --text: #121826;
  --text-dim: #545e70;
  --text-faint: #7b8598;
  --accent: #e01c63;
  --accent-soft: rgba(224, 28, 99, 0.12);
  /* Sin rejilla: sobre gris claro estorbaba más que ayudaba. El eje de precios
     y la línea del precio ya dan la referencia. */
  --grid: rgba(0, 0, 0, 0);
  --shadow: 0 14px 40px rgba(15, 25, 50, 0.14);
}

body[data-theme='matrix'] {
  --ema: rgba(142, 245, 200, 0.45);
  --dibujo: #00d9c0;
  --dibujo-relleno: rgba(0, 217, 192, 0.16);
  --bg: #000600;
  --bg-soft: #01120a;
  --panel: rgba(0, 22, 10, 0.9);
  --panel-solid: #01160c;
  --border: rgba(0, 255, 128, 0.22);
  --border-strong: rgba(0, 255, 128, 0.45);
  --text: #b6ffcf;
  --text-dim: #4fd88a;
  --text-faint: #2c8f5c;
  --accent: #00ff88;
  --accent-soft: rgba(0, 255, 136, 0.16);
  --entry: #57ffe0;
  --avg: #d4ff5c;
  --grid: rgba(0, 255, 128, 0.09);
  --font: var(--mono);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

button, input, select { font-family: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }

/* ---------- El grafico ocupa TODO ---------- */
#chart {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
}

#lines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

/* ---------- HUD superior ---------- */
#hud {
  position: fixed;
  top: calc(10px + var(--banner-h));
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 14px;
  background: var(--panel);
  backdrop-filter: blur(18px);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow);
  font-size: 12.5px;
  white-space: nowrap;
  max-width: calc(100vw - 140px);
  overflow-x: auto;
  scrollbar-width: none;
}
#hud::-webkit-scrollbar { display: none; }
#hud .sep { width: 1px; height: 16px; background: var(--border); flex: none; }
#hud .item { display: flex; align-items: center; gap: 6px; }
#hud .label { color: var(--text-faint); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
#hud .value { font-family: var(--mono); font-variant-numeric: tabular-nums; }
#hud .sym { font-weight: 650; letter-spacing: 0.01em; }

.badge {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.badge.demo { background: rgba(78, 161, 255, 0.16); color: var(--entry); }
.badge.live { background: var(--sell); color: #fff; animation: pulse-live 2.4s infinite; }
@keyframes pulse-live { 50% { opacity: 0.62; } }

.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); flex: none; }
.dot.on { background: var(--buy); box-shadow: 0 0 8px var(--buy); }
.dot.off { background: var(--sell); }
.dot.wait { background: var(--warn); animation: pulse-live 1s infinite; }

.pos { color: var(--buy); }
.neg { color: var(--sell); }

/* ---------- Tira de temporalidades (siempre visible, arriba) ---------- */
#tfbar {
  position: fixed;
  top: calc(52px + var(--banner-h));
  left: 50%;
  transform: translateX(-50%);
  z-index: 41;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 6px;
  background: var(--panel);
  backdrop-filter: blur(18px);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow);
  max-width: calc(100vw - 120px);
  overflow-x: auto;
  scrollbar-width: none;
}
#tfbar::-webkit-scrollbar { display: none; }

.tf {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-family: var(--mono);
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.02em;
  transition: background 0.14s, color 0.14s;
  flex: none;
}
.tf:hover { background: rgba(255, 255, 255, 0.08); color: var(--text); }
.tf.on { background: var(--accent); color: #fff; }
.tf.editar { color: var(--text-faint); font-size: 13px; padding: 4px 9px; }

/* ---------- Barra de herramientas lateral ---------- */
#toolbar {
  position: fixed;
  z-index: 45;
  display: flex;
  gap: 4px;
  padding: 8px 6px;
  background: var(--panel);
  backdrop-filter: blur(18px);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  transition: transform 0.28s var(--ease), opacity 0.2s;
}
#toolbar[data-dock='left'],
#toolbar[data-dock='right'] {
  top: 50%;
  transform: translateY(-50%);
  flex-direction: column;
  width: 56px;
  border-radius: var(--radius);
}
#toolbar[data-dock='left'] { left: 10px; }
#toolbar[data-dock='right'] { right: 10px; }
#toolbar[data-dock='top'],
#toolbar[data-dock='bottom'] {
  left: 50%;
  transform: translateX(-50%);
  flex-direction: row;
  height: 56px;
  border-radius: var(--radius);
}
/* Anclada arriba, la barra se coloca DEBAJO de la tira de temporalidades, y el
   panel de cuentas baja para no quedar tapado. Antes se pisaban. */
#toolbar[data-dock='top'] { top: calc(96px + var(--banner-h)); }
#toolbar[data-dock='bottom'] { bottom: 10px; }
/* Con la barra anclada arriba, el panel sigue en su sitio: la barra está
   centrada y el panel pegado al lado, así que no se pisan. */
body.toolbar-collapsed #toolbar { opacity: 0; pointer-events: none; }
body.toolbar-collapsed #toolbar[data-dock='left'] { transform: translate(-120%, -50%); }
body.toolbar-collapsed #toolbar[data-dock='right'] { transform: translate(120%, -50%); }
body.toolbar-collapsed #toolbar[data-dock='top'] { transform: translate(-50%, -160%); }
body.toolbar-collapsed #toolbar[data-dock='bottom'] { transform: translate(-50%, 160%); }

/* Asa para deslizar la barra por el eje en el que está anclada. */
.asa {
  display: grid;
  place-items: center;
  color: var(--text-faint);
  font-size: 11px;
  letter-spacing: 2px;
  cursor: grab;
  user-select: none;
  touch-action: none;
  border-radius: 6px;
  flex: none;
}
#toolbar[data-dock='left'] .asa,
#toolbar[data-dock='right'] .asa { width: 44px; height: 16px; }
#toolbar[data-dock='top'] .asa,
#toolbar[data-dock='bottom'] .asa { width: 16px; height: 42px; writing-mode: vertical-rl; }
.asa:hover { color: var(--text); background: rgba(255, 255, 255, 0.07); }
#toolbar.moviendo { opacity: 0.9; }
#toolbar.moviendo .asa { cursor: grabbing; }

.tool {
  position: relative;
  width: 44px;
  height: 42px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  font-size: 17px;
  color: var(--text-dim);
  transition: background 0.16s, color 0.16s, transform 0.16s var(--ease);
}
.tool:hover { background: rgba(255, 255, 255, 0.07); color: var(--text); transform: translateY(-1px); }
.tool.active { background: var(--accent-soft); color: var(--accent); }
.tool .mini {
  position: absolute;
  bottom: 3px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 8.5px;
  font-family: var(--mono);
  color: var(--text-faint);
  letter-spacing: -0.02em;
}
.tool.active .mini { color: var(--accent); }

/* Herramientas que enseñan su VALOR en vez de un icono: lo que miras de un
   vistazo es el número, no el dibujo. */
.tool.con-valor { flex-direction: column; gap: 1px; }
.tool .valor {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.02em;
}
.tool .etiqueta {
  font-size: 7.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  line-height: 1;
}
.tool.con-valor:hover .valor { color: var(--accent); }
.tool.con-valor.apagado .valor { color: var(--text-faint); font-weight: 600; }

.tool[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 52px;
  top: 50%;
  transform: translateY(-50%) scale(0.94);
  padding: 5px 9px;
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 11.5px;
  color: var(--text);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s, transform 0.14s var(--ease);
  z-index: 5;
}
.tool:hover::after { opacity: 1; transform: translateY(-50%) scale(1); }
#toolbar[data-dock='right'] .tool[data-tip]::after { left: auto; right: 52px; }
#toolbar[data-dock='top'] .tool[data-tip]::after { left: 50%; top: 48px; transform: translateX(-50%); }
#toolbar[data-dock='bottom'] .tool[data-tip]::after { left: 50%; top: auto; bottom: 48px; transform: translateX(-50%); }

/* ---------- Flyout ---------- */
#flyout {
  position: fixed;
  z-index: 60;
  min-width: 264px;
  max-width: 380px;
  padding: 14px;
  background: var(--panel-solid);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: none;
  animation: pop 0.16s var(--ease);
}
#flyout.open { display: block; }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(0.98); } }
#flyout h4 {
  margin: 0 0 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-faint);
  font-weight: 600;
}
.row { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; flex-wrap: wrap; }
.row:last-child { margin-bottom: 0; }
.row .grow { flex: 1; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid transparent;
  font-size: 12px;
  color: var(--text-dim);
  transition: all 0.15s var(--ease);
}
.chip:hover { background: rgba(255, 255, 255, 0.11); color: var(--text); }
.chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }

input[type='text'], input[type='number'], input[type='password'], select {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 13px;
  font-family: var(--mono);
  width: 100%;
  outline: none;
  transition: border-color 0.15s;
}
input:focus, select:focus { border-color: var(--accent); }
label.field { display: block; font-size: 11px; color: var(--text-faint); margin-bottom: 4px; }

.btn {
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.07);
  font-size: 12.5px;
  font-weight: 550;
  transition: all 0.15s var(--ease);
}
.btn:hover { background: rgba(255, 255, 255, 0.13); }
.btn.primary { background: var(--accent); color: #fff; }
.btn.primary:hover { filter: brightness(1.1); }
.btn.danger { background: rgba(242, 73, 75, 0.16); color: var(--sell); }
.btn.danger:hover { background: var(--sell); color: #fff; }
.btn.ghost { border: 1px solid var(--border); background: transparent; }

.switch { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12.5px; }
.switch input { display: none; }
.switch .track {
  width: 34px; height: 19px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.14); position: relative; transition: background 0.2s;
}
.switch .track::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 15px; height: 15px; border-radius: 50%; background: var(--text-dim);
  transition: transform 0.2s var(--ease), background 0.2s;
}
.switch input:checked + .track { background: var(--accent-soft); }
.switch input:checked + .track::after { transform: translateX(15px); background: var(--accent); }

/* ---------- Panel derecho: cuentas + operaciones ---------- */
#panel {
  position: fixed;
  z-index: 43;
  /* Anclado arriba a un lado, JUSTO DEBAJO del HUD (que va centrado y se le
     echaba encima). Nada de flotar en mitad del gráfico. Si lo arrastras, pasa
     a .suelto y manda la posición que guardaste. */
  top: calc(52px + var(--banner-h));
  max-height: calc(100vh - 170px);
  width: 286px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding: 2px;
  scrollbar-width: thin;
}
/* Se aparta del eje de precios para no robarle el arrastre vertical. */
#panel[data-side='right'] { right: calc(var(--eje-w) + 8px); }
/* Las líneas que cruzan todo el gráfico dejan su etiqueta antes del eje. */
.price-line .tag { right: calc(var(--eje-w) + 8px); }
/* Las de una operación en curso ponen el cuadro JUSTO A LA DERECHA del
   sombreado, nunca encima: así el rectángulo se ve limpio. */
.price-line.acotada .tag { left: 100%; right: auto; margin-left: 7px; }
#panel[data-side='left'] { left: 10px; }
#panel.suelto { max-height: calc(100vh - 120px); }
#panel.arrastrando { opacity: 0.92; cursor: grabbing; }
#panel .bloque h5 { cursor: grab; user-select: none; }
#panel.arrastrando .bloque h5 { cursor: grabbing; }
#panel::-webkit-scrollbar { width: 5px; }
#panel::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
#cards { display: flex; flex-direction: column; gap: 8px; }

.bloque {
  background: var(--panel);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 10px;
  box-shadow: var(--shadow);
}
.bloque h5 {
  margin: 0 0 8px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 700;
  display: flex;
  gap: 6px;
  align-items: baseline;
}
.bloque h5 small { font-weight: 500; letter-spacing: 0.02em; text-transform: none; opacity: 0.85; }
.vacio { font-size: 11.5px; color: var(--text-faint); padding: 4px 0 2px; line-height: 1.45; }

.cuenta {
  border-top: 1px solid var(--border);
  padding: 8px 0 7px;
}
.cuenta:first-of-type { border-top: none; padding-top: 2px; }
.cuenta.off { opacity: 0.5; }
.cuenta .cab { display: flex; align-items: center; gap: 6px; }
.cuenta .marca { font-size: 13px; color: var(--accent); width: 13px; flex: none; text-align: center; }
.cuenta.slave .marca { color: var(--entry); }
.cuenta.off .marca { color: var(--text-faint); }
.cuenta .alias {
  flex: 1; min-width: 0; background: transparent; border: 1px solid transparent;
  padding: 2px 5px; font-family: var(--font); font-size: 12.5px; font-weight: 620;
  border-radius: 6px;
}
.cuenta .alias:hover { border-color: var(--border); }
.cuenta .alias:focus { border-color: var(--accent); background: var(--bg-soft); }
.cuenta .live {
  font-size: 9px; font-weight: 800; letter-spacing: 0.08em;
  background: var(--sell); color: #fff; padding: 1px 5px; border-radius: 4px;
}
.cuenta .datos {
  display: flex; gap: 8px; align-items: baseline; margin: 3px 0 6px 19px;
  font-family: var(--mono); font-size: 11px; color: var(--text-dim);
}
.cuenta .datos .saldo { color: var(--text); font-weight: 600; }
.cuenta .datos .login { margin-left: auto; opacity: 0.55; }
.cuenta .mandos { display: flex; gap: 4px; margin-left: 19px; flex-wrap: wrap; }
.cuenta .rol, .cuenta .copia {
  font-size: 10.5px; padding: 3px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.06); color: var(--text-dim);
  border: 1px solid transparent;
}
.cuenta .rol:hover, .cuenta .copia:hover { background: rgba(255, 255, 255, 0.12); color: var(--text); }
.cuenta .rol.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 650; }
.cuenta .copia { background: rgba(78, 161, 255, 0.14); color: var(--entry); }
.cuenta .mult {
  width: 58px; padding: 2px 6px; font-size: 10.5px; border-radius: 999px;
}

.card {
  background: var(--panel);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-left: 3px solid var(--trade-color, var(--entry));
  border-radius: var(--radius);
  padding: 10px 12px;
  box-shadow: var(--shadow);
  animation: slide-in 0.24s var(--ease);
  transition: border-color 0.2s, transform 0.2s var(--ease);
  flex: none;
}
@keyframes slide-in { from { opacity: 0; transform: translateX(14px); } }
.card:hover { transform: translateX(-2px); }
.card.focused { border-color: var(--trade-color, var(--accent)); }
.card .head { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.card .num {
  font-family: var(--mono); font-size: 11px; color: var(--trade-color, var(--entry));
  font-weight: 700;
}
.card .sym { font-weight: 640; font-size: 13.5px; letter-spacing: 0.01em; }
.card .mode { font-size: 11px; opacity: 0.75; }
.card .pnl { margin-left: auto; font-family: var(--mono); font-weight: 650; font-variant-numeric: tabular-nums; }
.card .meta {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px;
  font-size: 11px; color: var(--text-dim); margin-bottom: 8px;
}
.card .meta b { display: block; font-family: var(--mono); color: var(--text); font-size: 12px; font-weight: 600; }
.card .acts { display: flex; gap: 4px; flex-wrap: wrap; }
.card .acts .btn { padding: 5px 8px; font-size: 11px; }
.card .legs { display: flex; gap: 4px; margin-top: 7px; flex-wrap: wrap; }
.leg-badge {
  font-size: 10px; padding: 2px 7px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.07); color: var(--text-dim); font-family: var(--mono);
}
.leg-badge.err { background: rgba(242, 73, 75, 0.2); color: var(--sell); cursor: help; }
.leg-badge.master { background: var(--accent-soft); color: var(--accent); }

.pill {
  display: flex; align-items: center; gap: 7px; padding: 6px 11px;
  background: var(--panel); border: 1px solid var(--border);
  border-left: 3px solid var(--trade-color, var(--entry));
  border-radius: 999px; box-shadow: var(--shadow); font-size: 12px; cursor: pointer;
  flex: none;
}

/* ---------- Boton de ejecucion ---------- */
#execute {
  position: relative;
  min-width: 216px;
  padding: 13px 18px;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  box-shadow: 0 12px 34px rgba(255, 61, 129, 0.34);
  text-align: left;
  transition: transform 0.18s var(--ease), box-shadow 0.18s, opacity 0.18s;
}
#execute:hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(255, 61, 129, 0.44); }
#execute:disabled { opacity: 0.42; cursor: not-allowed; transform: none; }
#execute .big { display: block; font-size: 15px; font-weight: 700; letter-spacing: 0.02em; }
#execute .small { display: block; font-size: 11.5px; opacity: 0.92; font-family: var(--mono); margin-top: 2px; }
#execute.buy { background: var(--buy); box-shadow: 0 12px 34px rgba(35, 201, 139, 0.32); }
#execute.sell { background: var(--sell); box-shadow: 0 12px 34px rgba(242, 73, 75, 0.32); }

/* Zona de operar: los botones de MERCADO/LIMIT quedan alineados con el borde
   IZQUIERDO del botón de ejecutar, no con el derecho. */
#zona-op {
  position: fixed;
  /* Justo al borde del eje de precios y por encima de la escala de tiempo:
     ni un píxel encima de los números del gráfico. */
  right: calc(var(--eje-w) + 8px);
  bottom: calc(var(--tiempo-h) + 8px);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
#entrybar {
  display: flex;
  align-items: center;
  gap: 8px;
}
#entrybar .grupo {
  display: flex;
  background: var(--panel);
  backdrop-filter: blur(18px);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  box-shadow: var(--shadow);
}
.ent {
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  transition: background 0.15s, color 0.15s;
}
.ent:hover { color: var(--text); }
/* Azul (el color de la ENTRADA), para no confundirlo con el rosa/verde/rojo de
   los botones de acción: estos solo dicen CÓMO entras, no ejecutan nada. */
.ent.on { background: var(--entry); color: #04070c; }
/* El LADO sí lleva su color de siempre: verde compra, rojo venta. Marcado en
   crudo solo el elegido; el otro se queda apagado. */
.ent.lado-buy.on { background: var(--buy); color: #04070c; }
.ent.lado-sell.on { background: var(--sell); color: #04070c; }
.ent.lado-buy:hover { color: var(--buy); }
.ent.lado-sell:hover { color: var(--sell); }
.ent.lado-buy.on:hover, .ent.lado-sell.on:hover { color: #04070c; }

#cancel {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  font-size: 13px;
  box-shadow: var(--shadow);
}
#cancel:hover { color: var(--sell); border-color: var(--sell); }

#kill {
  position: fixed;
  left: 16px;
  bottom: calc(var(--tiempo-h) + 8px);
  z-index: 50;
  padding: 10px 13px;
  border-radius: var(--radius);
  background: rgba(242, 73, 75, 0.14);
  border: 1px solid rgba(242, 73, 75, 0.4);
  color: var(--sell);
  font-size: 12px;
  font-weight: 600;
  transition: all 0.16s var(--ease);
}
#kill:hover { background: var(--sell); color: #fff; }

/* Zona sombreada de la operación (entrada→objetivo y entrada→stop). */
.zona {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

/* ---------- Herramientas de dibujo ---------- */
/* El SVG cubre el gráfico pero deja pasar el ratón: solo las figuras lo cazan,
   para que seguir moviendo el gráfico sea lo normal y dibujar la excepción. */
#dibujos {
  position: absolute;
  inset: 0;
  z-index: 6;               /* encima de las velas, DEBAJO de las líneas de SL/TP */
  pointer-events: none;
  overflow: visible;
}
#dibujos .dibujo {
  pointer-events: stroke;
  cursor: move;
  fill: none;
  stroke: var(--dibujo);
  stroke-width: 1;          /* lo más fino que se puede pintar */
}
/* El cuadro es SOLO sombreado: sin borde. Marca una zona, no la encierra. */
#dibujos rect.dibujo {
  pointer-events: all;
  stroke: none;
  fill: var(--dibujo-relleno);
}
/* Elegido se nota por el trazo discontinuo, no engordando la línea. */
#dibujos .dibujo.elegido { stroke-dasharray: 5 3; }
#dibujos rect.dibujo.elegido {
  stroke: var(--dibujo);
  stroke-width: 1;
  stroke-dasharray: 5 3;
}
/* Las asas: pequeñas, pero con zona de toque generosa (el trazo grueso y
   transparente agranda el blanco sin agrandar el punto que se ve). */
#dibujos .asa-dibujo {
  pointer-events: all;
  cursor: grab;
  fill: var(--bg);
  stroke: var(--dibujo);
  stroke-width: 2;
  paint-order: stroke;
}
#dibujos .asa-dibujo:hover { fill: var(--dibujo); }
#dibujos .quitar-dibujo { pointer-events: all; cursor: pointer; }
#dibujos .quitar-dibujo circle { fill: var(--sell); }
#dibujos .quitar-dibujo text { fill: #fff; font-size: 10px; font-weight: 900; }

/* Mientras hay una herramienta elegida, esta capa se traga el arrastre para que
   dibuje en vez de mover el gráfico. */
#captura-dibujo {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: none;
  cursor: crosshair;
  touch-action: none;
}
#captura-dibujo.activa { display: block; }

/* ---------- Lineas del grafico ---------- */
.price-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px dashed var(--line-color, var(--entry));
  pointer-events: none;
  transition: opacity 0.2s;
}
.price-line.solid { border-top-style: solid; }
.price-line.dim { opacity: 0.24; }
.price-line .tag {
  position: absolute;
  right: 0;
  top: -11px;
  padding: 2px 9px;
  border-radius: 6px;
  background: var(--line-color, var(--entry));
  color: #04070c;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--mono);
  white-space: nowrap;
  pointer-events: auto;
  cursor: ns-resize;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.42);
  user-select: none;
  touch-action: none;
}
.price-line .tag.locked { cursor: default; }
/* La ✕ de quitar una promediada: solo se ve cuando la línea la lleva, y no
   arrastra la línea (se traga el gesto). */
.price-line .tag .cerrar {
  display: none;
  margin-left: 7px;
  width: 14px;
  height: 14px;
  line-height: 1;
  border-radius: 50%;
  background: rgba(4, 7, 12, 0.22);
  color: inherit;
  font-size: 9px;
  font-weight: 900;
  cursor: pointer;
  touch-action: none;
  vertical-align: middle;
}
.price-line .tag.con-cerrar { display: flex; align-items: center; }
.price-line .tag.con-cerrar .cerrar { display: inline-flex; align-items: center; justify-content: center; }
.price-line .tag .cerrar:hover { background: var(--sell); color: #fff; }
.price-line .tag small { opacity: 0.78; font-weight: 600; margin-left: 5px; }
.price-line .grab {
  position: absolute; left: 0; right: 0; top: -7px; height: 15px;
  pointer-events: auto; cursor: ns-resize; touch-action: none;
}
.price-line.locked .grab { pointer-events: none; cursor: default; }

/* ---------- Paleta de simbolos ---------- */
#palette, #help, #gate, #modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  background: rgba(4, 6, 10, 0.62);
  backdrop-filter: blur(7px);
}
#palette.open, #help.open, #gate.open, #modal.open { display: flex; }
#gate, #modal { align-items: center; padding-top: 0; }

.sheet {
  width: min(620px, 92vw);
  max-height: 72vh;
  background: var(--panel-solid);
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: pop 0.18s var(--ease);
}
.sheet .search { padding: 14px; border-bottom: 1px solid var(--border); }
.sheet .search input { font-size: 16px; border: none; background: transparent; padding: 4px 2px; }
.sheet .body { overflow-y: auto; padding: 8px; }
.sheet .foot { padding: 10px 14px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--text-faint); }

.result {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  border-radius: var(--radius-sm); cursor: pointer;
}
.result:hover, .result.sel { background: var(--accent-soft); }
.result .name { font-weight: 620; font-size: 13.5px; }
.result .desc { color: var(--text-faint); font-size: 11.5px; }
.result .star { margin-left: auto; opacity: 0.4; font-size: 14px; }
.result .star.on { opacity: 1; }

#help .sheet { width: min(760px, 94vw); }
.keys { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; padding: 14px; }
.keys div { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-dim); }
kbd {
  font-family: var(--mono); font-size: 11px; padding: 2px 7px; border-radius: 5px;
  background: rgba(255, 255, 255, 0.09); border: 1px solid var(--border); color: var(--text);
  min-width: 22px; text-align: center;
}

/* ---------- Avisos ---------- */
#toasts {
  position: fixed; bottom: calc(var(--tiempo-h) + 76px);
  right: calc(var(--eje-w) + 8px); z-index: 90;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
  pointer-events: none; max-width: min(440px, 88vw);
}
.toast {
  padding: 11px 14px; border-radius: var(--radius);
  background: var(--panel-solid); border: 1px solid var(--border-strong);
  box-shadow: var(--shadow); font-size: 12.5px; animation: slide-in 0.22s var(--ease);
  pointer-events: auto; border-left: 3px solid var(--accent);
}
.toast.err { border-left-color: var(--sell); }
.toast.ok { border-left-color: var(--buy); }
.toast.warn { border-left-color: var(--warn); }
.toast b { display: block; margin-bottom: 3px; }
.toast .accion {
  display: block;
  margin-top: 7px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--border-strong);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.toast .accion:hover { background: var(--entry); color: #04070c; }
.toast .code { font-family: var(--mono); font-size: 10.5px; color: var(--text-faint); margin-top: 4px; }

#banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 70;
  padding: 7px 16px; text-align: center; font-size: 12.5px; font-weight: 600;
  background: var(--warn); color: #111; display: none;
}
#banner.on { display: block; }

/* ---------- Movil / iPad ---------- */
@media (max-width: 860px) {
  #toolbar[data-dock] {
    left: 0; right: 0; bottom: 0; top: auto;
    width: 100%; height: 58px; flex-direction: row;
    transform: none; border-radius: 0;
    justify-content: space-around; overflow-x: auto;
  }
  body.toolbar-collapsed #toolbar[data-dock] { transform: translateY(120%); }
  #panel {
    top: auto; bottom: 132px; left: 8px; right: 8px; width: auto;
    max-height: 44vh;
  }
  /* El botón de ejecutar ocupa el ancho que queda; el kill-switch se queda en su
     esquina sin que se pisen (en el móvil no hay sitio para los dos sueltos). */
  #zona-op { right: 8px; left: 76px; bottom: 66px; align-items: stretch; }
  #execute { min-width: 0; padding: 10px 13px; width: 100%; }
  #execute .big { font-size: 14px; }
  #execute .small { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #kill { left: 8px; bottom: 66px; padding: 10px 11px; font-size: 11px; }
  #toasts { bottom: 130px; right: 8px; left: 8px; align-items: stretch; }
  #hud { top: calc(6px + var(--banner-h)); font-size: 11.5px; gap: 10px; padding: 6px 11px; }
  .price-line .tag { right: 62px; font-size: 10.5px; }
}

.hidden { display: none !important; }
.spin { animation: spin 1s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Panel de cuentas plegado: una línea y a volar (el icono 👥 lo abre y cierra). */
.bloque.plegado { cursor: pointer; padding: 7px 10px; }
.bloque.plegado:hover { border-color: var(--border-strong); }
.bloque h5 .chevron { margin-left: auto; color: var(--text-faint); font-size: 11px; }
.mini-btn {
  margin-left: 4px; color: var(--text-faint); font-size: 12px; line-height: 1;
  padding: 2px 5px; border-radius: 6px;
}
.mini-btn:hover { background: rgba(255, 255, 255, 0.1); color: var(--text); }
.bloque h5 .mini-btn:first-of-type { margin-left: auto; }

/* Botón para devolver el panel a su anclaje (solo sale si lo has movido). */
/* Solo la chincheta, pero con el mismo botón de acento de antes. */
#panel .anclar {
  align-self: flex-end;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  font-size: 12px;
  line-height: 1;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent);
  margin-bottom: 2px;
  transition: background 0.15s, transform 0.15s var(--ease);
}
#panel .anclar:hover {
  background: var(--accent);
  color: #fff;
  transform: scale(1.08);
}

/* Botón esperando el segundo clic. */
#execute.confirmando {
  background: var(--warn);
  color: #111;
  box-shadow: 0 12px 34px rgba(255, 181, 71, 0.4);
  animation: latido 0.9s ease-in-out infinite;
}
@keyframes latido { 50% { transform: translateY(-2px); } }