/*
  BolsaHoy — Componentes compartidos, construidos exclusivamente sobre
  var(--bh-*) de tokens.css. Adopción progresiva: las páginas migradas
  pueden usar estas clases en vez de sus equivalentes locales, no es
  obligatorio migrar todo de golpe.
*/

html,
body {
  overflow-x: hidden;
}

html {
  scrollbar-width: thin;
  scrollbar-color: rgba(31, 128, 255, .82) rgba(31, 128, 255, .08);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(31, 128, 255, .08);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--bh-blue), var(--bh-green));
  border: 2px solid rgba(8, 9, 11, .68);
  border-radius: 999px;
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
  border-color: rgba(245, 249, 255, .92);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--bh-blue-2), var(--bh-blue));
}

.bh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--bh-line);
  border-radius: var(--bh-radius-sm);
  background: var(--bh-bg-elevated);
  color: var(--bh-ink);
  font-family: var(--bh-font-sans);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.bh-btn:hover {
  border-color: var(--bh-blue);
}

.bh-btn-primary {
  border-color: transparent;
  background: linear-gradient(135deg, var(--bh-blue), var(--bh-blue-2));
  color: var(--bh-white);
}

.bh-btn-primary:hover {
  box-shadow: var(--bh-shadow-glow);
}

.bh-btn-danger {
  border-color: rgba(240, 68, 56, 0.4);
  color: var(--bh-red);
  background: transparent;
}

.bh-card {
  border: 1px solid var(--bh-line);
  border-radius: var(--bh-radius);
  background: var(--bh-panel);
  box-shadow: var(--bh-shadow);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.bh-card:hover {
  border-color: rgba(31, 128, 255, 0.35);
  box-shadow: var(--bh-shadow-glow);
}

.bh-input {
  width: 100%;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--bh-line);
  border-radius: var(--bh-radius-sm);
  background: var(--bh-bg-elevated);
  color: var(--bh-ink);
  font-family: var(--bh-font-sans);
  font-size: 14px;
}

.bh-input:focus {
  outline: none;
  border-color: var(--bh-blue);
}

.bh-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  font-family: var(--bh-font-mono);
}

.bh-badge-up {
  color: var(--bh-up);
  background: rgba(0, 196, 140, 0.14);
}

.bh-badge-down {
  color: var(--bh-down);
  background: rgba(240, 68, 56, 0.14);
}

.bh-mono {
  font-family: var(--bh-font-mono);
  font-variant-numeric: tabular-nums;
}

.bh-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: rgba(2, 4, 10, 0.72);
  backdrop-filter: blur(14px);
}

.bh-modal {
  width: min(560px, calc(100% - 32px));
  max-height: calc(100vh - 64px);
  max-height: calc(100dvh - 64px);
  overflow: auto;
  border: 1px solid var(--bh-line);
  border-radius: var(--bh-radius-lg);
  background: var(--bh-panel);
  box-shadow: var(--bh-shadow);
}

/* Icono SVG genérico — usado en toda la plataforma en vez de emojis */
.bh-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  vertical-align: -3px;
  color: currentColor;
}

/* Toggle de tema — icono se muestra según data-theme sin JS adicional */
.bh-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--bh-line);
  border-radius: 999px;
  background: var(--bh-bg-elevated);
  color: var(--bh-ink);
  cursor: pointer;
}

.bh-theme-toggle .bh-icon,
[data-theme-toggle] .bh-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
}

[data-theme-toggle] .icon-moon {
  display: none;
}

[data-theme="dark"] [data-theme-toggle] .icon-sun {
  display: none;
}

[data-theme="dark"] [data-theme-toggle] .icon-moon {
  display: inline-block;
}

[data-theme="dark"] .bh-theme-toggle .icon-moon {
  display: inline-block;
}

/* Foco accesible consistente — visible solo en navegación por teclado */
:focus-visible {
  outline: 2px solid var(--bh-blue);
  outline-offset: 2px;
  border-radius: var(--bh-radius-sm);
}

/* Skeleton de carga reutilizable — reemplaza "Cargando..." por un shimmer */
.bh-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--bh-panel-2);
  border-radius: var(--bh-radius-sm);
  color: transparent !important;
}

.bh-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  animation: bh-shimmer 1.6s ease-in-out infinite;
}

[data-theme="light"] .bh-skeleton::after {
  background: linear-gradient(90deg, transparent, rgba(8, 9, 11, 0.06), transparent);
}

@keyframes bh-shimmer {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

@media (prefers-reduced-motion: no-preference) {
  .bh-btn,
  .bh-card {
    transition-duration: 0.18s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bh-btn,
  .bh-card {
    transition: none;
  }
  .bh-skeleton::after {
    animation: none;
  }
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/*
  Menu flotante "glass" compartido por todas las paginas.
  Envuelve el header existente de cada pagina (no sustituye su contenido):
  se le anade la clase bh-float-nav al <header> y bh-float-nav__mark al
  logotipo circular flotante que se inserta como primer hijo. El resto del
  contenido del header (nav, acciones, ids usados por JS) no cambia.
*/
.bh-float-nav {
  position: sticky;
  z-index: 40;
  margin: 10px auto 0;
  width: min(var(--bh-nav-max, 1180px), calc(100% - var(--bh-nav-gutter, 24px)));
  display: flex;
  align-items: center;
  border-radius: 999px;
  background: rgba(9, 13, 20, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

[data-theme="light"] .bh-float-nav {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(10, 20, 40, 0.1);
  box-shadow: 0 16px 32px rgba(10, 20, 40, 0.12);
}

.bh-float-nav__mark {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  margin: 0 2px 0 6px;
  box-shadow: 0 6px 16px rgba(31, 128, 255, .38), 0 0 0 2px rgba(255, 255, 255, .92);
  overflow: hidden;
}

.bh-float-nav__mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/*
  Enlaces de navegacion completos, compartidos por todas las paginas dentro
  de .bh-float-nav. El enlace de la pagina actual lleva class="active".
*/
.bh-float-nav-links {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex: 1;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  min-width: 0;
}
.bh-float-nav-links::-webkit-scrollbar { display: none; }
.bh-float-nav-links a {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  color: inherit;
  opacity: .72;
  text-decoration: none;
  font-size: 14px;
  font-weight: 850;
  transition: color 150ms ease, background 150ms ease, opacity 150ms ease;
}
.bh-float-nav-links a::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 2px;
  height: 2px; border-radius: 2px;
  background: var(--bh-blue);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 150ms ease;
}
.bh-float-nav-links a:hover::after, .bh-float-nav-links a.active::after { transform: scaleX(1); }
.bh-float-nav-links a:hover, .bh-float-nav-links a.active {
  opacity: 1; color: var(--bh-blue); background: rgba(31, 128, 255, .1);
}

/* BolsaBot: mismo tratamiento destacado (icono + pastilla) en todas las páginas */
.bh-float-nav-links a.nav-bolsabot {
  gap: 6px;
  opacity: 1;
  background: rgba(31, 128, 255, .15);
  border: 1px solid rgba(31, 128, 255, .3);
  color: var(--bh-blue);
}
.bh-float-nav-links a.nav-bolsabot:hover { background: rgba(31, 128, 255, .3); }
.bh-float-nav-links a.nav-bolsabot::after { display: none; }
.bh-float-nav-links a.nav-bolsabot svg { width: 16px; height: 16px; }

/* El FAB solo se muestra en la portada/noticias. El arte tiene antena y
   laterales transparentes; no debe heredarse el max-width ni quedar recortado
   por el círculo del botón. */
.bh-fab { overflow: visible; }
.bh-fab img { display:block; width:56px; height:56px; max-width:none; object-fit:contain; }
@media (max-width:640px) {
  .bh-fab { right:14px !important; bottom:14px !important; width:60px !important; height:60px !important; }
  .bh-fab img { width:48px; height:48px; }
}

/*
  Barra de cotizaciones (ticker) superior, compartida por todas las paginas.
  Misma altura/posicion en todas; en movil se reduce mucho para que sea
  proporcional (antes se quedaba igual de alta que en escritorio).
*/
.market-strip {
  position: relative;
  top: 0;
  z-index: 30;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background: #08090b;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
/*
  Los degradados de los extremos se pintaban con el color de la barra por
  encima del widget. Al ser opacos se veian como dos franjas laterales que
  ensuciaban la cinta, asi que se retiran: TradingView ya recorta su propio
  contenido en los bordes.
*/
.market-strip::before,
.market-strip::after {
  content: none;
}
[data-theme="light"] .market-strip {
  color: #081426;
  background: #f4f8ff;
  border-bottom-color: rgba(31, 128, 255, 0.16);
}
[data-theme="light"] .market-strip::before {
  background: linear-gradient(90deg, #f4f8ff, rgba(244, 248, 255, 0));
}
[data-theme="light"] .market-strip::after {
  background: linear-gradient(270deg, #f4f8ff, rgba(244, 248, 255, 0));
}
.market-strip__inner {
  width: 100%;
  max-width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  contain: layout paint;
  scrollbar-width: none;
}
.market-strip__inner--tv {
  display: block;
  min-height: 36px;
  height: 36px;
  padding: 0;
}
.bh-tv-ticker,
.bh-tv-ticker .tradingview-widget-container__widget {
  width: 100%;
  height: 36px;
  overflow: hidden;
}
/*
  TradingView no deja elegir el tamano de letra de la cinta. Se renderiza el
  iframe a mayor tamano y se reduce con scale: el texto queda mas fino y la
  barra mas baja, sin recortar contenido. Los porcentajes compensan la escala
  (100 / .82 = 122) para que siga ocupando el ancho completo.
*/
/* Selector con la barra delante para ganar a la regla movil de mas abajo
   (.tradingview-widget-container ... {width:100%!important}), que si no capaba
   el 122% y dejaba una franja vacia a la derecha en el movil. */
.market-strip .bh-tv-ticker iframe {
  display: block !important;
  /* El widget de TradingView pinta sus propios extremos (bordes/fade) en un
     color que no coincide con la barra y no se pueden recolorear desde fuera
     por ser un iframe de otro dominio. Se hace el iframe mas ancho que la
     barra y se desplaza para que esos extremos queden FUERA del contenedor,
     que los recorta con overflow:hidden. Solo se ve el centro, con su fondo
     correcto. 122% compensa el scale y +64px dan ~26px de recorte por lado. */
  width: calc(122% + 98px) !important;
  max-width: none !important;
  height: 44px !important;
  margin-left: -40px !important;
  transform: scale(.82);
  transform-origin: 0 0;
}
/*
  El iframe de TradingView pinta su fondo por defecto segun color-scheme, y
  html declara "light dark", asi que seguia la preferencia del SISTEMA y no el
  tema de la web: en un movil con el sistema en claro la cinta salia blanca
  aunque BolsaHoy estuviera en oscuro. Los demas widgets ya fijaban su
  color-scheme; al ticker superior le faltaba.
*/
[data-theme="dark"] .bh-tv-ticker,
[data-theme="dark"] .bh-tv-ticker .tradingview-widget-container,
[data-theme="dark"] .bh-tv-ticker .tradingview-widget-container__widget,
[data-theme="dark"] .bh-tv-ticker iframe {
  color-scheme: dark;
  background: #08090b;
}
[data-theme="light"] .bh-tv-ticker,
[data-theme="light"] .bh-tv-ticker .tradingview-widget-container,
[data-theme="light"] .bh-tv-ticker .tradingview-widget-container__widget,
[data-theme="light"] .bh-tv-ticker iframe {
  color-scheme: light;
  background: #f4f8ff;
}
.ticker-track {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: max-content;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  animation: tickerMove 34s linear infinite;
}
.market-strip:hover .ticker-track { animation-play-state: paused; }
@keyframes tickerMove {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
.market-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}
.market-pill:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.22); }
.market-pill strong { color: rgba(255, 255, 255, 0.76); font-weight: 850; }
.market-pill em {
  color: rgba(255, 255, 255, 0.92);
  font-style: normal;
  font-family: var(--bh-font-mono);
  font-variant-numeric: tabular-nums;
}
.market-pill .up, .market-pill .down {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-family: var(--bh-font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.market-pill .up { color: #00c48c; }
.market-pill .down { color: #ff6b6b; }
.market-pill .up::before { content: "\25B2"; font-size: 8px; }
.market-pill .down::before { content: "\25BC"; font-size: 8px; }

/*
  Tema claro para la cinta de reserva (la que se pinta cuando el widget de
  TradingView no llega a cargar, algo habitual en movil con red lenta).
  El bloque de arriba fija el texto en blanco, y sobre el fondo claro de
  .market-strip (#f4f8ff) los nombres y precios quedaban invisibles.
*/
[data-theme="light"] .market-pill {
  border-color: rgba(8, 20, 38, 0.12);
  background: rgba(8, 20, 38, 0.05);
  color: #081426;
}
[data-theme="light"] .market-pill:hover {
  background: rgba(8, 20, 38, 0.09);
  border-color: rgba(31, 128, 255, 0.3);
}
[data-theme="light"] .market-pill strong { color: rgba(8, 20, 38, 0.72); }
[data-theme="light"] .market-pill em { color: #081426; }
[data-theme="light"] .market-pill .up { color: #007a50; }
[data-theme="light"] .market-pill .down { color: #d92d20; }

@media (max-width: 768px) {
  .market-strip__inner { min-height: 36px; gap: 6px; }
  .ticker-track { gap: 6px; animation-duration: 34s; }
  .market-pill { min-height: 30px; padding: 0 8px; gap: 5px; font-size: 10.5px; }
  .market-pill .up::before, .market-pill .down::before { font-size: 6px; }
}

/*
  Menu movil compartido (hamburguesa + panel deslizante). Se usa en paginas
  cuyo header solo trae los enlaces de escritorio (.bh-float-nav-links), para
  que en movil no queden enlaces inalcanzables. Marcado HTML esperado:
  boton .bh-mobnav-btn dentro del header, y fuera de el:
  <div class="bh-mobnav-overlay" id="bhMobOverlay"></div>
  <nav class="bh-mobnav" id="bhMobNav"> ... enlaces .bh-mobnav-link ... </nav>
  Logica de apertura/cierre en assets/bolsahoy-mobnav.js
*/
.bh-mobnav-btn {
  display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: 40px; height: 40px; border-radius: 8px;
  background: rgba(var(--bh-fg-rgb, 255,255,255), .08);
  border: 1px solid rgba(var(--bh-fg-rgb, 255,255,255), .12);
  cursor: pointer; padding: 8px; flex-shrink: 0;
}
.bh-mobnav-btn span {
  display: block; width: 100%; height: 2px;
  background: rgba(var(--bh-fg-rgb, 255,255,255), .8); border-radius: 2px;
  transition: all .25s;
}
.bh-mobnav-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.bh-mobnav-btn.open span:nth-child(2) { opacity: 0; }
.bh-mobnav-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.bh-mobnav-overlay {
  display: none; position: fixed; inset: 0; z-index: 998;
  background: rgba(0,0,0,.6); backdrop-filter: blur(4px);
}
.bh-mobnav-overlay.open { display: block; }
.bh-mobnav {
  position: fixed; top: 0; right: -100%; bottom: 0;
  width: min(280px, 85vw); z-index: 999;
  background: #070b14; border-left: 1px solid rgba(255,255,255,.1);
  display: flex; flex-direction: column;
  transition: right .3s cubic-bezier(.25,.46,.45,.94);
  box-shadow: -8px 0 40px rgba(0,0,0,.5);
}
[data-theme="light"] .bh-mobnav { background: #f4f7fb; border-left-color: rgba(10,20,40,.1); }
.bh-mobnav.open { right: 0; }
.bh-mobnav-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 16px 14px; border-bottom: 1px solid rgba(var(--bh-fg-rgb, 255,255,255), .08);
}
.bh-mobnav-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
  background: rgba(var(--bh-fg-rgb, 255,255,255), .08); border: none;
  color: rgba(var(--bh-fg-rgb, 255,255,255), .7); font-size: 15px; cursor: pointer;
}
.bh-mobnav-links { flex: 1; padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; }
.bh-mobnav-link {
  display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 10px;
  color: rgba(var(--bh-fg-rgb, 255,255,255), .78); font-size: 15px; font-weight: 700;
  text-decoration: none; transition: all .18s;
}
.bh-mobnav-link svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .85; }
.bh-mobnav-link:hover, .bh-mobnav-link.active { background: rgba(31,128,255,.12); color: var(--bh-blue); }
.bh-mobnav-bottom { padding: 14px; border-top: 1px solid rgba(var(--bh-fg-rgb, 255,255,255), .08); }
.bh-mobnav-account {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 11px 14px; border-radius: 10px;
  background: rgba(var(--bh-fg-rgb, 255,255,255), .06); border: 1px solid rgba(var(--bh-fg-rgb, 255,255,255), .1);
  color: rgba(var(--bh-fg-rgb, 255,255,255), .8); font-size: 14px; font-weight: 700;
  cursor: pointer; transition: all .18s;
}
.bh-mobnav-account:hover { background: rgba(var(--bh-fg-rgb, 255,255,255), .12); }
.bh-mobnav-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg,#1f80ff,#0d54c8);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 900; color: #fff;
}

@media (max-width: 768px) {
  .bh-mobnav-btn { display: flex !important; }
  .bh-hide-mobile { display: none !important; }
}

/*
  Responsive guardrail shared by the whole site.
  These rules are deliberately mobile-only: the desktop composition keeps its
  existing widths, spacing and decorative layers. On narrow viewports they
  prevent fixed ambient art, embeds and long grid children from becoming a
  second horizontal canvas.
*/
@media (max-width: 768px) {
  html,
  body {
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
    overscroll-behavior-x: none;
  }

  body > .bh-visual-layer,
  .bh-visual-layer {
    width: 100vw;
    max-width: 100vw;
    overflow: clip;
    contain: paint;
  }

  .market-strip,
  .market-strip__inner,
  .bh-float-nav,
  main,
  .shell,
  .page,
  section,
  article,
  aside,
  form {
    min-width: 0;
    max-width: 100%;
  }

  img,
  svg,
  video,
  canvas,
  iframe {
    max-width: 100%;
  }

  /* Grid/flex children must be allowed to shrink inside cards. */
  .grid > *,
  [class*="grid"] > *,
  .flex > *,
  [class*="row"] > * {
    min-width: 0;
  }

  /* Wide embeds remain usable without pushing the document sideways. */
  .tradingview-widget-container,
  .tradingview-widget-container iframe,
  .tv-lightweight-charts,
  .tv-embed-widget-wrapper {
    width: 100% !important;
    max-width: 100% !important;
  }

  .bh-modal-overlay {
    padding: 16px;
  }

  .bh-modal {
    width: min(100%, 560px);
    max-height: calc(100dvh - 32px);
  }
}

/* Shared asset identity system: market rows, watchlists, related assets and ticker. */
.bh-asset-logo {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  position: relative;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  color: #fff;
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.28), transparent 34%),
    linear-gradient(145deg, var(--asset-accent, var(--bh-blue)), #07101d);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.bh-asset-logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  background: #fff;
}
.bh-asset-logo__fallback { font-size: 10px; font-weight: 950; letter-spacing: -.02em; }
.bh-asset-logo--xs { width: 20px; height: 20px; flex-basis: 20px; }
.bh-asset-logo--xs .bh-asset-logo__fallback { font-size: 7px; }
.bh-asset-logo--sm { width: 28px; height: 28px; flex-basis: 28px; }
.bh-asset-logo--sm .bh-asset-logo__fallback { font-size: 8px; }
.bh-asset-logo--lg { width: 64px; height: 64px; flex-basis: 64px; border-radius: 18px; }
.bh-asset-logo--lg .bh-asset-logo__fallback { font-size: 15px; }

.bh-asset-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  width: 100%;
  color: inherit;
}
.bh-asset-row:is(button, a) {
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.bh-asset-copy { display: grid; gap: 2px; min-width: 0; }
.bh-asset-copy strong {
  min-width: 0;
  overflow: hidden;
  color: var(--bh-ink, var(--ink, #0b1020));
  font-size: 14px;
  line-height: 1.15;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bh-asset-copy small {
  min-width: 0;
  overflow: hidden;
  color: var(--bh-ink-muted, var(--muted, #6b7280));
  font-size: 11px;
  line-height: 1.2;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bh-asset-side {
  display: grid;
  justify-items: end;
  gap: 2px;
  min-width: 56px;
  font-family: var(--bh-font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.bh-asset-side strong {
  color: var(--bh-ink, var(--ink, #0b1020));
  font-size: 14px;
  line-height: 1.15;
  font-weight: 950;
}
.bh-asset-side small { font-size: 11px; line-height: 1.1; font-weight: 900; white-space: nowrap; }
.asset-positive,
.asset-negative {
  font-family: var(--bh-font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-weight: 950;
}
.asset-positive { color: #00b894; }
.asset-negative { color: #e11900; }
.asset-positive::before { content: "\25B2 "; font-size: 8px; }
.asset-negative::before { content: "\25BC "; font-size: 8px; }
.asset-neutral { color: var(--bh-ink-muted, var(--muted, #6b7280)); font-family: var(--bh-font-mono); font-variant-numeric: tabular-nums; font-weight: 750; opacity: .75; }
.bh-asset-identity { display: inline-flex; align-items: center; min-width: 0; gap: 10px; }
.bh-asset-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 6px 9px;
  border: 1px solid rgba(31,128,255,.18);
  border-radius: 999px;
  background: rgba(31,128,255,.12);
  color: var(--bh-blue);
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}
.bh-asset-badge span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.market-pill .bh-asset-logo { width: 20px; height: 20px; flex-basis: 20px; }
.market-pill.bh-asset-row {
  display: inline-grid;
  grid-template-columns: auto auto auto;
  width: auto;
}
.market-pill .bh-asset-copy { gap: 0; }
.market-pill .bh-asset-copy strong { color: rgba(255,255,255,.78); font-size: 12px; }
.market-pill .bh-asset-copy small { display: none; }
.market-pill .bh-asset-side {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.market-pill .bh-asset-side strong,
.market-pill .bh-asset-side small { color: rgba(255,255,255,.92); font-size: 12px; }
.market-pill .bh-asset-side small.asset-positive { color: #00c48c; }
.market-pill .bh-asset-side small.asset-negative { color: #ff6b6b; }

@media (max-width: 768px) {
  .bh-asset-row { gap: 9px; }
  .bh-asset-logo { width: 32px; height: 32px; flex-basis: 32px; }
  .bh-asset-copy strong { font-size: 13px; }
  .bh-asset-copy small { font-size: 10px; }
  .bh-asset-side { min-width: 44px; }
  .bh-asset-side strong { font-size: 13px; }
  .bh-asset-side small { font-size: 10px; }
  .market-pill .bh-asset-logo { width: 18px; height: 18px; flex-basis: 18px; }
  .market-pill .bh-asset-copy strong,
  .market-pill .bh-asset-side strong,
  .market-pill .bh-asset-side small { font-size: 10.5px; }
}