/* ======================================================================
   EL MÓVIL (t186, 2026-11-13)
   ======================================================================
   Revisión «BlockBord Movil» del 13-11-2026, probada en un teléfono. Todo lo
   común del móvil vive aquí, cargado en todas las páginas después de
   `blockboard.css`, para que una sección no tenga que acordarse de nada:

   1. La navegación: barra fija abajo con cuatro secciones y «More» (una hoja
      con el resto). Sin el botón «« »» de plegar, que en el móvil no pliega
      nada útil.
   2. La letra: la escala sube un punto por debajo de 720 px (nada de texto
      de 11 px en un teléfono).
   3. Los toques: 40 px de alto en lo que se pulsa.
   4. Tarjetas enteras como enlace (`.stretch`) con el toque a la vista.
   5. Carruseles que se deslizan con el dedo y dicen dónde estás.
   6. Tablas que en el móvil se leen como lista (`.m-stack`).

   Lo comprueba `scripts/mobile-audit.js` (375 y 390 px, todas las páginas). */

/* ---------------------------------------------------- 1. la navegación */

.mnav, .msheet { display: none; }

@media (max-width: 860px) {
  :root { --mnav-h: 60px; --mnav-off: calc(var(--mnav-h) + env(safe-area-inset-bottom, 0px)); }
  body { padding-bottom: var(--mnav-off); }

  /* Arriba queda sólo la cabecera: logo, campana e indicador. Lo que antes
     era una tira de enlaces que se salía por la derecha se va a la barra de
     abajo. */
  .side { flex-wrap: nowrap; overflow: visible; padding-top: var(--s2); padding-bottom: var(--s2); gap: var(--s2); }
  .side > nav, .side > .group, .side > .tema, .side > .bottom, .side-toggle-form { display: none !important; }
  .side-top { flex: 1 1 auto; width: 100%; min-width: 0; position: static; padding-right: 0; }
  .side .wordmark { padding: var(--s1) 0; }
  .side-top .nt { margin-left: auto; }
  .side .wordmark { min-height: 40px; }
  .side .wordmark .beta { font-size: 12px; }
  html .nt-bell { width: 40px; height: 40px; }

  .mnav {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    height: var(--mnav-off); padding: 0 4px env(safe-area-inset-bottom, 0px);
    background: color-mix(in srgb, var(--bg-elevated) 94%, transparent);
    backdrop-filter: saturate(150%) blur(14px); -webkit-backdrop-filter: saturate(150%) blur(14px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 18px rgb(0 0 0 / .18);
  }
  .mnav a, .mnav button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-width: 0; height: var(--mnav-h); padding: 0 2px; border: 0; background: none; cursor: pointer;
    color: var(--text-muted); font: inherit; font-size: var(--size-xs); font-weight: 560; line-height: 1.1;
    -webkit-tap-highlight-color: transparent; text-decoration: none;
  }
  .mnav a > span:last-child, .mnav button > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mnav .ico { display: grid; place-items: center; width: 44px; height: 28px; border-radius: 999px;
    transition: background-color .15s, color .15s; }
  .mnav .ico svg { width: 20px; height: 20px; }
  .mnav a.on, .mnav button.on, .mnav button[aria-expanded="true"] { color: var(--text); }
  .mnav a.on .ico, .mnav button.on .ico, .mnav button[aria-expanded="true"] .ico {
    background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
  .mnav a:active .ico, .mnav button:active .ico { background: var(--surface-hover); }
  .mnav a:hover { text-decoration: none; }

  /* La hoja de «More»: un `popover` del navegador, pegado abajo. */
  .msheet:popover-open, .msheet.open {
    display: block; position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: 100%;
    max-height: min(86vh, 720px); overflow-y: auto; overscroll-behavior: contain;
    padding: var(--s3) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom, 0px));
    background: var(--bg-elevated); color: var(--text);
    border: 1px solid var(--line); border-bottom: 0; border-radius: 18px 18px 0 0;
    box-shadow: 0 -12px 40px rgb(0 0 0 / .35); z-index: 1000;
  }
  .msheet::backdrop { background: rgb(0 0 0 / .45); }
  .msheet.open::before { content: ""; position: fixed; inset: 0; z-index: -1; background: rgb(0 0 0 / .45); }
  .msheet-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 var(--s2); }
  .msheet-head b { font-size: var(--size-md); }
  .msheet-x { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid var(--line); background: var(--surface); color: var(--text-muted); cursor: pointer; }
  .msheet-group { font-size: var(--size-2xs); text-transform: uppercase; letter-spacing: .1em; color: var(--text-faint);
    margin: var(--s3) 0 var(--s2); }
  .msheet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
  .msheet-grid a, .msheet-foot > a {
    display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px;
    border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
    color: var(--text); font-size: var(--size-sm); font-weight: 560; line-height: 1.2; text-decoration: none;
  }
  .msheet-grid a .ico, .msheet-foot > a .ico { color: var(--text-faint); display: grid; place-items: center; flex: none; }
  .msheet-grid a.on, .msheet-foot > a.on { border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
    background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
  .msheet-grid a.on .ico, .msheet-foot > a.on .ico { color: var(--accent); }
  .msheet-grid a:active, .msheet-foot > a:active { background: var(--surface-hover); }
  .msheet-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s2); align-items: center;
    margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); }
  .msheet-foot > a:only-of-type { grid-column: 1; }
  .msheet-tema { margin: 0; height: 48px; }
  .msheet-tema button { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: var(--size-xs); }
  .msheet-tema svg { margin: 0; }

  @media (prefers-reduced-motion: no-preference) {
    .msheet:popover-open { animation: msheet-in .24s cubic-bezier(.2, .8, .2, 1); }
  }

  /* Lo que flota abajo sube por encima de la barra. Con `margin-bottom`, no
     con `bottom`: cada uno conserva su sitio y sólo se aparta. */
  .consent, .gam-toasts, .gam-ach, .cz-toast, .cz-editbar, .onb-ck-l, .onb-ck-p:not(.onb-sheet),
  .onb-slide:not(.onb-sheet), .info::after, .hint::after { margin-bottom: var(--mnav-off); }

  /* Nada empuja la página a lo ancho: lo que se salga lo recorta su columna
     (no la página), así que el móvil nunca abre la página «alejada». */
  .shell > div { min-width: 0; overflow-x: clip; }
}
@keyframes msheet-in { from { transform: translateY(24px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (min-width: 861px) { .mnav, .msheet, .msheet:popover-open { display: none !important; } }

/* ------------------------------------------------------------ 2. la letra */

/* «El tamaño del texto, los márgenes y el formato usado en la versión móvil
   no tienen un diseño óptimo: se ve muy pequeño» (Narratives y Presales,
   y en general). La escala sube un punto en el teléfono: el texto normal a
   16 px, el de apoyo a 14 y lo más pequeño (rótulos, notas) a 12. Las cifras
   grandes no cambian: ya se leen. */
@media (max-width: 720px) {
  :root, [data-density="compact"] {
    --size-2xs: 12px; --size-xs: 13px; --size-sm: 14px; --size-base: 16px; --size-md: 18px;
  }
  /* Lo que estaba escrito en píxeles sueltos y es texto que se lee. */
  html .mo-ini, html .ps-prov, html .ps-kpi .ps-prov, html .ps-figs .ps-prov, html .ps-alloc > .faint:first-child, html .ps-vd, html .ps-sort, html .ms-mode .mo-tabs button, html .ms-mrow .mo-pill, html .cal-wk-d small, html .pf2-soon, html .pf2-src, html .psh-hist-k span, html .psh-x small, html .wl-fam, html .wl-why, html .wl-role, html .nr7-track li, html .mmr .rlbl, html .ao-pill i, html .soon-tag, html .lp-only, html .an-flag, html .wbox .mo-col header, html .tile-x { font-size: 12px; }
}

/* ---------------------------------------------------------- 3. los toques */

/* Lo que se pulsa mide 40 px de alto en una pantalla táctil (la «i», los
   filtros, las pestañas, los botones pequeños). Con `min-height`, sin tocar
   el relleno: la caja crece y el texto se queda centrado. */
@media (max-width: 860px) and (pointer: coarse), (max-width: 720px) {
  .btn, button.ghost, .chip, .seg a, .seg button, .tabs a, .tabs button, .mo-tabs button, .mo-tabs a,
  .nr6-tabs a, .ps6-tabs a, .alx-tabs a, .ss-tabs a, .cal-filter, .ss-kind, .ss-qcoin, .ss-coin,
  .nrb-chip, .ps-chip-l, .fil a, .fil button, .pager a, .st-tabs a, .st-tabs button,
  .widget > header .tools a, .show-more, .ps6-go, .ps6-adv > summary, details > summary,
  select, input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="number"], input:not([type]) {
    min-height: 40px;
  }
  /* La «i»: el círculo se dibuja dentro de una caja de 40 px transparente
     (el globo y el palo de la letra siguen siendo los suyos); el margen
     negativo deja la línea del título como estaba. */
  .info { --ring: var(--line-strong); width: 40px; height: 40px; margin: -12px -9px; border: 0;
    background: radial-gradient(circle at center, transparent 10.5px, var(--ring) 11px 12px, transparent 12.5px); }
  .info:hover, .info:focus-visible { --ring: var(--accent); }
  .dc-help { width: 40px; height: 40px; }
  .chip, .seg a, .seg button, .tabs a, .mo-tabs button, .mo-tabs a, .cal-filter, .ss-coin, .ss-qcoin, .nrb-chip {
    display: inline-flex; align-items: center;
  }
  /* Los campos a 16 px: con menos, Safari acerca la página al tocarlos y no
     la vuelve a alejar (lo que se lee como «se abre con zoom»). */
  select, input, textarea { font-size: max(16px, 1em); }
}

/* ------------------------------------------ 4. la tarjeta entera, un enlace */

/* «Hacer los cuadros y diferentes cajetines 100 % clicables en móvil. Ahora
   mismo solo se accede a su contenido dando al título.» El patrón es el del
   enlace estirado: el enlace principal de la tarjeta lleva `.stretch` y su
   `::after` cubre la tarjeta entera (`.is-stretch`). No se anidan enlaces:
   los demás enlaces y botones de dentro quedan por encima y siguen siendo
   suyos. Al pulsar, la tarjeta se hunde un poco: se ve que hay algo detrás. */
.is-stretch { position: relative; -webkit-tap-highlight-color: transparent; }
.is-stretch a.stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
:where(.is-stretch) :where(a:not(.stretch), button, input, select, textarea, label, summary, [data-tip], [tabindex]:not([tabindex="-1"])) {
  position: relative; z-index: 2;
}
.is-stretch a.stretch:focus-visible { outline: none; }
/* Mientras se coloca el tablero, la pieza se arrastra: no es un enlace. */
.board-editing .is-stretch a.stretch::after { content: none; }
.is-stretch:has(a.stretch:focus-visible) { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; }
.is-stretch:has(a.stretch:hover) { border-color: var(--line-strong); }
@media (prefers-reduced-motion: no-preference) {
  .is-stretch { transition: transform .12s ease, background-color .12s ease, border-color .12s ease; }
}
.is-stretch:has(a.stretch:active) { transform: scale(.985); background-color: var(--surface-hover); }
/* Un gráfico dentro de la tarjeta se sigue leyendo con el ratón en
   escritorio; en el móvil, tocarlo abre la tarjeta. */
@media (hover: hover) and (pointer: fine) {
  :where(.is-stretch) [data-mc] { position: relative; z-index: 2; }
}

/* ---------------------------------------------------- 5. los carruseles */

.m-swipe { touch-action: pan-y; }
.m-dots { display: flex; justify-content: center; gap: 6px; padding: var(--s2) 0 0; }
.m-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); transition: width .2s ease, background-color .2s ease; }
.m-dots i.on { width: 16px; border-radius: 3px; background: var(--accent); }
@media (max-width: 720px) {
  .mo-dots i, .ps-dots i { width: 7px; height: 7px; }
  .mo-dots i.on, .ps-dots i.on { width: 18px; border-radius: 4px; }
  .mo-dots, .ps-dots { padding-top: var(--s2); gap: 6px; }
  /* El carril de Presales: una tarjeta casi entera y la siguiente asomando,
     que es lo que dice «desliza». */
  .ps-rail { grid-auto-columns: 86%; scroll-padding-inline: var(--s1); }
}

/* --------------------------------------- 6. tablas que se leen como lista */

/* `.m-stack` (y las tablas de Presales): por debajo de 720 px cada fila es
   un bloque; la celda `.m-first` (o la primera de Presales) ocupa su línea
   arriba, `.m-wide` ocupa una línea abajo y el resto se reparte en una
   línea de datos. Así un título no queda en una columna de una letra de
   ancho («Has this happened before?», «Further out»). */
@media (max-width: 720px) {
  table.m-stack, .card.flush table.m-stack, table.ps2-table, .card.flush table.ps2-table { display: block; table-layout: auto; }
  table.m-stack thead, table.ps2-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  table.m-stack tbody, table.ps2-table tbody { display: block; }
  table.m-stack tr, table.ps2-table tr {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
    padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line);
  }
  table.m-stack tr:last-child, table.ps2-table tr:last-child { border-bottom: 0; }
  table.m-stack td, table.ps2-table td, .card.flush table.m-stack td, .card.flush table.ps2-table td {
    display: block; padding: 0 !important; border: 0; min-width: 0; width: auto !important; max-width: 100%;
  }
  table.m-stack td.m-first, table.ps2-table td:first-child { order: -1; flex: 1 1 100%; }
  table.m-stack td.m-wide { order: 1; flex: 1 1 100%; }
  table.m-stack td.num, table.ps2-table td.num { margin-left: auto; text-align: right; }
  table.m-stack td.m-end { margin-left: auto; }
  table.m-stack td.when { white-space: normal; }
  table.ps2-table td:first-child + td { margin-left: 0; }
}

/* Lo que no se apila: dentro de una tabla, un enlace o una chapa que no
   parte se montaba encima de la columna de al lado («Every narrative»). */
@media (max-width: 720px) {
  html .card.flush td :where(a, span, b), html .widget td :where(a, span, b) { white-space: normal; overflow-wrap: anywhere; }
  html .nrb-table td a { white-space: normal; }
}

/* ======================================================= las secciones */

/* Has this happened before? (historia): debajo del titular, cuándo · cifra. */
@media (max-width: 720px) {
  html .prec-table td.when, html .prec-table td.prec-fig { font-size: var(--size-xs); color: var(--text-muted); }
  html .prec-table td.prec-fig::before { content: "· "; }
  html .prec-table td.m-first a { font-size: var(--size-base); font-weight: 560; line-height: 1.35; }
  html .prec-table td.prec-fig { margin-left: 0; flex: 0 1 auto; }
  html .prec-table tr { gap: 4px 6px; }
}

/* Calendar · Day by day: el día es una cabecera («13 Nov · Fri · today») y
   cada fecha, un bloque: clase y hora arriba con la cifra a la derecha, el
   título entero debajo y lo que se espera al pie. Antes, cuatro columnas en
   375 px dejaban el título en «Eur… Inte… Tra…». */
@media (max-width: 720px) {
  html .cal-day { grid-template-columns: minmax(0, 1fr); gap: var(--s2); padding: var(--s3) var(--s2); }
  html .cal-date { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; padding-left: 0; }
  html .cal-date b { font-size: var(--size-lg); }
  html .cal-items { gap: 6px; }
  html .cal-item { grid-template-columns: auto auto minmax(0, 1fr); gap: 2px var(--s2); align-items: center;
    padding: var(--s2) var(--s2) var(--s2) var(--s3); background: color-mix(in srgb, var(--surface) 70%, transparent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
  html .cal-item .cal-kind { grid-column: 1; grid-row: 1; }
  html .cal-item .cal-time { grid-column: 2; grid-row: 1; }
  html .cal-item .cal-size { grid-column: 3; grid-row: 1; justify-self: end; display: inline-flex; align-items: center; gap: 6px;
    flex-wrap: wrap; justify-content: flex-end; white-space: normal; text-align: right; }
  html .cal-item .cal-title { grid-column: 1 / -1; grid-row: 2; overflow: visible; white-space: normal; text-overflow: clip;
    font-size: var(--size-base); line-height: 1.35; overflow-wrap: anywhere; }
  html .cal-item .cal-detail { grid-column: 1 / -1; grid-row: 3; }
  html .cal-item .cal-detail:empty { display: none; }
  /* Further out: la fecha, su clase y «Save» en una línea; el título debajo. */
  html .cal-further td.muted { font-size: var(--size-sm); }
  html .cal-further td.m-wide { font-size: var(--size-base); line-height: 1.35; }
  html .cal-further td.m-wide .faint { display: block; margin-top: 2px; font-size: var(--size-xs) !important; }
  html .cal-further td.m-wide .cal-prev { display: inline-block; margin-top: 4px; font-size: var(--size-xs); }
  /* Los filtros de la agenda: menos texto suelto, botones de dedo. */
  html .cal-filters { gap: var(--s2) var(--s3); }
  html .cal-filter { padding: 0 10px; border-radius: var(--radius-pill); }
}

/* Narratives y Presales: las pestañas de sus secciones se ven todas (antes,
   Rounds y Funds, o Flags y Results, quedaban fuera de la pantalla sin aviso). */
@media (max-width: 720px) {
  html .nr6-tabs, html .ps6-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; gap: 3px; }
  html .nr6-tabs a, html .ps6-tabs a { flex-direction: column; justify-content: center; gap: 3px; padding: 7px 4px; min-width: 0;
    font-size: var(--size-xs); line-height: 1.2; text-align: center; white-space: normal; }
}

/* Alerts: las pestañas, todas a la vista y como botones; las filas dicen el
   nombre entero (antes «Chainal…», «Blockda…») y su línea de datos parte. */
@media (max-width: 720px) {
  html .alx-tabs, html .ss-tabs { flex-wrap: wrap; overflow: visible; gap: 6px; border-bottom: 0; margin-bottom: var(--s4); }
  html .alx-tabs a, html .ss-tabs a { border: 1px solid var(--line); border-radius: var(--radius-pill); margin: 0; padding: 0 12px;
    background: var(--surface); }
  html .alx-tabs a.on, html .ss-tabs a.on { border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
    background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
  html .alx-row { align-items: flex-start; }
  html .alx-name { flex-wrap: wrap; row-gap: 2px; }
  html .alx-name b { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
  html .alx-meta { white-space: normal; overflow: visible; line-height: 1.4; }
  html .alx-end b { font-size: var(--size-base); }
  html .alx-cats { gap: var(--s3); }
}

/* Service status: el nombre del servicio entero en su tarjeta (el techo de
   92 px es de las tablas, no de las tarjetas). */
@media (max-width: 720px) {
  html .ss-card-top .svc-name { max-width: none; }
  html .ss-card-top .svc-name a, html .ss-card-top .svc-name { white-space: normal; overflow: visible; text-overflow: clip; }
  html .ss-card { padding: var(--s3); }
  html .ss-kinds { justify-content: flex-start; }
}

/* Portfolio: las ocho pestañas a la vista en tres filas (antes «Performance»
   y las demás quedaban fuera por la derecha), y el aviso de «nada todavía»
   como frase y no repartido en la rejilla de una fila. */
@media (max-width: 720px) {
  html .pf2-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; gap: 3px; }
  html .pf2-tab { justify-content: center; padding: 6px 2px; min-height: 40px; font-size: var(--size-xs); text-align: center; white-space: normal; line-height: 1.15; flex-wrap: wrap; gap: 2px; }
  html .pf2-tab .pf2-soon { padding: 0 4px; }
  html .pf2-tx li.muted { display: block; }
  html .pf2-card { padding: var(--s3); }
}

/* Lo que el recorrido seguía contando (t186): «Save» del calendario, la
   estrella de Mercados, las chapas y lo escrito en `<small>`. */
@media (max-width: 720px) {
  html .cal-save { min-width: 40px; min-height: 40px; display: inline-grid; place-items: center; }
  html table.mkt .star, html .st-star { min-width: 40px; min-height: 40px; }
  html .pill { font-size: 12px; }
  html small { font-size: max(12px, .85em); }
}