/* -------------------------------------------------------------------------
   Zaragoza Mapas 1.0

   Los tamaños de letra salen de variables que fija el escritorio. Los de
   aquí son el respaldo.

   Colores de texto por encima de 4,5:1 sobre blanco; gráficos, de 3:1.
   Áreas táctiles de 44 px como mínimo.
   ------------------------------------------------------------------------- */

.zgm,
.zgm-llegar {
    --zgm-t-controles: 17px;
    --zgm-t-leyenda: 16px;
    --zgm-t-ventanas: 16px;
    --zgm-t-listado: 17px;

    --zgm-texto: #1a1a1a;
    --zgm-suave: #4a4a4a;      /* 8,9:1 */
    --zgm-borde: #6b6b6b;      /* 5,3:1 */
    --zgm-fondo-suave: #f4f4f5;
    --zgm-acento: #14539a;     /* 7,7:1 */
    --zgm-acento-hover: #0e3f77;
    --zgm-error: #a4262c;      /* 7,3:1 */
    --zgm-foco: #0b5ed7;
}

.zgm {
    color: var(--zgm-texto);
    line-height: 1.6;
    margin: 1.5rem 0;
}

.zgm *:focus-visible,
.zgm-llegar *:focus-visible {
    outline: 3px solid var(--zgm-foco);
    outline-offset: 2px;
}

.zgm-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Sin JavaScript no hay dibujo: se quita el hueco --------------------------- */
.zgm-sin-js .zgm-marco,
.zgm-sin-js .zgm-leyenda,
.zgm-sin-js .zgm-salto,
.zgm-sin-mapa .zgm-marco,
.zgm-sin-mapa .zgm-leyenda,
.zgm-sin-mapa .zgm-capas,
.zgm-sin-mapa .zgm-salto {
    display: none !important;
}

/* Salto ------------------------------------------------------------------- */
.zgm-salto {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.zgm-salto:focus,
.zgm-salto:focus-visible {
    position: static;
    display: inline-flex;
    align-items: center;
    width: auto;
    height: auto;
    min-height: 44px;
    margin-bottom: 0.5rem;
    padding: 0.4em 1em;
    background: #fff;
    color: var(--zgm-acento);
    border: 2px solid var(--zgm-acento);
    border-radius: 4px;
    font-size: var(--zgm-t-controles);
    font-weight: 700;
    text-decoration: underline;
}

.zgm-fin {
    display: block;
    height: 0;
    outline: none;
}

/* Estado ------------------------------------------------------------------ */
.zgm-estado {
    margin: 0 0 0.6rem;
    padding: 0.45em 0.8em;
    background: var(--zgm-fondo-suave);
    border-left: 4px solid var(--zgm-borde);
    font-size: var(--zgm-t-controles);
    line-height: 1.5;
}

.zgm-estado:empty {
    display: none;
}

.zgm-estado--error {
    background: #fdf2f2;
    border-left-color: var(--zgm-error);
    color: #7a1c21;
    font-weight: 600;
}

/* Capas ------------------------------------------------------------------- */
.zgm-capas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    align-items: center;
    margin: 0 0 0.6rem;
    padding: 0.4rem 0.8rem 0.6rem;
    border: 2px solid var(--zgm-borde);
    border-radius: 4px;
    font-size: var(--zgm-t-controles);
}

.zgm-capas[hidden] {
    display: none;
}

.zgm-capas legend {
    padding: 0 0.3em;
    font-weight: 700;
}

.zgm-capa {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    min-height: 44px;
    cursor: pointer;
}

.zgm .zgm-capa input {
    /* 1.5.3 (WCAG 2.5.8): al menos 24 × 24 px aunque el texto sea pequeño. */
    width: max(1.5em, 24px);
    height: max(1.5em, 24px);
    min-width: 24px;
    min-height: 24px;
    margin: 0;
    accent-color: var(--zgm-acento);
}

.zgm-capa-n,
.zgm-grupo-n {
    color: var(--zgm-suave);
    font-weight: 400;
}

.zgm-capas-ayuda {
    flex-basis: 100%;
    margin: 0;
    color: var(--zgm-suave);
    font-size: 0.9em;
}

/* Mapa -------------------------------------------------------------------- */
.zgm-marco {
    position: relative;
}

/* Algunos temas esconden las regiones o les quitan la altura. */
.zgm .zgm-lienzo,
.zgm .zgm-lienzo[role="region"] {
    display: block !important;
    visibility: visible !important;
    width: 100%;
    min-height: 200px;
    border: 2px solid var(--zgm-borde);
    border-radius: 4px;
    z-index: 0;
    background: #e8e8e8;
    font-family: inherit;
}

.zgm-moviendo .zgm-lienzo {
    border-color: var(--zgm-acento);
    box-shadow: 0 0 0 2px var(--zgm-acento);
}

/* Sin fondo: una trama suave para que se note que falta algo. */
.zgm-sin-fondo .zgm-lienzo {
    background: repeating-linear-gradient(45deg, #ececec 0 10px, #e0e0e0 10px 20px);
}

/* Temas que fuerzan tamaños a todas las imágenes: las teselas no se tocan. */
.zgm .leaflet-container img.leaflet-tile,
.zgm .leaflet-tile-pane img {
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    width: 256px !important;
    height: 256px !important;
}

/* Controles de 44 px ------------------------------------------------------ */
.zgm .leaflet-bar a,
.zgm .leaflet-touch .leaflet-bar a {
    width: 44px;
    height: 44px;
    line-height: 44px;
    font-size: 24px;
    color: var(--zgm-texto);
}

.zgm .leaflet-bar a:focus-visible {
    outline-offset: -3px;
}

.zgm .leaflet-control-attribution {
    font-size: 12px;
    line-height: 1.5;
    color: #333;
    background: rgba(255, 255, 255, 0.9);
}

.zgm .leaflet-control-attribution a {
    color: #0b4a8b;
    text-decoration: underline;
}

.zgm-mover {
    min-height: 44px;
    padding: 0.35em 0.9em;
    font-family: inherit;
    font-size: var(--zgm-t-controles);
    font-weight: 700;
    color: #fff;
    background: var(--zgm-acento);
    border: 2px solid #fff;
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 1px 4px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

.zgm-mover:hover {
    background: var(--zgm-acento-hover);
}

/* Ventanas ---------------------------------------------------------------- */
.zgm.zgm-con-ventana .leaflet-tooltip {
    display: none !important;
}

.zgm .leaflet-tooltip {
    font-size: var(--zgm-t-ventanas);
    color: var(--zgm-texto);
}

.zgm .leaflet-popup-content-wrapper {
    max-width: min(320px, calc(100vw - 3rem));
    box-sizing: border-box;
    border-radius: 6px;
}

.zgm .leaflet-popup-content {
    margin: 0.8em 2.6em 0.8em 1em;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: break-word;
    font-size: var(--zgm-t-ventanas);
    line-height: 1.5;
    color: var(--zgm-texto);
}

.zgm .leaflet-popup-scrolled {
    overscroll-behavior: contain;
    border-bottom: 1px solid var(--zgm-borde);
}

.zgm .leaflet-container a.leaflet-popup-close-button,
.zgm .leaflet-container button.zgm-cerrar {
    width: 44px;
    height: 44px;
    font: 28px/44px Tahoma, Verdana, sans-serif;
    color: var(--zgm-texto);
}

/* El cierre es un <button> desde la 1.5.3: se le quita lo suyo y se le deja lo de Leaflet. */
.zgm .leaflet-container button.zgm-cerrar {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.zgm .leaflet-container button.zgm-cerrar:hover,
.zgm .leaflet-container button.zgm-cerrar:focus-visible {
    color: var(--zgm-texto);
    outline: 3px solid var(--zgm-foco);
    outline-offset: -3px;
}

.zgm-v {
    outline: none;
}

.zgm-v:focus-visible {
    outline: 3px solid var(--zgm-foco);
}

.zgm .zgm-v-titulo {
    margin: 0 0 0.2em;
    font-size: calc(var(--zgm-t-ventanas) * 1.15);
    line-height: 1.3;
}

.zgm .zgm-v-titulo--compacto {
    font-size: var(--zgm-t-ventanas);
}

.zgm .zgm-v p {
    margin: 0 0 0.4em;
    font-size: inherit;
}

.zgm .zgm-v-meta {
    color: var(--zgm-suave);
}

.zgm-v-acciones a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-right: 0.8em;
    color: var(--zgm-acento);
    font-weight: 600;
    text-decoration: underline;
}

.zgm-item-llegar {
    margin: 0.4em 0 0;
}

.zgm-item-llegar a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--zgm-acento);
    font-weight: 600;
    text-decoration: underline;
}

.zgm-item-llegar a:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 2px;
}

.zgm-v-lista {
    margin: 0.3em 0 0;
    padding: 0;
    list-style: none;
}

.zgm-v-lista li {
    padding: 0.35em 0;
    border-top: 1px solid #d0d0d0;
}

.zgm-v-grupo {
    margin-top: 0.6em !important;
    font-weight: 700;
}

/* Leyenda ----------------------------------------------------------------- */
.zgm-leyenda {
    margin: 0.5rem 0 1.25rem;
    font-size: var(--zgm-t-leyenda);
}

.zgm .zgm-leyenda-titulo {
    margin: 0 0 0.2em;
    font-weight: 700;
    font-size: inherit;
}

.zgm .zgm-leyenda-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3em 1.25em;
    margin: 0;
    padding: 0;
    list-style: none;
}

.zgm .zgm-leyenda-lista li {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    margin: 0;
}

.zgm-forma {
    flex: none;
    vertical-align: middle;
    overflow: visible;
}

/*
 * Iconos propios (1.2.0).
 *
 * La imagen se encaja sin deformarla: el ancho y el alto ya vienen calculados
 * en el HTML, así que aquí solo se impide que una hoja de estilos del tema la
 * estire. El contorno blanco es el mismo recurso que en el mapa: que se vea
 * sobre cualquier fondo.
 */
.zgm-forma--img {
    max-width: none;
    height: auto;
    object-fit: contain;
}

.zgm-forma--contorno {
    filter:
        drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff)
        drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
}

/* Cómo llegar ------------------------------------------------------------- */
.zgm-llegar {
    margin: 1rem 0 1.5rem;
    font-size: var(--zgm-t-listado);
    line-height: 1.5;
}

.zgm-llegar-aviso {
    margin: 0 0 0.6em;
    padding: 0.5em 0.8em;
    background: #fff8e6;
    border-left: 4px solid #8a4500;
    color: var(--zgm-texto);
}

.zgm-llegar .zgm-boton,
.zgm-llegar .zgm-boton:visited {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.5em 1.1em;
    background: var(--zgm-acento);
    border: 2px solid var(--zgm-acento);
    border-radius: 4px;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

.zgm-llegar .zgm-boton:hover {
    background: var(--zgm-acento-hover);
    border-color: var(--zgm-acento-hover);
    color: #fff;
    text-decoration: underline;
}

.zgm-otras {
    margin-top: 0.4em;
    font-size: 0.9em;
}

.zgm-otras summary {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--zgm-acento);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.18em;
    cursor: pointer;
}

.zgm-otras summary:hover {
    text-decoration-thickness: 3px;
}

.zgm-otras ul {
    margin: 0 0 0 1.2em;
    padding: 0;
}

.zgm-otras a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--zgm-acento);
}

.zgm-llegar-sin {
    color: var(--zgm-suave);
    font-style: italic;
}

/* Listado ----------------------------------------------------------------- */
.zgm-listado {
    margin-top: 1rem;
    font-size: var(--zgm-t-listado);
}

.zgm-listado:focus {
    outline: none;
}

/*
 * Los títulos del listado tienen el mismo tamaño en todos los mapas, sea cual
 * sea el nivel de encabezado que le toque a cada uno: el nivel es para la
 * estructura de la página, no para decidir cuánto se ve.
 */
.zgm .zgm-listado-titulo {
    margin: 0;
    font-size: calc(var(--zgm-t-listado) * 1.25);
    line-height: 1.3;
}

.zgm .zgm-grupo,
.zgm .zgm-sin-titulo {
    font-size: calc(var(--zgm-t-listado) * 1.1);
}

.zgm .zgm-grupo {
    margin: 1.2em 0 0.3em;
}

/* El listado, plegable ----------------------------------------------------- */
.zgm .zgm-listado-caja {
    border-top: 1px solid #d0d0d0;
}

.zgm .zgm-listado-abrir {
    display: flex;
    align-items: center;
    gap: 0.5em;
    min-height: 44px;
    padding: 0.4em 0;
    cursor: pointer;
    list-style: none;
}

.zgm .zgm-listado-abrir::-webkit-details-marker {
    display: none;
}

/*
 * El texto va subrayado (1.3.3).
 *
 * La flecha sola no basta para saber que eso se abre y se cierra: se confunde
 * con un adorno del título. Subrayado se lee como «esto se puede pulsar», que
 * es lo que espera cualquiera. El subrayado va en el texto y no en el
 * <summary>, para que no cruce también la flecha.
 */
.zgm .zgm-listado-abrir .zgm-listado-titulo {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.18em;
}

.zgm .zgm-listado-abrir:hover .zgm-listado-titulo {
    text-decoration-thickness: 3px;
}

/* La flecha se dibuja aparte: así gira y no depende del marcador del sistema. */
.zgm .zgm-listado-abrir::before {
    content: "";
    flex: 0 0 auto;
    width: 0.6em;
    height: 0.6em;
    border-right: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}

.zgm .zgm-listado-caja[open] > .zgm-listado-abrir::before {
    transform: rotate(45deg);
}

.zgm .zgm-listado-abrir:focus-visible {
    outline: 3px solid var(--zgm-foco);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .zgm .zgm-listado-abrir::before {
        transition: none;
    }
}

.zgm .zgm-lista {
    margin: 0 0 1em;
    padding: 0;
    list-style: none;
}

.zgm .zgm-item {
    margin: 0;
    padding: 0.7em 0;
    border-top: 1px solid #d0d0d0;
}

.zgm .zgm-item:focus {
    outline: 3px solid var(--zgm-foco);
    outline-offset: 2px;
}

.zgm .zgm-item-titulo {
    display: flex;
    align-items: center;
    gap: 0.4em;
    margin: 0 0 0.15em;
    font-size: calc(var(--zgm-t-listado) * 1.15);
    line-height: 1.3;
}

.zgm .zgm-item-titulo--hijo {
    font-size: var(--zgm-t-listado);
}

.zgm .zgm-item-meta {
    margin: 0 0 0.3em;
    color: var(--zgm-suave);
}

.zgm .zgm-item-html > :last-child {
    margin-bottom: 0;
}

.zgm .zgm-hijos {
    margin: 0.5em 0 0 1.4em;
    padding: 0 0 0 0.8em;
    border-left: 3px dashed var(--zgm-borde);
    list-style: none;
}

.zgm .zgm-item--hijo {
    padding: 0.35em 0;
    border-top: 0;
}

.zgm-ver {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: 0.3em;
    padding: 0.3em 0.9em;
    font-family: inherit;
    font-size: var(--zgm-t-listado);
    font-weight: 600;
    color: var(--zgm-acento);
    background: #fff;
    border: 2px solid var(--zgm-acento);
    border-radius: 4px;
    cursor: pointer;
}

.zgm-ver:hover {
    background: #eaf1fb;
}

.zgm-sin {
    margin-top: 1em;
    padding: 0.6em 0.9em;
    background: var(--zgm-fondo-suave);
    border-left: 4px solid var(--zgm-borde);
}

.zgm .zgm-sin-titulo {
    margin: 0 0 0.3em;
}

.zgm .zgm-listado-caja > :not(.zgm-listado-abrir):first-of-type {
    margin-top: 0.6em;
}

.zgm .zgm-lista--sin {
    margin-bottom: 0.4em;
}

.zgm-sin-motivo {
    color: var(--zgm-suave);
}

.zgm-vacio {
    padding: 0.6em 0.9em;
    background: var(--zgm-fondo-suave);
}

.zgm-pie {
    color: var(--zgm-suave);
    font-size: 0.95em;
}

/* Sin movimiento ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .zgm .leaflet-zoom-anim .leaflet-zoom-animated,
    .zgm .leaflet-fade-anim .leaflet-tile,
    .zgm .leaflet-fade-anim .leaflet-popup,
    .zgm .leaflet-pan-anim .leaflet-tile {
        transition: none !important;
    }
}

/* Contraste forzado (Windows) --------------------------------------------- */
@media (forced-colors: active) {
    .zgm .zgm-lienzo {
        border-color: CanvasText;
    }
    .zgm-llegar .zgm-boton,
    .zgm-mover,
    .zgm-ver {
        border-color: ButtonText;
    }
}

/* Impresión: fuera el mapa, dentro el listado ----------------------------- */
@media print {
    .zgm-marco,
    .zgm-capas,
    .zgm-salto,
    .zgm-estado,
    .zgm-leyenda,
    .zgm-ver,
    .zgm-otras {
        display: none !important;
    }
    .zgm-llegar .zgm-boton {
        color: #000;
        background: none;
        border: 1px solid #000;
    }
    .zgm-llegar .zgm-boton::after {
        content: " (" attr(href) ")";
        font-weight: 400;
        word-break: break-all;
    }
    /* En papel no hay nada que plegar: el listado sale entero. */
    .zgm .zgm-listado-abrir::before {
        display: none;
    }
    .zgm .zgm-listado-caja > * {
        display: revert !important;
    }
}