/* -------------------------------------------------------------------------
   Zaragoza Transporte 3.9

   Los tamaños de letra salen de variables que fija el panel de WordPress.
   Los valores de aquí son solo el respaldo por si el ajuste no llega.

   Todos los colores de texto están por encima de 4,5:1 sobre blanco
   y los gráficos por encima de 3:1 (WCAG 1.4.3 y 1.4.11).
   ------------------------------------------------------------------------- */

.zt-wrap {
    /* Tamaños: los sobrescribe el plugin */
    --zt-t-controles: 17px;
    --zt-t-avisos: 17px;
    --zt-t-leyenda: 16px;
    --zt-t-titulos: 22px;
    --zt-t-listado: 17px;
    --zt-t-popup: 16px;
    --zt-t-notas: 15px;

    /* Colores */
    --zt-bus: #14539a;       /* 7,68:1 sobre blanco */
    --zt-tranvia: #a4262c;   /* 7,26:1 */
    --zt-taxi: #7a5200;      /* 6,92:1 */
    --zt-prov: #8a4500;      /* 7,0:1 — naranja oscuro para lo provisional */
    --zt-texto: #1a1a1a;
    --zt-borde: #6b6b6b;     /* 5,33:1 */
    --zt-fondo-suave: #f4f4f5;
    --zt-error: #a4262c;
    --zt-foco: #0b5ed7;

    color: var(--zt-texto);
    line-height: 1.6;
}

.zt-wrap *:focus-visible {
    outline: 3px solid var(--zt-foco);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Solo para lectores de pantalla ------------------------------------------ */
.zt-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;
}

/* Saltar el mapa ---------------------------------------------------------- */
.zt-skip {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.zt-skip:focus,
.zt-skip:focus-visible {
    position: static;
    display: inline-block;
    width: auto;
    height: auto;
    margin-bottom: 0.75rem;
    padding: 0.6em 1em;
    background: #fff;
    color: var(--zt-bus);
    border: 2px solid var(--zt-bus);
    border-radius: 4px;
    font-size: var(--zt-t-controles);
    font-weight: 700;
    text-decoration: underline;
}

/* Barra de herramientas --------------------------------------------------- */
.zt-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    margin-bottom: 0.75rem;
    font-size: var(--zt-t-controles);
}

.zt-field {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    flex: 1 1 18rem;
}

.zt-field label {
    font-size: var(--zt-t-controles);
    font-weight: 700;
    line-height: 1.4;
}

/* Especificidad alta a propósito: los temas suelen fijar una altura a los
   select y ahí es donde se cortaba el texto al subir el tamaño de letra. */
.zt-wrap .zt-select,
.zt-wrap .zt-input {
    font-family: inherit;
    font-size: var(--zt-t-controles);
    line-height: 1.5;
    padding: 0.65em 0.7em;
    height: auto;
    min-height: calc(var(--zt-t-controles) * 1.5 + 1.6em);
    box-sizing: border-box;
    border: 2px solid var(--zt-borde);
    border-radius: 4px;
    background: #fff;
    color: var(--zt-texto);
    width: 100%;
    max-width: 34rem;
    overflow: visible;
    text-overflow: ellipsis;
}

/* Sitio para la flecha nativa, que si no se come la última letra. */
.zt-wrap .zt-select {
    padding-right: 2.4em;
}

.zt-ayuda {
    font-size: calc(var(--zt-t-listado) * 0.92);
    margin: 0.25em 0 0;
    color: #4a4a4a;
}

/* Botones ----------------------------------------------------------------- */
.zt-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    min-height: 44px;
    padding: 0.55em 1em;
    font-family: inherit;
    font-size: var(--zt-t-controles);
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
    background: var(--zt-bus);
    border: 2px solid var(--zt-bus);
    border-radius: 4px;
    cursor: pointer;
}

.zt-btn:hover {
    background: #0e3f77;
    border-color: #0e3f77;
}

.zt-btn[disabled] {
    background: #5a5a5a;
    border-color: #5a5a5a;
    cursor: progress;
}

.zt-btn--sec {
    color: var(--zt-bus);
    background: #fff;
    border-color: var(--zt-bus);
    font-size: var(--zt-t-listado);
    padding: 0.45em 0.8em;
}

.zt-btn--sec:hover {
    background: #eaf1fb;
}

.zt-btn-icono {
    font-size: 1.1em;
}

.zt-enlace {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.45em 0.2em;
    font-size: var(--zt-t-listado);
    color: var(--zt-bus);
    font-weight: 600;
    text-decoration: underline;
}

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

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

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

/* Mapa -------------------------------------------------------------------- */
.zt-mapa {
    width: 100%;
    height: min(70vh, 620px);
    min-height: 320px;
    border: 2px solid var(--zt-borde);
    border-radius: 4px;
    z-index: 0;
}

/* Desde la 3.8 los marcadores no llevan CSS: las tres formas se dibujan en el
   lienzo, con la misma geometría que el resto de mapas de la web. Lo que sí
   se sigue enseñando aquí es cuándo el mapa no está o el fondo no ha cargado. */
   Los iconos propios de Zaragoza Mapas 1.2 también se dibujan en el lienzo:
   aquí solo hay CSS para su muestra en la leyenda. */

/* Sin Zaragoza Mapas no hay mapa. No se deja un hueco: se dice, y el listado
   de debajo, que es la alternativa de verdad, sigue completo. */
.zt-sin-mapa {
    margin: 0.6rem 0 1.5rem;
    padding: 0.9em 1em;
    border: 2px solid var(--zt-borde);
    border-radius: 4px;
    background: var(--zt-fondo-suave);
    font-size: var(--zt-t-avisos);
}

/* El fondo no ha cargado pero las paradas sí: trama, para que se vea que el
   mapa está vivo y lo que falta es la imagen de debajo. */
.zt-mapa.zt-sin-fondo {
    background-color: var(--zt-fondo-suave);
    background-image: repeating-linear-gradient(45deg,
        rgba(0, 0, 0, 0.06) 0 8px, transparent 8px 16px);
}

/* Leyenda ----------------------------------------------------------------- */
.zt-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6em 1.2em;
    margin: 0.6rem 0 1.5rem;
    font-size: var(--zt-t-leyenda);
}

.zt-leyenda-item {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
}

/* Las muestras de la leyenda son los SVG que dibuja Zaragoza Mapas, los
   mismos que se ven en el lienzo. Aquí solo se colocan. */
.zt-leyenda-item svg {
    flex: none;
    width: 1.4em;
    height: 1.4em;
}

/* La imagen propia de un tipo (Zaragoza Mapas 1.2), con la misma caja que el
   SVG. `object-fit: contain` la encaja sin deformarla, y `max-width: none`
   evita que el tema la encoja con su `img { max-width: 100% }`. Va con
   alt="" porque el nombre del tipo está escrito justo al lado. */
.zt-leyenda-item .zt-forma-img {
    flex: none;
    width: 1.4em;
    height: 1.4em;
    max-width: none;
    object-fit: contain;
}

/* El contorno blanco del icono, para que se vea sobre cualquier fondo. Es el
   mismo efecto que en el mapa (ocho copias blancas alrededor), aquí con
   sombras de un píxel. */
.zt-leyenda-item .zt-forma-img--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);
}

/* Popup ------------------------------------------------------------------- */

/* Mientras hay un globo abierto no se enseña ningún aviso flotante: en
   escritorio el ratón pasa por encima de otras paradas y salía un segundo
   bocadillo por debajo. */
.zt-mapa.zt-con-popup .leaflet-tooltip {
    display: none !important;
}

/* El ancho lo calcula el JS y se le pasa a Leaflet como opción. Aquí NO se
   toca `width`: Leaflet lo fija en píxeles y pisarlo le rompe el cálculo (y el
   globo sale estrechísimo). `max-width` sí es seguro, y es la red de seguridad
   por si el tema mete mano. */
.zt-wrap .leaflet-popup-content-wrapper {
    max-width: min(320px, calc(100vw - 3rem));
    box-sizing: border-box;
}

.zt-wrap .leaflet-popup-content {
    margin: 0.85em 1.05em;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: break-word;
}

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

.leaflet-popup-content .zt-popup {
    font-size: var(--zt-t-popup);
    line-height: 1.5;
}

.zt-popup h3.zt-popup-titulo {
    margin: 0 0 0.4em;
    font-size: calc(var(--zt-t-popup) * 1.15);
    line-height: 1.3;
}

.zt-popup p {
    margin: 0 0 0.4em;
    font-size: inherit;
}

.zt-popup-lineas {
    font-weight: 600;
}

/* El hueco arranca con la altura aproximada de un resultado real, para que el
   globo no pegue un salto cuando llegan los tiempos. */
.zt-popup .zt-tiempos {
    min-height: 3.4em;
}

.zt-tiempos-titulo {
    margin: 0.5em 0 0.2em;
    font-weight: 700;
}

.zt-tiempos-lista {
    margin: 0 0 0.4em;
    padding-left: 1.2em;
}

.zt-etiqueta {
    display: inline-block;
    padding: 0 0.4em;
    background: #1a7f37;
    color: #fff;
    border-radius: 3px;
    font-size: 0.9em;
    font-weight: 600;
}

.zt-avisos-titulo {
    margin: 0.5em 0 0.2em;
    font-weight: 700;
}

.zt-avisos {
    margin: 0 0 0.4em;
    padding-left: 1.2em;
}

/* Dentro del globo manda el tamaño «Ventanas del mapa», no el del listado.
   Si no, subir la letra del listado inflaba también los botones del globo. */
.zt-popup .zt-btn,
.zt-popup .zt-btn--sec,
.zt-popup .zt-enlace,
.zt-popup a {
    font-size: var(--zt-t-popup);
}

.zt-popup .zt-btn {
    min-height: 0;
    padding: 0.4em 0.7em;
    line-height: 1.3;
    width: 100%;
    justify-content: center;
    text-align: center;
}

.zt-popup .zt-popup-acciones {
    margin-top: 0.6em;
}

/* Recorridos dentro del globo --------------------------------------------- */
.zt-recorridos:empty {
    display: none;
}

.zt-recorridos-titulo {
    margin: 0.6em 0 0.2em;
    font-weight: 700;
}

.zt-recorridos-lista {
    list-style: none;
    margin: 0 0 0.4em;
    padding: 0;
}

.zt-recorridos-lista li {
    display: flex;
    align-items: baseline;
    gap: 0.5em;
    margin-bottom: 0.2em;
}

/* La muestra de color es un apoyo: el color va también escrito al lado. */
.zt-muestra {
    display: inline-block;
    width: 1.1em;
    height: 0.35em;
    border-radius: 2px;
    flex: none;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.zt-recorridos-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
    margin: 0.5em 0 0;
}

.zt-nota {
    margin: 0.5em 0 0;
}

/* El mapa recibe el foco al elegir una línea: tiene que verse. */
.zt-mapa:focus-visible {
    outline: 4px solid var(--zt-foco);
    outline-offset: 3px;
}

/* Accesibilidad del servicio ----------------------------------------------
   Bloque propio, fuera del mapa: es información general del servicio, no de
   una parada concreta. */
.zt-acc {
    margin: 0 0 2rem;
    padding: 1em 1.2em;
    background: #eef7f0;
    border-left: 6px solid #1a7f37;
    border-radius: 4px;
    font-size: var(--zt-t-listado);
}

.zt-acc-titulo {
    margin: 0 0 0.5em;
    font-size: calc(var(--zt-t-titulos) * 0.95);
    line-height: 1.3;
}

.zt-acc-item + .zt-acc-item {
    margin-top: 0.9em;
}

.zt-acc-tipo {
    margin: 0 0 0.15em;
    font-size: 1em;
    font-weight: 700;
}

.zt-acc-texto {
    margin: 0;
}

.zt-acc-fuente {
    margin: 0.9em 0 0;
    font-size: 0.88em;
    color: #3c5244;
}

/* Parada provisional ------------------------------------------------------ */
.zt-prov {
    margin: 0.5em 0 0.7em;
    padding: 0.6em 0.8em;
    background: #fff4e8;
    border-left: 5px solid var(--zt-prov);
    border-radius: 3px;
}

.zt-prov-titulo {
    margin: 0 0 0.2em;
    font-weight: 700;
    color: #7a3d00;
}

.zt-prov-motivo,
.zt-prov-hasta {
    margin: 0 0 0.2em;
}

.zt-prov-fuente {
    margin: 0.3em 0 0;
    font-size: 0.88em;
    color: #5c4a3a;
}

/* El aviso plegado de cada parada del listado (3.12.1) */
.zt-prov--desplegable {
    padding: 0;
}

.zt-prov-resumen {
    cursor: pointer;
    padding: 0.6em 0.8em;
    min-height: 44px;
    box-sizing: border-box;
    display: list-item;
    list-style-position: inside;
    font-weight: 700;
    color: #7a3d00;
}

.zt-prov-resumen:focus-visible {
    outline: 3px solid #14539a;
    outline-offset: 2px;
}

.zt-prov-cuerpo {
    padding: 0 0.8em 0.6em;
}

/* Listado en texto -------------------------------------------------------- */
.zt-listado {
    margin-top: 2rem;
    font-size: var(--zt-t-listado);
}

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

.zt-wrap .zt-listado .zt-listado-h2 {
    font-size: calc(var(--zt-t-titulos) * 1.1) !important;
    line-height: 1.25;
    margin-bottom: 0.5em;
}

.zt-resultados {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

.zt-resultado {
    padding: 0.9em 1em;
    background: #fff;
    border: 1px solid var(--zt-borde);
    border-left-width: 6px;
    border-radius: 4px;
    font-size: var(--zt-t-listado);
}

.zt-resultado--bus { border-left-color: var(--zt-bus); }
.zt-resultado--tranvia { border-left-color: var(--zt-tranvia); }
.zt-resultado--taxi { border-left-color: var(--zt-taxi); }
.zt-resultado--prov { border-left-color: var(--zt-prov); border-left-width: 8px; }

.zt-resultado-tipo {
    margin: 0;
    font-size: 0.82em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #4a4a4a;
}

.zt-orden {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

/*
 * El tamaño de los títulos lo elige quien administra la web (panel de
 * Transporte). Muchos temas fijan el tamaño de todos los <h3> con un selector
 * más fuerte que una sola clase y el ajuste no surtía efecto (3.12.1): por eso
 * este selector es más específico y el tamaño lleva !important. Solo el
 * tamaño; lo demás sigue siendo del tema.
 */
.zt-wrap .zt-resultado .zt-resultado-titulo {
    margin: 0.15em 0 0.3em;
    font-size: var(--zt-t-titulos) !important;
    line-height: 1.3;
}

.zt-resultado-lineas,
.zt-resultado-distancia {
    margin: 0 0 0.4em;
    font-size: inherit;
}

.zt-resultado-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    align-items: center;
    margin: 0.6em 0 0;
}

.zt-resultado .zt-tiempos {
    margin-top: 0.7em;
    padding: 0.6em 0.8em;
    background: var(--zt-fondo-suave);
    border-radius: 4px;
    font-size: inherit;
}

/* Índice de líneas -------------------------------------------------------- */
.zt-indice {
    margin-top: 2rem;
}

.zt-indice-titulo {
    font-size: calc(var(--zt-t-titulos) * 0.9);
    line-height: 1.3;
    margin-bottom: 0.3em;
}

.zt-indice-lista {
    list-style: none;
    margin: 0.8em 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
}

.zt-fuente {
    margin-top: 1.5rem;
    font-size: var(--zt-t-notas);
    line-height: 1.5;
    color: #4a4a4a;
}

/* Preferencias del sistema ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .zt-wrap * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

@media (prefers-contrast: more) {
    .zt-select,
    .zt-input,
    .zt-resultado {
        border-color: #000;
    }
}

@media (max-width: 600px) {
    .zt-mapa {
        height: min(75vh, 560px);
    }

    .zt-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .zt-btn {
        justify-content: center;
    }

    .zt-resultado-acciones .zt-btn,
    .zt-resultado-acciones .zt-enlace {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* =========================================================================
 * Alteraciones del servicio (3.13.0)
 *
 * En el globo de una parada y debajo del listado de una línea. El detalle
 * entero vive en su propia página; esto solo avisa y enlaza.
 * ====================================================================== */

.zt-popup-alt {
    margin: .5em 0 0;
    padding: .45em .6em;
    border-left: 4px solid #b35c00;
    background: #fff6e8;
}

/* La marca no lleva significado: el texto ya dice que hay alteraciones. Por
   eso va con aria-hidden y no es la única pista. */
.zt-popup-alt-marca {
    display: inline-block;
    min-width: 1.35em;
    height: 1.35em;
    line-height: 1.35em;
    margin-right: .2em;
    border-radius: 50%;
    background: #b35c00;
    color: #fff;
    font-weight: 700;
    text-align: center;
}

.zt-alt-linea {
    margin: 1.2em 0 0;
    padding: .8em 1em;
    border: 2px solid #b35c00;
    border-radius: 8px;
    background: #fff6e8;
}

.zt-alt-titulo {
    margin: 0 0 .5em;
}

.zt-alt-lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

.zt-alt-item + .zt-alt-item {
    margin-top: .8em;
    padding-top: .8em;
    border-top: 1px solid rgba(179, 92, 0, .35);
}

.zt-alt-item-titulo,
.zt-alt-item-cuando {
    margin: 0;
}

.zt-alt-item-cuando {
    font-size: .95em;
}

.zt-alt-mas {
    margin: .8em 0 0;
}

/* Impreso, el aviso se sigue leyendo aunque no haya fondos. */
@media print {
    .zt-alt-linea,
    .zt-popup-alt {
        background: transparent;
    }
}