/* El bocadillo de todo el sitio (2026-11-05, `static/tip.js`): la misma piel
 * que el globo de la «i» (`.hint-pop`), con un título, el texto y la fuente.
 * Junta el de Presales (`.ps-tip`) y el de las piezas del terminal
 * (`.tp-tip`), que se fueron con él. */
.bb-tip {
  position: fixed; left: 0; top: 0; z-index: 300;
  width: max-content; max-width: min(44ch, calc(100vw - 16px));
  display: grid; gap: 3px;
  padding: var(--s2) var(--s3);
  background: var(--bg-elevated); border: 1px solid var(--line-strong); border-radius: 8px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 40%);
  color: var(--text); font-size: var(--size-xs); font-weight: 400; line-height: 1.45;
  letter-spacing: normal; text-transform: none; text-align: left; white-space: normal;
  opacity: 0; visibility: hidden; transition: opacity .1s ease;
  pointer-events: none;
}
.bb-tip.on { opacity: 1; visibility: visible; }
.bb-tip-t { font-size: var(--size-sm); font-weight: 600; color: var(--text); }
.bb-tip-x { color: var(--text-muted); }
/* Sin título ni fuente (lo normal en una pieza del terminal), el texto es
   todo el globo: en el color del texto, no apagado. */
.bb-tip-x:only-child { color: var(--text); }
.bb-tip-src { color: var(--text-faint); font-size: var(--size-2xs); border-top: 1px solid var(--line); padding-top: 4px; margin-top: 2px; }
[data-tip] { cursor: help; }
a[data-tip], button[data-tip], [data-tip] a { cursor: pointer; }
[data-tip]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
/* En las piezas del terminal el bocadillo es un detalle de una fila o de una
   barra: sin el cursor de ayuda, que en una lista entera de filas cansa. */
[data-tp-tip] { cursor: default; }
a[data-tp-tip] { cursor: pointer; }
/* La lectura de una barra o un tramo (`fx.js` → `bbTip.showRead`): compacta,
   en cifras tabulares, con el título en negrita y el valor en el color del
   texto (la piel que tenía `.sx-tip`). */
.bb-tip.bb-tip-read { gap: 1px; padding: 5px 9px; border-radius: var(--radius-sm); line-height: 1.35;
  font-variant-numeric: tabular-nums; max-width: min(320px, calc(100vw - 16px)); }
.bb-tip-read .bb-tip-t { font-size: var(--size-xs); font-weight: 650; }
.bb-tip-read .bb-tip-t + .bb-tip-x { color: var(--text); }
@media (prefers-reduced-motion: reduce) { .bb-tip { transition: none; } }