/* Statera · marco común v2 (barra 48 con todas las secciones · riel pegado · navegación inferior) · Claude 28/09/2026
 * Necesita ../css/tokens-v2.css antes (las páginas viejas lo reciben de envolver.css, con los tokens acotados a la barra).
 * Todo lleva prefijo mk- para no chocar con el CSS de cada pantalla. Cómo usarlo: LEEME.md.
 * Reglas: un solo scroll, texto >= 13 px, blancos de 44 px en el celular, riel en x = 0 (272 / 240 / hoja).
 */
:root { --mk-rail-w: 272px; --mk-bottom-h: 56px; }
@media (max-width: 1279px) { :root { --mk-rail-w: 240px; } }

/* ---------- base mínima (solo si el body lleva class="mk") ---------- */
body.mk { margin: 0; background: var(--canvas); color: var(--text); font-family: var(--font); font-size: var(--fs-body); line-height: 1.45; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
body.mk *, body.mk *::before, body.mk *::after { box-sizing: border-box; }
body.mk :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.mk-skip { position: absolute; left: -999px; top: 8px; z-index: 90; background: var(--ink); color: var(--ink-text); padding: 8px 12px; border-radius: var(--radius); font-size: var(--fs-sec); text-decoration: none; }
.mk-skip:focus { left: 8px; }
.mk-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- barra superior 48 ---------- */
.mk-bar { position: sticky; top: 0; z-index: 40; height: var(--bar-h, 48px); display: flex; align-items: center; gap: 14px; padding: 0 12px 0 18px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); box-sizing: border-box; font-family: var(--font); color: var(--text); }
.mk-bar *, .mk-bar *::before, .mk-bar *::after, .mk-bottom *, .mk-more-sheet *, .mk-search-pop * { box-sizing: border-box; }
.mk-in { display: contents; }
.mk-logo { display: inline-flex; align-items: center; min-height: 44px; flex: none; font-weight: 700; font-size: 19px; letter-spacing: -.02em; text-decoration: none; color: var(--text); white-space: nowrap; }
.mk-logo .e { color: var(--brand-red); margin-left: 1px; }
.mk-estado { display: inline-flex; align-items: center; flex: none; height: 22px; margin-left: -6px; padding: 0 8px; border: 1px dashed var(--border-strong); border-radius: 999px; font: 600 13px/1 var(--font); color: var(--text-2); white-space: nowrap; }
@media (max-width: 767px) { .mk-estado { display: none; } }
.mk-nav { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; height: 100%; }
.mk-items { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; height: 100%; margin: 0; padding: 0; list-style: none; overflow: hidden; }
.mk-items li { height: 100%; flex: none; }
.mk-items li[hidden] { display: none; }
.mk-items a, .mk-nav summary, .mk-nav > a { display: flex; align-items: center; height: 100%; padding: 0 9px; text-decoration: none; font-size: var(--fs-sec); font-weight: 500; color: var(--text-2); cursor: pointer; list-style: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.mk-nav summary::-webkit-details-marker { display: none; }
.mk-items a:hover, .mk-nav summary:hover, .mk-nav > a:hover { color: var(--text); }
.mk-items a[aria-current="page"], .mk-nav summary[aria-current="page"], .mk-nav > a[aria-current="page"] { color: var(--text); font-weight: 600; border-bottom-color: var(--accent-mark); }
.mk-nav details { position: relative; height: 100%; flex: none; }
.mk-nav summary .car { margin-left: 5px; font-size: 13px; }
.mk-menu { position: absolute; top: calc(100% + 1px); left: 0; min-width: 240px; padding: 6px; z-index: 50; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.mk-menu a { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 40px; border-radius: 6px; padding: 0 10px; text-decoration: none; font-size: var(--fs-sec); font-weight: 500; color: var(--text); border: 0; }
.mk-menu a:hover { background: var(--surface); }
.mk-menu a[aria-current="page"] { background: var(--selected); font-weight: 600; }
.mk-menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 4px; }
.mk-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }
.mk-seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 999px; overflow: hidden; background: var(--bg); }
.mk-seg button { display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; min-width: 36px; height: 32px; padding: 0 8px; font: 600 var(--fs-cap)/1 var(--font); color: var(--text-2); cursor: pointer; }
.mk-seg button[aria-pressed="true"] { background: var(--ink); color: var(--ink-text); }
.mk-seg button:hover:not([aria-pressed="true"]) { color: var(--text); background: var(--surface); }
.mk-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; min-width: 32px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--bg); cursor: pointer; font: 600 var(--fs-cap)/1 var(--font); color: var(--text); text-decoration: none; white-space: nowrap; }
.mk-btn:hover { background: var(--surface); border-color: var(--text-2); }
.mk-btn svg { width: 16px; height: 16px; flex: none; }
.mk-btn.icon { padding: 0; width: 32px; }
.mk-acct .ini { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--ink-text); font: 700 12px/1 var(--font); }
.mk-fav { width: auto !important; min-width: 32px; padding: 0 8px !important; }
.mk-fav .c { font-variant-numeric: tabular-nums; }
.mk-search { color: var(--text-2); }
.mk-search .txt { display: none; }
.mk-search kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; border: 1px solid var(--line-hover); border-bottom-width: 2px; border-radius: 4px; font: 600 13px/1 var(--font); color: var(--text-2); }
/* estado en vivo: ruletas latinas capturando y hace cuánto llegó el último número */
.mk-live { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent-mark) 45%, transparent); background: var(--bg); text-decoration: none; color: var(--text-2); font: 500 var(--fs-cap)/1 var(--font); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mk-live[hidden] { display: none; }
.mk-live b { color: var(--text); font-weight: 700; }
.mk-live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-mark); flex: none; }
.mk-live.rec .dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--accent-mark); }
.mk-live:hover { background: var(--surface); color: var(--text); }
.mk-live[aria-current="page"] { background: var(--selected); }
@media (prefers-reduced-motion: no-preference) { .mk-live:not(.rec) .dot { animation: mk-pulse 2.4s ease-in-out infinite; } }
@keyframes mk-pulse { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-mark) 18%, transparent); } }
@media (min-width: 1440px) { .mk-search .txt { display: inline; } .mk-search { width: 150px; justify-content: flex-start; padding: 0 8px 0 10px; } .mk-search kbd { margin-left: auto; } .mk-items a, .mk-nav summary { padding: 0 11px; } .mk-bar { gap: 18px; } }
@media (max-width: 1439px) { .mk-search kbd { display: none; } }

/* ---------- buscador ---------- */
.mk-search-pop { position: fixed; z-index: 80; top: 56px; left: 50%; transform: translateX(-50%); width: min(620px, calc(100vw - 32px)); max-height: calc(100vh - 80px); display: flex; flex-direction: column; background: var(--bg); color: var(--text); border: 1px solid var(--line-hover); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); font-family: var(--font); overflow: hidden; }
.mk-search-pop[hidden] { display: none; }
.mk-sq { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--line); }
.mk-sq svg { width: 18px; height: 18px; color: var(--text-2); flex: none; }
.mk-sq input { flex: 1; min-width: 0; height: 40px; border: 0; background: transparent; font: 500 var(--fs-body) var(--font); color: var(--text); outline: none; }
.mk-sq input::placeholder { color: var(--text-2); opacity: 1; }
.mk-sq .mk-btn { border: 0; }
.mk-sres { padding: 6px; overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.mk-sh { margin: 8px 10px 4px; font-size: var(--fs-cap); font-weight: 600; color: var(--text-2); }
.mk-sres a { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nm go" "sb go"; align-items: center; column-gap: 12px; min-height: 40px; padding: 6px 10px; border-radius: 8px; text-decoration: none; color: var(--text); }
.mk-sres a .nm { grid-area: nm; font-size: var(--fs-sec); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-sres a .sb { grid-area: sb; font-size: var(--fs-cap); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-sres a svg { grid-area: go; width: 16px; height: 16px; color: var(--text-2); }
.mk-sres a:hover, .mk-sres a[aria-selected="true"] { background: var(--selected); }
.mk-snone { margin: 14px 12px; font-size: var(--fs-sec); color: var(--text-2); }
.mk-shelp { margin: 0; padding: 8px 14px; border-top: 1px solid var(--line); font-size: var(--fs-cap); color: var(--text-2); }

/* ---------- marco: riel + contenido ---------- */
.mk-frame { display: grid; grid-template-columns: var(--mk-rail-w) minmax(0, 1fr); min-height: calc(100vh - var(--bar-h)); }
.mk-frame.no-rail { grid-template-columns: minmax(0, 1fr); }
.mk-rail-col { background: var(--bg); border-right: 1px solid var(--line); min-width: 0; }
.mk-rail { position: sticky; top: var(--bar-h); padding: 12px 16px 16px; }
.mk-main { min-width: 0; padding: 0 var(--gutter) 40px; outline: none; }
.mk-sheet-head, .mk-sheet-foot { display: none; }

/* ---------- riel como hoja (abajo de 1024) ---------- */
@media (max-width: 1023px) {
  .mk-frame { grid-template-columns: minmax(0, 1fr); }
  .mk-rail-col { display: none; }
  .mk-rail-col.open { display: block; position: fixed; inset: 0; z-index: 70; background: var(--bg); overflow-y: auto; overscroll-behavior: contain; border: 0; }
  .mk-rail-col.open .mk-rail { position: static; padding: 0 16px 96px; }
  .mk-sheet-head { display: flex; align-items: center; justify-content: space-between; height: 56px; position: sticky; top: 0; z-index: 2; background: var(--bg); border-bottom: 1px solid var(--line); margin: 0 -16px 8px; padding: 0 8px 0 16px; }
  .mk-sheet-head b { font-size: var(--fs-h3); }
  .mk-sheet-head .mk-btn.icon { width: 44px; height: 44px; border: 0; }
  .mk-sheet-foot { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 3; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line); }
  .mk-sheet-foot .mk-btn { width: 100%; height: 48px; border-radius: var(--radius); background: var(--ink); color: var(--ink-text); border-color: var(--ink); font-size: var(--fs-row); }
  body.mk-sheet-open { overflow: hidden; }
  .mk-lang { display: none; }
}

/* ---------- navegación inferior (celular) ---------- */
.mk-bottom { display: none; }
.mk-more-sheet[hidden] { display: none; }
@media (max-width: 767px) {
  .mk-bar { gap: 8px; padding: 0 6px 0 14px; }
  .mk-nav, .mk-fav, .mk-lang, .mk-theme { display: none !important; }
  .mk-tools { gap: 4px; }
  .mk-seg button { height: 44px; min-width: 44px; }
  .mk-btn { height: 44px; min-width: 44px; }
  .mk-btn.icon { width: 44px; border-color: transparent; }
  .mk-search { width: 44px; padding: 0; border-color: transparent; }
  .mk-live { height: 44px; padding: 0 10px; }
  .mk-live .age { display: none; }
  .mk-search-pop { top: 0; left: 0; right: 0; transform: none; width: auto; max-height: 100vh; height: 100vh; border-radius: 0; border: 0; }
  .mk-sres a { min-height: 48px; }
  .mk-sq .mk-btn { width: 44px; height: 44px; }
  body.mk, body.mk-envuelto { padding-bottom: calc(var(--mk-bottom-h) + env(safe-area-inset-bottom)); }
  .mk-bottom { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; height: calc(var(--mk-bottom-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-top: 1px solid var(--line); font-family: var(--font); }
  .mk-bottom.mk-bottom a, .mk-bottom.mk-bottom button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 44px; min-width: 0; border: 0; background: transparent; color: var(--text-2); font: 500 var(--fs-cap)/1.1 var(--font); text-decoration: none; cursor: pointer; }
  .mk-bottom a span, .mk-bottom button span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mk-bottom svg { width: 20px; height: 20px; }
  .mk-bottom [aria-current="page"] { color: var(--text); font-weight: 600; }
  .mk-bottom [aria-current="page"] svg { color: var(--accent-mark); }
  .mk-more-sheet { position: fixed; left: 0; right: 0; bottom: calc(var(--mk-bottom-h) + env(safe-area-inset-bottom)); z-index: 46; max-height: 72vh; overflow-y: auto; overscroll-behavior: contain; padding: 8px 12px 12px; background: var(--bg); color: var(--text); border-top: 1px solid var(--line); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-pop); font-family: var(--font); }
  .mk-more-sheet a { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 10px; border-radius: 8px; text-decoration: none; font-size: var(--fs-row); font-weight: 500; color: var(--text); }
  .mk-more-sheet a svg { width: 18px; height: 18px; color: var(--text-2); }
  .mk-more-sheet a[aria-current="page"] { background: var(--selected); font-weight: 600; }
  .mk-more-sheet a:hover { background: var(--surface); }
  .mk-sheet-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 0 10px; border-top: 1px solid var(--line); font-size: var(--fs-row); }
  .mk-sheet-row .mk-btn { height: 44px; }
}
@media (min-width: 768px) { .mk-more-sheet { display: none !important; } }

@media (prefers-reduced-motion: no-preference) {
  .mk-seg button, .mk-btn, .mk-items a, .mk-nav summary, .mk-menu a, .mk-bottom a, .mk-bottom button, .mk-live { transition: background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); }
  .mk-menu, .mk-more-sheet, .mk-search-pop { animation: mk-pop .16s var(--ease); }
}
@keyframes mk-pop { from { opacity: 0; } to { opacity: 1; } }
@media print { .mk-bar, .mk-bottom, .mk-rail-col { display: none !important; } .mk-frame { display: block; } }