/* global_nav.css · estilo de la barra de navegación global (franja superior).
 * Autónomo: los plugins no cargan app.css del workbench, así que acá va todo.
 * Identidad MantixLab: Inter, fondo claro translúcido, iconos en cuadros. */

/* ⭐ LA ALTURA ES CONTRATO, JAMÁS MEDICIÓN (Pablo 2026-07-30 · "todo baja y
   luego se ajusta"): la barra mide 54px SIEMPRE — nada de recordar alturas
   (el hu_h envenenado reservaba ~450px y todo saltaba dos veces por página).
   Lo que necesite crecer (el cajón ☰) se SUPERPONE, jamás empuja el flujo. */
:root { --stemlab-nav-h: 54px; }

/* el esqueleto se viste SOLO (por el id · sin esperar ningún JS): los
   editores traen `<div id="stemlab-global-nav">` en su HTML y desde el
   PRIMER paint eso ya es una barra — blanca, con su hairline, fija. La
   huincha después le pone los tiles ADENTRO de un mueble que siempre estuvo. */
#stemlab-global-nav {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: var(--stemlab-nav-h);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #e2e8f0;
  position: fixed;           /* LA BARRA ES DE LA CASA (Pablo · 2.png): vive
                                fija al viewport, fuera del flujo (y del
                                overflow-hidden) de los editores · nace en
                                x=0 a todo lo ancho, el cajón la respeta */
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;               /* encima de los headers sticky de los plugins */
}

#stemlab-global-nav.sgn-bar {
  gap: 6px;
  padding: 0 10px;
  font-family: "Inter", system-ui, sans-serif;
  flex: 0 0 auto;            /* en layouts flex-col no se estira */
}

/* el body le hace espacio a la barra fija · la altura es LA CONSTANTE */
body { padding-top: var(--stemlab-nav-h, 54px); }
/* los editores de pantalla completa se descuentan la barra */
.h-screen { height: calc(100vh - var(--stemlab-nav-h, 54px)) !important; }

#stemlab-global-nav .sgn-icon {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: transparent;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, transform .12s;
  --sgn-accent: #475569;
}
#stemlab-global-nav .sgn-icon:hover {
  background: color-mix(in srgb, var(--sgn-accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--sgn-accent) 28%, transparent);
  transform: translateY(-1px);
}
#stemlab-global-nav .sgn-home { font-size: 18px; }

/* el plugin actual · resaltado con su color, sin acción */
#stemlab-global-nav .sgn-active {
  background: color-mix(in srgb, var(--sgn-accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--sgn-accent) 45%, transparent);
  cursor: default;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sgn-accent) 30%, transparent);
}
#stemlab-global-nav .sgn-active:hover { transform: none; }

/* separador fino entre Home y los plugins */
#stemlab-global-nav .sgn-sep {
  width: 1px;
  height: 20px;
  background: #e2e8f0;
  margin: 0 4px;
}

/* zona de retorno · "← <icono de donde vengo>" · empujada a la derecha */
#stemlab-global-nav .sgn-return {
  margin-left: auto;
  width: auto;
  gap: 3px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  background: color-mix(in srgb, var(--sgn-accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--sgn-accent) 30%, transparent);
}
#stemlab-global-nav .sgn-return:hover {
  background: color-mix(in srgb, var(--sgn-accent) 20%, transparent);
}
#stemlab-global-nav .sgn-ret-arrow {
  font-size: 14px;
  color: var(--sgn-accent);
  font-weight: 700;
}

/* ── EL CONTRATO DE MEDIDAS de la casa (H3 · 2026-07-11) ─────────────────
 * Las franjas comunes de los editores de átomos: mismas medidas en los 4 →
 * cambiar de editor no salta, solo cambia la piel y las herramientas.
 * Herramientas (aside izq): w-44 = 176px (ya unificado por convención).
 * Panel derecho: --wb-panel-w · el splitter lo ajusta y PERSISTE COMPARTIDO
 * (localStorage `stemlab_panelw` · una sola memoria para toda la casa). */
:root {
  --wb-tools-w: 176px;
  --wb-panel-w: 340px;
}

/* 🧮 LAS FÓRMULAS EN LÍNEA (02-10-2026 · Pablo, IMG/1.png: «parece todo como cortado»):
   Tailwind (preflight) pone TODO <svg> en display:block, y MathJax dibuja cada $…$ como un
   SVG → el párrafo se partía en cada fórmula. El SVG de una fórmula vuelve a ser inline
   (lo que MathJax espera: él mismo le pone su vertical-align); la de bloque ($$…$$) sigue
   centrada en su contenedor. Vale para toda la casa: los cinco átomos, cont2, prueba, paes. */
mjx-container[jax="SVG"] > svg { display: inline; }