/* market-map/markets-nav.css — riel de Markets (markets-nav.js) y el encabezado compacto de cada página.
   Carga después de marketMap.css en las 10 páginas de Markets. Sustituye al selector de pestañas
   dentro del hero (.mm-switch) y a la caja grande con título (.mk-hero), que aquí pasa a ser una
   cabecera a la izquierda sin fondo. */

/* ── Página: riel + contenido ─────────────────────────────────── */
.mm-page.has-rail {
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  column-gap: 32px; row-gap: 0;   /* el riel abarca muchas filas: el espacio vertical lo ponen los hijos */
  align-items: start;
  max-width: 1320px;
}
.mm-page.has-rail > * { grid-column: 2; min-width: 0; margin-bottom: 16px; }
.mm-page.has-rail > :last-child { margin-bottom: 0; }
.mm-page.has-rail > .mk-rail { grid-column: 1; grid-row: 1 / span 400; }

/* ── Riel ─────────────────────────────────────────────────────── */
.mk-rail {
  position: sticky; top: 80px;
  display: flex; flex-direction: column; gap: 18px;
  max-height: calc(100vh - 96px); overflow-y: auto; scrollbar-width: none;
  padding: 4px 0 12px;
}
.mk-rail::-webkit-scrollbar { display: none; }
.mk-rail__head {
  display: flex; align-items: center; gap: 10px; padding: 6px 10px 14px; text-decoration: none;
  font: 800 17px/1 'Inter', sans-serif; letter-spacing: -0.02em; color: #16242a;
  border-bottom: 1px solid rgba(22, 36, 42, 0.08);
}
.mk-rail__head i { width: 30px; height: 30px; border-radius: 9px; display: inline-grid; place-items: center; background: #285260; color: #fff; font-size: 13px; }
.mk-rail__group { display: flex; flex-direction: column; gap: 2px; }
.mk-rail__label { padding: 0 10px 6px; font: 800 10.5px 'Inter', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: rgba(22, 36, 42, 0.42); }
.mk-rail__link {
  display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 11px; text-decoration: none;
  font: 600 14px 'Inter', sans-serif; color: rgba(22, 36, 42, 0.72);
  transition: background .15s, color .15s;
}
.mk-rail__link i { width: 18px; text-align: center; font-size: 13.5px; color: rgba(22, 36, 42, 0.45); }
.mk-rail__link:hover { background: rgba(84, 140, 146, 0.08); color: #16242a; }
.mk-rail__link:hover i { color: #285260; }
.mk-rail__link.is-active { background: #285260; color: #fff; font-weight: 700; box-shadow: 0 8px 18px rgba(40, 82, 96, 0.22); }
.mk-rail__link.is-active i { color: #fff; }
.mk-rail__link:focus-visible { outline: 3px solid rgba(84, 140, 146, 0.45); outline-offset: 2px; }
.mk-rail__tag { margin-left: auto; font: 800 9.5px 'Inter', sans-serif; letter-spacing: .06em; padding: 3px 6px; border-radius: 999px; background: rgba(84, 140, 146, 0.14); color: #285260; font-style: normal; }
.mk-rail__link.is-active .mk-rail__tag { background: rgba(255, 255, 255, 0.2); color: #fff; }

/* ── Encabezado compacto (antes: caja grande centrada) ────────── */
.has-rail .mk-hero {
  align-items: flex-start; text-align: left;
  padding: 6px 0 18px; border: 0; border-bottom: 1px solid rgba(22, 36, 42, 0.08); border-radius: 0; background: none;
}
.has-rail .mk-hero::before { display: none; }
.has-rail .mk-hero__kicker { font-size: 11px; letter-spacing: .14em; }
.has-rail .mk-hero__title { margin-top: 6px; font-size: clamp(26px, 3vw, 32px); letter-spacing: -0.03em; }
.has-rail .mk-hero__controls { justify-content: flex-start; margin-top: 14px; width: 100%; }
.has-rail .mk-hero .mm-lastupdate { flex-basis: auto; text-align: left; }
/* lo que cada página centraba dentro del hero, ahora a la izquierda */
.has-rail .sc-ask, .has-rail .sc-ask__msg, .has-rail .wm-catnote { margin-left: 0; margin-right: 0; }
.has-rail .sc-ask { margin-top: 16px; }
.has-rail .sc-presets, .has-rail .tp-legend, .has-rail .si-styles, .has-rail .mn-actions { justify-content: flex-start; }
.has-rail .sc-meta, .has-rail .tp-meta, .has-rail .si-meta, .has-rail .mn-meta { margin-top: 8px; }
.has-rail .eps-back { margin-top: 0; }

/* ── Teléfono y tablet: tira horizontal arriba del contenido ───── */
@media (max-width: 1023px) {
  .mm-page.has-rail { display: flex; flex-direction: column; align-items: stretch; max-width: 1200px; gap: 0; }
  .mk-rail {
    position: static; max-height: none; flex-direction: row; align-items: center; gap: 6px;
    overflow-x: auto; overflow-y: hidden; padding: 2px 14px 10px; margin: 0 -14px;
    -webkit-overflow-scrolling: touch;
  }
  .mk-rail__head, .mk-rail__label { display: none; }
  .mk-rail__group { flex-direction: row; gap: 6px; flex: none; }
  .mk-rail__group + .mk-rail__group { padding-left: 8px; border-left: 1px solid rgba(22, 36, 42, 0.12); margin-left: 2px; }
  .mk-rail__link { flex: none; padding: 8px 12px; border-radius: 999px; font-size: 13px; gap: 7px; background: #fff; border: 1px solid rgba(22, 36, 42, 0.09); }
  .mk-rail__link.is-active { border-color: #285260; box-shadow: none; }
  .mk-rail__tag { margin-left: 2px; }
  .has-rail .mk-hero { padding-top: 2px; }
}
@media (max-width: 600px) {
  .mk-rail { padding: 2px 14px 8px; }
  .mk-rail__link { padding: 7px 10px; font-size: 12.5px; }
  .has-rail .mk-hero__title { font-size: 26px; }
}

/* Sin subtítulo bajo el título en ninguna página de Markets (oct 2026): título y, debajo, los controles */
.has-rail .si-meta, .has-rail .sc-meta, .has-rail .tp-meta, .has-rail .mn-meta, .has-rail .wm-catnote { display: none !important; }