/* Markets y Market moves, revisión 5.4 (2026-11-08).
   Se carga sólo en /markets y /marketmoves, después de blockboard.css: gana
   los empates sin subir la especificidad. Todo con prefijos propios o
   colgado de las clases de estas dos páginas. */

/* ============================================================
   MARKET MOVES · los dos grupos de debajo de cada movimiento
   «Market drivers» (violeta, como «The market did this») y
   «<COIN>-specific drivers» (cian, como los enlaces). El que explica
   más del movimiento lleva el borde y el fondo: es el protagonista.
   ============================================================ */
.mmd { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s3); }
.mmd.mmd-one { grid-template-columns: minmax(0, 1fr); }
.mmd-g { --g: var(--info); position: relative; min-width: 0; padding: var(--s3) var(--s3) var(--s3) calc(var(--s3) + 3px);
  border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-sunken);
  transition: border-color .15s, background-color .15s; }
.mmd-g::before { content: ""; position: absolute; left: 0; top: var(--s2); bottom: var(--s2); width: 3px;
  border-radius: 0 3px 3px 0; background: var(--g); opacity: .55; }
.mmd-coin { --g: var(--accent); }
.mmd-g.mmd-lead { border-color: color-mix(in srgb, var(--g) 38%, transparent);
  background: color-mix(in srgb, var(--g) 7%, var(--surface-sunken)); }
.mmd-g.mmd-lead::before { opacity: 1; }
.mmd-g:hover { border-color: color-mix(in srgb, var(--g) 50%, transparent); }
.mmd-hd { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--size-sm); }
.mmd-hd > b { color: var(--g); font-weight: 700; white-space: nowrap; }
.mmd-ico { display: inline-flex; color: var(--g); flex: none; }
.mmd-part { margin-left: auto; display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap;
  font-size: var(--size-xs); }
.mmd-part b { font-size: var(--size-sm); font-variant-numeric: tabular-nums; }
.mmd-sub { margin: 2px 0 0; font-size: var(--size-xs); }
.mmd-most { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; font-size: var(--size-2xs);
  font-weight: 600; color: var(--g); background: color-mix(in srgb, var(--g) 14%, transparent); }
.mmd-list { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; gap: 6px; }
.mmd-list li { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 1px;
  font-size: var(--size-sm); line-height: 1.35; min-width: 0; }
.mmd-when { font-size: var(--size-2xs); white-space: nowrap; font-variant-numeric: tabular-nums; flex: none; }
.mmd-live { color: var(--warn); }
.mmd-link { color: var(--text); text-decoration: none; min-width: 0; flex: 1 1 220px;
  background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px;
  background-repeat: no-repeat; background-position: 0 100%; transition: background-size .2s, color .15s; }
.mmd-link:hover, .mmd-link:focus-visible { color: var(--g); background-size: 100% 1px; }
.mmd-why { flex: none; padding: 0 6px; border-radius: 4px; font-size: var(--size-2xs); color: var(--text-muted);
  border: 1px solid var(--line); white-space: nowrap; }
.mmd-found { color: var(--text); }
.mmd-none { margin: var(--s2) 0 0; font-size: var(--size-sm); }
.mmd-more { margin-top: var(--s2); }
.mmd-more > summary { font-size: var(--size-xs); }
.mmw .mmd { margin-top: var(--s3); }

/* La clave, una vez arriba de la lista. */
.mmd-key { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin: 0 0 var(--s3);
  font-size: var(--size-xs); color: var(--text-muted); }
.mmd-k { display: inline-flex; align-items: center; gap: 6px; }
.mmd-k i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.mmd-k-market i { background: var(--info); }
.mmd-k-coin i { background: var(--accent); }
.mmd-k-lead i { background: transparent; border: 1px solid var(--text-muted); }
.mmd-k-market b { color: var(--info); }
.mmd-k-coin b { color: var(--accent); }

@media (max-width: 720px) {
  .mmd { grid-template-columns: minmax(0, 1fr); }
  .mmd-list li { display: block; }
  .mmd-when { display: block; }
  .mmd-why { display: inline-block; margin-left: 6px; vertical-align: 1px; }
  .mmd-key { display: grid; gap: 4px; }
  .mmd-k { display: block; }
  .mmd-k i { display: inline-block; margin-right: 6px; vertical-align: -1px; }
  .mmd-part { margin-left: 0; }
  .mmd-hd { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .mmd-g, .mmd-link { transition: none; }
}

/* ============================================================
   MARKETS · la fila de arriba (t97, 2026-11-08)
   La caja de estado vuelve a su sitio y a su tamaño de antes de t86: el
   primer tercio de la fila (`.ms-mode`, 1.25fr / 1.2fr / 1fr en
   blockboard.css), con Movers y Up or down al lado. El usuario: «se
   entendió mal […] lo quiero en el sitio donde estaba antes, con su formato
   de antes pero arreglado». Dentro, lo que pedía la imagen 19:
   - la fila de títulos alineada: cada celda toma sus filas de la rejilla
     (`subgrid`: rótulo, cifra, contexto, dibujo), así que la cifra, la
     línea de contexto y el dibujo empiezan a la misma altura en las tres
     celdas de una fila aunque un rótulo baje de línea;
   - los gráficos llenan el hueco que queda, con su área y trazo fino;
   - nada comprimido ni hueco: cifra a escala del ancho, la caja estira
     sus celdas al alto de la fila;
   - efectos finos: la celda se aclara un poco al pasar.
   ============================================================ */
/* El reparto de la fila es el de antes (1.25 / 1.2 / 1) con un poco más para
   la caja de estado, que es la que tiene seis cifras: así «Bitcoin
   dominance» y «59.2% 0.0 pts» caben en una línea sin achicar la letra. */
@media (min-width: 1101px) { .mo-grid.mk5 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.15fr) minmax(0, 1fr); } }
.mk5 > .mk5-status { padding: 0; overflow: hidden; }
.ms-grid.mk5-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, auto auto auto minmax(0, 1fr)); gap: 0; height: auto; flex: 1;
  background: none; border-radius: 0; overflow: visible; }
.mk5-grid > .mk5-cell { grid-row: span 4; display: grid; grid-template-rows: subgrid; align-content: stretch;
  justify-items: stretch; gap: 0; min-width: 0; padding: var(--s3) 10px; background: none;
  border: 0 solid var(--line); border-width: 0 1px 1px 0; transition: background-color .2s ease; }
.mk5-grid > .mk5-cell:nth-child(3n) { border-right-width: 0; }
.mk5-grid > .mk5-cell:nth-child(n+4) { border-bottom-width: 0; }
.mk5-grid > .mk5-cell:hover { background: color-mix(in srgb, var(--surface-hover) 55%, transparent); }
.mk5-cell > * + * { margin-top: 4px; }

/* El rótulo: arriba, puede bajar de línea; la fila mide lo del más alto. */
.mk5-cell .mk5-hd { display: flex; align-items: flex-start; gap: 4px; margin: 0; align-self: start;
  font-size: var(--size-xs); font-weight: 500; line-height: 1.3; color: var(--text-muted); white-space: normal;
  overflow: visible; text-overflow: clip; letter-spacing: 0; text-transform: none; }
.mk5-cell .mk5-hd .info { flex: none; margin-top: 1px; }
.mk5-cell .mk5-val { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-top: 6px;
  font-size: clamp(var(--size-lg), 1.6vw, var(--size-xl)); font-weight: 700; line-height: 1.05;
  letter-spacing: -.01em; white-space: nowrap; overflow: visible; }
.mk5-cell .mk5-val small { font-size: var(--size-xs); font-weight: 600; letter-spacing: 0; }
.mk5-chg { font-size: var(--size-xs); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mk5-chg .faint { font-weight: 400; }
.mk5-chg.up { color: var(--up); } .mk5-chg.down { color: var(--down); }

/* El dibujo llena lo que queda de la celda, con su área. */
.mk5-cell .mk5-chart { position: relative; display: block; min-height: 46px; align-self: stretch; margin-top: 8px; }
.mk5-cell .mk5-chart > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mk5-chart svg path { vector-effect: non-scaling-stroke; }
.mk5-chart svg path[fill="none"] { stroke-width: 1.75; }
.mk5-chart svg path[fill^="url"] { opacity: .5; }
.mk5-neutral svg path[fill="none"] { stroke: color-mix(in srgb, var(--text-muted) 80%, var(--accent)); }
.mk5-bars svg rect { opacity: .85; }

/* Miedo y avaricia: no sigue las filas (el reloj es alto); centrado. */
.mk5-grid > .mk5-fg { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
.mk5-fg .mk5-hd { align-self: stretch; }
.mo-grid.mk5 .mk5-fg .mo-gauge.mk5-gauge { width: 100%; max-width: 150px; margin-top: 6px; }
.mo-grid.mk5 .mk5-fg .mo-gauge.mk5-gauge svg.fg-gauge { max-width: none; width: 100%; }
.mk5-gauge-val { bottom: -2px; gap: 3px; }
.mo-grid.mk5 .mk5-gauge-val b { font-size: var(--size-xl); line-height: 1; }
.mk5-zone { padding: 1px 8px; border-radius: 5px; font-size: var(--size-2xs) !important; font-weight: 700;
  color: var(--text) !important; --z: var(--line-strong); white-space: nowrap;
  background: color-mix(in srgb, var(--z) 30%, transparent); border: 1px solid color-mix(in srgb, var(--z) 55%, transparent); }
.mk5-z-xf { --z: var(--down); } .mk5-z-f { --z: var(--amber-400); } .mk5-z-n { --z: var(--line-strong); }
.mk5-z-g { --z: var(--green-300); } .mk5-z-xg { --z: var(--up); }
.mk5-hist { display: flex; justify-content: center; gap: 0; margin-top: var(--s2) !important;
  font-size: var(--size-xs) !important; white-space: nowrap; }
.mk5-hist > span { display: inline-flex; align-items: center; gap: 4px; padding: 0 var(--s2); }
.mk5-hist > span + span { border-left: 1px solid var(--line); }
.mk5-hist b { min-width: 2em; text-align: center; padding: 0 5px !important; border-radius: 5px !important;
  color: var(--bg); font-variant-numeric: tabular-nums; }
.mk5-long { display: none; } .mk5-short { display: inline; }
.mk5-why { align-self: center; font-size: var(--size-xs); color: var(--accent); text-decoration: none;
  padding: 1px 4px; border-radius: 4px; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.mk5-why:hover, .mk5-why:focus-visible { text-decoration-line: underline; }

/* Dominio: barra y la clave en lista, cada parte con su cifra. */
.mk5-dombar.ms-dombar { align-self: center; height: 8px; border-radius: 4px; margin-top: 8px; }
.mk5-domkey.ms-domkey { display: grid; grid-template-columns: minmax(0, 1fr); align-content: end; gap: 0; line-height: 1.35;
  margin-top: 8px; font-size: var(--size-2xs); color: var(--text-muted); }
.mk5-domkey span { display: flex !important; align-items: center; gap: 5px; white-space: nowrap; }
.mk5-domkey b { margin-left: auto; color: var(--text); font-variant-numeric: tabular-nums; font-weight: 600; }
.mk5-domkey i { width: 8px !important; height: 8px !important; border-radius: 2px; flex: none; }
.mk5-pts { font-variant-numeric: tabular-nums; }

/* Temporada de altcoins: la barra con su pulgar, los extremos y la pastilla. */
.mk5-scalewrap { display: grid; gap: 3px; align-self: center; margin-top: 10px !important; }
.mk5-scale.mo-scale-bar { height: 8px; border-radius: 4px; margin: 0;
  background: linear-gradient(90deg, var(--warn), color-mix(in srgb, var(--line-strong) 70%, transparent) 50%, var(--info)); }
.mk5-scale.mo-scale-bar i { top: -4px; width: 8px; height: 16px; margin-left: -4px; border-radius: 4px;
  background: var(--text); box-shadow: 0 0 0 2px var(--surface), 0 1px 4px rgb(0 0 0 / 35%); }
.mk5-scale-ends { display: flex; justify-content: space-between; font-size: var(--size-2xs); }
.mk5-season { align-self: start; justify-self: start; margin-top: 8px; padding: 2px 10px; border-radius: 999px;
  font-size: var(--size-xs); font-weight: 600; --s: var(--line-strong); color: var(--text); white-space: nowrap;
  background: color-mix(in srgb, var(--s) 14%, transparent); border: 1px solid color-mix(in srgb, var(--s) 55%, transparent); }
.mk5-season-btc { --s: var(--warn); } .mk5-season-alt { --s: var(--info); }

/* Entre 721 y 1100 px la caja ocupa la fila entera (blockboard.css): más aire. */
@media (min-width: 721px) and (max-width: 1100px) {
  .mk5-grid > .mk5-cell { padding: var(--s3) var(--s4); }
  .mk5-cell .mk5-hd { font-size: var(--size-sm); }
  .mk5-cell .mk5-val { font-size: var(--size-xl); }
  .mk5-long { display: inline; } .mk5-short { display: none; }
}
@media (min-width: 941px) and (max-width: 1100px) {
  .mk5-domkey.ms-domkey { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s3); align-content: start; }
}
@media (max-width: 720px) {
  .ms-grid.mk5-grid { grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto auto auto minmax(0, 1fr)); }
  .mk5-grid > .mk5-cell { border-width: 0 1px 1px 0 !important; }
  .mk5-grid > .mk5-cell:nth-child(2n) { border-right-width: 0 !important; }
  .mk5-grid > .mk5-cell:nth-child(n+5) { border-bottom-width: 0 !important; }
  .mk5-cell .mk5-val { font-size: var(--size-xl); }
  .mk5-cell .mk5-chart { min-height: 52px; }
}
@media (max-width: 380px) {
  .mk5-grid > .mk5-cell { padding: var(--s3) var(--s2); }
  .mk5-cell .mk5-val { font-size: var(--size-lg); }
}
@media (max-width: 520px) {
  .mo-grid.mk5 .ms-movers.on { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s3); }
  .mo-grid.mk5 .ms-movers .ms-mcol:nth-child(3) { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .mk5-grid > .mk5-cell { transition: none; } }

/* Las dos cajas de debajo: rótulos a la misma altura y menos color. */
.mk5 > .mo-rot, .mk5 > .ms-hold { padding: var(--s3) var(--s4); gap: var(--s3); }
.mk5 > .ms-hold > header { display: flex; align-items: center; gap: 6px; min-height: 24px; margin: 0;
  font-size: var(--size-sm); font-weight: 600; color: var(--text); text-transform: none; letter-spacing: 0; }
.mk5 .mo-tabs { min-height: 24px; align-items: stretch; gap: var(--s4); border-bottom: 1px solid var(--line); flex-wrap: nowrap; }
.mk5 .mo-tabs button { position: relative; padding: 2px 0 8px !important; border: 0; font-size: var(--size-xs) !important;
  letter-spacing: .04em !important; color: var(--text-muted); transition: color .15s; }
.mk5 .mo-tabs button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  border-radius: 2px; background: var(--accent); transform: scaleX(0); transition: transform .2s ease; }
.mk5 .mo-tabs button:hover { color: var(--text); }
.mk5 .mo-tabs button[aria-selected="true"] { color: var(--text); }
.mk5 .mo-tabs button[aria-selected="true"]::after { transform: scaleX(1); }

/* Las filas de ganadoras, perdedoras y noticias: sin subrayado, un fondo
   suave con aire alrededor, y la cifra en color sin caja de color. */
.mk5 .ms-mcol { gap: 2px; }
.mk5 .ms-mcol > .ms-lbl { font-size: var(--size-sm); font-weight: 600; color: var(--text-muted); padding: 0 6px; }
.mk5 .ms-mrow { padding: 4px 6px; margin: 0; border-radius: 6px; text-decoration: none !important; transform: none !important; }
.mk5 .ms-mrow:hover, .mk5 .ms-mrow:focus-visible { background: var(--surface-hover); }
.mk5 .ms-mrow:hover b { color: var(--text) !important; }
.mk5 .ms-mcol:has(> .ms-mrow:hover) > .ms-mrow:not(:hover) { opacity: .62; }
.mk5 .ms-mrow .mo-pill { background: none !important; padding: 0 !important; font-weight: 600; }
.mk5 .ms-mrow .mo-pill.news { color: var(--text-muted); }
.mk5 .mo-tag { width: 14px; height: 14px; font-size: 8px; }
.mk5 .mo-trow { padding: 4px 6px; border-radius: 6px; transform: none !important; }
.mk5 .mo-trow a, .mk5 .mo-trow a:hover { text-decoration: none; }
.mk5 .mo-dots i { width: 5px; height: 5px; }

/* Sube o baja: las casillas más calladas (el color, a media fuerza). */
.mk5 .ms-heat a { background: color-mix(in srgb, var(--c) calc(8% + var(--g) * 34%), var(--surface-sunken)); }
.mk5 .ms-heat a:hover { outline: 1px solid color-mix(in srgb, var(--text) 60%, transparent); outline-offset: 1px; }
.mk5 .mo-ud b { font-size: var(--size-lg) !important; }
.mk5 .mo-ud .mo-breadth i { opacity: .8; }

/* ============================================================
   MARKETS · derivados (imagen 21: «mucho verde y rojo, muchas líneas,
   todo quiere llamar la atención»). Sin quitar datos: las liquidaciones
   son la protagonista (cifra mayor y su verde y rojo); el resto se calma:
   rótulos llanos a la misma altura, cambios en texto sin caja de color,
   barras y líneas en tono neutro con el último dato en acento, y el verde
   y el rojo a media fuerza donde sólo acompañan.
   ============================================================ */
.dv .dv-card { gap: var(--s2); padding: var(--s4) var(--s5); }
.dv .dv-card > .eyebrow { display: flex; align-items: center; gap: 6px; min-height: 24px; margin: 0;
  font-size: var(--size-base); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text); }
.dv .dv-big { min-height: 34px; }
.dv .dv-big .fig { font-size: var(--size-xl); }
.dv .dv-wide .dv-big .fig { font-size: var(--size-2xl); }
.dv .mo-pill { background: none !important; padding: 0; font-size: var(--size-sm); }
.dv .mo-pill:not(.up):not(.down) { color: var(--text-muted); }
.dv .dv-sub { color: var(--text-muted); }
.dv .dv-axis { font-size: var(--size-2xs); }

/* Líneas: acento, no verde o rojo según la tendencia. */
.dv .dv-chart .spark path[fill="none"] { stroke: var(--accent); stroke-width: 2; }
.dv .dv-chart .spark path[fill^="url"] { fill: color-mix(in srgb, var(--accent) 16%, transparent); opacity: 1; }
.dv .dv-chart.dv-short .spark path[fill="none"] { stroke: var(--text-muted); stroke-width: 1.5; }

/* Barras de volumen: neutras, el último día en acento. */
.dv .dv-vol .flow-bars rect { fill: color-mix(in srgb, var(--text-faint) 55%, transparent); }
.dv .dv-vol .flow-bars rect:last-of-type { fill: var(--accent); }

/* Financiación: lo normal (pagan los largos) en verde suave; lo raro (pagan
   los cortos) en rojo, que es lo que hay que ver. */
.dv .dv-fund .flow-bars rect[fill="var(--up)"] { fill: color-mix(in srgb, var(--up) 42%, transparent); }
.dv .dv-fund .flow-bars line, .dv .dv-tall .flow-bars line { stroke: var(--line); }
.dv .dv-rows .dv-track i.up { background: color-mix(in srgb, var(--up) 45%, transparent); }
.dv .dv-rows .dv-val.up { color: var(--text-muted); }
.dv .dv-row { padding: 3px 6px; border-radius: 6px; text-decoration: none; }
.dv .dv-row:hover { text-decoration: none; transform: none; }
.dv .dv-rows:has(> .dv-row:hover) > .dv-row:not(:hover) { opacity: .62; }

/* Largos y cortos: las barras a media fuerza; el texto dice la cifra. */
.dv .dv-breadth i { opacity: .62; }
.dv .dv-ls-lbl b.up, .dv .dv-ls-lbl b.down { font-weight: 600; }
.dv .dv-card:not(.dv-wide) .dv-ls-lbl b.up { color: var(--text); }
.dv .dv-card:not(.dv-wide) .dv-ls-lbl b.down { color: var(--text-muted); }

/* La protagonista: el borde se enciende un poco y las barras van enteras. */
.dv .dv-wide { border-color: color-mix(in srgb, var(--accent) 22%, var(--line)); }
.dv .dv-wide .dv-breadth i { opacity: .85; }
.dv .dv-tall .flow-bars rect { opacity: .9; }