/* ═══ LA CAPA VIAJA CON LA HOJA (2026-07-20) ══════════════════════════════════
Esta hoja declara su @layer ACÁ ADENTRO. Antes la capa la ponía quien la
importaba —`@import url(...) layer(lib)`, repetido en 4 emisores— así que
la hoja caía en su capa SOLO si el importador acertaba, y cargarla por
la dejaba SIN CAPA: en CSS lo no-capado le gana a todo lo capado.
Con la capa acá la hoja es inmune a CÓMO se la cargue, y el puede
usar (paralelo, y un fallo se ve en Network) en vez de @import
(serial, render-blocking, y si falla se pierde EN SILENCIO — el defecto que
dejaba el shell sin `container-type` y tiraba el layout a flujo plano).
═════════════════════════════════════════════════════════════════════════ */
@layer lib {
/*
* Cx · Az — piel GLOBAL de la capa de aplicación (shell). Clon auto-contenido de
* components/ax/wwwroot/ax.css (capa Ax, DEPRECADA): mismo CSS, prefijo ax-→az-.
*
* .az-nav-item vive acá (no scoped) porque AzNavItem tiene como raíz un
* (componente del framework): el CSS scoped del .razor NO se aplica al que
* renderiza un componente hijo. Global + prefijo az- = sin colisiones.
*
* Sólo consume tokens --mx-*; el color/forma activos los deciden los otros ejes.
* RAIL OSCURO: los ítems del rail leen del juego --mx-color-sidebar-* (bg/fg/hover/active),
* que es OSCURO por el fix mode-aware del tema (MxThemeGen.EmitRichTokens).
*/
.az-nav-item {
display: flex;
align-items: center;
gap: var(--mx-space-2);
padding: var(--mx-space-2) var(--mx-space-3);
border-radius: var(--mx-radius-sm);
/* sobre el rail oscuro: fg atenuado del sidebar (cae a text-muted fuera del rail) */
color: var(--mx-color-sidebar-muted, var(--mx-color-text-muted, var(--mx-color-text)));
text-decoration: none;
font-size: var(--mx-text-sm);
line-height: 1.4;
white-space: nowrap;
transition: background var(--mx-transition-fast, .12s) ease, color var(--mx-transition-fast, .12s) ease;
/* reset para el modo acción (raíz