/* Bot Trading — Rediseño Premium v3 (dorado + glass + pildoras) */
:root:where(:not(#bt-shell, #bt-shell *)) {
  --bt-bg: #070b14;
  --bt-bg2: #0a0e17;
  --bt-card: #101623;
  --bt-panel: #161e30;
  --bt-border: #232c47;
  --bt-border-hi: #3d4a6f;
  --bt-text: #e8edf7;
  --bt-muted: #8b95ad;
  --bt-gold: #ffd700;
  --bt-gold-dim: rgba(255, 215, 0, 0.14);
  --bt-cyan: #00d4ff;
  --bt-green: #00e676;
  --bt-red: #ff4d5e;
  --bt-violet: #bb86fc;
  --bt-radius: 12px;
}

html, body, #app {
  background:
    radial-gradient(1200px 500px at 15% -5%, rgba(255, 215, 0, 0.06), transparent 60%),
    radial-gradient(1000px 600px at 90% 0%, rgba(0, 212, 255, 0.07), transparent 60%),
    var(--bt-bg) !important;
  color: var(--bt-text) !important;
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* Linea dorada superior */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #ffd700, #ff9d00 30%, #00d4ff 70%, #bb86fc);
  z-index: 9999;
}

/* ===== Barra superior ===== */
header:where(:not(#bt-shell, #bt-shell *)), nav:where(:not(#bt-shell, #bt-shell *)), [class*="TopBar"]:where(:not(#bt-shell, #bt-shell *)), [class*="topbar"]:where(:not(#bt-shell, #bt-shell *)), [class*="navbar"]:where(:not(#bt-shell, #bt-shell *)) {
  background: linear-gradient(180deg, #101828, #0c1220) !important;
  border-bottom: 1px solid var(--bt-border) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45) !important;
}
header .font-bold:where(:not(#bt-shell, #bt-shell *)), nav .font-bold:where(:not(#bt-shell, #bt-shell *)), [class*="logo"]:where(:not(#bt-shell, #bt-shell *)) {
  color: var(--bt-gold) !important;
  letter-spacing: 0.3px !important;
}
nav a:where(:not(#bt-shell, #bt-shell *)), header a:where(:not(#bt-shell, #bt-shell *)) {
  border-radius: 999px !important;
  padding: 5px 14px !important;
  color: var(--bt-muted) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  transition: all 0.18s ease !important;
}
nav a:hover:where(:not(#bt-shell, #bt-shell *)), header a:hover:where(:not(#bt-shell, #bt-shell *)) {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
nav a.router-link-active:where(:not(#bt-shell, #bt-shell *)), nav a.active:where(:not(#bt-shell, #bt-shell *)), header a.active:where(:not(#bt-shell, #bt-shell *)) {
  color: #0b0e14 !important;
  background: linear-gradient(135deg, #ffd700, #ffae00) !important;
  box-shadow: 0 2px 12px rgba(255, 215, 0, 0.35) !important;
}

/* Insignia EN VIVO */
#bt-live-badge:where(:not(#bt-shell, #bt-shell *)) {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(0, 230, 118, 0.2), rgba(0, 212, 255, 0.15)) !important;
  border: 1px solid rgba(0, 230, 118, 0.5) !important;
  color: var(--bt-green) !important;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 12px;
  border-radius: 999px;
  letter-spacing: 0.6px;
  margin-left: 12px;
  box-shadow: 0 0 14px rgba(0, 230, 118, 0.25) !important;
}
#bt-live-badge i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--bt-green);
  box-shadow: 0 0 8px var(--bt-green);
  animation: bt-pulse 1.4s infinite ease-in-out;
}
@keyframes bt-pulse {
  0%, 100% { transform: scale(0.85); opacity: 0.65; }
  50% { transform: scale(1.2); opacity: 1; }
}

/* ===== Panel lateral / pares ===== */
aside:where(:not(#bt-shell, #bt-shell *)), [class*="sidebar"]:where(:not(#bt-shell, #bt-shell *)), [class*="Sidebar"]:where(:not(#bt-shell, #bt-shell *)) {
  background: linear-gradient(180deg, #0d1322, #090e18) !important;
  border-right: 1px solid var(--bt-border) !important;
}
/* Par activo: de teal plano a dorado premium */
.bg-teal-700:where(:not(#bt-shell, #bt-shell *)), [class*="bg-teal"]:where(:not(#bt-shell, #bt-shell *)) {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.22), rgba(255, 174, 0, 0.12)) !important;
  border: 1px solid rgba(255, 215, 0, 0.45) !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 14px rgba(255, 215, 0, 0.15) !important;
}

/* ===== Tarjetas glass ===== */
.card:where(:not(#bt-shell, #bt-shell *)), [class*="card"]:where(:not(#bt-shell, #bt-shell *)), [class*="Card"]:where(:not(#bt-shell, #bt-shell *)), [class*="panel"]:where(:not(#bt-shell, #bt-shell *)), [class*="Panel"]:where(:not(#bt-shell, #bt-shell *)),
[class*="widget"]:where(:not(#bt-shell, #bt-shell *)), [class*="Widget"]:where(:not(#bt-shell, #bt-shell *)), [class*="rounded-lg"]:where(:not(#bt-shell, #bt-shell *)), .rounded-lg:where(:not(#bt-shell, #bt-shell *)), .rounded:where(:not(#bt-shell, #bt-shell *)) {
  border-radius: var(--bt-radius) !important;
  border-color: var(--bt-border) !important;
}
.bg-white:where(:not(#bt-shell, #bt-shell *)), .bg-gray-50:where(:not(#bt-shell, #bt-shell *)), .bg-gray-100:where(:not(#bt-shell, #bt-shell *)), .bg-slate-50:where(:not(#bt-shell, #bt-shell *)), .bg-slate-100:where(:not(#bt-shell, #bt-shell *)),
.bg-gray-800:where(:not(#bt-shell, #bt-shell *)), .bg-gray-900:where(:not(#bt-shell, #bt-shell *)), .bg-slate-800:where(:not(#bt-shell, #bt-shell *)), .bg-slate-900:where(:not(#bt-shell, #bt-shell *)), .bg-zinc-800:where(:not(#bt-shell, #bt-shell *)), .bg-neutral-800:where(:not(#bt-shell, #bt-shell *)) {
  background: linear-gradient(180deg, var(--bt-card), #0d1322) !important;
  color: var(--bt-text) !important;
  border: 1px solid var(--bt-border) !important;
}

/* ===== Tablas premium ===== */
table:where(:not(#bt-shell, #bt-shell *)) {
  background: transparent !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
thead th:where(:not(#bt-shell, #bt-shell *)), th:where(:not(#bt-shell, #bt-shell *)) {
  background: rgba(255, 215, 0, 0.06) !important;
  color: var(--bt-gold) !important;
  font-size: 10.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  border-bottom: 1px solid rgba(255, 215, 0, 0.25) !important;
  padding: 9px 10px !important;
}
thead tr th:first-child:where(:not(#bt-shell, #bt-shell *)) { border-radius: 10px 0 0 0 !important; }
thead tr th:last-child:where(:not(#bt-shell, #bt-shell *)) { border-radius: 0 10px 0 0 !important; }
tbody td:where(:not(#bt-shell, #bt-shell *)) {
  border-bottom: 1px solid var(--bt-border) !important;
  font-size: 12.5px !important;
  padding: 9px 10px !important;
}
tbody tr:where(:not(#bt-shell, #bt-shell *)) { transition: background 0.15s ease !important; }
tbody tr:hover td:where(:not(#bt-shell, #bt-shell *)) {
  background: rgba(0, 212, 255, 0.05) !important;
}

/* Pildoras de beneficio / perdida */
.text-green-500:where(:not(#bt-shell, #bt-shell *)), .text-green-400:where(:not(#bt-shell, #bt-shell *)), .text-emerald-500:where(:not(#bt-shell, #bt-shell *)), .text-emerald-400:where(:not(#bt-shell, #bt-shell *)),
.text-red-500:where(:not(#bt-shell, #bt-shell *)), .text-red-400:where(:not(#bt-shell, #bt-shell *)), .text-rose-500:where(:not(#bt-shell, #bt-shell *)), .text-rose-400:where(:not(#bt-shell, #bt-shell *)) {
  font-weight: 800 !important;
  padding: 3px 12px !important;
  border-radius: 999px !important;
  display: inline-block !important;
  font-size: 12px !important;
}
.text-green-500:where(:not(#bt-shell, #bt-shell *)), .text-green-400:where(:not(#bt-shell, #bt-shell *)), .text-emerald-500:where(:not(#bt-shell, #bt-shell *)), .text-emerald-400:where(:not(#bt-shell, #bt-shell *)) {
  background: rgba(0, 230, 118, 0.14) !important;
  border: 1px solid rgba(0, 230, 118, 0.5) !important;
  color: var(--bt-green) !important;
  box-shadow: 0 0 10px rgba(0, 230, 118, 0.18) !important;
}
.text-red-500:where(:not(#bt-shell, #bt-shell *)), .text-red-400:where(:not(#bt-shell, #bt-shell *)), .text-rose-500:where(:not(#bt-shell, #bt-shell *)), .text-rose-400:where(:not(#bt-shell, #bt-shell *)) {
  background: rgba(255, 77, 94, 0.13) !important;
  border: 1px solid rgba(255, 77, 94, 0.5) !important;
  color: var(--bt-red) !important;
  box-shadow: 0 0 10px rgba(255, 77, 94, 0.18) !important;
}

/* ===== Botones ===== */
button:where(:not(#bt-shell, #bt-shell *)), .btn:where(:not(#bt-shell, #bt-shell *)) {
  border-radius: 9px !important;
  font-weight: 700 !important;
  transition: all 0.16s ease !important;
}
button:hover:where(:not(#bt-shell, #bt-shell *)) { filter: brightness(1.12) !important; }
.btn-primary:where(:not(#bt-shell, #bt-shell *)), button[class*="primary"]:where(:not(#bt-shell, #bt-shell *)), button[class*="gold"]:where(:not(#bt-shell, #bt-shell *)) {
  background: linear-gradient(135deg, #ffd700, #ff9d00) !important;
  color: #0b0e14 !important;
  border: none !important;
  box-shadow: 0 3px 14px rgba(255, 174, 0, 0.35) !important;
}

/* ===== Inputs ===== */
input:where(:not(#bt-shell, #bt-shell *)), select:where(:not(#bt-shell, #bt-shell *)), textarea:where(:not(#bt-shell, #bt-shell *)) {
  background: #0d1424 !important;
  border: 1px solid var(--bt-border-hi) !important;
  color: var(--bt-text) !important;
  border-radius: 9px !important;
  padding: 6px 10px !important;
}
input:focus:where(:not(#bt-shell, #bt-shell *)), select:focus:where(:not(#bt-shell, #bt-shell *)), textarea:focus:where(:not(#bt-shell, #bt-shell *)) {
  border-color: var(--bt-gold) !important;
  box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.2) !important;
  outline: none !important;
}

/* ===== Sub-barra Multipanel / Graficos ===== */
[class*="MultiPane"]:where(:not(#bt-shell, #bt-shell *)), [class*="multipane"]:where(:not(#bt-shell, #bt-shell *)) {
  color: var(--bt-gold) !important;
  font-weight: 800 !important;
  letter-spacing: 0.4px !important;
}

/* ===== Marco 4 graficas ===== */
#ft-4tf-frame:where(:not(#bt-shell, #bt-shell *)) {
  background: #0b0e14 !important;
  border: 1px solid rgba(255, 215, 0, 0.22) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5), 0 0 24px rgba(255, 215, 0, 0.06) !important;
  overflow: hidden !important;
}

/* ===== Logs ===== */
pre:where(:not(#bt-shell, #bt-shell *)), code:where(:not(#bt-shell, #bt-shell *)), [class*="log"]:where(:not(#bt-shell, #bt-shell *)), [class*="Log"]:where(:not(#bt-shell, #bt-shell *)) {
  background: #080c15 !important;
  color: #c9d4ea !important;
  border: 1px solid var(--bt-border) !important;
  border-radius: 10px !important;
  font-family: "JetBrains Mono", Consolas, monospace !important;
}

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bt-bg); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #3d4a6f, #232c47);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: #4d5c85; }

/* ===== Operaciones abiertas compacto (altura fija + scroll interno) ===== */
.bt-trades-compact:where(:not(#bt-shell, #bt-shell *)) {
  max-height: 152px !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  border-top: 1px solid rgba(255, 215, 0, 0.16) !important;
  flex: 0 0 auto !important;
}
.bt-trades-compact tbody td, .bt-trades-compact td {
  padding: 5px 10px !important;
  font-size: 12px !important;
}
.bt-trades-compact thead th, .bt-trades-compact th {
  padding: 6px 10px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
}

/* ===== Multipanel lateral fino (más sitio para las 4 gráficas) ===== */
.bt-slim:where(:not(#bt-shell, #bt-shell *)) {
  overflow: hidden !important;
  background: linear-gradient(180deg, #0d1322, #090e18) !important;
  border-right: 1px solid rgba(255, 215, 0, 0.16) !important;
}
.bt-slim > * { max-width: 100% !important; }
/* Cabecera Multipanel */
.bt-slim [class*="MultiPane"]:where(:not(#bt-shell, #bt-shell *)), .bt-slim [class*="multipane"] {
  font-size: 11px !important;
  padding: 4px 0 !important;
}
/* Botonera play/stop/pause/reload/forzar salida */
.bt-slim button:where(:not(#bt-shell, #bt-shell *)) {
  padding: 4px 5px !important;
  font-size: 11px !important;
  border-radius: 8px !important;
  border: 1px solid var(--bt-border) !important;
  background: #141b2e !important;
  color: var(--bt-muted) !important;
  min-width: 0 !important;
}
.bt-slim button:hover {
  color: var(--bt-gold) !important;
  border-color: rgba(255, 215, 0, 0.5) !important;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.18) !important;
}
/* Fila de iconos de vista */
.bt-slim [class*="toolbar"] button:where(:not(#bt-shell, #bt-shell *)), .bt-slim [class*="Toolbar"] button {
  padding: 3px 4px !important;
}
/* Buscador Filtrar */
.bt-slim input[placeholder="Filtrar"]:where(:not(#bt-shell, #bt-shell *)), .bt-slim input[type="text"] {
  height: 26px !important;
  font-size: 11px !important;
  border-radius: 8px !important;
}
/* Filas de pares compactas */
.bt-slim tbody td:where(:not(#bt-shell, #bt-shell *)), .bt-slim td {
  padding: 5px 6px !important;
  font-size: 11.5px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.bt-slim thead th, .bt-slim th { padding: 5px 6px !important; font-size: 9.5px !important; }

/* =====================================================================
   v7 - Terminal compacto a pantalla completa (SOLO presentacion)
   Activo solo en /trade cuando custom_timeframe.js marca <html class="bt-trade">
   y etiqueta cada widget de FreqUI con data-bt-area (side/chart/open/closed/detail).
   Sustituye el posicionamiento absoluto de vue-grid-layout (filas de 50px,
   alto total ~1786px -> scroll) por un CSS grid atado al viewport.
   ===================================================================== */
:root:where(:not(#bt-shell, #bt-shell *)) {
  --bt-side-w: 212px;
  --bt-bottom-h: clamp(170px, 18vh, 240px);
  --bt-gap: 4px;
}

/* Tono mas sobrio: menos brillo/oro, look terminal */
body::before { height: 2px; opacity: 0.55; }
header:where(:not(#bt-shell, #bt-shell *)), nav:where(:not(#bt-shell, #bt-shell *)) { box-shadow: none !important; }
nav a.router-link-active:where(:not(#bt-shell, #bt-shell *)), nav a.active:where(:not(#bt-shell, #bt-shell *)), header a.active:where(:not(#bt-shell, #bt-shell *)) {
  color: #e8edf7 !important;
  background: rgba(0, 212, 255, 0.12) !important;
  box-shadow: inset 0 -2px 0 var(--bt-cyan) !important;
  border-radius: 6px !important;
}
nav a:where(:not(#bt-shell, #bt-shell *)), header a:where(:not(#bt-shell, #bt-shell *)) { padding: 4px 10px !important; font-size: 12.5px !important; border-radius: 6px !important; }
.text-green-500:where(:not(#bt-shell, #bt-shell *)), .text-green-400:where(:not(#bt-shell, #bt-shell *)), .text-emerald-500:where(:not(#bt-shell, #bt-shell *)), .text-emerald-400:where(:not(#bt-shell, #bt-shell *)),
.text-red-500:where(:not(#bt-shell, #bt-shell *)), .text-red-400:where(:not(#bt-shell, #bt-shell *)), .text-rose-500:where(:not(#bt-shell, #bt-shell *)), .text-rose-400:where(:not(#bt-shell, #bt-shell *)) { box-shadow: none !important; padding: 1px 8px !important; }

/* --- Cadena de altura: 100dvh -> header -> main (sin scroll de pagina) --- */
html.bt-trade:where(:not(#bt-shell, #bt-shell *)), html.bt-trade body { height: 100%; overflow: hidden !important; }
html.bt-trade #app > #app, html.bt-trade #app.h-dvh { height: 100dvh !important; min-height: 0 !important; overflow: hidden !important; }
html.bt-trade main { overflow: hidden !important; min-height: 0 !important; flex: 1 1 0 !important; }
html.bt-trade main > .h-full { height: 100% !important; min-height: 0 !important; }

/* --- vue-grid-layout -> CSS grid --- */
html.bt-trade .vue-grid-layout.bt-grid:where(:not(#bt-shell, #bt-shell *)) {
  display: grid !important;
  grid-template-columns: var(--bt-side-w) minmax(0, 1.55fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) var(--bt-bottom-h);
  gap: var(--bt-gap);
  padding: var(--bt-gap);
  height: 100% !important;
  width: 100% !important;
  min-height: 0 !important;
  box-sizing: border-box;
  overflow: hidden;
}
html.bt-trade .vue-grid-layout.bt-grid > .vue-grid-item:not(.vue-grid-placeholder) {
  position: relative !important;
  transform: none !important;
  top: auto !important; left: auto !important;
  width: auto !important; height: auto !important;
  min-width: 0 !important; min-height: 0 !important; max-width: none !important;
  flex: none !important;
  overflow: hidden !important;
  touch-action: auto !important;
}
html.bt-trade .vue-grid-layout.bt-grid > .vue-grid-placeholder,
html.bt-trade .vue-grid-layout.bt-grid > .erd_scroll_detection_container { position: absolute !important; }
html.bt-trade .vue-grid-layout.bt-grid .vue-resizable-handle { display: none !important; }

html.bt-trade .bt-grid > [data-bt-area="side"]   { grid-column: 1; grid-row: 1 / span 2; }
html.bt-trade .bt-grid > [data-bt-area="chart"]  { grid-column: 2 / span 2; grid-row: 1; }
html.bt-trade .bt-grid > [data-bt-area="open"]   { grid-column: 2; grid-row: 2; }
html.bt-trade .bt-grid > [data-bt-area="closed"] { grid-column: 3; grid-row: 2; }
html.bt-trade .bt-grid > [data-bt-area="other"]  { display: none; }
/* Sin historial: operaciones abiertas ocupan toda la fila inferior */
html.bt-trade .bt-grid:not(:has(> [data-bt-area="closed"])) > [data-bt-area="open"]:where(:not(#bt-shell, #bt-shell *)) { grid-column: 2 / span 2; }
/* Detalle de operacion (al pulsar un trade): se abre como 3a columna inferior */
html.bt-trade .bt-grid:has(> [data-bt-area="detail"]):where(:not(#bt-shell, #bt-shell *)) {
  grid-template-columns: var(--bt-side-w) minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 0.9fr);
}
html.bt-trade .bt-grid:has(> [data-bt-area="detail"]) > [data-bt-area="chart"] { grid-column: 2 / span 3; }
html.bt-trade .bt-grid > [data-bt-area="detail"] { grid-column: 3; grid-row: 2; }
html.bt-trade .bt-grid:has(> [data-bt-area="detail"]) > [data-bt-area="closed"] { grid-column: 4; }

/* --- Tarjetas: contenedor flex columna que reparte el alto (sin h-full desbordando) --- */
html.bt-trade .bt-grid > .vue-grid-item > .flex-col:where(:not(#bt-shell, #bt-shell *)) {
  height: 100% !important; max-height: none !important; min-height: 0 !important;
  overflow: hidden !important;
  background: #0d1220 !important;
  border: 1px solid #1c2438 !important;
  border-radius: 6px !important;
}
html.bt-trade .bt-grid > .vue-grid-item > .flex-col > .p-0.h-full {
  flex: 1 1 0 !important; height: auto !important; min-height: 0 !important; max-width: none !important;
}
html.bt-trade .bt-grid .drag-header {
  padding: 2px 8px !important;
  min-height: 0 !important;
  font-size: 10.5px !important;
  line-height: 16px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: #8b95ad !important;
  background: #111827 !important;
  border-bottom: 1px solid #1c2438 !important;
  flex: 0 0 auto;
}
html.bt-trade .bt-grid .drag-header > div { justify-content: flex-start !important; }

/* --- Graficas: toda la cadena interna flex hasta el iframe de 4 ventanas --- */
html.bt-trade [data-bt-area="chart"] .flex-col > .h-full:where(:not(#bt-shell, #bt-shell *)) {
  flex: 1 1 0 !important; height: auto !important; min-height: 0 !important;
}
html.bt-trade [data-bt-area="chart"] .flex.h-full,
html.bt-trade [data-bt-area="chart"] .p-0.h-full > .flex { min-height: 0 !important; overflow: hidden !important; }
html.bt-trade [data-bt-area="chart"] .p-0.h-full { overflow: hidden !important; }
html.bt-trade [data-bt-area="chart"] .min-w-0.w-full.flex-1 {
  display: flex !important; flex-direction: column !important; min-height: 0 !important; height: 100% !important;
}
html.bt-trade #ft-4tf-frame {
  flex: 1 1 0 !important;
  height: 100% !important; min-height: 0 !important; max-height: none !important;
  border-radius: 6px !important;
  border: 1px solid #1c2438 !important;
  box-shadow: none !important;
}
html.bt-trade #ft-4tf-iframe { height: 100% !important; min-height: 0 !important; }
/* Barra de control (estrategia | par | multipar | areas | heikin | plot config) en una linea */
html.bt-trade [data-bt-area="chart"] .p-0.h-full > .flex > .flex-col > .flex:first-child:where(:not(#bt-shell, #bt-shell *)) {
  flex-wrap: nowrap !important;
  min-height: 30px;
  padding: 2px 4px;
  gap: 8px !important;
  border-bottom: 1px solid #1c2438;
  font-size: 12px;
  overflow: hidden;
}
html.bt-trade [data-bt-area="chart"] .p-0.h-full > .flex > .flex-col > .flex:first-child button { padding-top: 3px !important; padding-bottom: 3px !important; }
html.bt-trade [data-bt-area="chart"] .min-w-0.w-full.h-full > .flex-col > .flex:first-child { font-size: 11px; min-height: 18px; }

/* --- Barra lateral estrecha con scroll interno propio --- */
html.bt-trade [data-bt-area="side"] > .flex-col > .p-0.h-full:where(:not(#bt-shell, #bt-shell *)) { overflow-y: auto !important; overflow-x: hidden !important; }
html.bt-trade [data-bt-area="side"] button[id*="reka-tabs"] { padding: 4px 2px !important; }
html.bt-trade [data-bt-area="side"] ul li { padding-top: 3px !important; padding-bottom: 3px !important; font-size: 12px; }

/* --- Fila inferior: tablas compactas, cabecera fija, scroll interno --- */
html.bt-trade [data-bt-area="open"] .open-trades:where(:not(#bt-shell, #bt-shell *)),
html.bt-trade [data-bt-area="closed"] .trade-history { height: 100% !important; overflow: auto !important; }
html.bt-trade [data-bt-area="open"] table thead th,
html.bt-trade [data-bt-area="closed"] table thead th,
html.bt-trade [data-bt-area="detail"] table thead th {
  position: sticky !important; top: 0 !important; z-index: 2 !important;
  background: #111827 !important;
  padding: 4px 8px !important; font-size: 10px !important; color: #9aa4bc !important;
  border-bottom: 1px solid #1c2438 !important;
}
html.bt-trade [data-bt-area="open"] tbody td,
html.bt-trade [data-bt-area="closed"] tbody td,
html.bt-trade [data-bt-area="detail"] tbody td { padding: 3px 8px !important; font-size: 11.5px !important; border-bottom-color: #161d2e !important; }
html.bt-trade [data-bt-area="closed"] .trade-history > div:first-child input { height: 24px !important; padding: 2px 8px !important; font-size: 11px !important; }
html.bt-trade [data-bt-area="detail"] > .flex-col > .p-0.h-full { overflow: auto !important; font-size: 11.5px; }
html.bt-trade .bt-trades-compact { max-height: none !important; border-top: 0 !important; }