/* ═══ LA CAPA VIAJA CON LA HOJA ══════════════════════════════════════════════
   La hoja declara su @layer adentro: así cae en su capa sin importar cómo se la cargue (una hoja sin capa le
   gana a todo lo capado), y el <head> puede usar <link> (paralelo, y un fallo se ve en Network) en vez de
   @import (serial y, si falla, en silencio).
   ═════════════════════════════════════════════════════════════════════════ */
@layer lib {
/*
 * sy.css — los componentes de servicio del sitio (serie Sy): bloques que llaman a una API o servicio público
 * (.guiz). Sólo consume tokens --mx-*.
 */

/* ── 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; }

}