/* BAR REPLAY -- tema oscuro estilo terminal de TradingView.
   La paleta son los valores del tema oscuro de TradingView, no una interpretación: es lo que el
   usuario tiene delante cuando compara. */

:root {
  --bg:             #131722;  /* fondo único de gráfico y barras: sin cortes marcados entre zonas */
  --bg-flotante:    #1e222d;  /* píldoras, popovers, panel journal: elevación, no borde */
  --bg-hover:       #2a2e39;
  --borde:          #2a2e39;
  --borde-flotante: #363a45;
  --texto:          #d1d4dc;
  --texto-tenue:    #787b86;
  --acento:         #2962ff;  /* herramienta activa, botón Cargar, foco */
  --verde:          #089981;
  --rojo:           #f23645;
  --sombra:         0 2px 8px rgba(0, 0, 0, 0.45);
  --ui:   -apple-system, "Segoe UI", system-ui, sans-serif;
  --dato: "Consolas", "Courier New", monospace;
}

/* ================================================================================================
   EL AVISO MÁS IMPORTANTE DE ESTE ARCHIVO.

   El atributo `hidden` de HTML solo oculta porque el navegador trae `[hidden] { display: none }`
   en SU hoja de estilos. En la cascada, una regla del AUTOR le gana siempre a una del navegador,
   sin importar la especificidad. Así que en el momento en que un selector de acá declara
   `display: flex` (o grid, o block) sobre un elemento que se muestra y se oculta con `hidden`,
   ese `hidden` DEJA DE FUNCIONAR EN SILENCIO -- el JavaScript lo pone, el DOM lo tiene, y el
   elemento se sigue viendo.

   Eso es exactamente lo que pasó con el panel de atajos: `.ayuda-atajos { display: flex }` lo
   dejaba visible desde que cargaba la página, y como es un overlay de `inset: 0` sin
   `pointer-events: none`, además se comía los clicks de toda la pantalla. Los cuatro caminos de
   cierre funcionaban perfecto y no servía ninguno.

   Esta regla es el cinturón. Va PRIMERO y con `!important` a propósito: cualquier `display` que
   se agregue más abajo, hoy o dentro de un año, no puede volver a romperlo.
================================================================================================ */
[hidden] { display: none !important; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;          /* la app ocupa exactamente el viewport: nada de scroll de página */
  background: var(--bg);
  color: var(--texto);
  font-family: var(--ui);
  font-size: 13px;
  /* Sin zoom por doble toque. Las zonas que necesitan el gesto entero (lienzo, botones de mantener
     pulsado) traen su propio touch-action: el efectivo es el más estricto de los dos, así que no se pisan. */
  touch-action: manipulation;
}

body { display: flex; flex-direction: column; }

/* ---- Botones base ---------------------------------------------------------------------------- */
button, select, input {
  font-family: inherit;
  font-size: 12px;
  color: var(--texto);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 4px 8px;
}

button { cursor: pointer; }
button:hover { background: var(--bg-hover); }

input, select {
  background: var(--bg);
  border-color: var(--borde);
  padding: 4px 6px;
}

input:focus, select:focus { outline: none; border-color: var(--acento); }

.btn-plano {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  color: var(--texto);
}
.btn-plano.activa { color: var(--acento); }

.btn-primario {
  background: var(--acento);
  color: #fff;
  border-color: var(--acento);
  font-weight: 600;
  height: 28px;
}
.btn-primario:hover { background: #1e53e5; }
.btn-primario.ancho { width: 100%; margin-top: 8px; height: 30px; }

.btn-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  color: var(--texto-tenue);
}
.btn-icono:hover { color: var(--texto); }
#btn-objetos-temporalidad.activa, #btn-iman.activa { color: var(--acento); background: rgba(41, 98, 255, .12); }

/* Los SVG son todos de trazo, viewBox 24x24. Un solo lugar define su aspecto. */
.ico {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.caret { color: var(--texto-tenue); font-size: 10px; }
.empuje { flex: 1; }
.sep-v { width: 1px; height: 16px; background: var(--borde-flotante); margin: 0 2px; }

/* Favoritos de dibujo en la píldora de posición: un click directo, ver `renderFavoritosPildora`
   en app.js. Mismo tamaño que cualquier botón de ícono de la píldora. */
.pildora-favoritos { display: inline-flex; align-items: center; gap: 2px; }
.pildora-favoritos .btn-icono.activa { color: var(--acento); }

/* Mantener pulsado no selecciona texto ni abre el menú del sistema (en iPhone: Copiar, Traducir,
   Nueva nota rápida). Va en la barra superior, en la píldora de posición (con sus favoritos) y en la
   del replay. Los campos editables quedan afuera. */
.barra-sup, .pildora-pos, .pildora-replay {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.barra-sup input, .barra-sup textarea, .barra-sup [contenteditable="true"],
.pildora input, .pildora textarea, .pildora [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}

/* Los cuatro pasos del replay, en orden ⟨⟨ ⟨ ⟩ ⟩⟩, con hueco entre ellos (en PC, 8 px). */
.pildora-pasos { display: inline-flex; align-items: center; gap: 8px; }

/* ---- Barra superior --------------------------------------------------------------------------- */
.barra-sup {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 40px;
  flex: 0 0 40px;
  padding: 0 8px;
  border-bottom: 1px solid var(--borde);
}

.tf-favoritos {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(28vw, 320px);
  overflow-x: auto;
  scrollbar-width: thin;
}
/* Las favoritas de la barra superior van sueltas, una al lado de otra como los indicadores: sin recuadro
   ni scroll propio. Quien desliza es la barra entera (regla móvil de .barra-sup). */
#tf-favoritos { display: contents; overflow: visible; max-width: none; }
#tf-favoritos[hidden] { display: none; }
.tf-favorito { flex: 0 0 auto; padding: 4px 6px; white-space: nowrap; }
.tf-favorito.activa { color: var(--acento); background: rgba(41, 98, 255, .12); }
.tf-favorito:disabled { opacity: .35; cursor: default; }
#btn-menu-tf, #btn-sec-menu-tf { flex-shrink: 0; white-space: nowrap; }
#pop-tf, #pop-sec-tf { width: 260px; max-height: calc(100vh - 60px); }
.tf-ayuda { font-size: 11px; color: var(--texto-tenue); margin: 6px 0; line-height: 1.45; }
.tf-lista { max-height: min(58vh, 480px); overflow-y: auto; overscroll-behavior: contain; }
.tf-grupo { font-size: 10px; color: var(--texto-tenue); padding: 10px 8px 4px; text-transform: uppercase; }
.tf-fila { display: flex; align-items: center; }
.tf-elegir { flex: 1; text-align: left; background: transparent; border: 0; padding: 7px 8px; }
.tf-elegir.activa { color: var(--acento); background: rgba(41, 98, 255, .12); }
.tf-elegir:disabled { opacity: .4; cursor: default; }
.tf-estrella { flex: 0 0 32px; border: 0; background: transparent; color: var(--texto-tenue); font-size: 18px; padding: 2px; }
.tf-estrella.activa { color: #f2c94c; }
.tf-elegir:not(:disabled):hover, .tf-estrella:hover { background: var(--borde); }
.tf-elegir:focus-visible, .tf-estrella:focus-visible, .tf-favorito:focus-visible { outline: 1px solid var(--acento); outline-offset: -1px; }

.marca {
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--texto-tenue);
  font-size: 11px;
  margin-right: 8px;
}

.marca-sesion {
  font-size: 12px;
  color: var(--texto);
  font-weight: 600;
  margin-right: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.badge-fondeo {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--rojo);
  background: rgba(242, 54, 69, 0.18);
  border-radius: 4px;
  padding: 2px 6px;
  margin-right: 8px;
  white-space: nowrap;
}

#btn-fondeo { cursor: pointer; }
#dlg-fondeo, #dlg-fondeo-aviso {
  width: min(440px, calc(100vw - 32px)); max-height: 85vh; overflow-y: auto;
  background: var(--bg-flotante); color: var(--texto); border: 1px solid var(--borde-flotante);
  border-radius: 8px; padding: 16px; box-shadow: 0 4px 18px #0006;
}
#dlg-fondeo::backdrop, #dlg-fondeo-aviso::backdrop { background: #0005; }
#dlg-fondeo-aviso { border-top: 3px solid var(--verde); font-size: 13px; line-height: 1.6; }
#dlg-fondeo-aviso[data-fallida="true"] { border-top-color: var(--rojo); }
#fa-titulo { margin: 0 0 12px; font-size: 19px; }
#fa-resumen { color: var(--texto-tenue); }
#fa-siguiente { margin-left: 6px; }
#fd-campos { border: 0; margin: 12px 0; padding: 0; }
#fd-campos .form-row { justify-content: space-between; gap: 12px; }
#fd-campos input, #fd-campos select { width: 105px; }
#fd-campos input[type="checkbox"] { width: auto; }
#fd-estado { font-size: 12px; line-height: 1.5; }
.fondeo-ayuda { font-size: 11px; line-height: 1.45; color: var(--texto-tenue); margin: 10px 0; }
.fondeo-error { color: var(--rojo); font-size: 12px; margin: 8px 0; }
.ct-fondeo { border-top: 1px solid var(--borde-flotante); padding-top: 7px; margin-top: 7px; font-size: 11px; }
.ct-fondeo button { margin-top: 6px; }

/* ---- Cuerpo: herramientas | gráfico | journal -------------------------------------------------- */
.cuerpo { display: flex; flex: 1; min-height: 0; }

/* Flotante sobre el gráfico y arrastrable por su asa, como cualquier píldora -- no reserva ancho
   del layout: antes era un panel fijo al lado del chart (`flex: 0 0 44px`) que no se podía mover.
   `top`/`left` son la posición de fábrica; `Arrastrables` los reemplaza por valores en píxeles en
   cuanto se arrastra una vez, y esos quedan guardados en localStorage entre sesiones. */
.barra-dibujo {
  position: absolute;
  top: 50px;
  left: 10px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 44px;
  padding: 6px 0;
  background: var(--bg-flotante);
  border: 1px solid var(--borde-flotante);
  border-radius: 8px;
  box-shadow: var(--sombra);
  max-height: calc(100% - 70px);
  overflow-y: auto;
  overflow-x: visible;
}
/* La barra tiene 9 familias más los conmutadores: en pantallas bajas hay que poder desplazarla,
   pero su barra de scroll no debe ocupar ancho ni verse. */
.barra-dibujo::-webkit-scrollbar { width: 0; }

.asa-barra {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 16px;
  flex: 0 0 16px;
  cursor: grab;
  color: var(--texto-tenue);
  touch-action: none;
}
.asa-barra:active { cursor: grabbing; }

#barra-dibujo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.herramienta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--texto-tenue);
  flex: 0 0 32px;
}
.herramienta:hover { color: var(--texto); background: var(--bg-hover); }
.herramienta.activa { color: var(--acento); background: transparent; }
.herramienta-borrar:hover { color: var(--rojo); }

/* La flechita de "esto abre un submenú", igual que en TradingView: un triangulito en la esquina */
.flecha-menu {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-bottom: 4px solid currentColor;
  opacity: 0.55;
}

/* Separador entre grupos de herramientas */
.sep-herr { width: 24px; height: 1px; background: var(--borde); margin: 4px 0; flex: 0 0 1px; }

/* ---- Submenú de herramientas ------------------------------------------------------------------ */
.flyout {
  position: fixed;
  z-index: 60;
  min-width: 250px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 6px 0;
  background: var(--bg-flotante);
  border: 1px solid var(--borde-flotante);
  border-radius: 6px;
  box-shadow: var(--sombra);
}

.flyout-cab {
  padding: 6px 12px 4px;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.flyout-vacio {
  padding: 10px 12px 12px;
  max-width: 220px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--texto-tenue);
}

.flyout-item { display: flex; align-items: center; }
.flyout-item:hover { background: var(--bg-hover); }
.flyout-item.activa .flyout-nombre { color: var(--acento); }

.flyout-elegir {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  height: 30px;
  padding: 0 6px 0 12px;
  color: var(--texto);
  border-radius: 0;
  text-align: left;
}
.flyout-elegir:hover { background: transparent; }
.flyout-nombre { flex: 1; white-space: nowrap; }
.flyout-atajo { color: var(--texto-tenue); font-size: 11px; white-space: nowrap; }

.flyout-estrella {
  width: 28px;
  height: 30px;
  padding: 0;
  color: transparent;      /* la estrella solo aparece al pasar por encima, como en TradingView */
  border-radius: 0;
}
.flyout-item:hover .flyout-estrella { color: var(--texto-tenue); }
.flyout-estrella:hover { color: var(--texto); background: transparent; }
.flyout-estrella.puesta,
.flyout-item:hover .flyout-estrella.puesta { color: #f7c744; }
.flyout-estrella.puesta .ico { fill: currentColor; }

.zona-chart { position: relative; flex: 1; min-width: 0; }

/* Split-screen: `.paneles` ocupa el `inset:0` que antes tenía `#chart-container` directo. Todo
   lo que ya se posicionaba absoluto contra `.zona-chart` (leyenda, píldoras, panel de cuenta,
   barra de dibujo, toolbar flotante) sigue igual -- esa capa no cambió, solo se metió una fila
   flex por dentro. Con el split apagado (`#panel-secundario[hidden]`) `.panel-chart` ocupa el
   100% del ancho, pixel a pixel igual que antes. */
.paneles { position: absolute; inset: 0; display: flex; }
.panel-chart { flex: 1 1 0; min-width: 0; position: relative; }
.panel-sec {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}
.panel-sec #chart-container-b { flex: 1; min-height: 0; }

/* Divisor arrastrable entre los dos paneles: reemplaza el `border-left` fijo que tenía
   `.panel-sec` (quedaría una segunda línea al lado de esta franja). El ancho relativo real lo
   fija `Paneles._instalarDivisor` con `flex-basis` inline en los dos paneles -- acá solo el
   ancho FIJO de la franja en sí y el feedback visual del cursor. */
.paneles-divisor {
  flex: 0 0 3px;
  cursor: col-resize;
  background: var(--borde);
  position: relative;
  z-index: 5;
}
.paneles-divisor:hover, .paneles-divisor.arrastrando { background: var(--acento); }
/* Borde de acento en el panel que tiene el foco: sin esto, dibujar en split es adivinar a cuál
   de los dos le está hablando la herramienta activa. */
.panel-chart.activo { box-shadow: inset 0 0 0 1px rgba(41, 98, 255, 0.35); }
.sec-barra {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 6px;
  background: var(--bg-flotante);
  border-bottom: 1px solid var(--borde);
  font-size: 11px;
}
/* Compuesto a propósito: el elemento lleva las dos clases (`class="leyenda leyenda-sec"`) y esta
   va ANTES que `.leyenda` en el archivo -- con la misma especificidad (una clase cada una), el
   orden manda y `.leyenda` le pisaba el `top`/`left` a esta, dejando la leyenda del panel
   secundario pegada contra la barra de selectores de instrumento/timeframe. `.leyenda.leyenda-sec`
   tiene más especificidad que `.leyenda` sola, así que gana sin importar el orden. */
.leyenda.leyenda-sec { position: absolute; top: 34px; left: 10px; pointer-events: none; }
.sec-estado { font-size: 11px; color: var(--texto-tenue); white-space: nowrap; }
.sec-estado.error { color: var(--rojo); }

/* ---- Leyenda sobre el gráfico ------------------------------------------------------------------ */
.leyenda {
  position: absolute;
  top: 8px;
  left: 12px;
  z-index: 5;
  pointer-events: none;      /* no le roba clicks al chart */
  font-size: 12px;
  line-height: 1.5;
}

.leyenda-l1 { display: flex; align-items: center; gap: 6px; color: var(--texto); }

/* OHLC de la vela en curso. `i` son las letras O/A/B/C, `b` los números: la letra siempre tenue
   y el número teñido según cierre contra apertura, igual que la leyenda de TradingView. */
.leyenda-ohlc { font-family: var(--dato); font-size: 11px; color: var(--texto-tenue); }
.leyenda-ohlc i { font-style: normal; color: var(--texto-tenue); }
.leyenda-ohlc b { font-weight: 500; }
.leyenda-ohlc.sube b { color: var(--verde); }
.leyenda-ohlc.baja b { color: var(--rojo); }

.punto { width: 7px; height: 7px; border-radius: 50%; background: var(--texto-tenue); flex: 0 0 7px; }
.punto.vivo { background: var(--verde); }

/* ---- Píldoras flotantes ------------------------------------------------------------------------ */
.pildora {
  position: absolute;
  top: 10px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 36px;
  padding: 0 6px;
  background: var(--bg-flotante);
  border: 1px solid var(--borde-flotante);
  border-radius: 8px;
  box-shadow: var(--sombra);
}

.pildora-pos { left: 50%; transform: translateX(-50%); }
.pildora-replay { right: 72px; }   /* deja libre la escala de precio */

/* Split-screen: estas dos píldoras y el panel de cuenta (más abajo) son del panel PRINCIPAL
   nada más -- una sola cuenta operable por página (ver panel-chart.js). Con el split abierto
   `.zona-chart` mide el doble del panel principal, así que sin este ajuste quedan centradas o
   ancladas contra el borde derecho del panel SECUNDARIO en vez del propio. `.split-activo` lo
   pone/saca `Paneles.abrirSplit()`/`cerrarSplit()` sobre `.zona-chart`. */
/* Centradas contra el panel PRINCIPAL, no contra `.zona-chart` entero -- con el divisor fijo en
   50/50 eso coincidía con `25%`/`calc(50% + 72px)`, pero ahora que el ancho relativo es variable
   (`Paneles._instalarDivisor`) hay que leerlo de `--principal-frac` (fracción 0-1, seteada en
   `.zona-chart` inline). `var(--principal-frac, 0.5)` sin split abierto o antes del primer
   arrastre cae en 0.5, que reproduce exactamente los valores fijos de antes. */
.zona-chart.split-activo .pildora-pos { left: calc(var(--principal-frac, 0.5) * 100% / 2); }
.zona-chart.split-activo .pildora-replay { right: calc((1 - var(--principal-frac, 0.5)) * 100% + 72px); }

.btn-pos {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: auto;
  height: 26px;
  padding: 0 8px 0 6px;
  color: var(--texto-tenue);
}
.btn-pos-label { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; }
.btn-long .btn-pos-label { color: var(--verde); }
.btn-short .btn-pos-label { color: var(--rojo); }
.btn-long:hover, .btn-long.armado { color: var(--verde); }
.btn-short:hover, .btn-short.armado { color: var(--rojo); }
.btn-long.armado, .btn-short.armado { background: var(--bg-hover); }

.asa { display: inline-flex; color: var(--texto-tenue); cursor: grab; touch-action: none; }
.asa:active { cursor: grabbing; }

.sel-compacto {
  height: 24px;
  border-color: transparent;
  background: transparent;
  color: var(--texto-tenue);
  max-width: 92px;
}
.sel-compacto:hover { color: var(--texto); background: var(--bg-hover); }

/* Cursores del gráfico según lo que esté armado. Duplicadas por CLASE (`.panel-chart`) además de
   por id: el panel secundario del split-screen no tiene id fijo (`#chart-container-b`), así que
   sin la regla por clase se quedaría siempre con el cursor por defecto. */
#chart-container.armado, #chart-container.dibujando,
.panel-chart.armado, .panel-chart.dibujando { cursor: crosshair; }
#chart-container.sobre-objeto, .panel-chart.sobre-objeto { cursor: grab; }
/* Mientras se arrastra un objeto, el dedo no desplaza la página ni el gráfico (objetos.js). */
#chart-container.moviendo, .panel-chart.moviendo { cursor: grabbing; touch-action: none; }
/* Handles de redimensionar (objetos.js): 8 puntos de control estilo TradingView. */
#chart-container.cur-nwse, .panel-chart.cur-nwse { cursor: nwse-resize; }
#chart-container.cur-nesw, .panel-chart.cur-nesw { cursor: nesw-resize; }
#chart-container.cur-ns, .panel-chart.cur-ns { cursor: ns-resize; }
#chart-container.cur-ew, .panel-chart.cur-ew { cursor: ew-resize; }
#chart-container.cur-pointer, .panel-chart.cur-pointer { cursor: pointer; }

/* ---- Panel del journal ------------------------------------------------------------------------- */
.panel-journal {
  display: flex;
  flex-direction: column;
  width: 320px;
  flex: 0 0 320px;
  border-left: 1px solid var(--borde);
  background: var(--bg-flotante);
  overflow: hidden;
}

.panel-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid var(--borde);
  font-weight: 600;
}

.journal-form { padding: 10px; border-bottom: 1px solid var(--borde); }

.form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 6px 0;
}
.form-row label { color: var(--texto-tenue); font-size: 12px; }
.form-row input[type="number"] { width: 90px; }
.form-row input[type="datetime-local"] { width: 100%; }

.rr-vivo {
  font-family: var(--dato);
  font-size: 11px;
  color: var(--texto-tenue);
  margin: 8px 0 0;
  min-height: 15px;
}

.journal-table {
  border-collapse: collapse;
  font-size: 11px;
  font-family: var(--dato);
  width: 100%;
  display: block;
  overflow: auto;
  flex: 1;
}
.journal-table th, .journal-table td {
  padding: 4px 6px;
  text-align: left;
  border-bottom: 1px solid var(--borde);
  white-space: nowrap;
}
.journal-table th { color: var(--texto-tenue); font-weight: 500; position: sticky; top: 0; background: var(--bg-flotante); }
.row-buy { color: var(--verde); }
.row-sell { color: var(--rojo); }
.btn-delete { color: var(--texto-tenue); padding: 0 4px; }
.btn-delete:hover { color: var(--rojo); }

/* ---- Barra inferior ---------------------------------------------------------------------------- */
.barra-inf {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 28px;
  flex: 0 0 28px;
  padding: 0 12px;
  border-top: 1px solid var(--borde);
  font-size: 11px;
  color: var(--texto-tenue);
}

.barra-inf span { font-family: var(--dato); }
.rangos-rapidos, .escala-rapida { display: flex; gap: 2px; }
.rangos-rapidos button, .escala-rapida button {
  height: 20px;
  padding: 0 6px;
  font-size: 11px;
  color: var(--texto-tenue);
  font-family: var(--ui);
}
.rangos-rapidos button:hover, .escala-rapida button:hover { color: var(--texto); background: var(--bg-hover); }
.rangos-rapidos button.activa, .escala-rapida button.activa { color: var(--acento); }

/* ---- Diálogo de ajustes ------------------------------------------------------------------------ */
.dlg {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
}

.dlg-caja {
  display: flex;
  flex-direction: column;
  width: 560px;
  max-width: 92vw;
  max-height: 84vh;
  background: var(--bg-flotante);
  border: 1px solid var(--borde-flotante);
  border-radius: 8px;
  box-shadow: var(--sombra);
  overflow: hidden;
}

.dlg-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--borde);
  font-size: 14px;
  font-weight: 600;
}

.dlg-cuerpo { display: flex; flex: 1; min-height: 0; }
.dlg-tabs {
  display: flex;
  flex-direction: column;
  width: 170px;
  flex: 0 0 170px;
  padding: 8px 0;
  border-right: 1px solid var(--borde);
}
.dlg-tab { height: 32px; padding: 0 14px; text-align: left; border-radius: 0; color: var(--texto-tenue); }
.dlg-tab:hover { color: var(--texto); }
.dlg-tab.activa { color: var(--texto); background: var(--bg-hover); }

.dlg-panel { flex: 1; padding: 12px 16px; overflow-y: auto; }
.dlg-seccion {
  margin: 14px 0 8px;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--texto-tenue);
}
.dlg-panel .dlg-seccion:first-child { margin-top: 0; }
.dlg-check { display: flex; align-items: center; gap: 8px; margin: 8px 0; cursor: pointer; }
.dlg-check input { width: 15px; height: 15px; accent-color: var(--acento); }
.dlg-fila-color { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.dlg-fila-color .dlg-check { flex: 1; margin: 0; }
.dlg-fila-color > span { flex: 1; color: var(--texto-tenue); font-size: 12px; }
.dlg-fila-color input[type="color"] {
  width: 34px;
  height: 24px;
  padding: 1px;
  border: 1px solid var(--borde-flotante);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}
.dlg-panel .form-row select, .dlg-panel .form-row input[type="text"] { min-width: 190px; }
/* Filas de la línea del precio: en el móvil el selector baja bajo su etiqueta y no se sale del diálogo. */
.dlg-panel .form-row.fila-envuelve { flex-wrap: wrap; }
.dlg-panel .form-row.fila-envuelve select { min-width: min(190px, 100%); }

.dlg-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--borde);
}
.dlg-pie button { border-color: var(--borde); height: 28px; }
.dlg-pie .btn-primario { border-color: var(--acento); }
#status-line {
  font-family: var(--ui);
  max-width: 55vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.status-error { color: var(--rojo); }

/* ---- Popovers ----------------------------------------------------------------------------------- */
.popover {
  position: fixed;
  z-index: 50;
  min-width: 240px;
  max-width: 340px;
  padding: 10px;
  background: var(--bg-flotante);
  border: 1px solid var(--borde-flotante);
  border-radius: 6px;
  box-shadow: var(--sombra);
}

.pop-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-weight: 600;
}

.pop-sub {
  font-size: 11px;
  font-weight: 600;
  color: var(--texto-tenue);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin: 10px 0 4px;
  padding-top: 6px;
  border-top: 1px solid var(--borde);
}

#pop-bosmss, #pop-kz, #pop-klevels, #pop-fvg { max-height: 84vh; overflow-y: auto; }
#pop-fvg { max-height: calc(100vh - 110px); overflow-y: auto; }
#pop-niveles input[inputmode="decimal"] { width: 140px; flex: none; font-variant-numeric: tabular-nums; }
#pop-bosmss .form-row input[type="color"], #pop-frac .form-row input[type="color"],
#pop-tm .form-row input[type="color"], #pop-kz .form-row input[type="color"],
#pop-klevels .form-row input[type="color"], #pop-ema .form-row input[type="color"],
#pop-fvg .form-row input[type="color"] {
  width: 40px; height: 22px; padding: 0 2px;
}
/* EMA: igual que Key Levels, pero el control del medio es el período (angosto: no necesita el
   ancho genérico de 90px de `.form-row input[type="number"]`), y los selects de tipo y fuente
   van compactos para que la fila entre en el popover (240-340px). */
#pop-ema .ema-periodo { width: 56px; flex: none; }
#pop-ema .ema-tipo, #pop-ema .ema-fuente, #pop-ema .ema-grosor { flex: none; width: auto; }
#pop-tm .form-row input[type="range"] { flex: 1; min-width: 0; }
#pop-tm .form-row span#kz-opacidad-val {
  width: 34px; flex: none; text-align: right;
  font-size: 11px; color: var(--texto-tenue); font-family: var(--dato);
}

/* Killzone (cajas por sesión): separador y filas compactas checkbox+color+nombre, a diferencia
   del resto de los popovers que es label a la izquierda / control a la derecha -- acá el
   checkbox va primero porque son varias filas seguidas, todas del mismo tipo. */
.pop-sep { height: 1px; background: var(--borde); margin: 6px 0; }
.kz-sesion-fila { margin-bottom: 4px; }
.kz-sesion-item { justify-content: flex-start; gap: 6px; }
.kz-sesion-item label { flex: 1; }
/* Más chico que el color genérico del popover (40x22, ver arriba): esta fila es compacta y el
   input reemplaza a un swatch de 10px, no a un control de formulario. */
.kz-sesion-item input[type="color"] { width: 26px; height: 18px; flex: 0 0 26px; padding: 0 1px; }
/* Horario editable por fila (antes fijo): 4 números angostos + separadores, indentados bajo el
   nombre/checkbox de la fila para que se lea como "el horario de ESTA fila". */
.kz-sesion-horas { justify-content: flex-start; gap: 3px; padding-left: 22px; margin-top: 2px; }
/* 44 y no 32: con `box-sizing: border-box` un 32px deja 24px de caja de contenido (32 - 6 de
   padding - 2 de borde), y el spin button de Chromium se come ~14 de esos -- dos dígitos a 12px no
   entran y se recortaban. `flex: none` para que los cuatro campos no se encojan si la fila crece. */
.kz-sesion-horas input[type="number"] { width: 44px; padding: 2px 4px; text-align: center; flex: none; }
.kz-sesion-horas span { color: var(--texto-tenue); font-size: 11px; }

/* K-Levels: una fila por línea (checkbox + color + estilo + nombre), y las tres de "Previous X"
   suman un segundo checkbox para el EQ -- mismo criterio de fila compacta que Killzone. */
.kl-linea-item { justify-content: flex-start; gap: 6px; }
.kl-linea-item label { flex: 1; }
.kl-linea-item select { width: 84px; flex: none; }
.kl-eq-label { flex: none !important; font-size: 11px; color: var(--texto-tenue); }

.pop-pie { display: flex; gap: 6px; margin-top: 8px; }
.pop-pie button { border-color: var(--borde); flex: 1; }

.lista {
  width: 100%;
  border-color: var(--borde);
  background: var(--bg);
  padding: 2px;
}
.lista option { padding: 4px 6px; }

/* ---- La cuenta: botón, ticket de orden y panel de posiciones --------------------------------- */
.btn-abrir {
  height: 26px;
  padding: 0 10px;
  font-weight: 600;
  color: var(--acento);
  background: transparent;
}
.btn-abrir:hover { background: var(--bg-hover); }
.btn-abrir .abrir-corto { display: none; }   /* en móvil se muestra en lugar del texto largo */

.panel-cuenta {
  position: absolute;
  top: 54px;
  right: 72px;          /* alineado con la píldora de replay, deja libre la escala de precio */
  z-index: 6;
  min-width: 260px;
  padding: 6px 8px;
  font-size: 12px;
  background: var(--bg-flotante);
  border: 1px solid var(--borde-flotante);
  border-radius: 8px;
  box-shadow: var(--sombra);
}
/* Se esconde con el atributo `hidden` (lo pone `ordenes.js::pintarPanel()`), nunca por el contenido: el
   cuerpo no se vacía mientras hay sesión, así que mirar si está vacío escondía el saldo sin motivo. */
.panel-cuenta .asa {
  /* Mismo aire arriba (padding del panel, 6px) que abajo: con 2px quedaba pegada al saldo. */
  display: flex; justify-content: center; align-items: center; width: 100%; height: 14px; margin-bottom: 6px;
}
/* Misma fracción variable que `.pildora-replay` -- ver el comentario de esa regla. */
.zona-chart.split-activo .panel-cuenta { right: calc((1 - var(--principal-frac, 0.5)) * 100% + 72px); }
/* Rueda de colores de la caja de posición: solo en el celular (ver la regla `pointer: coarse`). */
.oe-caja-ajustes { display: none; }
/* Botones que existen solo en el celular (p. ej. guardar configuración al lado del ojo). */
.solo-movil { display: none; }
.ct-saldos { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 4px; }
.ct-saldos .ok { color: var(--verde); }
.ct-saldos .mal { color: var(--rojo); }
.ct-titulo { margin-top: 4px; color: var(--texto-tenue); font-size: 11px; text-transform: uppercase; }
.ct-vacio { color: var(--texto-tenue); }
.ct-fila {
  display: grid;
  grid-template-columns: 62px 42px 1fr 1fr 1fr 20px;
  gap: 6px;
  align-items: center;
  padding: 2px 0;
  font-family: Consolas, monospace;
}
.ct-dir { font-weight: 700; font-size: 10px; }
.ct-dir.long { color: var(--verde); }
.ct-dir.short { color: var(--rojo); }
.ct-sl { color: var(--rojo); }
.ct-tp { color: var(--verde); }
.ct-x { width: 18px; height: 18px; padding: 0; color: var(--texto-tenue); background: transparent; }
.ct-x:hover { color: var(--rojo); background: var(--bg-hover); }

/* `.dlg-cuerpo` es `display:flex` porque el diálogo de ajustes tiene pestañas a la izquierda y
   panel a la derecha. El ticket no tiene pestañas: sus campos van uno debajo del otro, y en fila
   quedaban aplastados contra el borde. */
.dlg-orden { width: 400px; }
.dlg-orden .dlg-cuerpo { display: block; padding: 14px 16px; overflow-y: auto; }
.dlg-orden .dlg-pie { justify-content: flex-end; }
.ord-fila { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0; }
.ord-fila-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 8px; }
.ord-grupo { display: inline-flex; border: 1px solid var(--borde-flotante); border-radius: 6px; overflow: hidden; }
.ord-grupo button {
  padding: 4px 10px;
  color: var(--texto-tenue);
  background: transparent;
  border-radius: 0;
}
.ord-grupo button:hover { background: var(--bg-hover); }
.ord-grupo button.activa { color: #fff; background: var(--acento); }
.ord-grupo .ord-buy.activa { background: var(--verde); }
.ord-grupo .ord-sell.activa { background: var(--rojo); }
.ord-lbl { display: block; margin-bottom: 2px; color: var(--texto-tenue); font-size: 11px; }
.dlg-orden input[type="number"] { width: 100%; }
.ord-sep { height: 1px; margin: 10px 0; background: var(--borde-flotante); }
.ord-calculo {
  margin-top: 8px;
  padding: 6px 8px;
  font-family: Consolas, monospace;
  color: var(--texto-tenue);
  background: var(--bg);
  border-radius: 6px;
}
.ord-error { margin-top: 6px; color: var(--rojo); }
.ord-origen {
  margin: 8px 0;
  padding: 5px 8px;
  color: var(--texto-tenue);
  background: var(--bg);
  border-left: 2px solid var(--acento);
  border-radius: 4px;
  font-size: 11px;
}
.ord-origen b { color: var(--texto); font-weight: 600; }

/* Banner del ticket cuando el indicador BREAKER está activo -- mismo molde que .ord-origen,
   con variantes de color para "bloqueado" (ya hay un ciclo corriendo) y "off" (bypass de esta
   orden). Ver `ordenes.js::_pintarDialogo`. */
.ord-breaker {
  margin: 0 0 8px;
  padding: 5px 8px;
  color: var(--texto-tenue);
  background: var(--bg);
  border-left: 2px solid var(--acento);
  border-radius: 4px;
  font-size: 11px;
}
.ord-breaker b { color: var(--texto); font-weight: 600; }
.ord-breaker a { color: var(--acento); margin-left: 6px; }
.ord-breaker-bloqueado { border-left-color: var(--rojo); }
.ord-breaker-off { border-left-color: var(--texto-tenue); border-left-style: dashed; }

.brk-estado, .brk-nota {
  margin: 10px 0 8px;
  padding: 6px 8px;
  font-size: 11px;
  color: var(--texto-tenue);
  background: var(--bg);
  border-radius: 6px;
}
#brk-detener { width: 100%; height: 28px; }

/* ---- Objeto seleccionado: barra de estilo, menú contextual y árbol ---------------------------- */
/* Sitio fijo dentro de la zona del gráfico: centrada y justo debajo de la píldora de posición
   (que ocupa de 10px a 46px). No sigue al objeto -- ver el comentario de `reposicionar()`. */
.barra-estilo {
  position: absolute;
  top: 54px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 55;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  padding: 0 6px;
  background: var(--bg-flotante);
  border: 1px solid var(--borde-flotante);
  border-radius: 8px;
  box-shadow: var(--sombra);
}

.oe-grupo { position: relative; display: flex; align-items: center; }
.oe-muestra {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid var(--borde-flotante);
  cursor: pointer;
}
/* La paleta se abre con CLICK sobre la muestra (la apaga y la enciende `object-ui.js` con el
   atributo `hidden`). Con `:hover` quedaba inalcanzable en cuanto el cursor se iba por un borde,
   y en una pantalla táctil directamente no se podía abrir. */
.oe-paleta {
  position: absolute;
  top: 26px;
  left: -6px;
  display: grid;
  grid-template-columns: repeat(4, 20px);
  gap: 4px;
  padding: 6px;
  background: var(--bg-flotante);
  border: 1px solid var(--borde-flotante);
  border-radius: 6px;
  box-shadow: var(--sombra);
  z-index: 1;
}
.oe-color { width: 20px; height: 20px; padding: 0; border-radius: 4px; border: 1px solid var(--borde-flotante); }

.oe-sel { height: 24px; max-width: 78px; border-color: transparent; background: transparent; color: var(--texto-tenue); }
.oe-sel:hover { color: var(--texto); background: var(--bg-hover); }
.oe-opacidad { width: 70px; accent-color: var(--acento); background: transparent; }
.oe-opacidad-control { display: flex; align-items: center; gap: 3px; color: var(--texto); font-size: 12px; }
.oe-opacidad-control .oe-porcentaje { width: 39px; min-width: 39px; padding: 2px; height: 24px; text-align: right; }
.oe-porcentaje::-webkit-inner-spin-button { appearance: none; }
.barra-estilo .btn-icono.activa { color: var(--acento); }
.oe-borde { display: flex; align-items: center; gap: 3px; white-space: nowrap; font-size: 12px; }
/* Con el dedo, la barra de estilo muestra solo T, ojo, copiar, borrar y TF: Línea y Fondo se ajustan en la PC. */
@media (pointer: coarse) {
  .barra-estilo .oe-solo-pc { display: none !important; }
}
.oe-texto-panel {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 288px;
  max-height: calc(100vh - 180px);
  overflow-y: auto;
  padding: 12px;
  display: grid;
  gap: 6px;
  background: var(--bg-flotante);
  border: 1px solid var(--borde-flotante);
  border-radius: 8px;
  box-shadow: var(--sombra);
}
.oe-texto-panel label, .oe-texto-panel small { font-size: 12px; color: var(--texto-tenue); }
.oe-texto-panel input, .oe-texto-panel select { width: 100%; min-width: 0; }
.oe-texto-aspecto { display: flex; gap: 6px; align-items: center; }
.oe-texto-aspecto label { display: flex; align-items: center; gap: 4px; }
.oe-texto-aspecto input[type="color"] { width: 34px; height: 26px; padding: 2px; }
.oe-texto-aspecto input[type="checkbox"] { width: auto; }
.oe-texto-acciones { display: flex; gap: 4px; }
.oe-texto-acciones button { flex: 1; padding: 5px 4px; font-size: 11px; white-space: nowrap; }
.oe-texto-panel select, .oe-texto-panel button { min-height: 26px; }

.menu-objeto {
  position: fixed;
  z-index: 70;
  min-width: 180px;
  padding: 4px 0;
  background: var(--bg-flotante);
  border: 1px solid var(--borde-flotante);
  border-radius: 6px;
  box-shadow: var(--sombra);
}
.menu-item {
  display: block;
  width: 100%;
  height: 28px;
  padding: 0 14px;
  text-align: left;
  border-radius: 0;
  color: var(--texto);
}

.panel-objetos {
  display: flex;
  flex-direction: column;
  width: 260px;
  flex: 0 0 260px;
  border-right: 1px solid var(--borde);
  background: var(--bg-flotante);
  overflow: hidden;
}
.arbol { overflow-y: auto; flex: 1; padding: 4px 0; }
.arbol-vacio { padding: 14px; color: var(--texto-tenue); font-size: 12px; }
.arbol-item { display: flex; align-items: center; gap: 2px; padding: 0 4px 0 8px; }
.arbol-item:hover { background: var(--bg-hover); }
.arbol-item.activa .arbol-nombre { color: var(--acento); }
.arbol-nombre {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  height: 30px;
  padding: 0;
  color: var(--texto);
  text-align: left;
  border-radius: 0;
}
.arbol-nombre:hover { background: transparent; }
.arbol .btn-icono { width: 24px; height: 24px; }
.arbol .btn-icono.apagado { opacity: 0.4; }
.arbol .btn-icono.activa { color: var(--acento); }

/* ---- Panel de atajos ----------------------------------------------------------------------------
   Sigue siendo un overlay, pero ahora el `[hidden]` de arriba lo apaga de verdad. */
.ayuda-atajos {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 48px 16px 16px;
  background: rgba(0, 0, 0, 0.35);
}

.ayuda-caja {
  position: relative;
  min-width: 380px;
  max-height: 84vh;
  overflow-y: auto;
  padding: 16px 22px;
  background: var(--bg-flotante);
  border: 1px solid var(--borde-flotante);
  border-radius: 6px;
  box-shadow: var(--sombra);
}

.ayuda-caja h2 { font-size: 13px; margin: 0 0 10px; color: var(--texto); }
.ayuda-caja h3 {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--texto-tenue);
  margin: 14px 0 4px;
}
.ayuda-caja table { border-collapse: collapse; font-size: 12px; width: 100%; }
.ayuda-caja td { padding: 3px 12px 3px 0; }
.ayuda-caja .tecla { color: var(--acento); white-space: nowrap; font-family: var(--dato); }

.ayuda-cerrar {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  border-color: var(--borde);
}
.ayuda-cerrar:hover { color: var(--acento); border-color: var(--acento); }

/* ---- Móvil y pantallas táctiles ----------------------------------------------------------------
   Pantalla chica o puntero táctil: el gráfico se queda con casi todo el alto. Se ocultan la barra
   inferior y la barra vertical de dibujo. La barra superior se desliza con el dedo, sin salto de
   línea ni barra de scroll a la vista. La barra de posición pasa a columna pegada al borde
   izquierdo (en horizontal tapaba la escala de precios) y la píldora de replay baja al pie. */
@media (max-width: 800px), (pointer: coarse) {
  /* iOS amplía la página al enfocar un campo con menos de 16 px y no vuelve atrás: todos los campos a
     16 px, en el diálogo de ajustes y en la configuración del gráfico también. !important porque las
     reglas de cada diálogo pesan más que un selector de elemento. */
  input, select, textarea { font-size: 16px !important; }

  .barra-inf,
  #panel-herramientas { display: none; }

  .barra-sup {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  .barra-sup::-webkit-scrollbar { display: none; }
  .barra-sup > * { flex-shrink: 0; }

  /* Barra de posición (Abrir operación, L, S, favoritos, riesgo, objetos) en columna pegada al borde
     izquierdo. La variante con split repite el selector porque su `left` de escritorio pesa igual.
     Lo que no entra en la altura de la zona se desplaza dentro de la píldora, sin barra de scroll. */
  .pildora-pos,
  .zona-chart.split-activo .pildora-pos {
    top: 10px;
    left: 6px;
    right: auto;
    transform: none;
    flex-direction: column;
    height: auto;
    max-height: calc(100% - 82px);   /* 10 de arriba y 72 de la píldora de replay de abajo */
    padding: 4px 3px;
    overflow-y: auto;
    scrollbar-width: none;
  }
  .pildora-pos::-webkit-scrollbar { display: none; }
  .pildora-favoritos { flex-direction: column; }
  .pildora-pos .sep-v { width: 16px; height: 1px; margin: 2px 0; }
  .pildora-pos .btn-pos { padding: 0 4px; gap: 2px; }
  .pildora-pos .btn-abrir { height: 26px; padding: 0 4px; font-size: 11px; }
  .btn-abrir .abrir-largo { display: none; }
  .btn-abrir .abrir-corto { display: inline; }

  /* Saldo compacto: sin el ancho mínimo de escritorio (260 px) y con las cifras en una fila más chica.
     Así no pisa la columna de la izquierda aunque quede en su posición por defecto (en 375 px, con
     la derecha de 72 px, su borde caería a 43 px). No cambia dónde está, solo cuánto ocupa. */
  .panel-cuenta { min-width: 0; font-size: 11px; }
  .ct-saldos { gap: 8px; }

  /* La leyenda del gráfico (símbolo y OHLC) arranca a la derecha de la columna, no debajo de ella. */
  .leyenda { left: 56px; }

  /* Los botones de paso no seleccionan texto ni abren el menú de mantener pulsado. */
  #btn-retro-vela, #btn-retro-sostenido, #btn-avan-vela, #btn-avan-sostenido {
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
  }

  /* Sin la barra inferior, la píldora de replay baja al pie: arriba queda la de posición, que se
     pisaba con ella en un teléfono de 390 px. La variante con split repite la regla porque la de
     escritorio le pone `right` y pisaría este `right: auto`. */
  .pildora-replay,
  .zona-chart.split-activo .pildora-replay {
    top: auto;
    right: auto;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    height: 48px;
  }
  /* Objetivo táctil de 40 px en los cuatro pasos, con 12 px de hueco entre ellos. */
  .pildora-pasos { gap: 12px; }
  .pildora-pasos .btn-icono { width: 40px; height: 40px; }
  /* Los «sin soltar» necesitan el gesto entero: no desplazan la página ni disparan zoom. Va después
     de la regla de arriba, que les da `manipulation` a los cuatro. */
  #btn-retro-sostenido, #btn-avan-sostenido { touch-action: none; }

  /* Barra de estilo de la caja de posición: con el dedo quedan el TF, la rueda y la ×. Objetivo y
     Stop (color y opacidad) aparecen solo al tocar la rueda (`ver-estilo`, object-ui.js), en
     varias filas si no caben en el ancho de la pantalla. */
  .barra-estilo:not(.ver-estilo) .oe-caja-estilo { display: none !important; }
  /* Abierta: primera fila TF, rueda y ×; debajo, una fila por color (muestra + opacidad). */
  .barra-estilo.ver-estilo {
    flex-wrap: wrap; height: auto; row-gap: 8px; padding: 6px 8px;
    width: min(320px, calc(100vw - 24px));
  }
  .barra-estilo.ver-estilo .oe-caja-estilo { order: 2; }
  .barra-estilo.ver-estilo #oe-caja-direccion { flex: 1 1 100%; }
  .barra-estilo.ver-estilo label.oe-caja-estilo { flex: 0 0 104px; }
  .barra-estilo.ver-estilo .oe-opacidad-control.oe-caja-estilo { flex: 1 1 150px; display: flex; align-items: center; gap: 4px; }
  .barra-estilo .oe-caja-ajustes { display: inline-flex; }
  /* Guardar configuración: en el celular sale de la barra superior y va al lado del ojo. */
  .solo-movil:not([hidden]) { display: inline-flex; }
  #btn-config-grafico { display: none; }
  .barra-estilo.ver-estilo .oe-caja-ajustes { color: var(--acento, #2962ff); }
  /* Selector de temporalidad de la barra de objeto y selector «1 vela» de la píldora: 32 px de alto
     para que «M15» y «1 vela» se lean completos; con 24 px, el texto de 16 px se cortaba por abajo. */
  .barra-estilo .oe-sel, .pildora-replay .sel-compacto { height: 32px; line-height: 1.2; }
  .barra-estilo .oe-sel { max-width: 120px; }   /* «Sin dato» entero, no cortado a 78 px */
  /* Panel de texto del objeto: se centra bajo la barra de estilo (no bajo el botón T, que está a la
     izquierda y lo dejaba cortado) y se ajusta al ancho de la pantalla, con scroll propio si no cabe. */
  #oe-control-texto { position: static; }
  .barra-estilo .oe-texto-panel { top: 40px; width: min(288px, calc(100vw - 24px)); max-height: calc(100vh - 150px); }
}

/* ---- Configuración del gráfico compartida (static/config-grafico.js): pestaña del diálogo ---------- */
.cfg-grafico-ayuda { margin: 4px 0 10px; color: var(--texto-tenue); line-height: 1.4; }
.cfg-grafico-lista { list-style: none; margin: 0 0 8px; padding: 0; }
.cfg-grafico-fila {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 6px 0; border-bottom: 1px solid var(--borde);
}
.cfg-grafico-fila.activa .cfg-grafico-nombre { font-weight: 600; }
.cfg-grafico-nombre { flex: 1 1 120px; min-width: 0; overflow-wrap: anywhere; }
.cfg-grafico-marca { color: var(--verde); font-size: 11px; }
.cfg-grafico-fila input, .cfg-grafico-nueva input { flex: 1 1 140px; min-width: 0; }
.cfg-grafico-nueva { display: flex; flex-wrap: wrap; gap: 6px; }
.cfg-grafico-nueva input { flex: 1 1 160px; }
.cfg-grafico-fila button, .cfg-grafico-nueva button { min-height: 32px; padding: 0 10px; }
.cfg-grafico-estado { min-height: 1.4em; margin-top: 8px; color: var(--rojo); }
.cfg-grafico-estado.ok { color: var(--verde); }
@media (max-width: 800px), (pointer: coarse) {
  /* Objetivo táctil de 44 px en el teléfono. */
  .cfg-grafico-fila button, .cfg-grafico-nueva button, .cfg-mini-acciones button { min-height: 44px; }
}

/* ---- Configuración del gráfico: mini interfaz de la barra superior (#pop-config) ---------- */
.cfg-mini { width: 260px; display: grid; gap: 6px; }
.cfg-mini[hidden] { display: none; }
.cfg-mini label { font-size: 12px; color: var(--texto-tenue); }
.cfg-mini select, .cfg-mini input { width: 100%; min-width: 0; }
.cfg-mini .cfg-grafico-ayuda { margin: 2px 0 0; font-size: 12px; }
.cfg-mini .cfg-grafico-estado { margin-top: 0; }
.cfg-mini-acciones { display: flex; flex-wrap: wrap; gap: 4px; }
.cfg-mini-acciones button { flex: 1 1 calc(50% - 4px); min-height: 28px; padding: 4px 6px; font-size: 12px; white-space: nowrap; }