/* ═══ 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 {
/*
* sy.css — LOS COMPONENTES DE SERVICIO del sitio (serie Sy). Bloques que llaman a una API o servicio
* PÚBLICO (.guiz). Consume SOLO tokens --mx-* (site-kit aislado del motor). Se importa a layer(lib).
*/
/* ── SyMap — mapa OpenStreetMap embebido ── */
.sy-map {
margin: 0;
display: flex;
flex-direction: column;
border-radius: var(--mx-radius-xl);
overflow: hidden;
background: var(--mx-color-surface);
border: 1px solid var(--mx-color-border);
box-shadow: var(--mx-elevation-1);
}
.sy-map__frame {
display: block;
width: 100%;
height: var(--_h, 380px);
border: 0;
}
.sy-map__caption {
padding: 12px 18px;
font-size: var(--mx-text-sm);
color: var(--mx-color-text-muted);
border-top: 1px solid var(--mx-color-border);
}
.sy-map__link {
align-self: flex-start;
padding: 10px 18px;
font-size: var(--mx-text-xs);
font-weight: 700;
text-decoration: none;
color: var(--mx-color-primary-dark, var(--mx-color-primary));
transition: color .16s;
}
.sy-map__link:hover { color: var(--mx-color-primary); text-decoration: underline; }
}