/* Statera · envolver con el marco nuevo · Claude 28/09/2026
 * Va junto con envolver.js. Trae la barra (marco.css) y esconde la navegación vieja: nunca dos navegaciones.
 * En las páginas viejas los tokens nuevos quedan ACOTADOS a la barra (.mk-scope): el resto de la página
 * conserva sus colores y su tema (claro u oscuro, el que eligió la persona).
 */
@import url("/marco/marco.css");

/* ---------- Estrategias v3.4: la barra nueva ocupa su #topbar (mismos 48 px, mismo --bar-h) ---------- */
html.mk-envuelto-estrategias #topbar > :not(.mk-in) { display: none !important; }
html.mk-envuelto-estrategias #topbar { gap: 14px; padding: 0 12px 0 18px; }
html.mk-envuelto-estrategias #bottomnav { display: none !important; }
@media (max-width: 767px) {
  html.mk-envuelto-estrategias .cmptray { bottom: calc(var(--mk-bottom-h) + 10px + env(safe-area-inset-bottom)); }
  html.mk-envuelto-estrategias .varpop.sheet { bottom: calc(var(--mk-bottom-h) + env(safe-area-inset-bottom)) !important; }
}

/* ---------- páginas viejas (/tools, /app, /account): tokens de la barra acotados ---------- */
html.statera-app .mk-scope {
  --font: "Geist", "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, sans-serif;
  --fs-cap: 13px; --fs-sec: 14px; --fs-row: 15px; --fs-body: 16px; --fs-h3: 18px;
  --canvas: #f3f3ef; --bg: #fafaf7; --card: #fcfcfa; --surface: #f4f4f1; --surface-2: #ffffff;
  --line: rgba(12, 12, 10, .085); --line-hover: rgba(12, 12, 10, .18); --border-strong: #8f8f88;
  --text: #121211; --text-2: #4a4a45; --accent: #c6f24e; --accent-mark: #5c8311; --selected: rgba(92, 131, 17, .10);
  --focus: #1d4ed8; --ink: #121211; --ink-text: #fcfcfa; --brand-red: #C8102E;
  --radius: 10px; --radius-lg: 14px; --bar-h: 48px; --ease: cubic-bezier(.16, 1, .3, 1);
  --shadow: 0 12px 32px -10px rgba(20, 20, 10, .22), 0 0 0 1px rgba(12, 12, 10, .08);
  --shadow-pop: 0 16px 40px -10px rgba(20, 20, 10, .25), 0 0 0 1px rgba(12, 12, 10, .08);
  color-scheme: light; font-family: var(--font); line-height: 1.45; -webkit-font-smoothing: antialiased;
}
html.statera-app.dark .mk-scope, html.statera-app[data-color-mode="dark"] .mk-scope {
  --canvas: #0c0c0c; --bg: #111111; --card: #161616; --surface: #1c1c1c; --surface-2: #232323;
  --line: rgba(255, 255, 255, .075); --line-hover: rgba(255, 255, 255, .16); --border-strong: #636363;
  --text: #f3f3ee; --text-2: #b4b4ac; --accent-mark: #c6f24e; --selected: rgba(198, 242, 78, .08);
  --focus: #c6f24e; --ink: #c6f24e; --ink-text: #0c0c0c; --brand-red: #FF6B7F;
  --shadow: 0 12px 32px -8px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .06);
  --shadow-pop: 0 16px 40px -8px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .07);
  color-scheme: dark;
}
html.statera-app .mk-scope :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
html.statera-app .mk-scope a, html.statera-app .mk-scope button { letter-spacing: normal; text-transform: none; }

/* ---------- sin la navegación vieja (queda la barra nueva) ----------
 * Los selectores van reforzados: app-shell.css usa !important con mucha especificidad. */
html.mk-envuelto.statera-app:not(.mk-envuelto-app), html.mk-envuelto.statera-app.st-app-shell:not(.mk-envuelto-app), html.mk-envuelto.statera-app.st-app-shell.st-nav-expanded:not(.mk-envuelto-app) { --st-rail-width: 0px !important; }
html.mk-envuelto:not(.mk-envuelto-app).statera-app.st-app-shell .st-rail.st-rail,
html.mk-envuelto:not(.mk-envuelto-app) .st-rail.st-rail.st-rail,
html.mk-envuelto:not(.mk-envuelto-app) .workspace > .sidebar.sidebar,
html.mk-envuelto .app-container > .app-sidebar:not(.st-rail) { display: none !important; }
/* idioma, tema, cuenta y el contador viejo ya están en la barra nueva (los controles siguen en la página, ocultos) */
html.mk-envuelto.statera-app .st-header-utilities.st-header-utilities,
html.mk-envuelto.statera-app .st-database-counter.st-database-counter,
html.mk-envuelto.statera-app .tools-language.tools-language,
html.mk-envuelto.statera-app [data-app-theme-toggle][data-app-theme-toggle],
html.mk-envuelto.statera-app #tools-account-toggle.st-nav-action,
html.mk-envuelto.statera-app #tools-account-toggle,
html.mk-envuelto.statera-app .st-account-link.st-account-link { display: none !important; }
html.mk-envuelto-account .site-header.site-header { display: none !important; }

/* ---------- Mesa vieja (/app/): el riel queda solo con los controles de la mesa (no es navegación) ---------- */
html.mk-envuelto-app.statera-app.st-app-shell .st-rail.st-rail { top: 48px !important; height: calc(100dvh - 48px) !important; max-height: calc(100dvh - 48px) !important; }
@media (min-width: 768px) {
  html.mk-envuelto-app.statera-app.st-app-shell.st-app-shell .st-rail .st-rail-heading.st-rail-heading,
  html.mk-envuelto-app.statera-app.st-app-shell.st-app-shell .st-rail .st-mode-slot.st-mode-slot,
  html.mk-envuelto-app.statera-app.st-app-shell.st-app-shell .st-rail .st-shell-nav-group.st-shell-nav-group,
  html.mk-envuelto-app.statera-app.st-app-shell.st-app-shell .st-rail .st-global-actions.st-global-actions,
  html.mk-envuelto-app.statera-app.st-app-shell.st-app-shell .st-rail .st-route-row.st-route-row:not(:has(#st-route-mesa)) { display: none !important; }
}
html.mk-envuelto-app .app-container { height: calc(100dvh - 48px) !important; min-height: 0 !important; }
html.mk-envuelto-app body { overflow: hidden; }
@media (max-width: 767px) {
  /* celular: la Mesa vieja conserva su barra inferior (tiene los controles de la mesa) y no se suma la nuestra:
     una sola navegación. Arriba queda la barra nueva. */
  html.mk-envuelto-app.statera-app.st-app-shell .st-rail.st-rail { top: auto !important; height: 60px !important; max-height: 60px !important; }
  html.mk-envuelto-app .mk-bottom.mk-bottom { display: none !important; }
  html.mk-envuelto-app .app-container { height: calc(100dvh - 48px) !important; }
  html.mk-envuelto.statera-app:not(.mk-envuelto-app) body { padding-bottom: calc(var(--mk-bottom-h) + env(safe-area-inset-bottom)) !important; }
}