/* NODO Metro — componentes genéricos (listas, KPIs, hero, pivot, hub con pager, documentos, efectos, guía, barra,
   menú contextual, jump list, selector en rueda, aviso superior, puntitos de progreso…).
   Se carga DESPUÉS de metro-base.css y metro-tiles.css, y ANTES de la piel de cada proyecto.
   No depende de ningún CSS de proyecto. Generado desde el kit; no editar a mano aquí sin actualizar la skill. */

/* Insignias de estado: contorno + texto (el estado no depende solo del color) */
.badge { display: inline-flex; align-items: center; }
/* Badges: contorno + texto (el estado no depende solo del color) */
.badge { background: transparent !important; border: 1px solid currentColor; font-weight: 600; letter-spacing: 0; text-transform: lowercase; font-size: var(--m-fs-micro); padding: 0 8px; min-height: 24px; display: inline-flex; align-items: center; }
.badge-ok { color: var(--m-ok); } .badge-warn { color: var(--m-warn); } .badge-peligro { color: var(--m-danger); } .badge-info { color: var(--m-accent); }

/* ---------- Listas con swipe (reemplazan las tablas de listado) ---------- */
.m-list { margin-bottom: 8px; }
.m-item { border-bottom: 1px solid var(--m-line); }
.m-item__row { background: var(--m-surface); min-height: 64px; padding: 8px 0; gap: 16px; cursor: pointer; }
.m-item__title { font-size: var(--m-fs-body); font-weight: 400; }
.m-item__sub { font-size: var(--m-fs-micro); color: var(--m-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-item__side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; max-width: 45%; }
.m-item__amount { font-size: var(--m-fs-body); font-weight: 600; font-variant-numeric: tabular-nums; }
.m-item.dim .m-item__main, .m-item.dim .m-item__side { opacity: .55; }
.m-item__actions button { width: 80px; min-height: 44px; font-size: var(--m-fs-micro); text-transform: lowercase; }
.m-item__actions .edit { background: var(--m-accent); color: var(--m-accent-ink); }
.m-item__actions .del { background: var(--m-danger); color: #fff; }



/* ---------- Componentes Metro de datos (dashboard y módulos) ---------- */
.m-pivot--sec { margin: 0 -16px 8px; padding: 0 16px; }
.m-pivot--sec button { color: var(--m-muted); }
.m-section-t { font-size: var(--m-fs-micro); color: var(--m-muted); text-transform: lowercase; letter-spacing: .5px; margin: 24px 0 8px; }
.m-hero { padding: 8px 0 0; }
.m-hero__v { font-size: var(--m-fs-hero); font-weight: 300; line-height: 1.05; letter-spacing: -2px; font-variant-numeric: tabular-nums; word-break: break-all; }
.m-hero__v small { font-size: var(--m-fs-body); color: var(--m-muted); letter-spacing: 0; }
.m-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.m-kpi { border-left: 4px solid var(--m-accent); background: var(--m-surface); padding: 8px 16px; min-width: 0; }
.m-kpi.ok { border-color: var(--m-ok); } .m-kpi.warn { border-color: var(--m-warn); } .m-kpi.bad { border-color: var(--m-danger); }
.m-kpi__v { font-size: var(--m-fs-title); font-weight: 300; line-height: 1.15; letter-spacing: -1px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.m-kpi__v small { font-size: var(--m-fs-micro); color: var(--m-muted); letter-spacing: 0; }
.m-micro { font-size: var(--m-fs-micro); color: var(--m-muted); }
.m-delta { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; }
.m-delta.up { color: var(--m-ok); } .m-delta.down { color: var(--m-danger); }
.m-inspect { margin-top: 8px; min-height: 20px; }
.m-facts { display: grid; gap: 8px; margin-top: 16px; }
.m-fact { display: grid; grid-template-columns: 1fr auto; gap: 0 16px; border-left: 4px solid var(--m-accent); background: var(--m-surface); padding: 8px 16px; }
.m-fact.ok { border-color: var(--m-ok); } .m-fact.bad { border-color: var(--m-danger); }
.m-fact b { font-size: var(--m-fs-title); font-weight: 300; grid-row: span 2; align-self: center; letter-spacing: -1px; }
.m-fact span:last-child { grid-column: 1; }
.m-rank2 { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--m-line); }
.m-rank2__n { font-size: var(--m-fs-title); font-weight: 300; color: var(--m-accent); width: 40px; flex: none; line-height: 1; letter-spacing: -1px; }
.m-rank2__body { flex: 1; min-width: 0; }
.m-rank2__t { display: flex; justify-content: space-between; gap: 8px; }
.m-rank2__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-rank2__bar { height: 8px; background: var(--m-surface-2); margin: 4px 0; position: relative; }
.m-rank2__bar i { position: absolute; inset: 0 auto 0 0; background: var(--m-accent); }
.m-heat { display: grid; gap: 2px; font-size: 10px; color: var(--m-muted); }
.m-heat__h, .m-heat__d { text-align: center; align-self: center; }
.m-heat__c { aspect-ratio: 1; display: grid; place-items: center; font-style: normal; font-size: 9px; color: var(--m-ink); }
.dash-cuerpo.cargando { opacity: .5; pointer-events: none; transition: opacity 180ms; }

.m-num { font-family: var(--m-font); font-variant-numeric: tabular-nums; }

.detalle-panel-cuerpo { padding: 8px 16px 24px; }
.m-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; }
.m-dl dt { font-size: var(--m-fs-micro); color: var(--m-muted); text-transform: lowercase; }
.m-dl dd { margin: 0; font-size: var(--m-fs-body); overflow-wrap: anywhere; }
.m-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0 8px; }
.m-acts .m-btn { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 2px solid var(--m-ink); background: transparent; color: var(--m-ink); font-size: var(--m-fs-body); text-transform: lowercase; cursor: pointer; }
.m-acts .m-btn:hover { border-color: var(--m-accent); color: var(--m-accent); }
.m-item--acento .m-item__row { border-left: 4px solid var(--m-accent); padding-left: 12px; }
.m-item--in .m-item__row  { border-left: 4px solid var(--m-ok); padding-left: 12px; }
.m-item--out .m-item__row { border-left: 4px solid var(--m-danger); padding-left: 12px; }
.m-item--eq .m-item__row  { border-left: 4px solid var(--m-warn); padding-left: 12px; }

/* =====================================================================
   Hub con dos páginas: mosaicos ⇄ lista de módulos (deslizar a la izquierda)
   ===================================================================== */
.m-pager { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; align-items: flex-start; }
.m-pager::-webkit-scrollbar { display: none; }
.m-pane { flex: 0 0 100%; scroll-snap-align: start; min-width: 0; }
.m-more { display: grid; place-items: center; margin: 12px 0 0 auto; width: 48px; height: 48px; border: 2px solid var(--m-ink); border-radius: 50%; background: transparent; color: var(--m-ink); cursor: pointer; transition: transform var(--m-dur) var(--m-ease); }
.m-more .m-ico { width: 24px; height: 24px; color: var(--m-ink); }
.m-more:active { transform: translateX(6px); }
.m-title--lista { font-size: var(--m-fs-title); font-weight: 300; letter-spacing: -.5px; margin: 8px 0 8px 4px; text-transform: lowercase; }
.m-applist { list-style: none; margin: 8px 0 24px; padding: 0; }
.m-appitem { display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 8px 4px; cursor: pointer; transition: transform var(--m-dur) var(--m-ease); }
.m-app__ico { width: 48px; height: 48px; flex: none; display: grid; place-items: center; background: var(--m-accent); color: var(--m-accent-ink); }
.m-app__ico .m-ico { width: 28px; height: 28px; color: var(--m-accent-ink); stroke-width: 1.6; }
.m-app__name { font-size: 20px; font-weight: 300; text-transform: lowercase; }
.m-appitem:hover .m-app__name { color: var(--m-accent); }

/* =====================================================================
   Documentos de la base (ticket, factura, cierre de caja) en componentes Metro
   ===================================================================== */
.m-doc { margin-top: 8px; }
.m-dl--doc { grid-template-columns: 1fr; gap: 0; margin: 8px 0 16px; }
.m-dl--doc > div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--m-line); }
.m-dl--doc dt { flex: 1; min-width: 0; font-size: var(--m-fs-body); color: var(--m-muted); text-transform: none; overflow-wrap: anywhere; }
.m-dl--doc dd { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; flex: none; max-width: 55%; overflow-wrap: anywhere; }
.m-p { margin: 8px 0; color: var(--m-muted); }
.m-doc-img { max-width: 100%; margin: 8px 0; }
.m-orig { margin: 24px 0 8px; }
.m-orig summary { color: var(--m-muted); font-size: var(--m-fs-micro); cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.m-orig[open] summary { color: var(--m-accent); }

/* =====================================================================
   Efectos: entrada escalonada ("feather") y tilt 3D al tocar
   ===================================================================== */
@keyframes m-feather { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: none; } }
.m-feather { animation: m-feather 340ms var(--m-ease) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
.m-item, .m-kpi, .m-fact, .m-rank2, .rep-item, .mes-btn, .m-acts > * { transition: transform 180ms var(--m-ease); }
.m-pressed { transform: perspective(600px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(.985); transition-duration: 60ms; }
.btn-ver:active, .pag-btn:active:not(:disabled) { transform: scale(.94); }
/* cambio de página del pivot: entra deslizando */
.m-pivot--sec button { transition: color 180ms; }


[data-theme="light"] { --m-bg: #ffffff; --m-surface: #f1f1f1; --m-surface-2: #e7e7e7; --m-line: #d6d6d6; }
.m-item__row { background: var(--m-bg); }

/* KPIs = mosaicos de color (acento, o verde / rojo / ámbar según estado) */
.m-kpi, .kpi-card, .m-fact {
  --c: var(--m-accent); background: var(--c); color: var(--m-accent-ink); border: 0; padding: 12px 16px; min-height: 92px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.m-kpi.ok, .m-fact.ok, .kpi-card[style*="#2a8a3a"] { --c: var(--m-ok); color: #fff; }
.m-kpi.bad, .m-fact.bad, .kpi-card[style*="#a40000"] { --c: var(--m-danger); color: #fff; }
.m-kpi.warn, .kpi-card[style*="#d4a000"] { --c: var(--m-warn); color: #fff; }
.m-kpi .m-micro, .m-fact .m-micro, .kpi-card .kpi-label, .kpi-card .kpi-hint { color: inherit; opacity: .85; }
.m-kpi__v, .kpi-valor { color: inherit; }
.m-kpi__v small { color: inherit; opacity: .75; }
.kpi-valor[style] { color: inherit !important; }
.m-fact { display: grid; grid-template-columns: 1fr auto; align-content: center; min-height: 72px; }
.m-fact b { color: inherit; }

.m-tile.live > .face.front.iconic { justify-content: flex-start; }
.m-tile.live > .face.front.iconic .m-tile__label { position: absolute; left: 8px; bottom: 6px; }
.m-tile__value--txt { font-size: var(--m-fs-title); letter-spacing: -.5px; text-transform: lowercase; }

.header-sec:not(:empty)::after { content: ''; display: block; width: 48px; height: 4px; background: var(--m-accent); margin-top: 4px; }
.m-section-t::before { content: ''; display: inline-block; width: 12px; height: 2px; background: var(--m-accent); vertical-align: middle; margin-right: 8px; }

/* Inicio: cabecera compacta (solo empresa y versión), sin el hueco reservado para el título del módulo */
.app.en-hub .header { height: 44px; padding-top: 8px; }
.app.en-hub .header-sec { display: none; }
.app.en-hub #sec-hub { padding-top: 0; }

/* Lista de módulos: "anclar" aparece solo en los mosaicos quitados del inicio */
.m-appitem__pin { display: none; margin-left: auto; min-height: 44px; padding: 0 16px; border: 2px solid var(--m-ink); background: transparent; color: var(--m-ink); font-size: var(--m-fs-micro); text-transform: lowercase; cursor: pointer; border-radius: 0; }
.m-appitem.fuera .m-appitem__pin { display: block; }
.m-appitem.fuera .m-app__name { color: var(--m-muted); }
.m-appitem__pin:hover { border-color: var(--m-accent); color: var(--m-accent); }

.m-tile__value { white-space: nowrap; overflow: visible; }

/* =====================================================================
   Efectos de Windows Phone: puntitos de progreso, continuum, menú al mantener,
   jump list, selector en rueda, barra de acciones, aviso superior, parallax
   ===================================================================== */
#m-progreso { position: fixed; top: 0; left: 0; right: 0; height: 6px; z-index: 300; pointer-events: none; opacity: 0; transition: opacity 200ms; }
#m-progreso.on { opacity: 1; }
.m-dots { position: relative; height: 6px; overflow: hidden; width: 100%; }
.m-dots i { position: absolute; top: 0; left: -8px; width: 6px; height: 6px; background: var(--m-accent); opacity: 0; animation: m-dot 2.4s infinite; animation-delay: calc(var(--k) * 150ms); }
@keyframes m-dot { 0% { left: -2%; opacity: 0; } 8% { opacity: 1; } 30% { left: 38%; } 70% { left: 62%; } 92% { opacity: 1; } 100% { left: 102%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .m-dots i { animation: m-dot 6s infinite !important; } }
.m-dots--inline { margin: 32px 0 8px; }
.sin-datos .m-micro { display: block; text-align: center; }

.m-continuum { position: fixed; z-index: 400; pointer-events: none; transform-origin: left top; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }

.m-ctx-bg { position: fixed; inset: 0; z-index: 350; background: rgba(0,0,0,.5); animation: m-fade 150ms; }
.m-ctx { position: absolute; left: 16px; right: 16px; background: var(--m-surface); padding: 8px 0; transform-origin: 50% 0; animation: m-swivel-in 240ms var(--m-ease) both; }
.m-ctx__t { padding: 8px 16px; font-size: var(--m-fs-micro); color: var(--m-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-ctx__i { display: block; width: 100%; text-align: left; min-height: 56px; padding: 0 16px; background: none; border: 0; color: var(--m-ink); font: 300 20px var(--m-font); text-transform: lowercase; cursor: pointer; border-radius: 0; }
.m-ctx__i:hover, .m-ctx__i:active { background: var(--m-accent); color: var(--m-accent-ink); }
.m-ctx__i.del { color: var(--m-danger); }
.m-ctx__i.del:hover, .m-ctx__i.del:active { background: var(--m-danger); color: #fff; }

.m-grupo { list-style: none; padding: 12px 0 4px; }
.m-grupo__h { min-width: 48px; height: 48px; padding: 0 12px; background: var(--m-accent); color: var(--m-accent-ink); border: 0; font: 300 24px var(--m-font); text-transform: lowercase; cursor: pointer; border-radius: 0; }
.m-jump-bg, .m-picker-bg { position: fixed; inset: 0; z-index: 350; background: color-mix(in srgb, var(--m-bg) 97%, transparent); display: flex; align-items: center; justify-content: center; animation: m-fade 150ms; }
.m-jump-bg.saliendo, .m-picker-bg.saliendo { opacity: 0; transition: opacity 180ms; }
.m-jump { width: 100%; max-width: 480px; padding: 24px 16px; transform-origin: 50% 0; animation: m-swivel-in 260ms var(--m-ease) both; }
.m-jump__t, .m-picker__t { font: 300 var(--m-fs-title)/1.1 var(--m-font); letter-spacing: -.5px; margin-bottom: 16px; text-transform: lowercase; }
.m-jump__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.m-jump__k { aspect-ratio: 1; padding: 4px; background: var(--m-accent); color: var(--m-accent-ink); border: 0; font: 300 18px var(--m-font); text-transform: lowercase; cursor: pointer; border-radius: 0; }

.m-picker { width: 100%; max-width: 420px; padding: 24px 16px; transform-origin: 50% 0; animation: m-swivel-in 280ms var(--m-ease) both; }
.m-picker__ruedas { position: relative; display: grid; grid-template-columns: 3fr 2fr; gap: 8px; height: 168px; }
.m-picker__banda { position: absolute; left: 0; right: 0; top: 56px; height: 56px; border-top: 2px solid var(--m-accent); border-bottom: 2px solid var(--m-accent); pointer-events: none; z-index: 2; }
.m-rueda { height: 168px; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; padding: 56px 0; overscroll-behavior: contain; outline: 0; }
.m-rueda::-webkit-scrollbar { display: none; }
.m-rueda__i { height: 56px; display: flex; align-items: center; justify-content: center; scroll-snap-align: center; font: 300 22px var(--m-font); color: var(--m-muted); text-transform: lowercase; transition: color 120ms; }
.m-rueda__i.on { color: var(--m-ink); font-size: 28px; }
.m-picker__a { display: flex; gap: 8px; margin-top: 24px; }
.m-picker__a .m-btn { flex: 1; }

/* Barra de acciones (app bar) */
.m-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--m-surface); border-top: 1px solid var(--m-line); max-width: 960px; margin: 0 auto; }
.m-bar__veil { display: none; }
.m-bar__menu { display: none; padding: 8px 0 0; }
.m-bar__menu button { display: block; width: 100%; text-align: right; padding: 0 20px; min-height: 48px; border: 0; background: none; color: var(--m-ink); font: 300 20px var(--m-font); text-transform: lowercase; cursor: pointer; }
.m-bar__menu button:hover { color: var(--m-accent); }
.m-bar__row { display: flex; align-items: flex-start; justify-content: space-around; height: 56px; padding-bottom: env(safe-area-inset-bottom); transition: height 200ms var(--m-ease); }
.m-bar__row button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 8px; border: 0; background: none; color: var(--m-ink); cursor: pointer; min-height: 48px; border-radius: 0; }
.m-bar__ico { width: 40px; height: 40px; border: 2px solid currentColor; border-radius: 50%; display: grid; place-items: center; transition: transform 120ms; }
.m-bar__ico .m-ico { width: 20px; height: 20px; color: inherit; }
.m-bar__row button:active .m-bar__ico { transform: scale(.9); }
.m-bar__lbl { display: none; font-size: var(--m-fs-micro); text-transform: lowercase; }
.m-bar__puntos { font-size: 28px; line-height: 1; letter-spacing: 2px; padding-top: 6px; color: var(--m-muted); }
.m-bar.abierto .m-bar__veil { display: block; position: fixed; inset: 0; z-index: -1; background: rgba(0,0,0,.45); }
.m-bar.abierto .m-bar__menu { display: block; animation: m-swivel-in 220ms var(--m-ease) both; transform-origin: 50% 100%; }
.m-bar.abierto .m-bar__lbl { display: block; }
.m-bar.abierto .m-bar__row { height: 84px; }
.app.con-bar .main-content { padding-bottom: 64px; }

/* Aviso que baja desde arriba */
@keyframes m-toast-top { 0% { opacity: 0; transform: translateY(-110%); } 10%, 86% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-110%); } }
.toast { top: calc(env(safe-area-inset-top) + 8px) !important; bottom: auto !important; left: 8px !important; right: 8px; transform: none; max-width: none; text-align: left; border-left: 6px solid var(--m-accent); z-index: 320; }


.foto__slide { background-position: center calc(50% + var(--py, 0px)); }
/* el velo de la barra va por debajo de ella: el fondo va en sus partes, no en el contenedor */
.m-bar { background: transparent; border-top: 0; }
.m-bar__row, .m-bar__menu { background: var(--m-surface); }
.m-bar__row { border-top: 1px solid var(--m-line); }


/* Mosaico de ventas de hoy */
.m-tile.live > .face.venta { justify-content: space-between; padding: 10px 12px 10px; }
.venta__t { font-size: var(--m-fs-body); font-weight: 400; text-transform: lowercase; opacity: .9; }
.venta__v { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.venta__v .m-tile__value { min-width: 0; font-size: 60px; letter-spacing: -2px; }
.venta__v small { font-size: var(--m-fs-body); opacity: .8; font-weight: 400; }
.venta__d { display: flex; align-items: center; gap: 6px; font-size: var(--m-fs-micro); opacity: .95; }
.venta__pct { display: inline-flex; align-items: center; padding: 2px 8px 2px 2px; background: rgba(0,0,0,.25); font-weight: 600; font-size: var(--m-fs-body); }
.venta__pct .bi { font-size: 22px; line-height: 1; }

/* Mosaicos chicos con cara trasera: se quedan con la delantera (el ícono) */
.m-tile.s1.live.flipped > .face.front { transform: perspective(700px) rotateX(0deg); }
.m-tile.s1.live.flipped > .face.back  { transform: perspective(700px) rotateX(180deg); }

/* =====================================================================
   Guía de primer uso y pistas
   ===================================================================== */
.m-guia-bg { position: fixed; inset: 0; z-index: 380; animation: m-fade 200ms; }
.m-guia-bg.saliendo { opacity: 0; transition: opacity 200ms; }
.m-guia-hole { position: fixed; display: none; box-shadow: 0 0 0 100vmax rgba(0,0,0,.72); outline: 2px solid #fff; outline-offset: 0;
  transition: left 280ms var(--m-ease), top 280ms var(--m-ease), width 280ms var(--m-ease), height 280ms var(--m-ease); pointer-events: none; }
.m-guia-hole.pulso::after { content: ''; position: absolute; inset: -10px; border: 2px solid #fff; animation: m-pulso 1.5s ease-out infinite; }
@keyframes m-pulso { 0% { transform: scale(.94); opacity: .9; } 100% { transform: scale(1.12); opacity: 0; } }
.m-guia-card { position: absolute; left: 12px; right: 12px; max-width: 420px; margin: 0 auto; padding: 16px; background: var(--m-accent); color: var(--m-accent-ink);
  animation: m-swivel-in 300ms var(--m-ease) both; transform-origin: 50% 0; }
.m-guia-n { font-size: var(--m-fs-micro); opacity: .85; }
.m-guia-card h2 { margin: 4px 0 8px; font: 300 var(--m-fs-title)/1.1 var(--m-font); letter-spacing: -.5px; text-transform: lowercase; }
.m-guia-card p { margin: 0 0 16px; font-size: var(--m-fs-body); line-height: 1.45; }
.m-guia-b { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.m-guia-b button { min-height: 44px; padding: 0 16px; border: 2px solid currentColor; background: transparent; color: inherit; font: 400 var(--m-fs-body) var(--m-font); text-transform: lowercase; cursor: pointer; border-radius: 0; }
.m-guia-b .primario { background: var(--m-accent-ink); color: var(--m-accent); border-color: var(--m-accent-ink); }

.m-pista { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 8px 8px 8px 16px; background: var(--m-surface-2); border-left: 4px solid var(--m-accent); font-size: var(--m-fs-micro); line-height: 1.4; animation: m-feather 340ms var(--m-ease) backwards; }
.m-pista span { flex: 1; } .m-pista b { font-weight: 600; text-transform: lowercase; }
.m-pista button { flex: none; min-height: 44px; padding: 0 12px; border: 2px solid var(--m-ink); background: transparent; color: var(--m-ink); font: 400 var(--m-fs-micro) var(--m-font); text-transform: lowercase; cursor: pointer; border-radius: 0; }
.m-pista.saliendo { opacity: 0; transform: translateX(40px); transition: all 200ms; }

/* Guía: el bloque es neutro (tinta sobre fondo) para no confundirse con el mosaico resaltado, sea cual sea el acento */
.m-guia-card { background: var(--m-ink); color: var(--m-bg); }
.m-guia-n { opacity: .65; }
.m-guia-b button { border-color: currentColor; color: var(--m-bg); }
.m-guia-b .primario { background: var(--m-accent); color: var(--m-accent-ink); border-color: var(--m-accent); }