/* Tanda 6 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
   (.t6-…) o bajo [data-tp="clave"] de sus piezas. Contrato: final de
   terminal_plan.md.

   Lo de aquí (2026-11-04), en este orden:
     1. Lo común de la tanda: el selector de radios (cambia sin recargar y sin
        JavaScript, con `:has()`), logos, nombres, la barra base + emisiones.
     2. 09 Yields (`yields`).
     3. `yl.pays` y `yl.chains` (rehechas) y las cajas `yl.*` con el marco.
     4. `yl.rank`.
     5. `yl.launchpools`.
     6. Presales: la caja de su plantilla, sin su tarjeta ni su título.
     7. Portfolio, Allocation y la muestra borrosa sin sesión.
   Sólo tokens: ningún color suelto. */

/* --- 1. Común ----------------------------------------------------------- */
.t6-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); flex: none; }
/* La forma es la común de los radios en `.tp-seg` (`terminal-pieces.css`,
   integración del 2026-11-04); aquí, que se parta en dos líneas si no cabe y
   la cuenta en gris. */
.t6-seg { flex-wrap: wrap; max-width: 100%; }
.t6-seg label > span { min-width: 34px; }
.t6-seg label > span small { font-size: inherit; font-weight: 500; color: var(--text-faint); }
.t6-seg-sub label > span { font-weight: 500; }

/* Logo e iniciales, nombre con su línea. */
.t6-logo { flex: none; width: 22px; height: 22px; border-radius: 50%; object-fit: cover; display: block; }
.t6-ini { display: inline-grid; place-items: center; background: var(--track); color: var(--text-muted);
  font-size: 9px; font-weight: 700; text-transform: uppercase; }
.t6-who { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.t6-nm { display: grid; min-width: 0; line-height: 1.25; }
.t6-nm b, .t6-nm > a { font-size: var(--size-sm); font-weight: 600; color: var(--text); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.t6-nm > a:hover b { color: var(--accent); }
.t6-nm small { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--size-2xs);
  color: var(--text-faint); white-space: nowrap; overflow: hidden; }
.t6-nm small > span { overflow: hidden; text-overflow: ellipsis; letter-spacing: .02em; }

/* La barra apilada: base (actividad real) y emisiones, sobre su pista. */
.t6-stack { display: flex; height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; min-width: 0; }
.t6-stack i { display: block; height: 100%; }
.t6-stack .t6-b { background: var(--accent); }
.t6-stack .t6-e { background: var(--warn); }
.t6-k-base { --k: var(--accent); }
.t6-k-emis { --k: var(--warn); }
/* El «?» de una cifra a leer con cuidado. */
.t6-q { display: inline-grid; place-items: center; width: 14px; height: 14px; margin-right: 3px; border-radius: 50%;
  font-size: 9px; font-weight: 800; vertical-align: 1px; color: var(--warn);
  background: color-mix(in srgb, var(--warn) 16%, transparent); }
.t6-more-link { align-self: flex-start; font-size: var(--size-xs); font-weight: 600; color: var(--accent); }
.t6-more-link:hover { text-decoration: underline; }
/* Un panel de un selector: sólo se ve el elegido (reglas de cada pieza). */
.t6-pane { display: none; flex-direction: column; gap: var(--s2); min-height: 0; }
.widget.tp .up { color: var(--up); }
.widget.tp .down { color: var(--down); }

/* --- 2. 09 Yields ------------------------------------------------------- */
.t6-yl > .tp-body { overflow: hidden; gap: var(--s2); }
.t6-yl-cols, .t6-yrow { display: grid; grid-template-columns: minmax(0, 1fr) 64px 58px 44px; align-items: center;
  gap: var(--s3); }
.t6-yl-cols { flex: none; padding: 0 0 4px; border-bottom: 1px solid var(--tp-div); font-size: var(--size-2xs);
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
.t6-yl-cols > span:nth-child(n+3) { text-align: right; }
.t6-yl-list { flex: 1 1 auto; min-height: 0; overflow: auto; margin-right: calc(-1 * var(--s2)); padding-right: var(--s2);
  scrollbar-width: thin; }
.t6-grp + .t6-grp { margin-top: var(--s3); }
.t6-grp-hd { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: var(--s2); height: 32px;
  margin-top: var(--s2); padding: 0 var(--s3) 0 6px; border-radius: var(--radius-sm); background: var(--seg-bg);
  box-shadow: inset 0 0 0 1px var(--tp-div); font-size: var(--size-sm); }
.t6-grp-hd > b { font-weight: 700; }
.t6-best { margin-left: auto; font-size: var(--size-xs); color: var(--text-faint); white-space: nowrap; }
.t6-best b { color: var(--text); font-weight: 700; }
.t6-mark { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px;
  font-size: var(--size-xs); font-weight: 800; color: var(--k); background: color-mix(in srgb, var(--k) 18%, transparent); }
.t6-mark-stable { --k: var(--series-3); }
.t6-mark-eth { --k: var(--series-2); }
.t6-mark-btc { --k: var(--series-1); }
.t6-mark-other { --k: var(--series-4); }
.t6-mark-pairs { --k: var(--series-6); }
.t6-yrow { min-height: 44px; padding: 4px 0; border-bottom: 1px solid var(--tp-div); }
.t6-yrow:last-of-type { border-bottom-color: transparent; }
.t6-yrow:hover { background: var(--surface-hover); border-radius: var(--radius-sm); }
.t6-apy { text-align: right; font-size: var(--size-base); font-weight: 750; white-space: nowrap; }
.t6-dim .t6-apy { color: var(--text-faint); font-weight: 600; font-size: var(--size-sm); }
.t6-emis { text-align: right; font-size: var(--size-xs); color: var(--text-faint); }
.t6-emis.warn { color: var(--warn); font-weight: 600; }
.t6-ev { padding: 0 5px; font-size: 9px; letter-spacing: .06em; flex: none; }
.t6-ev:hover { text-decoration: underline; }
.t6-more, .t6-none { display: none; }
.t6-none { margin: var(--s2) 0; font-size: var(--size-xs); color: var(--text-faint); text-align: center; }
/* Con una clase o un tipo elegido, cada grupo enseña hasta ocho. */
.t6-yl:has([name="t6-yl-c"]:checked:not([value="all"])) .t6-more,
.t6-yl:has([name="t6-yl-t"]:checked:not([value="all"])) .t6-more { display: grid; }
/* La clase: sólo su grupo. */
.t6-yl:has([name="t6-yl-c"][value="stable"]:checked) .t6-grp:not([data-c="stable"]),
.t6-yl:has([name="t6-yl-c"][value="eth"]:checked) .t6-grp:not([data-c="eth"]),
.t6-yl:has([name="t6-yl-c"][value="btc"]:checked) .t6-grp:not([data-c="btc"]),
.t6-yl:has([name="t6-yl-c"][value="other"]:checked) .t6-grp:not([data-c="other"]) { display: none; }
/* El tipo: sólo sus filas; en «All», fuera los grupos que no lo tienen, y
   con una clase elegida que no lo tiene, su frase. */
.t6-yl:has([name="t6-yl-t"][value="lending"]:checked) .t6-yrow:not([data-ty="lending"]),
.t6-yl:has([name="t6-yl-t"][value="staking"]:checked) .t6-yrow:not([data-ty="staking"]),
.t6-yl:has([name="t6-yl-t"][value="rwa"]:checked) .t6-yrow:not([data-ty="rwa"]) { display: none; }
.t6-yl:has([name="t6-yl-c"][value="all"]:checked):has([name="t6-yl-t"][value="lending"]:checked) .t6-grp:not([data-types~="lending"]),
.t6-yl:has([name="t6-yl-c"][value="all"]:checked):has([name="t6-yl-t"][value="staking"]:checked) .t6-grp:not([data-types~="staking"]),
.t6-yl:has([name="t6-yl-c"][value="all"]:checked):has([name="t6-yl-t"][value="rwa"]:checked) .t6-grp:not([data-types~="rwa"]) { display: none; }
.t6-yl:has([name="t6-yl-t"][value="lending"]:checked) .t6-none[data-ty="lending"],
.t6-yl:has([name="t6-yl-t"][value="staking"]:checked) .t6-none[data-ty="staking"],
.t6-yl:has([name="t6-yl-t"][value="rwa"]:checked) .t6-none[data-ty="rwa"] { display: block; }
@container pieza (max-width: 359px) {
  .t6-yl-cols, .t6-yrow { grid-template-columns: minmax(0, 1fr) 58px 40px; }
  .t6-yl-cb, .t6-yrow .t6-stack { display: none; }
  .t6-yrow .t6-logo { width: 18px; height: 18px; }
}

/* --- 3. Las cajas de arriba de /yields ---------------------------------- */
/* La caja de la sección dentro del marco: ya sin tarjeta (`.wbox`). */
.t6-yl-box > .tp-body { padding-left: var(--s3); padding-right: var(--s3); }
.t6-wbox { overflow: visible; flex: 1 1 auto; }
.t6-wbox .mo-card { padding-top: 0; }

/* How much it pays: eje con tres líneas y barras que llenan el alto. */
.t6-pays > .tp-body { overflow: hidden; }
.t6-pays-plot { flex: 1 1 auto; min-height: 110px; display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s2); }
.t6-pays-axis { position: relative; margin-bottom: 30px; min-width: 3.2em; }
.t6-pays-axis span { position: absolute; right: 0; bottom: calc(var(--y) * 1%); transform: translateY(50%);
  font-size: 10px; color: var(--text-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.t6-pays-bars { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: 6px; align-items: stretch; }
/* Las líneas de referencia, detrás de las barras (arriba, en medio, abajo). */
.t6-pays-bars::before { content: ""; position: absolute; inset: 0 0 30px; pointer-events: none;
  background: linear-gradient(var(--tp-div), var(--tp-div)) top / 100% 1px no-repeat,
              linear-gradient(var(--tp-div), var(--tp-div)) center / 100% 1px no-repeat,
              linear-gradient(var(--line-strong), var(--line-strong)) bottom / 100% 1px no-repeat; }
.t6-pays-col { display: grid; grid-template-rows: minmax(0, 1fr) 30px; min-width: 0; border-radius: 6px; outline: 0; }
.t6-pays-col:hover .t6-pays-bar i, .t6-pays-col:focus-visible .t6-pays-bar i { filter: brightness(1.15); }
.t6-pays-col:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.t6-pays-bar { position: relative; display: flex; align-items: flex-end; }
.t6-pays-bar i { display: block; width: 100%; min-height: 2px; border-radius: 4px 4px 1px 1px; }
.t6-pays-lbl { padding-top: 4px; font-size: 10px; line-height: 1.15; color: var(--text-muted); text-align: center;
  overflow-wrap: anywhere; }

/* Where the money sits: barras siempre; el anillo, con sitio. */
.t6-chains-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); align-items: center; }
.t6-ring { display: none; position: relative; width: 128px; height: 128px; }
.t6-ring svg { display: block; }
.t6-ring-track { fill: none; stroke: var(--track); stroke-width: 14; }
.t6-ring-arc { fill: none; stroke-width: 14; transition: stroke-width .12s; }
.t6-ring-arc:hover { stroke-width: 17; }
.t6-arc1 { stroke: var(--series-1); } .t6-arc2 { stroke: var(--series-2); } .t6-arc3 { stroke: var(--series-3); }
.t6-arc4 { stroke: var(--series-4); } .t6-arc5 { stroke: var(--series-5); } .t6-arc6 { stroke: var(--series-6); }
.t6-ring-mid { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none;
  line-height: 1.15; }
.t6-ring-mid b { font-size: var(--size-md); font-weight: 750; }
.t6-ring-mid small { font-size: var(--size-2xs); color: var(--text-faint); }
.t6-chain { gap: var(--s2); padding: 3px 0; }
.t6-chain .tp-bar { flex: 0 0 34%; }
.t6-chain b { min-width: 2.6em; text-align: right; font-size: var(--size-sm); }
.t6-chain-v { min-width: 4.2em; text-align: right; font-size: var(--size-xs); }
.t6-bar-s1 > i { background: var(--series-1); } .t6-bar-s2 > i { background: var(--series-2); }
.t6-bar-s3 > i { background: var(--series-3); } .t6-bar-s4 > i { background: var(--series-4); }
.t6-bar-s5 > i { background: var(--series-5); } .t6-bar-s6 > i { background: var(--series-6); }
@container pieza (min-width: 440px) {
  .t6-chains-in { grid-template-columns: 128px minmax(0, 1fr); }
  .t6-ring { display: block; }
}
@container pieza (max-width: 300px) { .t6-chain-v { display: none; } }

/* --- 4. yl.rank --------------------------------------------------------- */
.t6-rk > .tp-body { gap: var(--s2); }
.t6-rk .t6-ctl { justify-content: space-between; }
.t6-rk:has([name="t6-rk-c"][value="stable"]:checked) .t6-pane[data-c="stable"],
.t6-rk:has([name="t6-rk-c"][value="eth"]:checked) .t6-pane[data-c="eth"],
.t6-rk:has([name="t6-rk-c"][value="btc"]:checked) .t6-pane[data-c="btc"],
.t6-rk:has([name="t6-rk-c"][value="other"]:checked) .t6-pane[data-c="other"],
.t6-rk:has([name="t6-rk-c"][value="pairs"]:checked) .t6-pane[data-c="pairs"] { display: flex; }
/* La distribución de notas, una franja de colores con su letra. */
.t6-grades { flex: 0 1 260px; height: 18px; gap: 2px; }
.tp-when-wide.t6-grades { display: none !important; }
@container pieza (min-width: 600px) { .tp-when-wide.t6-grades { display: flex !important; } }
.t6-grades i { display: grid; place-items: center; min-width: 16px; border-radius: 3px; background: var(--g);
  color: var(--bg); font-style: normal; font-size: 9px; font-weight: 800; }
.t6-podium { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
@container pieza (min-width: 600px) {
  .tp-when-wide.t6-podium { display: grid !important; }
  .t6-podium-dup { display: none !important; }
}
.t6-top { position: relative; display: grid; gap: 6px; align-content: start; min-width: 0; padding: var(--s3);
  border-radius: var(--radius-sm); background: var(--seg-bg); box-shadow: inset 0 0 0 1px var(--tp-div);
  overflow: hidden; color: var(--text); }
.t6-top::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--g); }
.t6-top:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.t6-top-hd { display: flex; align-items: center; gap: 6px; }
.t6-top-n { font-size: var(--size-md); font-weight: 800; color: var(--text-faint); }
.t6-top .yr-ring { width: 44px; height: 44px; }
.t6-top .yr-ring::before { background: var(--seg-bg); }
.t6-top-apy { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.t6-top-apy b { font-size: var(--size-xl); font-weight: 800; color: var(--g); }
.t6-top-apy small { font-size: var(--size-2xs); color: var(--text-faint); }
.t6-rk-list { display: grid; }
.t6-rk-row { display: grid; grid-template-columns: 1.6em 2.8em 3.2em minmax(0, 1fr) auto 4.6em 4.4em; align-items: center;
  gap: var(--s2); min-height: 40px; padding: 3px 4px; border-top: 1px solid var(--tp-div); color: var(--text);
  font-size: var(--size-sm); }
.t6-rk-row:first-child { border-top: 0; }
.t6-rk-row:hover { background: var(--surface-hover); border-radius: var(--radius-sm); }
.t6-rk-row:hover .t6-nm b { color: var(--accent); }
.t6-rk-n { color: var(--text-faint); font-weight: 700; text-align: right; }
.t6-rk-why { display: flex; gap: 4px; justify-content: flex-end; min-width: 0; overflow: hidden; }
.t6-rk-apy { text-align: right; font-weight: 750; }
.t6-rk-tvl { text-align: right; font-size: var(--size-xs); }
@container pieza (max-width: 640px) { .t6-rk-why { display: none; } .t6-rk-row { grid-template-columns: 1.6em 2.8em 3.2em minmax(0, 1fr) 4.6em 4.4em; } }
@container pieza (max-width: 359px) { .t6-rk-row { grid-template-columns: 1.4em 2.6em 3em minmax(0, 1fr) 4.4em; } }

/* --- 5. yl.launchpools -------------------------------------------------- */
.t6-lp > .tp-body { gap: var(--s2); }
.t6-lp-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--s2); flex: none; }
.t6-lp-sum > span { display: grid; gap: 1px; padding: var(--s2) var(--s3); border-radius: var(--radius-sm);
  background: var(--seg-bg); min-width: 0; }
.t6-lp-sum small { font-size: var(--size-2xs); color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t6-lp-sum b { font-size: var(--size-lg); font-weight: 750; }
.t6-lp-sum em { font-style: normal; font-size: var(--size-2xs); color: var(--text-muted); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.t6-lp:has([name="t6-lp-s"][value="open"]:checked) .t6-pane[data-s="open"],
.t6-lp:has([name="t6-lp-s"][value="upcoming"]:checked) .t6-pane[data-s="upcoming"],
.t6-lp:has([name="t6-lp-s"][value="ended"]:checked) .t6-pane[data-s="ended"] { display: flex; }
.t6-lp-row { color: var(--text); gap: var(--s2); }
.t6-lp-row:hover { background: var(--surface-hover); border-radius: var(--radius-sm); }
.t6-lp-row:hover .t6-nm b { color: var(--accent); }
.t6-lp-r { display: grid; justify-items: end; line-height: 1.2; }
.t6-lp-r b { font-size: var(--size-sm); font-weight: 750; }
.t6-lp-r small { font-size: var(--size-2xs); color: var(--text-faint); white-space: nowrap; }
.t6-lp-r small.warn-t { color: var(--warn); }
.t6-lp .tp-empty { padding: var(--s3) 0; }

/* --- 6. Presales: la caja de su plantilla, dentro del marco ------------- */
.t6-ps > .tp-body { padding-top: 0; }
.t6-psbox { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.t6-psbox > .card { flex: 1 1 auto; background: none; border: 0; box-shadow: none; border-radius: 0; padding: 0; }
.t6-psbox > .card::before, .t6-psbox > .card::after { display: none; }
/* Su título lo pone el marco: de su cabecera se queda sólo el selector. */
.t6-psbox .psh-hd .mo-hd { display: none; }
.t6-psbox .psh-hd { justify-content: flex-end; }
.t6-psbox .psh-hd:not(:has(.psh-ctl)) { display: none; }
/* Dentro de la pieza manda su ancho, no el de la ventana (presales-hero.css
   parte columnas por la ventana). */
.t6-psbox .psh-cells { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.t6-psbox .psh-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.t6-psbox .psh-now { padding: 0; }
@container pieza (max-width: 720px) { .t6-psbox .psh-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container pieza (max-width: 340px) { .t6-psbox .psh-cells { grid-template-columns: minmax(0, 1fr); } }
@container pieza (max-width: 560px) { .t6-psbox .psh-two { grid-template-columns: minmax(0, 1fr); } }

/* --- 7. Portfolio, Allocation y la muestra ------------------------------ */
.t6-pf-top { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--s2); }
.t6-pf-top > div:first-child { display: grid; gap: 2px; }
.t6-pf-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.t6-pf-chips .tp-chip { text-transform: none; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.t6-pf-chart { height: 64px; flex: none; }
.t6-pf-chart svg { height: 64px; }
.t6-pf-spans { display: flex; flex-wrap: wrap; gap: 2px var(--s3); font-size: var(--size-xs); }
.t6-pf-spans i { font-style: normal; color: var(--text-faint); margin-right: 4px; }
.t6-pf-spans b { font-weight: 600; }
.t6-pf-spans > span { padding: 1px 6px; border-radius: 6px; }
.t6-pf-spans > span.on { background: var(--seg-bg); box-shadow: inset 0 0 0 1px var(--tp-div); }
/* Baja: las tres cifras de contexto se van antes que las posiciones. */
@container pieza (max-height: 560px) { .widget.tp .t6-pf-stats { display: none; } }
.t6-pf-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.t6-pf-stats > span { display: grid; gap: 1px; padding: var(--s2); border-radius: var(--radius-sm); background: var(--seg-bg);
  min-width: 0; }
.t6-pf-stats i { font-style: normal; font-size: var(--size-2xs); color: var(--text-faint); }
.t6-pf-stats b { font-size: var(--size-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t6-pf-stats small { font-size: var(--size-2xs); color: var(--text-faint); }
.t6-pf-pos .tp-row { color: var(--text); gap: var(--s2); }
.t6-pf-pos .tp-row:hover { background: var(--surface-hover); border-radius: var(--radius-sm); }
.t6-pf-sym { min-width: 3.4em; font-size: var(--size-sm); }
.t6-pf-pos .tp-bar { flex: 1 1 auto; }
.t6-pf-c { min-width: 4.4em; text-align: right; font-size: var(--size-xs); }
@container pieza (max-width: 359px) { .t6-pf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .t6-pf-stats > span:last-child { display: none; } }

.t6-al-top { display: grid; gap: 2px; }
.t6-al-pct { color: var(--accent); }
.t6-al-ring { display: flex; justify-content: center; }
.t6-al-sec .tp-bar { flex: 0 0 38%; }

/* Sin sesión: la forma de la pieza, borrosa y sin cifras, y la invitación. */
.t6-sample { position: relative; flex: 1 1 auto; min-height: 180px; display: grid; }
.t6-sample-art { grid-area: 1 / 1; display: grid; gap: var(--s2); align-content: start; filter: blur(3px); opacity: .55;
  pointer-events: none; user-select: none; }
.t6-sample-art i, .t6-s-row i, .t6-s-row b { display: block; border-radius: 6px; background: var(--track); }
.t6-s-fig { width: 46%; height: 30px; }
.t6-s-line { width: 30%; height: 12px; }
.t6-s-chart { display: block; height: 56px; }
.t6-s-chart svg { width: 100%; height: 100%; display: block; }
.t6-s-chart path { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.t6-s-row { display: grid; grid-template-columns: 3em minmax(0, 1fr); gap: var(--s2); align-items: center; }
.t6-s-row i { height: 12px; }
.t6-s-row b { height: 6px; width: calc(var(--v) * 1%); background: var(--accent); }
.t6-sample-cta { grid-area: 1 / 1; align-self: center; justify-self: center; display: grid; justify-items: center; gap: 6px;
  max-width: 30ch; padding: var(--s3) var(--s4); text-align: center; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 88%, transparent); box-shadow: 0 0 0 1px var(--tp-div), var(--shadow); }
.t6-sample-cta b { font-size: var(--size-md); }
.t6-sample-cta span { font-size: var(--size-xs); color: var(--text-muted); }

/* Integración (2026-11-04): a 4x4 las siete filas de «Where the money sits»
   se pasaban 22 px y la última salía cortada; filas más juntas cuando falta
   alto. */
@container pieza (max-height: 320px) {
  .t6-chain { padding: 0; }
}

/* --- 8. Movimiento (2026-11-05) -----------------------------------------
   «Quiero mucho efecto visual, no una página y unas cajas estáticas». Lo
   común (barras que crecen, filas que entran, foco al pasar, realce
   enlazado `data-hl`, cifras que cuentan, línea que se dibuja con su último
   punto latiendo) va en t5.css con la clase `t46` que llevan todas las
   piezas de esta tanda menos las cajas de Presales; aquí, lo propio. Con
   «menos movimiento» t5.css lo apaga todo. */

/* 09 Yields: «Best» del tipo elegido; la barra base + emisiones con sus
   tramos que se leen y se encienden desde la leyenda. */
.t6-best[data-ty]:not([data-ty="all"]) { display: none; }
.t6-yl:has([name="t6-yl-t"]:checked:not([value="all"])) .t6-best[data-ty="all"] { display: none; }
.t6-yl:has([name="t6-yl-t"][value="lending"]:checked) .t6-best[data-ty="lending"],
.t6-yl:has([name="t6-yl-t"][value="staking"]:checked) .t6-best[data-ty="staking"],
.t6-yl:has([name="t6-yl-t"][value="rwa"]:checked) .t6-best[data-ty="rwa"] { display: inline; }
.t6-stack { transition: transform .18s ease; }
.t6-stack i { transition: opacity .18s ease, filter .18s ease; }
.t6-yrow:hover .t6-stack, .t6-rk-row:hover .t6-stack, .t6-top:hover .t6-stack { transform: scaleY(1.5); }
.t6-stack i:hover { filter: brightness(1.25); }
.t6-yl .tp-legend .tp-key { cursor: pointer; padding: 0 3px; border-radius: 4px; }
.t6-yl .tp-legend .tp-key.hl { background: var(--surface-hover); color: var(--text); }
.t6-yrow { transition: opacity .18s ease, background-color .18s ease; }
.t6-grp-hd { animation: t46-fade .35s ease-out backwards; }

/* Las cajas de arriba de /yields, rehechas aquí. */
.t6-yb-big { font-size: var(--size-2xl); --k: var(--accent); }
.t6-split { display: flex; gap: 2px; height: 10px; border-radius: 5px; overflow: hidden; background: var(--track); flex: none; }
.t6-split i { display: block; min-width: 2px; cursor: pointer; transition: opacity .18s ease, filter .18s ease; }
.t6-sp-st { background: var(--cyan-400); }
.t6-sp-ot { background: var(--violet-400); }
.t6-k-st { --k: var(--cyan-400); } .t6-k-ot { --k: var(--violet-400); }
.t6-k-real { --k: var(--up); }
.t6-yb-leg { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); font-size: var(--size-xs); color: var(--text-muted); }
.t6-yb-leg .tp-key, .t6-yb-key li { cursor: pointer; border-radius: 4px; }
.t6-yb-chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: auto; }
.t6-yb-chips > span { padding: 3px 8px; border-radius: 6px; background: var(--seg-bg); box-shadow: inset 0 0 0 1px var(--tp-div);
  font-size: var(--size-xs); color: var(--text-muted); }
.t6-yb-chips b { color: var(--text); font-variant-numeric: tabular-nums; }
.t6-yb-prem .tp-fig { --k: var(--up); }
.t6-yb-prem .tp-fig.down { --k: var(--down); }
.t6-yb-bars .tp-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(48px, 38%) 4.2em; align-items: center; }
.t6-yb-bars .tp-row b { text-align: right; }
.t6-bar-acc > i { background: var(--accent); }
.t6-bar-vio > i { background: var(--violet-400); }
.t6-bar-amb > i { background: var(--amber-400); }
.t6-yb-foot { font-size: var(--size-xs); }
.t6-yb-real { display: flex; align-items: center; gap: var(--s4); flex: 1 1 auto; min-width: 0; }
.t6-yb-ring { position: relative; flex: none; width: 112px; height: 112px; }
.t6-arc-real { stroke: var(--up); }
.t6-arc-emis { stroke: var(--amber-400); }
.t6-yb-key { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); flex: 1 1 auto; min-width: 0; }
.t6-yb-key li { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: 2px 4px;
  font-size: var(--size-sm); color: var(--text-muted); }
.t6-yb-key b { color: var(--text); }
@container pieza (max-width: 300px) { .t6-yb-real { flex-direction: column; align-items: stretch; } .t6-yb-ring { align-self: center; } }
.t6-yb-rank .tp-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(48px, 40%) 4.6em; align-items: center; padding: 3px 0; }
.t6-yb-rank .tp-row b { text-align: right; font-size: var(--size-sm); }
.t6-yb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t6-yb-moves { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
@container pieza (min-width: 520px) { .t6-yb-moves { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.t6-yb-col { display: grid; gap: var(--s1); align-content: start; min-width: 0; }
.t6-yb-h { display: inline-flex; align-items: center; gap: 6px; }
.t6-yb-tag { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; font-size: 8px; }
.t6-yb-tag.up { color: var(--up); background: color-mix(in srgb, var(--up) 14%, transparent); }
.t6-yb-tag.down { color: var(--down); background: color-mix(in srgb, var(--down) 14%, transparent); }
.t6-yb-mrow { display: grid; grid-template-columns: minmax(0, 1fr) 5.6em 3.4em; align-items: center; gap: var(--s2); }
.t6-yb-mv { display: grid; justify-items: end; gap: 2px; }
.t6-yb-mv b { font-size: var(--size-sm); }
.t6-yb-mv .tp-bar { width: 100%; height: 3px; min-width: 0; }
.t6-yb-apy { text-align: right; font-size: var(--size-xs); }
.t6-yb-none { display: block; }

/* How much it pays: la barra señalada brilla y engorda; las demás se
   apagan (`t46-seg`). */
.t6-pays-col { cursor: pointer; transition: opacity .18s ease; }
.t6-pays-bar i { transition: filter .18s ease, transform .18s ease; }
.t6-pays-col:hover .t6-pays-bar i, .t6-pays-col:focus-visible .t6-pays-bar i { transform: scaleX(1.08); }

/* Where the money sits: el arco señalado engorda (también desde su fila). */
.t6-ring-arc.hl { stroke-width: 18; }
.t6-chain.hl { background: var(--surface-hover); border-radius: var(--radius-sm); }

/* yl.rank: la tarjeta del podio se levanta; la franja de notas crece al
   pasar y se enciende con su fila. */
.t6-top { transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease; }
.t6-top:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--line-strong), 0 8px 20px color-mix(in srgb, var(--text) 12%, transparent); }
.t6-top-apy b { --k: var(--g); }
.t6-grades i { cursor: pointer; transition: transform .18s ease, opacity .18s ease, filter .18s ease; }
.t6-grades i:hover, .t6-grades i.hl { transform: scaleY(1.3); }
.t6-rk-row { transition: opacity .18s ease, background-color .18s ease; }

/* yl.launchpools: la barra de la tasa bajo la cifra. */
.t6-lp-r .t6-lp-bar { width: 56px; height: 3px; min-width: 0; }

/* Portfolio: el último punto de la curva con el color de la curva. */
.t46-end.up { --k: var(--up); }
.t46-end.down { --k: var(--down); }
.t6-pf-chart { position: relative; }
.t6-pf .tp-hero { --k: var(--accent); }

/* Allocation: el anillo de `charts.allocation_ring` se cierra al entrar y
   arco y fila de la leyenda se encienden juntos. */
.t46 .t6-al-ring svg { -webkit-mask: conic-gradient(black var(--t46-a), transparent 0);
  mask: conic-gradient(black var(--t46-a), transparent 0); animation: t46-sweep .9s cubic-bezier(.3, .7, .2, 1) backwards; }
.t6-al-ring circle { transition: opacity .18s ease, stroke-width .18s ease; cursor: pointer; }
.t6-al-ring circle.hl, .t6-al-ring circle:hover { stroke-width: 20; }
.t6-al-ring .ring-key li { cursor: pointer; border-radius: 4px; transition: opacity .18s ease; }
.t6-al-ring .ring-key li.hl { background: var(--surface-hover); }
@media (prefers-reduced-motion: reduce) { .t46 .t6-al-ring svg { -webkit-mask: none; mask: none; } }
/* Stablecoins vs the Fed baja (4x3): la línea de debajo se va antes que
   una barra. */
@container pieza (max-height: 300px) { .t6-yb-foot { display: none; } .t6-ybox-fed .t6-yb-bars .tp-row { padding: 2px 0; } }