/* ═══ 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 {
/*
* Z · clases base de layout (GLOBAL, prefijo z-, como cx-controls.css).
* Sólo el chrome estático (display/dirección/overflow); los valores dinámicos
* (gap/align/justify/grid-template/padding) los emiten los componentes inline.
*/
/* ── stacks ── */
.z-stack { display: flex; min-width: 0; }
.z-stack--v { flex-direction: column; }
.z-stack--h { flex-direction: row; }
/* ── grid ── */
.z-grid { display: grid; min-width: 0; }
/* ── scroll ── */
.z-scroll { min-width: 0; min-height: 0; }
.z-scroll--vertical { overflow-y: auto; overflow-x: hidden; }
.z-scroll--horizontal { overflow-x: auto; overflow-y: hidden; white-space: nowrap; }
.z-scroll--both { overflow: auto; }
/* ── wrap ── */
.z-wrap { display: flex; flex-wrap: wrap; min-width: 0; }
/* ── center ── */
.z-center { display: flex; align-items: center; justify-content: center; }
.z-center--fill { width: 100%; height: 100%; }
/* contenedor base (box con superficie) */
.z-container { box-sizing: border-box; min-width: 0; display: block; }
/* ── overlay (z-stack + posición absoluta) ── */
.z-overlay { position: relative; display: grid; min-width: 0; }
.z-overlay > * { grid-area: 1 / 1; }
.z-overlay-item { position: absolute; }
/* ── flex fino ── */
.z-flex { display: flex; min-width: 0; }
.z-flex-item { min-width: 0; }
/* ── aspect / image ── */
.z-aspect { display: block; }
.z-aspect > * { width: 100%; height: 100%; }
.z-aspect > img, .z-aspect > video { object-fit: cover; }
.z-image { display: block; max-width: 100%; }
/* ── pad (padding direccional) ── */
.z-pad { box-sizing: border-box; }
/* ── section (header/body/footer) ── */
.z-section { display: flex; flex-direction: column; min-width: 0; }
/* ── F9 (mejoras-front) · responsive del layout desde texto ─────────────────────────────────────
.z-grid--resp: las columnas viven en custom-props (--z-cols/--z-cols-sm) que el ZGrid emite inline;
en angosto (≤720px) gana la variante sm → se apila solo.
.z-hide-sm / .z-only-sm: utilidades de visibilidad por ancho (Class="z-hide-sm" en cualquier comp). */
.z-grid--resp{grid-template-columns:var(--z-cols)}
@media (max-width:720px){
.z-grid--resp{grid-template-columns:var(--z-cols-sm,var(--z-cols))}
.z-hide-sm{display:none!important}
}
@media (min-width:720.1px){
.z-only-sm{display:none!important}
}
}