:root {
  --bm-header-h: 76px;          /* acomoda el logo al doble (60px) */
  --bm-bg: #ffffff;
  --bm-header-bg: #ffffff;
  --bm-border: #e6e8ea;
  --bm-text: #0e0e0e;
  --bm-cta-bg: #0e0e0e;
  --bm-cta-text: #ffffff;
}
:root[data-theme="dark"] {
  --bm-bg: #000000;             /* negro absoluto */
  --bm-header-bg: #000000;
  --bm-border: #1c1f22;
  --bm-text: #ffffff;
  --bm-cta-bg: #ffffff;
  --bm-cta-text: #000000;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%;
  background: var(--bm-bg); color: var(--bm-text);
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.bm-header {
  height: var(--bm-header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
  background: var(--bm-header-bg);
  border-bottom: 1px solid var(--bm-border);
}
/* Logo: asset DEDICADO por tema (sin invert → sin halos). El claro va sobre fondo
   blanco; el oscuro (logo_invertido) sobre fondo negro. */
.bm-logo img { height: 60px; display: block; }
.bm-logo .bm-logo-dark { display: none; }
:root[data-theme="dark"] .bm-logo .bm-logo-light { display: none; }
:root[data-theme="dark"] .bm-logo .bm-logo-dark { display: block; }

.bm-actions { display: flex; align-items: center; gap: 10px; }
.bm-cta {
  background: var(--bm-cta-bg); color: var(--bm-cta-text);
  text-decoration: none; font-weight: 600; font-size: 13px;
  padding: 7px 14px; border-radius: 6px; line-height: 1;
}
.bm-toggle-btn {
  background: transparent; border: 1px solid var(--bm-border); color: var(--bm-text);
  border-radius: 6px; min-width: 34px; height: 34px; padding: 0 6px; cursor: pointer;
  font-size: 13px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
/* Estado ACTIVO (p.ej. Bid/Ask encendido): resaltado con la paleta de marca. */
.bm-toggle-btn.bm-active {
  background: var(--bm-cta-bg); color: var(--bm-cta-text); border-color: var(--bm-cta-bg);
}
.bm-chart { position: absolute; top: var(--bm-header-h); left: 0; right: 0; bottom: 0; }

/* Móvil: header aún más compacto para no comer pantalla vertical. */
@media (max-width: 600px) {
  :root { --bm-header-h: 64px; }
  .bm-header { padding: 0 12px; }
  .bm-logo img { height: 50px; }
  .bm-cta { font-size: 12px; padding: 6px 12px; }
  .bm-toggle-btn { min-width: 32px; height: 32px; font-size: 12px; }
}