/* ─────────── Trading Desk — tema ─────────── */
:root {
  --bg: #000000;
  --bg-1: #08090b;
  --panel: #0a0b0e;
  --panel-2: #0e1014;
  --panel-3: #13161b;
  --borde: #1b1e24;
  --borde-2: #262a31;
  --txt: #e8eaed;
  --txt-2: #9aa0a9;
  --txt-3: #62676f;
  --verde: #2fd480;
  --verde-2: #1fcf7a;
  --verde-bg: rgba(47, 212, 128, .10);
  --verde-borde: rgba(47, 212, 128, .45);
  --rojo: #f23d6d;
  --rojo-bg: rgba(242, 61, 109, .12);
  --azul: #4d8dff;
  --azul-bg: rgba(77, 141, 255, .14);
  --ambar: #f5a524;
  --ambar-bg: rgba(245, 165, 36, .10);
  --rosa: #ff5c7a;
  --radio: 6px;
  --fuente: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color-scheme: dark;
}
:root[data-tema="claro"] {
  --bg: #eef0f3; --bg-1: #f6f7f9; --panel: #ffffff; --panel-2: #f7f8fa; --panel-3: #eef0f3;
  --borde: #e1e4e8; --borde-2: #d3d7dc; --txt: #14171c; --txt-2: #5b626c; --txt-3: #8a919b;
  --verde-bg: rgba(20, 170, 90, .10); --verde: #13a35d; --verde-2: #13a35d;
  --leyenda-bg: rgba(255,255,255,.82);
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--bg); color: var(--txt); font-family: var(--fuente); font-size: 11px; line-height: 1.35; overflow: hidden; -webkit-font-smoothing: antialiased; }
body { font-feature-settings: 'tnum' 1, 'cv11' 1; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
input, select { background: var(--panel-2); border: 1px solid var(--borde-2); border-radius: 5px; padding: 6px 8px; outline: none; }
input:focus, select:focus { border-color: var(--azul); box-shadow: 0 0 0 2px var(--azul-bg); }
select { appearance: none; padding-right: 22px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%239aa0a9' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 7px center; }
input[type=checkbox] { appearance: none; width: 13px; height: 13px; border: 1px solid var(--borde-2); border-radius: 3px; background: var(--panel-2); display: inline-grid; place-content: center; padding: 0; cursor: pointer; flex: none; }
input[type=checkbox]:checked { background: var(--verde-2); border-color: var(--verde-2); }
input[type=checkbox]:checked::after { content: ''; width: 7px; height: 4px; border: solid #04130b; border-width: 0 0 2px 2px; transform: rotate(-45deg) translate(1px, -1px); }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: #262a31; border-radius: 3px; }
::-webkit-scrollbar-track { background: transparent; }
.ico { width: 13px; height: 13px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico.sm { width: 11px; height: 11px; }
.ico.lg { width: 15px; height: 15px; }
.num { font-variant-numeric: tabular-nums; }
.verde { color: var(--verde); } .rojo { color: var(--rojo); } .azul { color: var(--azul); } .ambar { color: var(--ambar); } .gris { color: var(--txt-2); } .gris3 { color: var(--txt-3); }
.oculto { display: none !important; }

/* ─────────── Barra superior ─────────── */
.barra { height: 34px; display: flex; align-items: center; gap: 2px; padding: 0 10px; background: var(--bg-1); border-bottom: 1px solid var(--borde); user-select: none; -webkit-app-region: drag; }
.marca { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12px; margin-right: 12px; letter-spacing: -.01em; }
.marca { font-size: 13px; font-weight: 600; gap: 8px; }
.logo-mark { width: 22px; height: 22px; border-radius: 50%; background: var(--txt); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.logo-mark svg { width: 11px; height: 11px; stroke: var(--bg); }
.pestana { height: 34px; display: flex; align-items: center; gap: 5px; padding: 0 9px; color: var(--txt-2); font-weight: 500; position: relative; }
.pestana:hover { color: var(--txt); }
.pestana.activa { color: var(--txt); }
.pestana.activa::after { content: ''; position: absolute; left: 6px; right: 6px; bottom: -1px; height: 2px; background: var(--azul); border-radius: 2px; }
.pestana .punto { width: 6px; height: 6px; border-radius: 50%; background: var(--verde); display: none; }
.pestana.vivo .punto { display: block; }
.btn-ico { width: 24px; height: 24px; display: grid; place-items: center; color: var(--txt-2); border-radius: 5px; }
.btn-ico:hover { color: var(--txt); background: var(--panel-3); }
.barra .espacio { flex: 1; }
.usuario { display: flex; align-items: center; gap: 6px; color: var(--txt-2); margin: 0 4px; }
.avatar { width: 16px; height: 16px; border-radius: 50%; background: var(--azul); color: #fff; display: grid; place-items: center; font-size: 9px; font-weight: 700; }
.papel { font-size: 9px; font-weight: 700; letter-spacing: .06em; color: var(--ambar); border: 1px solid rgba(245,165,36,.45); border-radius: 4px; padding: 2px 6px; margin-right: 8px; }

.desk { position: absolute; top: 34px; left: 0; right: 0; bottom: 0; display: none; }
.desk.activo { display: block; }

/* ─────────── Paneles ─────────── */
.panel { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.panel-cab { display: flex; align-items: flex-start; gap: 8px; padding: 9px 10px 6px; }
.panel-cab .ico { color: var(--txt-2); margin-top: 2px; }
.titulo { font-weight: 700; font-size: 12px; color: var(--txt); }
.sub { color: var(--txt-2); font-size: 10px; margin-top: 1px; }
.contador { margin-left: auto; font-size: 9.5px; color: var(--txt-2); min-width: 16px; height: 16px; padding: 0 5px; border-radius: 8px; background: var(--panel-3); display: grid; place-items: center; }
.etiqueta { font-size: 9px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--txt-2); }
.vacio { color: var(--txt-2); padding: 4px 10px 10px; font-size: 10.5px; }

.pildora { display: inline-flex; align-items: center; gap: 4px; height: 19px; padding: 0 7px; border-radius: 10px; font-size: 10px; font-weight: 600; border: 1px solid var(--borde-2); color: var(--txt-2); white-space: nowrap; }
.pildora.verde { color: var(--verde); border-color: var(--verde-borde); background: var(--verde-bg); }
.pildora.rojo { color: var(--rojo); border-color: rgba(242,61,109,.4); background: var(--rojo-bg); }
.pildora.ambar { color: var(--ambar); border-color: rgba(245,165,36,.4); background: var(--ambar-bg); }
.pildora .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 5px; border: 1px solid var(--borde-2); background: var(--panel-2); color: var(--txt); font-weight: 600; font-size: 11px; white-space: nowrap; }
.btn:hover:not(:disabled) { border-color: #3a3f48; background: var(--panel-3); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.blanco { background: #f2f3f5; color: #0b0c0e; border-color: #f2f3f5; }
.btn.blanco:hover:not(:disabled) { background: #fff; }
.btn.fantasma { background: transparent; }
.btn.chico { height: 22px; padding: 0 8px; font-size: 10.5px; }

.segmentado { display: flex; background: var(--panel-2); border: 1px solid var(--borde); border-radius: 6px; padding: 2px; }
.segmentado button { flex: 1; height: 22px; border-radius: 4px; color: var(--txt-2); font-weight: 600; font-size: 10.5px; }
.segmentado button.activo { background: var(--panel-3); color: var(--txt); box-shadow: 0 0 0 1px var(--borde-2) inset; }

.tfs { display: flex; gap: 2px; }
.tfs button { height: 20px; padding: 0 6px; border-radius: 4px; color: var(--txt-2); font-size: 10.5px; font-weight: 500; }
.tfs button:hover { color: var(--txt); }
.tfs button.activo { background: var(--panel-3); color: var(--txt); box-shadow: 0 0 0 1px var(--borde-2) inset; }

.chip-sym { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: 4px; color: var(--txt-2); font-weight: 700; font-size: 10.5px; border: 1px solid transparent; }
.chip-sym.activo { background: var(--panel-3); color: var(--txt); border-color: var(--borde-2); }
.chip-sym .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--txt-3); }
.chip-sym.on .dot { background: var(--verde); }

/* Tablas */
.tabla { width: 100%; border-collapse: collapse; }
.tabla th { position: sticky; top: 0; z-index: 1; background: var(--panel); text-align: left; font-size: 8.5px; font-weight: 600; letter-spacing: .05em; color: var(--txt-2); text-transform: uppercase; padding: 5px 8px; border-bottom: 1px solid var(--borde); white-space: nowrap; }
.tabla td { padding: 4px 8px; font-size: 10.5px; white-space: nowrap; border-bottom: 1px solid rgba(255,255,255,.025); }
.tabla tr.clic { cursor: pointer; }
.tabla tr.clic:hover td { background: var(--panel-2); }

/* Menú flotante */
.menu { position: absolute; z-index: 50; min-width: 150px; background: var(--panel-2); border: 1px solid var(--borde-2); border-radius: 6px; padding: 4px; box-shadow: 0 10px 30px rgba(0,0,0,.55); }
.menu label, .menu .opc { display: flex; align-items: center; gap: 7px; padding: 5px 7px; border-radius: 4px; cursor: pointer; font-size: 10.5px; color: var(--txt); white-space: nowrap; }
.menu label:hover, .menu .opc:hover { background: var(--panel-3); }
.menu .raya { width: 14px; height: 2px; border-radius: 1px; flex: none; }

/* Modal */
.velo { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.62); display: grid; place-items: center; }
.modal { background: var(--panel); border: 1px solid var(--borde-2); border-radius: 8px; box-shadow: 0 24px 60px rgba(0,0,0,.6); max-height: 88vh; display: flex; flex-direction: column; }
.modal-cab { display: flex; align-items: flex-start; gap: 8px; padding: 12px 14px 8px; }
.modal-cab .x { margin-left: auto; }
.modal-cuerpo { padding: 4px 14px 10px; overflow: auto; }
.modal-pie { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 14px 12px; }

/* Toast */
.toasts { position: fixed; right: 14px; bottom: 14px; z-index: 200; display: flex; flex-direction: column; gap: 6px; }
.toast { background: var(--panel-2); border: 1px solid var(--borde-2); border-left: 3px solid var(--azul); border-radius: 6px; padding: 8px 12px; min-width: 240px; max-width: 360px; box-shadow: 0 8px 24px rgba(0,0,0,.5); font-size: 11px; animation: entra .18s ease-out; }
.toast.error { border-left-color: var(--rojo); } .toast.ok { border-left-color: var(--verde); } .toast.aviso { border-left-color: var(--ambar); }
@keyframes entra { from { transform: translateY(6px); opacity: 0; } }

/* ─────────── Gráfica (componente) ─────────── */
.grafica { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.grafica .lienzo { position: absolute; inset: 0; }
.grafica .capa { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; overflow: visible; }
.grafica .capa.dibujando { pointer-events: all; cursor: crosshair; }
.grafica .capa .forma { pointer-events: visibleStroke; cursor: move; }
.grafica .capa .forma.relleno { pointer-events: visiblePainted; }
.grafica .capa .asa { pointer-events: all; cursor: grab; fill: var(--panel); stroke: var(--azul); stroke-width: 1.5; }
.grafica .fondo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.marca-agua { position: absolute; left: 0; right: 60px; top: 42%; transform: translateY(-50%); text-align: center; pointer-events: none; z-index: 1; color: rgba(255,255,255,.07); }
:root[data-tema="claro"] .marca-agua { color: rgba(0,0,0,.06); }
.marca-agua b { display: block; font-size: 34px; font-weight: 800; letter-spacing: .02em; }
.marca-agua span { font-size: 9px; font-weight: 600; }
.leyenda { position: absolute; left: 8px; top: 6px; z-index: 4; display: flex; gap: 6px; align-items: center; font-size: 9.5px; color: var(--txt-2); pointer-events: none; white-space: nowrap; background: var(--leyenda-bg, rgba(10,11,14,.72)); border-radius: 3px; padding: 1px 5px; }
.leyenda b { color: var(--txt); font-weight: 700; }
.leyenda .v { color: var(--txt); }
.estado-graf { position: absolute; left: 8px; bottom: 26px; z-index: 4; font-size: 10px; color: var(--txt-2); pointer-events: none; }
.texto-dib { font: 600 11px var(--fuente); }
.velo.flotante { background: transparent; pointer-events: none; display: block; }
.velo.flotante .modal { position: absolute; pointer-events: auto; max-height: 80vh; box-shadow: 0 14px 40px rgba(0,0,0,.65); }
.switch-cuenta { display: flex; gap: 2px; padding: 2px; border-radius: 6px; border: 1px solid var(--borde-2); background: var(--panel-2); margin-right: 6px; }
.switch-cuenta button { height: 20px; padding: 0 9px; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: .03em; color: var(--txt-3); }
.switch-cuenta.papel button.activo { background: rgba(245,165,36,.18); color: var(--ambar); }
.switch-cuenta.real button.activo { background: rgba(242,61,109,.2); color: var(--rojo); }
.switch-cuenta button.bloq { opacity: .45; }
.cuenta-nombre { font-size: 10px; color: var(--txt-2); margin-right: 10px; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.modo-real .barra { box-shadow: inset 0 -2px 0 rgba(242,61,109,.6); }
.btn.rojo-fuerte { background: var(--rojo); border-color: var(--rojo); color: #fff; }

/* ─────────── Teléfono (≤ 760px) ───────────
   Solo reglas dentro de este media query: el layout de escritorio no cambia.
   Cada desk deja de ser una pantalla fija y hace scroll vertical dentro de .desk
   (html/body siguen con overflow hidden; la barra superior queda fija arriba). */
@media (max-width: 760px) {
  .barra { height: 44px; padding: 0 6px; gap: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-app-region: no-drag; }
  .barra::-webkit-scrollbar { display: none; }
  .barra > * { flex: none; }
  .barra .espacio { flex: 1 0 4px; }
  .marca { margin-right: 4px; }
  .marca > span:not(.logo-mark) { display: none; }
  /* Pestañas: icono arriba y etiqueta corta abajo. */
  .pestana { height: 44px; flex-direction: column; justify-content: center; gap: 2px; padding: 0 8px; font-size: 9.5px; }
  .pestana > span { display: none; }
  .pestana::before { order: 2; }
  .pestana[data-desk="auto"]::before { content: 'Auto'; }
  .pestana[data-desk="manual"]::before { content: 'Manual'; }
  .pestana[data-desk="chart"]::before { content: 'Chart'; }
  .pestana .ico { width: 15px; height: 15px; }
  .pestana .punto { position: absolute; top: 7px; right: 5px; }
  #b-recargar, #b-popout, #barra-cuenta, .usuario { display: none; }
  .barra .btn-ico { width: 32px; height: 32px; }
  .switch-cuenta { margin: 0 2px 0 4px; }
  .switch-cuenta button { height: 28px; padding: 0 10px; }

  .desk { top: 44px; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

  /* Paneles flotantes (Chart Settings) y menús: siempre dentro de la pantalla. */
  .velo.flotante .modal { left: 3vw !important; top: 52px !important; width: 94vw !important; max-height: calc(100vh - 60px) !important; }
  .modal { max-height: 90vh; }
  .menu { max-width: calc(100vw - 12px); }
  .toasts { left: 10px; right: 10px; bottom: 10px; }
  .toast { min-width: 0; max-width: none; }
}