/* Tanda 1 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). Usa los
   tokens y clases de terminal-pieces.css; reglas con prefijo de la tanda
   (.t1-…). Sin colores sueltos: sólo tokens. Contrato: final de
   terminal_plan.md.

   Piezas: 01 cajita grande de precio (.t1-big), 16 Total market cap
   (.t1-cap), dominancia (.t1-dom), 10 Volume (.t1-vol), 02 Fear & Greed
   (.t1-fg), 11 Who holds the market (.t1-hold), 03 Altcoin season (.t1-alt),
   Up or down (.t1-ud) y las cajas de la ficha de moneda (.t1-coin). */

/* --- trozos comunes de la tanda ---------------------------------------- */
.t1-top { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s3); min-width: 0; }
.t1-lead { min-width: 0; display: grid; gap: 4px; }
.t1-lead .tp-fig small { font-size: .45em; font-weight: 600; margin-left: 2px; }
.t1-moves { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s2); font-size: var(--size-sm);
  font-variant-numeric: tabular-nums; }
.t1-move { font-weight: 700; white-space: nowrap; }
.t1-move > span { font-size: .8em; }
.t1-strong { font-weight: 700; }
.t1-aside { margin: 0; display: grid; gap: 2px; text-align: right; font-size: var(--size-sm); min-width: 0; }
.t1-aside > div { display: flex; justify-content: flex-end; gap: var(--s2); white-space: nowrap; }
.t1-aside dt { color: var(--text-muted); }
.t1-aside dd { margin: 0; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.t1-eyebrow { display: block; font-size: var(--size-2xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-faint); }
.t1-note { font-size: var(--size-xs); }

/* El área: llena lo que quede de alto (una caja llena su alto, guía §6). */
.t1-area { flex: 1 1 auto; min-height: 36px; display: flex; flex-direction: column; gap: 4px; }
.t1-plotwrap { flex: 1 1 auto; min-height: 32px; display: flex; gap: var(--s2); }
.t1-plot { flex: 1 1 auto; min-width: 0; height: 100%; }
.t1-plot > svg { position: absolute; inset: 0; }
.tp-dot.t1-up { --k: var(--up); }
.tp-dot.t1-down { --k: var(--down); }
.tp-dot.t1-flat { --k: var(--accent); }
.t1-reflbl, .t1-tag, .t1-yaxis span { line-height: 1.35; }
.t1-reflbl { position: absolute; left: 0; transform: translateY(-115%); font-size: var(--size-2xs); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); pointer-events: none; }
.t1-axis .t1-yaxis { position: relative; flex: none; width: 4.6em; font-size: var(--size-2xs); color: var(--text-faint);
  font-variant-numeric: tabular-nums; }
.t1-yaxis span { position: absolute; left: 0; transform: translateY(-50%); white-space: nowrap; }
/* La etiqueta del último precio, en la columna del eje y a la altura del punto. */
.t1-tag { position: absolute; left: 100%; margin-left: var(--s2); transform: translateY(-50%); z-index: 1;
  padding: 1px 6px; border-radius: 5px; font-size: var(--size-2xs); font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums; color: var(--bg); background: var(--k, var(--accent)); pointer-events: none; }
.t1-tag.t1-up { --k: var(--up-fill); }
.t1-tag.t1-down { --k: var(--down); }
.t1-xaxis { position: relative; height: 14px; font-size: var(--size-2xs); color: var(--text-faint); margin-right: 0; }
.t1-axis .t1-xaxis { margin-right: calc(4.6em + var(--s2)); }
.t1-xaxis span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.t1-xaxis span:first-child { transform: none; }
.t1-xaxis span.t1-now { transform: translateX(-100%); color: var(--text-muted); font-weight: 600; }
.t1-span { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); font-size: var(--size-xs);
  color: var(--text-faint); white-space: nowrap; min-width: 0; }
.t1-span b { color: var(--text); font-weight: 600; }
.t1-lohi { overflow: hidden; text-overflow: ellipsis; color: var(--text); font-variant-numeric: tabular-nums; }
.t1-dash { display: inline-block; width: 14px; vertical-align: middle; border-top: 1px dashed var(--text-faint); }

/* --- 16 Total market cap · dominancia · 10 Volume ---------------------- */
.t1-vs { display: grid; justify-items: end; gap: 3px; font-size: var(--size-xs); text-align: right; min-width: 0; }
.t1-vs > span { white-space: nowrap; }
.t1-split { display: flex; height: 8px; border-radius: 4px; overflow: hidden; gap: 2px; flex: none; }
.t1-split i { flex: var(--w) 1 0; min-width: 2px; background: var(--k); }
.t1-keys { display: flex; flex-wrap: wrap; gap: 2px var(--s3); font-size: var(--size-2xs); color: var(--text-muted);
  font-variant-numeric: tabular-nums; }
@container pieza (max-width: 359px) {
  .t1-top { align-items: flex-start; }
  .t1-vol .t1-top { flex-direction: column; gap: 4px; }
  .t1-vol .t1-vs { justify-items: start; text-align: left; }
}
@container pieza (max-height: 240px) {
  .t1-cap .t1-span, .t1-vol .t1-span, .t1-dom .t1-keys { display: none; }
}

/* --- 02 Fear & Greed: dos caras ------------------------------------------ */
.t1-flip { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.t1-face { display: flex; flex-direction: column; gap: var(--s2); flex: 1 1 auto; min-height: 0; }
.t1-face-b { display: none; }
.t1-fg:has(.t1-flip:checked) .t1-face-a { display: none; }
.t1-fg:has(.t1-flip:checked) .t1-face-b { display: flex; }
.t1-gauge { position: relative; width: min(100%, 220px); margin: 0 auto; line-height: 0; }
.t1-gauge > svg { width: 100%; height: auto; display: block; }
.t1-gauge-val { position: absolute; left: 0; right: 0; bottom: 0; display: grid; justify-items: center; gap: 2px;
  line-height: 1.1; pointer-events: none; }
.t1-gauge-val b { font-size: clamp(var(--size-xl), 12cqi, var(--size-2xl)); font-weight: 800; letter-spacing: -0.02em; }
.t1-gauge-val span { font-size: var(--size-sm); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.t1-gauge-val small { font-size: var(--size-2xs); }
.t1-zdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.t1-ends { display: flex; justify-content: space-between; font-size: var(--size-2xs); color: var(--text-faint);
  max-width: 240px; width: 100%; margin: -2px auto 0; }
.t1-hist { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--tp-div); padding-top: var(--s2); }
.t1-hist > div { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: var(--s2); min-width: 0; }
.t1-hist > div + div { border-left: 1px solid var(--tp-div); padding-left: var(--s3); }
.t1-hist .t1-eyebrow { grid-column: 1 / -1; }
.t1-hist b { font-size: var(--size-lg); font-weight: 750; }
.t1-hist .faint { font-size: var(--size-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t1-flipbtn { align-self: flex-end; margin-top: auto; color: var(--accent); font-size: var(--size-xs); font-weight: 600;
  cursor: pointer; white-space: nowrap; min-height: 24px; display: inline-flex; align-items: center; gap: 3px; }
.t1-flipbtn:hover { text-decoration: underline; }
.t1-flip:focus-visible ~ .t1-face .t1-flipbtn { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.t1-parts-hd { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); }
.t1-parts-hd b { color: var(--text); }
.t1-parts-hd .t1-flipbtn { margin-top: 0; align-self: center; }
.t1-parts-hd > span:last-child { font-size: var(--size-xs); white-space: nowrap; }
.t1-scale { display: grid; grid-template-columns: 1fr 1fr 1fr; margin: 0 2.6em 0 42%; font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-faint); text-align: center; }
.t1-scale span:first-child { text-align: left; } .t1-scale span:last-child { text-align: right; }
.t1-face-b .tp-row { padding: 3px 0; font-size: var(--size-xs); }
.t1-face-b .tp-row > .tp-grow { flex: 0 0 40%; font-weight: 600; color: var(--text); }
.t1-face-b .tp-row.t1-calm > .tp-grow { font-weight: 400; color: var(--text-muted); }
.t1-fgbar { flex: 1 1 auto; overflow: visible; }
.t1-fgbar::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--text-faint); }
.t1-fgbar > i.fg-xf { background: var(--down); }
.t1-fgbar > i.fg-f { background: var(--amber-400); }
.t1-fgbar > i.fg-n { background: var(--text-faint); }
.t1-fgbar > i.fg-g { background: var(--green-300); }
.t1-fgbar > i.fg-xg { background: var(--up-fill); }
.t1-face-b .tp-end { min-width: 2em; text-align: right; font-weight: 700; }
.t1-parts-ft { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-top: auto;
  font-size: var(--size-2xs); min-width: 0; }
.t1-parts-ft > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.t1-parts-ft .t1-flipbtn { margin-top: 0; }
@container pieza (max-height: 330px) {
  .t1-fg .t1-ends { display: none; }
  .t1-gauge { width: min(100%, 170px); }
  .t1-hist b { font-size: var(--size-md); }
}

/* --- 11 Who holds the market -------------------------------------------- */
.t1-holdgrid { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s4); flex: 1 1 auto; }
.t1-ring { position: relative; width: clamp(84px, 30cqi, 136px); aspect-ratio: 1; }
.t1-ring svg { width: 100%; height: 100%; display: block; }
.t1-ring-val { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.1; pointer-events: none; }
.t1-ring-val b { font-size: clamp(var(--size-sm), 6cqi, var(--size-lg)); font-weight: 800; }
.t1-ring-val span { font-size: var(--size-2xs); color: var(--text-faint); font-weight: 600; }
.t1-donut circle { transition: opacity .12s; }
.t1-leg .tp-row { padding: 5px 0; }
.t1-leg .tp-row .faint { margin-left: auto; }
.t1-leg .tp-end { min-width: 3.4em; text-align: right; font-weight: 700; }
/* El realce enlazado: una fila marca su arco y un arco marca su fila. */
.t1-hold:has(.t1-leg [data-s="1"]:hover) .t1-donut circle:not([data-s="1"]),
.t1-hold:has(.t1-leg [data-s="2"]:hover) .t1-donut circle:not([data-s="2"]),
.t1-hold:has(.t1-leg [data-s="3"]:hover) .t1-donut circle:not([data-s="3"]),
.t1-hold:has(.t1-leg [data-s="6"]:hover) .t1-donut circle:not([data-s="6"]) { opacity: .3; }
.t1-hold:has(.t1-donut [data-s="1"]:hover) .t1-leg .tp-row[data-s="1"],
.t1-hold:has(.t1-donut [data-s="2"]:hover) .t1-leg .tp-row[data-s="2"],
.t1-hold:has(.t1-donut [data-s="3"]:hover) .t1-leg .tp-row[data-s="3"],
.t1-hold:has(.t1-donut [data-s="6"]:hover) .t1-leg .tp-row[data-s="6"],
.t1-leg .tp-row:hover { background: var(--surface-hover); border-radius: var(--radius-sm); }
@container pieza (max-width: 300px) { .t1-holdgrid { gap: var(--s3); } }

/* --- 03 Altcoin season ---------------------------------------------------- */
.t1-season { display: inline-flex; align-items: center; gap: 6px; font-size: var(--size-sm); font-weight: 700; white-space: nowrap; }
.t1-season i { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); }
.t1-season.t1-alt i { background: var(--info); }
.t1-season.t1-btc i { background: var(--series-1); }
.t1-cells { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 2px; height: 18px;
  margin: var(--s1) 0; flex: none; }
.t1-cells > i { border-radius: 2px; background: var(--track); }
.t1-cells > i.on { background: var(--info); }
.t1-cells > i:hover { outline: 1px solid var(--text); outline-offset: 1px; }
.t1-mark { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px;
  background: var(--text-muted); pointer-events: none; }
.t1-thresh { display: flex; justify-content: space-between; gap: var(--s2); font-size: var(--size-2xs); color: var(--text-faint);
  white-space: nowrap; }
.t1-thresh span { display: inline-flex; align-items: center; gap: 5px; }
.t1-dot-btc, .t1-dot-alt { width: 7px; height: 7px; border-radius: 50%; background: var(--series-1); }
.t1-dot-alt { background: var(--info); }
.t1-altfoot { display: flex; flex-wrap: nowrap; white-space: nowrap; overflow: hidden; justify-content: space-between; gap: 2px var(--s3); font-size: var(--size-xs);
  margin-top: auto; }
.t1-altfoot b { color: var(--text); }
@container pieza (max-width: 330px) { .t1-thresh { font-size: 10px; } }
@container pieza (max-width: 440px) { .t1-altfoot > span + span { display: none; } }

/* --- Cabecera estrecha (3 columnas): el título cabe junto al selector ------
   Con el selector a la derecha y la «i», «Total market cap» se cortaba en
   «Total mark…» a 3 columnas. El selector se recoge y el título baja a 15 px. */
@container pieza (max-width: 340px) {
  .widget.tp[class*="t1-"] > .tp-head { gap: 6px; }
  .widget.tp[class*="t1-"] > .tp-head .tp-title { font-size: var(--size-base); }
  .widget.tp[class*="t1-"] .tp-seg:not(.tp-seg-2) button { min-width: 0; padding: 0 6px; }
  .widget.tp.t1-hold > .tp-head .tp-label { display: none; }
}

/* --- Up or down ------------------------------------------------------------ */
.t1-udtop { font-size: var(--size-sm); }
.t1-heat { grid-template-columns: repeat(auto-fill, minmax(22px, 1fr)); align-content: start; }
.t1-heat a img { width: 70%; height: 70%; }

/* --- Las cajas de la ficha de moneda -------------------------------------- */
.t1-coin .tp-body { justify-content: center; }
.t1-spark { flex: 1 1 auto; min-height: 36px; line-height: 0; }
.t1-spark svg { width: 100%; height: 100%; }
.t1-price { font-size: var(--size-lg); }
.t1-split2 { justify-content: flex-start; flex-wrap: nowrap; }
.t1-turn { border: 0; }
.t1-wbar { flex: 1 1 auto; }
.t1-unit { font-size: var(--size-sm); font-weight: 500; }
.t1-news { flex: 1 1 auto; min-height: 36px; }
.t1-coin .tp-chip { vertical-align: middle; }

/* --- 01 La cajita grande de precio ----------------------------------------- */
.t1-bighead { flex-wrap: nowrap; }
.t1-logo { width: 28px; height: 28px; border-radius: 50%; flex: none; }
.t1-bighead .tp-title { font-size: var(--size-lg); }
.t1-bighead .tp-title a { color: inherit; }
.t1-sym { color: var(--text-muted); font-size: var(--size-sm); font-weight: 600; flex: none; }
.t1-rank { flex: none; }
.t1-seg { align-items: stretch; }
.t1-seg .t1-h1 { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15;
  padding: 2px 9px; font-size: var(--size-2xs); font-weight: 600; color: var(--text-faint); cursor: help;
  border-right: 1px solid var(--tp-div); }
.t1-seg .t1-h1 small { font-size: var(--size-2xs); font-weight: 600; }
.t1-seg button small { font-variant-numeric: tabular-nums; }
.widget.tp > .tp-body.t1-bigbody { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 30%); gap: var(--s4); }
.t1-bigmain { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; min-height: 0; }
.t1-pricehd { display: grid; gap: 4px; }
.t1-bigprice { font-size: clamp(var(--size-xl), 7.5cqi, var(--size-3xl)); }
.t1-bigmain .t1-area { min-height: 90px; }
.t1-side { margin: 0; display: flex; flex-direction: column; border-left: 1px solid var(--tp-div); padding-left: var(--s4); min-width: 0; }
.t1-side > div { padding: var(--s2) 0; border-top: 1px solid var(--tp-div); display: grid; gap: 3px; }
.t1-side > div:first-child { border-top: 0; padding-top: 0; }
.t1-side dt { font-size: var(--size-2xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
.t1-side dd { margin: 0; display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); flex-wrap: wrap;
  font-size: var(--size-xs); font-variant-numeric: tabular-nums; }
.t1-side dd > b { font-size: var(--size-md); font-weight: 750; color: var(--text); }
.t1-rangebox { margin-top: auto; }
.t1-rangebar .tp-bar { width: 100%; height: 6px; overflow: visible; }
.t1-pin { position: absolute; top: -4px !important; bottom: -4px !important; width: 3px !important; margin-left: -1.5px;
  border-radius: 2px; background: var(--text) !important; }
.t1-lohi2 > span { display: grid; gap: 1px; }
.t1-lohi2 > span:last-child { text-align: right; }
.t1-lohi2 b { color: var(--text); font-size: var(--size-sm); }
.t1-fromhigh { font-size: var(--size-xs); }
/* Estrecha (el móvil a lo ancho, o 6 columnas en una ventana mediana): la
   columna de la derecha baja y se pone de dos en dos; el rótulo de la
   cabecera se recoge. */
@container pieza (max-width: 560px) {
  .widget.tp > .tp-body.t1-bigbody { display: flex; flex-direction: column; }
  .t1-bigmain { flex: 1 0 auto; min-height: 170px; }
  .t1-side { flex: none; }
  .t1-side { border-left: 0; padding-left: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s4);
    border-top: 1px solid var(--tp-div); padding-top: var(--s2); }
  .t1-side > div { border-top: 0; padding: var(--s1) 0; }
  .t1-rangebox { grid-column: 1 / -1; }
  .t1-bighead { flex-wrap: wrap; row-gap: var(--s2); }
  .t1-bighead .tp-ctx { order: 5; flex-basis: 100%; margin-left: 0; }
  .t1-bighead .tools { margin-left: auto; }
  .t1-sym, .t1-rank { display: none; }
}
/* Baja (6×5): la columna de la derecha se aprieta para que quepa el rango. */
@container pieza (max-height: 400px) {
  .t1-side > div { padding: 5px 0; gap: 1px; }
  .t1-side dd > b { font-size: var(--size-sm); }
  .t1-side dd.t1-fromhigh { display: none; }
  .t1-bigprice { font-size: clamp(var(--size-xl), 6cqi, var(--size-2xl)); }
}
@container pieza (max-width: 420px) {
  .t1-axis .t1-yaxis { display: none; }
  .t1-axis .t1-xaxis { margin-right: 0; }
  .t1-tag { left: auto; right: 0; margin-left: 0; transform: translate(0, -140%); }
}

/* Estrecha **y** de alto fijo (6 columnas en una ventana mediana): no cabe la
   columna de cifras debajo del gráfico sin hacer scroll; se queda la cifra, el
   cambio y el área, y las cifras de al lado vuelven al ensanchar la pieza o en
   la lista del móvil (alto natural). */
@container pieza (max-width: 560px) and (max-height: 480px) {
  .t1-big .t1-side { display: none; }
}
@container pieza (max-height: 300px) {
  .widget.tp[class*="t1-"] > .tp-body { gap: var(--s2); }
  .t1-fg .t1-face { gap: 4px; }
  .t1-fg .t1-hist { padding-top: 4px; }
}
/* Las de tres filas: la variación va al lado de la cifra y no debajo. */
@container pieza (max-height: 240px) and (min-width: 360px) {
  .t1-dom .t1-lead { display: flex; align-items: baseline; gap: var(--s3); }
}
/* La cajita grande a 6×5: sin los rótulos de tiempo (el bocadillo los dice). */
@container pieza (max-height: 360px) {
  .t1-big .t1-axis .t1-xaxis { display: none; }
}

/* Integración (2026-11-04): a 4x3 (tres filas, unos 216 px) el reloj del
   miedo y la avaricia y el mapa de Up or down se salían por abajo unos 25 y
   13 px y la pieza hacía scroll. Reloj más pequeño y sin la línea «vs
   yesterday» (la dice «Yesterday» debajo); casillas del mapa más pequeñas. */
@container pieza (max-height: 240px) {
  .t1-fg .t1-gauge { width: min(100%, 128px); }
  .t1-fg .t1-gauge-val small { display: none; }
  .t1-fg .t1-face { gap: 2px; }
  .t1-fg .t1-hist { padding-top: 2px; }
  .t1-heat { grid-template-columns: repeat(auto-fill, minmax(18px, 1fr)); gap: 2px; }
}

/* ======================================================================
   Interactividad y efecto visual (2026-11-05)
   ======================================================================
   Pedido así: «asegúrate de que todas las cajas son interactivas cuando
   pasas por gráficos, cuando te pones en barras; quiero mucho efecto visual,
   no una página y unas cajas estáticas».

   Sin script propio: la lectura de los gráficos es `mkthover.js` (`data-mc`),
   los bocadillos son `[data-tp-tip]` (`terminal-pieces.js`) y todo lo demás es
   CSS. Así funciona igual en una pieza recién añadida o que cambia de rango
   (`bb:swap` cambia el contenido y la entrada vuelve a correr sola).

   - **Foco**: al pasar por un elemento (barra, casilla, tramo, fila, arco)
     se ilumina y crece un poco, y sus hermanos se apagan. La leyenda señala
     su serie y la serie su leyenda (`data-s`, `:has`).
   - **Entrada**: las líneas se dibujan de izquierda a derecha, las barras
     crecen desde su base, las casillas aparecen en cascada (`--i`), la cifra
     grande sube con un halo breve y el punto final late.
   - Sólo `transform`, `opacity` y `clip-path`; **nada se mueve** con
     `prefers-reduced-motion: reduce` (el foco y los bocadillos siguen). */

/* --- El foco, con o sin movimiento ------------------------------------- */
/* El área: al pasar, el trazo se engrosa, el relleno se aviva y el punto
   final se aparta para no competir con el de la lectura. */
.t1-plot.mc-on:hover .t1-linep { stroke-width: 2.4; }
.t1-plot.mc-on:hover .t1-fillp { opacity: .22; }
.t1-plot.mc-on:hover > .tp-dot:not(.mc-dot), .t1-plot.mc-on:hover > .t1-tag { opacity: .35; }
.t1-plot > .tp-dot, .t1-plot > .t1-tag, .t1-linep, .t1-fillp { transition: opacity .15s, stroke-width .15s; }
.t1-spark.mc-on:hover svg path:last-child { stroke-width: 2.2; }

/* Barras de «In the news»: la señalada, entera; las demás, apagadas. */
.t1-news:hover > i { opacity: .35; }
.t1-news > i:hover { opacity: 1; filter: brightness(1.25); }
.t1-news > i { transform-origin: bottom; }

/* La barra partida de la dominancia y su leyenda, enlazadas. */
.t1-split > i { transform-origin: center; }
.t1-split:hover > i:not(:hover) { opacity: .35; }
.t1-keys .tp-key { cursor: default; border-radius: 4px; padding: 1px 3px; margin: -1px -3px; }
.t1-keys .tp-key:hover { background: var(--surface-hover); color: var(--text); }
.t1-dom:has(.t1-keys [data-s="1"]:hover) .t1-split > i:not([data-s="1"]),
.t1-dom:has(.t1-keys [data-s="2"]:hover) .t1-split > i:not([data-s="2"]),
.t1-dom:has(.t1-keys [data-s="3"]:hover) .t1-split > i:not([data-s="3"]),
.t1-dom:has(.t1-keys [data-s="6"]:hover) .t1-split > i:not([data-s="6"]) { opacity: .25; }
.t1-dom:has(.t1-split [data-s="1"]:hover) .t1-keys [data-s="1"],
.t1-dom:has(.t1-split [data-s="2"]:hover) .t1-keys [data-s="2"],
.t1-dom:has(.t1-split [data-s="3"]:hover) .t1-keys [data-s="3"],
.t1-dom:has(.t1-split [data-s="6"]:hover) .t1-keys [data-s="6"] { background: var(--surface-hover); color: var(--text); }

/* Las casillas de la temporada de altcoins. «N of top 50 beat Bitcoin»
   señala las suyas. */
.t1-cells:hover > i:not(:hover) { opacity: .5; }
.t1-cells > i:hover { outline: 0; box-shadow: 0 0 0 1px var(--text), 0 0 10px color-mix(in srgb, var(--info) 55%, transparent); z-index: 1; }
.t1-beatn { cursor: default; border-radius: 4px; }
.t1-beatn:hover, .t1-beatn:focus-visible { background: var(--surface-hover); outline: 0; }
.t1-alt:has(.t1-beatn:hover) .t1-cells > i:not(.on),
.t1-alt:has(.t1-beatn:focus-visible) .t1-cells > i:not(.on) { opacity: .2; }
.t1-alt:has(.t1-beatn:hover) .t1-cells > i.on { box-shadow: 0 0 8px color-mix(in srgb, var(--info) 50%, transparent); }

/* El mapa de Up or down: la casilla señalada crece; ▲ y ▼ señalan las suyas. */
.t1-heat a { position: relative; transition: opacity .15s; }
.t1-heat:hover a:not(:hover):not(.mc-cell) { opacity: .55; }
.t1-heat a:hover, .t1-heat a.mc-cell { z-index: 2; box-shadow: 0 0 0 1px var(--text), 0 4px 12px rgb(0 0 0 / 30%); }
.t1-udn { cursor: default; border-radius: 4px; padding: 0 3px; }
.t1-udn:hover, .t1-udn:focus-visible { background: var(--surface-hover); outline: 0; }
.t1-ud:has(.t1-udn.up:hover) .t1-heat a:not(.u), .t1-ud:has(.t1-udn.up:focus-visible) .t1-heat a:not(.u),
.t1-ud:has(.t1-udn.down:hover) .t1-heat a:not(.d), .t1-ud:has(.t1-udn.down:focus-visible) .t1-heat a:not(.d) { opacity: .12; }
.t1-ud:has(.t1-udn.up:hover) .mo-breadth i.down, .t1-ud:has(.t1-udn.down:hover) .mo-breadth i.up { opacity: .25; }

/* Las partes del índice: la fila señalada, encendida; las demás, apagadas. */
.t1-face-b .tp-rows:hover > .tp-row:not(:hover) { opacity: .5; }
.t1-face-b .tp-row { border-radius: var(--radius-sm); transition: opacity .15s, background .15s; }
.t1-face-b .tp-row:hover, .t1-face-b .tp-row:focus-visible { background: var(--surface-hover); outline: 0; }
.t1-face-b .tp-row:hover .t1-fgbar > i { filter: brightness(1.2); box-shadow: 0 0 8px currentColor; }
.t1-hist > div { border-radius: var(--radius-sm); cursor: default; }
.t1-hist > div:hover, .t1-hist > div:focus-visible { background: var(--surface-hover); outline: 0; }
.t1-gauge.mc-on:hover .fg-gauge path { opacity: .55; }
.t1-gauge .fg-gauge path { transition: opacity .15s; }

/* El anillo: el arco señalado engorda (la fila de la leyenda lo hace también
   con el realce enlazado de arriba). */
.t1-donut circle { transition: opacity .12s, stroke-width .15s; cursor: default; }
.t1-donut circle:hover { stroke-width: 20; }
.t1-hold:has(.t1-leg [data-s="1"]:hover) .t1-donut [data-s="1"],
.t1-hold:has(.t1-leg [data-s="2"]:hover) .t1-donut [data-s="2"],
.t1-hold:has(.t1-leg [data-s="3"]:hover) .t1-donut [data-s="3"],
.t1-hold:has(.t1-leg [data-s="6"]:hover) .t1-donut [data-s="6"] { stroke-width: 20; }
.t1-leg .tp-row:focus-visible { background: var(--surface-hover); outline: 0; border-radius: var(--radius-sm); }
.t1-hold:has(.t1-leg [data-s="1"]:focus-visible) .t1-donut circle:not([data-s="1"]),
.t1-hold:has(.t1-leg [data-s="2"]:focus-visible) .t1-donut circle:not([data-s="2"]),
.t1-hold:has(.t1-leg [data-s="3"]:focus-visible) .t1-donut circle:not([data-s="3"]),
.t1-hold:has(.t1-leg [data-s="6"]:focus-visible) .t1-donut circle:not([data-s="6"]) { opacity: .3; }

/* La ficha de moneda: píldoras, anillos, barras y filas. */
.t1-pills .ao-pill { cursor: default; transition: transform .15s, box-shadow .15s; }
.t1-pills:hover .ao-pill:not(:hover) { opacity: .6; }
.t1-pills .ao-pill:hover, .t1-pills .ao-pill:focus-visible { outline: 0;
  box-shadow: 0 0 0 1px currentColor, 0 0 12px color-mix(in srgb, currentColor 30%, transparent); }
.t1-arc { cursor: default; border-radius: 50%; }
.t1-arc svg { transition: transform .2s, filter .2s; }
.t1-arc:hover svg, .t1-arc:focus-visible svg { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 45%, transparent)); }
.t1-arc:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.t1-coin .ao-rtrack, .t1-coin .ao-volbar, .t1-coin .t1-wbar { cursor: default; transition: box-shadow .15s; }
.t1-coin .ao-rtrack:hover, .t1-coin .ao-volbar:hover, .t1-coin .t1-wbar:hover,
.t1-coin .ao-rtrack:focus-visible, .t1-coin .ao-volbar:focus-visible, .t1-coin .t1-wbar:focus-visible {
  outline: 0; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent); }
.t1-coin .ao-rtrack:hover i, .t1-coin .ao-volbar:hover i { box-shadow: 0 0 8px var(--text); }
.t1-vsrows .ao-drow { border-radius: var(--radius-sm); padding: 2px 4px; margin: 0 -4px; cursor: default;
  transition: opacity .15s, background .15s; }
.t1-vsrows:hover .ao-drow:not(:hover) { opacity: .5; }
.t1-vsrows .ao-drow:hover, .t1-vsrows .ao-drow:focus-visible { background: var(--surface-hover); outline: 0; }
.t1-vsrows .ao-drow:hover .ao-dtrack i { filter: brightness(1.2); }
/* La cajita grande: las cifras de la derecha se señalan al pasar. */
.t1-side > div { border-radius: var(--radius-sm); transition: background .15s; }
.t1-side > div:hover { background: var(--surface-hover); }
.t1-rangebar .tp-bar { cursor: default; }
.t1-rangebar .tp-bar:hover .t1-pin { box-shadow: 0 0 8px var(--text); }

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

@media (prefers-reduced-motion: no-preference) {
  .widget.tp[class*="t1-"] > .tp-body > :not(.t1-flip) { animation: t1-in .45s cubic-bezier(.2, .7, .2, 1) backwards; }
  .widget.tp[class*="t1-"] > .tp-body > :nth-child(2) { animation-delay: .05s; }
  .widget.tp[class*="t1-"] > .tp-body > :nth-child(3) { animation-delay: .1s; }
  .widget.tp[class*="t1-"] > .tp-body > :nth-child(n+4) { animation-delay: .15s; }
  .widget.tp[class*="t1-"] .tp-fig { animation: t1-fig .6s .05s cubic-bezier(.2, .7, .2, 1) backwards; }
  /* La línea se dibuja de izquierda a derecha; su punto final llega al
     terminar y después late. */
  .t1-plot > svg, .t1-spark svg, .t1-gauge > svg { animation: t1-wipe .9s .1s cubic-bezier(.4, 0, .2, 1) backwards; }
  .t1-plot > .tp-dot { animation: t1-pop .3s .9s backwards; }
  .t1-plot > .tp-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: var(--k, var(--accent)); animation: t1-beat 2.4s 1.3s ease-out infinite; }
  .t1-plot > .t1-tag, .t1-plot > .t1-reflbl { animation: t1-fade .4s .9s backwards; }
  /* Barras que crecen desde su base, en cascada. */
  .t1-news > i { animation: t1-grow-y .5s calc(var(--i, 0) * 16ms + .1s) cubic-bezier(.2, .7, .2, 1) backwards; }
  .t1-news > i { transition: opacity .15s, filter .15s; }
  .t1-split > i { animation: t1-grow-x .5s calc(var(--i, 0) * 70ms + .15s) cubic-bezier(.2, .7, .2, 1) backwards;
    transform-origin: left; transition: opacity .15s, transform .15s; }
  .t1-split > i:hover { transform: scaleY(1.6); }
  .t1-cells > i { animation: t1-pop .35s calc(var(--i, 0) * 12ms + .1s) cubic-bezier(.2, .7, .2, 1.3) backwards;
    transition: opacity .15s, transform .15s, box-shadow .15s; }
  .t1-cells > i:hover { transform: scaleY(1.3); }
  .t1-heat a { animation: t1-pop .35s calc(var(--i, 0) * 6ms + .1s) cubic-bezier(.2, .7, .2, 1.3) backwards;
    transition: opacity .15s, transform .15s, box-shadow .15s; }
  .t1-heat a:hover, .t1-heat a.mc-cell { transform: scale(1.18); }
  .mo-breadth.mc-on i, .t1-udtop .mo-breadth i { animation: t1-grow-x .6s .15s cubic-bezier(.2, .7, .2, 1) backwards; transform-origin: left; }
  .t1-face-b .tp-row { animation: t1-in .35s calc(var(--i, 0) * 40ms) backwards; }
  .t1-fgbar > i { animation: t1-grow-x .5s .15s cubic-bezier(.2, .7, .2, 1) backwards; transform-origin: left; }
  .t1-fgbar.down > i { transform-origin: right; }
  .t1-gauge-val b { animation: t1-pop .45s .5s cubic-bezier(.2, .7, .2, 1.3) backwards; }
  .t1-donut { animation: t1-spin .8s .05s cubic-bezier(.2, .7, .2, 1) backwards; }
  .t1-donut circle { animation: t1-fade .4s calc(var(--i, 0) * 90ms + .2s) backwards; }
  .t1-leg .tp-row { animation: t1-in .35s calc(var(--i, 0) * 60ms + .1s) backwards; }
  .t1-arc svg { animation: t1-spin .7s .05s cubic-bezier(.2, .7, .2, 1) backwards; }
  .t1-arc:hover svg, .t1-arc:focus-visible svg { transform: scale(1.06); }
  .t1-pills .ao-pill:hover, .t1-pills .ao-pill:focus-visible { transform: translateY(-2px); }
  .t1-coin .tp-bar > i, .t1-coin .ao-dtrack i { animation: t1-grow-x .6s .15s cubic-bezier(.2, .7, .2, 1) backwards; transform-origin: left; }
  .t1-coin .ao-dtrack i[style*="right: 50%"] { transform-origin: right; }
  .t1-coin .ao-rtrack i, .t1-coin .ao-volbar i, .t1-rangebar .t1-pin { animation: t1-pop .4s .4s cubic-bezier(.2, .7, .2, 1.4) backwards; }
  .t1-vsrows .ao-drow { animation: t1-in .35s calc(var(--i, 0) * 60ms + .1s) backwards; }
}