/* Tanda 2 de la renovación del terminal: su hoja, y sólo suya.
   La enlaza terminal.html con la vista previa (tanda 0, 2026-11-04). Usar los
   tokens y clases de terminal-pieces.css; reglas con prefijo de la tanda
   (.t2-…) o bajo [data-tp="clave"] de sus piezas. Contrato: final de
   terminal_plan.md.

   Piezas: Market (08), Movers (12), la caja con pestañas (mkt.rotator),
   Trending coins y stocks, Derivatives (19) en lista y baldosas, ETF flows
   (18) y las siete cajas del cuadro de derivados (dv.*). Todo se adapta por el
   tamaño de la pieza (`@container pieza`), nunca por la ventana. Sólo tokens:
   ningún color suelto. */

/* --- Comunes de la tanda ------------------------------------------------ */

/* Un selector segmentado hecho con radios (la vista de la tabla, el «Show
   top», diario o acumulado): la misma forma que `.tp-seg`, pero sin pedir
   nada al servidor. El radio va escondido y el rótulo es el botón. */
.t2-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 9px; background: var(--seg-bg);
  border: 1px solid var(--tp-div); flex: none; }
.t2-seg label { position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 28px; min-width: 34px; padding: 0 10px; border-radius: 7px; cursor: pointer; white-space: nowrap;
  font-size: var(--size-xs); font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.t2-seg label:hover { color: var(--text); }
.t2-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.t2-seg label:has(input:checked) { background: var(--seg-on); color: var(--text);
  box-shadow: 0 0 0 1px var(--seg-on-ring), 0 1px 2px rgb(0 0 0 / 14%); }
.t2-seg label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }

/* El triángulo de subida y bajada, y el rombo de «en las noticias». */
.t2-tri { display: inline-block; width: 0; height: 0; flex: none; border-left: 5px solid transparent;
  border-right: 5px solid transparent; vertical-align: middle; }
.t2-tri.up { border-bottom: 8px solid var(--up); }
.t2-tri.down { border-top: 8px solid var(--down); }
.t2-tri.flat { width: 6px; height: 2px; border: 0; background: var(--text-faint); }
.t2-tri.news { width: 9px; height: 9px; border: 0; border-radius: 2px; background: var(--accent); transform: rotate(45deg); }

.t2-chg { display: inline-flex; align-items: center; gap: 5px; min-width: 64px; justify-content: flex-end;
  font-weight: 600; font-size: var(--size-sm); }
.t2-chg.up { color: var(--up); } .t2-chg.down { color: var(--down); }
.widget.tp .up { color: var(--up); }
.widget.tp .down { color: var(--down); }
.widget.tp .tp-fig.up { color: var(--up); } .widget.tp .tp-fig.down { color: var(--down); }

/* Largos contra cortos: una barra partida en verde y rojo. */
.t2-ls { display: flex; gap: 3px; height: 8px; min-width: 60px; flex: 1 1 auto; border-radius: 4px; overflow: hidden; }
.t2-ls > i { display: block; height: 100%; border-radius: 4px; }
.t2-ls > i.up { width: calc(var(--v, 50) * 1%); background: var(--up-fill); }
.t2-ls > i.down { flex: 1 1 auto; background: var(--down); }
.t2-ls-big { height: 12px; flex: none; }
.t2-ls-lbl { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); flex-wrap: wrap;
  font-size: var(--size-sm); color: var(--text-muted); }
.t2-ls-lbl b { color: var(--text); font-variant-numeric: tabular-nums; }
.t2-ls-lbl b.up { color: var(--up); } .t2-ls-lbl b.down { color: var(--down); }

/* --- 08 Market ---------------------------------------------------------- */
.t2-mkt > .tp-body.t2-mkt-body { padding: var(--s1) 0 0; gap: var(--s2); overflow: hidden; }
.t2-mkt-bar { display: flex; align-items: center; gap: var(--s2) var(--s3); flex-wrap: wrap; padding: 0 var(--s5); min-width: 0; }
.t2-mkt-bar2 { justify-content: space-between; }
.t2-search { flex: 1 1 180px; display: flex; align-items: center; gap: var(--s2); min-width: 0; max-width: 360px;
  margin-left: auto; height: 34px; padding: 0 var(--s3); border: 1px solid var(--line-strong); border-radius: 9px;
  background: var(--surface-sunken); color: var(--text-faint); }
.t2-search:focus-within { border-color: var(--accent); }
.t2-search svg { width: 14px; height: 14px; flex: none; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; }
.t2-search input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: none; color: var(--text);
  font: inherit; font-size: var(--size-sm); }
.t2-select select { height: 34px; min-width: 0; max-width: 240px; padding: 0 var(--s6) 0 var(--s3);
  border: 1px solid var(--line-strong); border-radius: 9px; background-color: var(--surface-sunken);
  color: var(--text); font: inherit; font-size: var(--size-sm); font-weight: 600; }
.t2-top { display: inline-flex; align-items: center; gap: var(--s2); margin-left: auto; }
.t2-mkt-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.t2-table { width: 100%; border-collapse: collapse; font-size: var(--size-sm); }
.t2-table thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); font-size: var(--size-2xs);
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint);
  border-bottom: 1px solid var(--tp-div); text-align: left; padding: 8px 8px; }
.t2-table thead th.num { text-align: right; }
.t2-table td { padding: 8px 8px; border-bottom: 1px solid var(--tp-div); }
.t2-table tbody tr:hover { background: var(--surface-hover); }
.t2-table tr > :first-child { padding-left: var(--s5); width: 28px; }
.t2-table tr > :last-child { padding-right: var(--s5); }
.t2-table td.num { font-variant-numeric: tabular-nums; }
/* El rango del día con una pista que se ve (F10) y la línea de 7 días. */
.t2-table .range { width: 96px; height: 4px; background: var(--track); }
.t2-table .range i { background: var(--text); }
.t2-table td:nth-child(13) svg { width: 96px; height: 24px; display: block; }
/* Las columnas que la página esconde por el ancho de la **ventana** (`.d1`…
   `.d4`) aquí las decide el ancho de **la pieza**. */
.t2-table .d1, .t2-table .d2, .t2-table .d3, .t2-table .d4 { display: table-cell !important; }
@container pieza (max-width: 999px) {
  .t2-table tr > :nth-child(5), .t2-table tr > :nth-child(9), .t2-table tr > :nth-child(12),
  .t2-table tr > :nth-child(14) { display: none !important; }
}
@container pieza (max-width: 799px) { .t2-table tr > :nth-child(11) { display: none !important; } }
@container pieza (max-width: 639px) {
  .t2-table tr > :nth-child(2), .t2-table tr > :nth-child(7), .t2-table tr > :nth-child(10) { display: none !important; }
  .t2-mkt-bar { padding: 0 var(--s4); }
  .t2-table tr > :first-child { padding-left: var(--s3); }
  .t2-table tr > :last-child { padding-right: var(--s4); }
}
@container pieza (max-width: 479px) {
  .t2-table tr > :nth-child(8), .t2-table tr > :nth-child(13) { display: none !important; }
  .t2-search { max-width: none; flex-basis: 100%; }
}
/* «Show top»: sólo recorta «By cap» sin búsqueda. Con 50 se ve todo lo
   traído y el «Show more» del resto. */
.t2-mkt:has(.t2-top10:checked):has([data-mkt-view="all"]:checked):has([data-mkt-q]:placeholder-shown) .t2-table tbody tr:nth-child(n+11),
.t2-mkt:has(.t2-top25:checked):has([data-mkt-view="all"]:checked):has([data-mkt-q]:placeholder-shown) .t2-table tbody tr:nth-child(n+26) { display: none; }
.t2-mkt:has(.t2-top10:checked) .mkt-showmore, .t2-mkt:has(.t2-top25:checked) .mkt-showmore { display: none; }
.t2-mkt:not(:has([data-mkt-view="all"]:checked)) .t2-top { opacity: .45; pointer-events: none; }
.t2-none { padding: var(--s4); }

/* --- 12 Movers y la pestaña «Movers» ------------------------------------ */
.t2-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); min-width: 0; }
.t2-col { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.t2-col + .t2-col { border-left: 1px solid var(--tp-div); padding-left: var(--s5); }
.t2-col-hd { display: flex; align-items: center; gap: var(--s2); font-size: var(--size-sm); font-weight: 650;
  color: var(--text); margin-bottom: var(--s1); }
.t2-col-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t2-col-unit { margin-left: auto; }
.t2-col-none { margin: 0; font-size: var(--size-xs); }
.t2-mrow { display: grid; grid-template-columns: 22px minmax(0, 1fr) minmax(40px, 1fr) auto; align-items: center;
  gap: var(--s2); padding: 2px var(--s1); margin: 0 calc(-1 * var(--s1)); border-radius: var(--radius-sm);
  color: var(--text); text-decoration: none; }
.t2-mrow:hover, .t2-mrow:focus-visible { background: var(--surface-hover); }
.t2-mrow img, .t2-mrow .mo-ini { width: 22px; height: 22px; border-radius: 50%; }
.t2-sym { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t2-mval { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; grid-column: 4; grid-row: 1; }
.t2-mval.up { color: var(--up); } .t2-mval.down { color: var(--down); } .t2-mval.news { color: var(--text); }
.t2-mbar { grid-column: 3; grid-row: 1; }
.t2-mbar:not(.up):not(.down) > i { background: var(--accent); }
/* Apiladas (la caja con pestañas, como la imagen «Movers»): la barra debajo. */
.t2-stack .t2-mrow { grid-template-columns: 22px minmax(0, 1fr) auto; row-gap: 5px; padding: 5px var(--s1); }
.t2-stack .t2-mval { grid-column: 3; }
.t2-stack .t2-mbar { grid-column: 1 / -1; grid-row: 2; height: 4px; }
@container pieza (max-width: 519px) {
  .t2-cols { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  /* En la caja con pestañas estrecha, las tres primeras de cada lista: las
     cinco enteras siguen en la pieza «Gainers, losers…» y en /markets. */
  .t2-stack .t2-mrow:nth-of-type(n+4) { display: none; }
  .t2-col + .t2-col { border-left: 0; padding-left: 0; border-top: 1px solid var(--tp-div); padding-top: var(--s3); }
}

/* --- La caja con pestañas (mkt.rotator) --------------------------------- */
.t2-rotbox { display: flex; flex-direction: column; gap: var(--s3); min-height: 0; flex: 1 1 auto; }
.t2-tabs { display: flex; gap: var(--s5); border-bottom: 1px solid var(--tp-div); overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; flex: none; }
.t2-tabs::-webkit-scrollbar { display: none; }
.t2-tabs button { font: inherit; font-size: var(--size-base); font-weight: 650; color: var(--text-muted); background: none;
  border: 0; border-bottom: 2px solid transparent; padding: var(--s1) 0 var(--s2); margin-bottom: -1px; cursor: pointer;
  white-space: nowrap; min-height: 34px; line-height: 1.4; flex: none; }
.t2-tabs button:hover { color: var(--text); }
.t2-tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--text); }
.t2-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.t2-pane { display: none; min-height: 0; }
.t2-pane.on { display: block; }
.t2-pane-lbl { display: block; margin-bottom: var(--s1); }

/* --- Trending coins / stocks -------------------------------------------- */
.t2-trow { gap: var(--s2); }
.t2-tname { display: flex; align-items: center; gap: var(--s2); color: var(--text); text-decoration: none; }
a.t2-tname:hover b { color: var(--accent); }
.t2-tname img, .t2-tname .mo-ini { width: 22px; height: 22px; border-radius: 50%; flex: none; }
.t2-tn { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.t2-tn b, .t2-tn small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t2-tn small { color: var(--text-faint); font-size: var(--size-2xs); }
.t2-sector { flex: none; text-transform: none; letter-spacing: 0; font-weight: 600; }
.t2-spark { flex: none; width: 64px; height: 20px; line-height: 0; }
.t2-spark svg { width: 64px; height: 20px; }
.t2-tprice { min-width: 0; text-align: right; }
.t2-tname { min-width: 72px; }
.t2-tchg { min-width: 56px; text-align: right; font-weight: 600; }
.t2-tchg.up { color: var(--up); } .t2-tchg.down { color: var(--down); }

/* --- 19 Derivatives ----------------------------------------------------- */
.t2-dlist .tp-row { gap: var(--s2); padding: 5px 0; }
.t2-dlist .tp-row > b { font-size: var(--size-base); }
.t2-fchip { flex: none; display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 8px; border-radius: 7px;
  background: var(--seg-bg); border: 1px solid var(--tp-div); font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: var(--size-xs); white-space: nowrap; }
.t2-fchip small { color: var(--text-faint); font-weight: 600; font-size: var(--size-2xs); }
.t2-lsrow { gap: var(--s2); }
.t2-lsrow > span:first-child { flex: none; color: var(--text); }
.t2-lsrow > b { flex: none; font-size: var(--size-sm); }
.t2-dv-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
.t2-dv-tiles, .t2-dv-wide-ls { display: none; }
.t2-tile { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: var(--s3) var(--s4);
  border: 1px solid var(--tp-div); border-radius: var(--radius-sm); background: var(--surface-sunken); }
.t2-tile .tp-fig { font-size: var(--size-lg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t2-tile-sub { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: var(--size-xs);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t2-tile-sub .t2-chg { min-width: 0; font-size: var(--size-xs); }
.t2-dv-wide-ls { flex-direction: column; gap: 6px; }
/* Las baldosas desde 560 px: la pieza no pasa de seis columnas (unos 596 px a
   1440 con la barra lateral) mientras guarde los tamaños de la vieja. */
@container pieza (min-width: 560px) {
  [data-tp="mkt.deriv"] .t2-dv-list { display: none; }
  .t2-dv-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
  [data-tp="mkt.deriv"] .t2-tile { padding: 6px var(--s3); gap: 1px; }
  [data-tp="mkt.deriv"] > .tp-body { gap: var(--s2); }
  [data-tp="mkt.deriv"] .t2-tile .tp-fig { font-size: var(--size-md); }
  .t2-dv-wide-ls { display: flex; }
}

/* --- 18 Bitcoin ETF flows ----------------------------------------------- */
.t2-etf { display: grid; grid-template-columns: minmax(180px, 34%) minmax(0, 1fr); gap: var(--s5); flex: 1 1 auto; min-height: 0; }
.t2-etf-side { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; padding-right: var(--s5);
  border-right: 1px solid var(--tp-div); }
.t2-etf-side .tp-hero { font-size: clamp(var(--size-lg), 6cqi, var(--size-2xl)); white-space: nowrap; }
.t2-etf-sums { display: flex; gap: var(--s5); margin-top: auto; padding-top: var(--s3); border-top: 1px solid var(--tp-div); }
.t2-etf-sums div { display: flex; flex-direction: column; gap: 2px; }
.t2-etf-sums b { font-size: var(--size-md); font-weight: 750; }
.t2-etf-plot { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; min-height: 0; }
.tp-legend .t2-etf-mode { text-transform: none; letter-spacing: 0; }
.tp-legend .t2-etf-mode label { min-height: 26px; }
.t2-etf-chart { position: relative; flex: 1 1 auto; min-height: 90px; padding-right: 72px; }
.t2-etf-draw { position: absolute; inset: 0 72px 0 0; }
.t2-etf-draw svg { width: 100%; height: 100%; display: block; overflow: visible; }
.t2-etf-v-run { display: none; }
.t2-etfp:has(.t2-etf-run:checked) .t2-etf-v-run { display: block; }
.t2-etfp:has(.t2-etf-run:checked) .t2-etf-v-daily { display: none; }
.t2-etf-y { position: absolute; top: 0; right: 0; bottom: 0; width: 66px; font-size: var(--size-2xs);
  font-variant-numeric: tabular-nums; }
.t2-etf-y span { position: absolute; right: 0; white-space: nowrap; }
.t2-etf-y span:first-child { top: -4px; }
.t2-etf-y span:last-child { bottom: -4px; }
.t2-etf-y .t2-etf-y0 { top: calc(var(--y) * 1%); transform: translateY(-50%); }
.t2-etf-x { position: relative; height: 16px; margin-right: 72px; font-size: var(--size-2xs); }
.t2-etf-x span { position: absolute; left: calc(var(--x) * 1%); transform: translateX(-50%); white-space: nowrap; }
.t2-etf-x span:first-child { transform: none; left: 0; }
.t2-etf-x span:last-child { transform: none; left: auto; right: 0; color: var(--text); font-weight: 600; }
.t2-etf-svg .t2-zero { stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.t2-etf-svg .t2-bar.up { fill: var(--up-fill); }
.t2-etf-svg .t2-bar.down { fill: var(--down); }
.t2-etf-svg .t2-dim { opacity: .28; }
.t2-etf-svg .t2-gap { fill: var(--text-faint); }
.t2-etf-svg .t2-run { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke;
  stroke-linejoin: round; stroke-linecap: round; }
.t2-etf-svg .t2-run-dot { fill: var(--accent); }
@container pieza (max-width: 599px) {
  .t2-etf { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .t2-etf-side { padding-right: 0; border-right: 0; }
  .t2-etf-sums { margin-top: var(--s2); }
}
@container pieza (max-height: 300px) and (max-width: 599px) { .t2-etf-plot { display: none; } }

/* --- Las siete cajas del cuadro de derivados (dv.*) --------------------- */
.t2-dv-head { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.t2-dv-sub { display: flex; gap: var(--s3); flex-wrap: wrap; font-size: var(--size-xs); }
.t2-dv-chart { position: relative; flex: 1 1 auto; min-height: 40px; line-height: 0; }
.t2-dv-chart svg { width: 100%; height: 100%; display: block; }
.t2-dv-short { min-height: 28px; max-height: 48px; }
.t2-dv-tall { min-height: 40px; }
.t2-dv-ls, .t2-dv-fund { display: flex; flex-direction: column; gap: 6px; }
.t2-dv-fund .t2-dv-chart { flex: none; height: 36px; }
.t2-coins .t2-crow { gap: var(--s2); padding: 3px 0; color: var(--text); text-decoration: none; }
.t2-coins .t2-crow:hover { background: var(--surface-hover); }
.t2-coin { display: inline-flex; align-items: center; gap: 6px; width: 72px; flex: none; }
.t2-coin img, .t2-coin .mo-ini { width: 18px; height: 18px; border-radius: 50%; }
.t2-cval { min-width: 74px; text-align: right; font-weight: 600; font-size: var(--size-xs); }
.t2-cval.up { color: var(--up); } .t2-cval.down { color: var(--down); }

/* Una pieza de lo de moda estrecha: primero se va el sector, luego la línea. */
@container pieza (max-width: 459px) { .t2-trow .t2-sector { display: none; } }
@container pieza (max-width: 339px) { .t2-trow .t2-spark { display: none; } }
/* Derivados en 4×4 (su tamaño de siempre): la lista entera antes que el pie,
   que repite lo que dice el bocadillo de cada cambio. */
@container pieza (max-height: 329px) { .widget.tp[data-tp="mkt.deriv"] > .tp-foot { display: none; } }
@container pieza (min-width: 760px) {
  .t2-dv-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
  [data-tp="mkt.deriv"] .t2-tile { padding: var(--s3) var(--s4); gap: 6px; }
  [data-tp="mkt.deriv"] .t2-tile .tp-fig { font-size: var(--size-lg); }
}
/* Tres columnas en una pieza mediana (520–700 px): sin la barra al lado, que
   dejaba el símbolo en «B…»; la cifra ya dice el tamaño. */
@container pieza (min-width: 520px) and (max-width: 699px) {
  .t2-cols:not(.t2-stack) .t2-mrow { grid-template-columns: 22px minmax(0, 1fr) auto; }
  .t2-cols:not(.t2-stack) .t2-mbar { display: none; }
  .t2-cols:not(.t2-stack) .t2-mval { grid-column: 3; }
  .t2-cols { gap: var(--s3); }
  .t2-col + .t2-col { padding-left: var(--s3); }
}

/* Integración (2026-11-04): Longs vs shorts a 4x3 no cabe con su línea de
   30 días debajo (se cortaba a la mitad); la línea sale desde cuatro filas. */
@container pieza (max-height: 240px) {
  .t2-dv-short { display: none; }
}

/* ======================================================================
   Interactividad y efecto visual (2026-11-05)
   ======================================================================
   «Quiero mucho efecto visual, no una página y unas cajas estáticas». Lo
   mismo que en la tanda 1 y sin script propio: lectura de los gráficos con
   `mkthover.js` (`data-mc`), bocadillos con `[data-tp-tip]` y el resto CSS,
   que vuelve a correr solo cuando la pieza cambia de rango (`bb:swap`).

   - Foco: la barra, la fila o el tramo señalado se enciende y los demás se
     apagan; las filas que llevan a una ficha se marcan con el acento.
   - Entrada: líneas que se dibujan, barras que crecen desde su cero, filas
     en cascada (`--i`), cifra grande con un halo breve, punto final que late.
   - Sólo `transform`, `opacity` y `clip-path`; nada se mueve con
     `prefers-reduced-motion: reduce`. */

/* --- El foco ------------------------------------------------------------ */
/* Barras de los gráficos (volumen, financiación, liquidaciones, ETF): al
   señalar una, las demás se apagan. */
.t2-dv-chart svg rect, .t2-etf-svg rect { transition: opacity .15s, filter .15s; }
.t2-dv-chart svg:has(rect:hover) rect:not(:hover),
.t2-etf-svg:has(.t2-bar:hover) .t2-bar:not(:hover) { opacity: .4; }
.t2-dv-chart svg rect:hover, .t2-etf-svg .t2-bar:hover { filter: brightness(1.25); }
/* Las líneas: el trazo se engrosa al pasar y el punto final se aparta. */
.t2-line.mc-on:hover svg path:last-of-type { stroke-width: 2.2; }
.t2-line.mc-on:hover > .t2-enddot { opacity: .3; }
.t2-enddot { --k: var(--accent); pointer-events: none; transition: opacity .15s; }
.t2-line.up .t2-enddot { --k: var(--up); }
.t2-line.down .t2-enddot { --k: var(--down); }
.t2-etf-draw.mc-on:hover .t2-run { stroke-width: 2.6; }
.t2-etf-draw.mc-on:hover .t2-run-dot { opacity: .3; }
.t2-etf-sums > div { border-radius: var(--radius-sm); padding: 2px 4px; margin: -2px -4px; cursor: default; }
.t2-etf-sums > div:hover, .t2-etf-sums > div:focus-visible { background: var(--surface-hover); outline: 0; }
.t2-etfp:has(.t2-etf-sums > div:last-child:hover) .t2-run { stroke-width: 2.8; }

/* Largos contra cortos: el tramo señalado, entero; el otro, apagado. */
.t2-ls > i { transition: opacity .15s, transform .15s; }
.t2-ls:hover > i:not(:hover) { opacity: .4; }

/* Filas de Movers: la señalada con su barra encendida; las de su columna,
   apagadas. */
.t2-mrow { transition: opacity .15s, background .15s, box-shadow .15s; }
.t2-col:hover > .t2-mrow:not(:hover) { opacity: .55; }
.t2-mrow:hover, .t2-mrow:focus-visible { box-shadow: inset 2px 0 0 var(--accent); }
.t2-mrow:hover .t2-mbar > i, .t2-mrow:focus-visible .t2-mbar > i { filter: brightness(1.2);
  box-shadow: 0 0 8px color-mix(in srgb, currentColor 50%, transparent); }
.t2-mrow .t2-mbar { transition: transform .15s; transform-origin: left; }
.t2-mrow:hover .t2-mbar { transform: scaleY(1.5); }

/* Lo de moda, la lista de derivados y la financiación por moneda. */
.t2-trows .t2-trow, .t2-dlist .tp-row, .t2-coins .t2-crow { border-radius: var(--radius-sm); transition: opacity .15s, background .15s; }
.t2-trows .t2-trow:hover, .t2-dlist .tp-row:hover { background: var(--surface-hover); }
.t2-trows:hover > .t2-trow:not(:hover), .t2-coins:hover > .t2-crow:not(:hover) { opacity: .5; }
.t2-coins .t2-crow:hover, .t2-coins .t2-crow:focus-visible { box-shadow: inset 2px 0 0 var(--accent); }
.t2-coins .t2-crow:hover .tp-bar > i { filter: brightness(1.25); box-shadow: 0 0 8px currentColor; }
.t2-spark { position: relative; }
.t2-spark.mc-on { cursor: crosshair; }
.t2-fchip { transition: border-color .15s; cursor: default; }
.t2-fchip:hover { border-color: var(--accent); }
.t2-tile { transition: border-color .2s, transform .2s, box-shadow .2s; }
.t2-tile:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--tp-div));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent), 0 6px 18px rgb(0 0 0 / 18%); }
.t2-dv-tiles:hover > .t2-tile:not(:hover) { opacity: .7; }

/* La tabla de mercado: la fila señalada lleva la marca del acento. */
.t2-table tbody tr { transition: background .12s, box-shadow .12s; }
.t2-table tbody tr:hover { box-shadow: inset 3px 0 0 var(--accent); }

/* Las pestañas de la caja que rota: el subrayado se desliza al cambiar. */
.t2-tabs button { transition: color .15s, border-color .2s; }

/* --- La entrada y el latido ------------------------------------------- */
@keyframes t2-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes t2-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes t2-grow-y { from { transform: scaleY(0); } }
@keyframes t2-grow-x { from { transform: scaleX(0); } }
@keyframes t2-pop { from { opacity: 0; transform: scale(.4); } }
@keyframes t2-fade { from { opacity: 0; } }
@keyframes t2-fig { from { opacity: 0; transform: translateY(5px);
  text-shadow: 0 0 22px color-mix(in srgb, var(--accent) 70%, transparent); } }
@keyframes t2-beat { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(3.2); opacity: 0; } }

@media (prefers-reduced-motion: no-preference) {
  .widget.tp[data-tp^="dv."] > .tp-body > *, .widget.tp[data-tp="mkt.deriv"] > .tp-body > *,
  .widget.tp.t2-etfp > .tp-body > *, .widget.tp[data-tp="mkt.movers"] > .tp-body > *,
  .widget.tp[data-tp="mkt.trending"] > .tp-body > *, .widget.tp[data-tp="mkt.stocks"] > .tp-body > *,
  .t2-mkt-scroll { animation: t2-in .45s cubic-bezier(.2, .7, .2, 1) backwards; }
  .widget.tp[data-tp^="dv."] > .tp-body > :nth-child(2) { animation-delay: .05s; }
  .widget.tp[data-tp^="dv."] > .tp-body > :nth-child(n+3) { animation-delay: .1s; }
  .widget.tp[data-tp^="dv."] .tp-fig, .widget.tp[data-tp="mkt.deriv"] .tp-fig, .t2-etf .tp-fig {
    animation: t2-fig .6s .05s cubic-bezier(.2, .7, .2, 1) backwards; }
  /* Las líneas se dibujan; el punto final llega y late. */
  .t2-line svg, .t2-etf-v-run svg, .t2-spark svg { animation: t2-wipe .9s .1s cubic-bezier(.4, 0, .2, 1) backwards; }
  .t2-enddot { animation: t2-pop .3s .9s backwards; }
  .t2-enddot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--k, var(--accent));
    animation: t2-beat 2.4s 1.3s ease-out infinite; }
  /* Las barras crecen desde su cero. */
  .t2-cols-up svg { transform-origin: bottom; animation: t2-grow-y .6s .1s cubic-bezier(.2, .7, .2, 1) backwards; }
  .t2-cols-mid svg { transform-origin: center; animation: t2-grow-y .6s .1s cubic-bezier(.2, .7, .2, 1) backwards; }
  .t2-etf-v-daily .t2-bar { transform-box: fill-box; transform-origin: bottom;
    animation: t2-grow-y .5s calc(var(--i, 0) * 14ms + .1s) cubic-bezier(.2, .7, .2, 1) backwards; }
  .t2-etf-v-daily .t2-bar.down { transform-origin: top; }
  .t2-ls > i { animation: t2-grow-x .6s .15s cubic-bezier(.2, .7, .2, 1) backwards; transform-origin: left; }
  .t2-ls > i.down { transform-origin: right; }
  .t2-ls:hover > i:hover { transform: scaleY(1.35); }
  /* Filas en cascada y sus barras creciendo. */
  .t2-mrow, .t2-trow, .t2-crow { animation: t2-in .35s calc(var(--i, 0) * 45ms + .05s) backwards; }
  .t2-stagger > .tp-row { animation: t2-in .35s .05s backwards; }
  .t2-stagger > .tp-row:nth-child(2) { animation-delay: .1s; }
  .t2-stagger > .tp-row:nth-child(3) { animation-delay: .15s; }
  .t2-stagger > .tp-row:nth-child(n+4) { animation-delay: .2s; }
  .t2-mbar > i, .t2-crow .tp-bar > i { animation: t2-grow-x .55s calc(var(--i, 0) * 45ms + .15s) cubic-bezier(.2, .7, .2, 1) backwards;
    transform-origin: left; }
  .t2-crow .tp-bar.down > i { transform-origin: right; }
  .t2-tile { animation: t2-in .4s calc(var(--i, 0) * 60ms) backwards; }
  .t2-tile:hover { transform: translateY(-2px); }
  /* La pestaña que se abre, y la vista del ETF que se elige, aparecen. */
  .t2-pane.on { animation: t2-in .35s cubic-bezier(.2, .7, .2, 1) backwards; }
  .t2-etfp:has(.t2-etf-run:checked) .t2-etf-v-run, .t2-etfp:has(.t2-etf-daily:checked) .t2-etf-v-daily { animation: t2-fade .3s backwards; }
}
/* Financiación: cada moneda dice quién paga a quién al pasar. */
.t2-frow { border-radius: var(--radius-sm); padding: 2px 4px; margin: -2px -4px; cursor: default; transition: background .15s; }
.t2-frow:hover, .t2-frow:focus-visible { background: var(--surface-hover); outline: 0; }
/* ETF: un día **estimado** (sacado del flujo diario en BTC, `estimated` en la
   ingesta desde el 2026-11-05) va medio lleno y con borde discontinuo; su
   bocadillo lo dice y da la cifra en BTC. */
.t2-etf-svg .t2-bar.t2-est { fill-opacity: .38; stroke-width: 1; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }
.t2-etf-svg .t2-bar.t2-est.up { stroke: var(--up-fill); }
.t2-etf-svg .t2-bar.t2-est.down { stroke: var(--down); }