/**
 * Zaragoza Accesible — Plazas reservadas: listado por calle
 * Todos los colores de texto pasan 4.5:1 sobre blanco.
 * Todo el diseño aguanta zoom del 200% sin scroll horizontal.
 */

.zgz-listado {
    --zgz-texto: #1a1a1a;
    --zgz-suave: #565656;      /* 7.0:1 sobre blanco */
    --zgz-enlace: #14538f;     /* 6.5:1 sobre blanco */
    --zgz-borde: #767676;
    --zgz-fondo-suave: #f2f4f6;
    --zgz-foco: #14538f;

    color: var(--zgz-texto);
    font-size: 1rem;
    line-height: 1.6;
}

.zgz-listado a {
    color: var(--zgz-enlace);
    text-decoration: underline;
}

.zgz-listado a:hover {
    text-decoration-thickness: 2px;
}

.zgz-listado a:focus-visible,
.zgz-listado button:focus-visible,
.zgz-listado input:focus-visible {
    outline: 3px solid var(--zgz-foco);
    outline-offset: 2px;
}

/* Texto solo para lectores de pantalla */
.zgz-listado .zgz-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Buscador ---------- */

.zgz-buscador {
    background: var(--zgz-fondo-suave);
    border: 1px solid var(--zgz-borde);
    border-radius: 6px;
    padding: 1.25rem;
    margin: 0 0 2rem;
}

.zgz-buscador__etiqueta {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
}

.zgz-buscador__ayuda {
    margin: 0 0 0.75rem;
    color: var(--zgz-suave);
    font-size: 0.95rem;
}

.zgz-buscador__fila {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-start;
}

/* Envuelve el campo para poder colgar de él la lista de sugerencias. */
.zgz-buscador__campo {
    position: relative;
    flex: 1 1 260px;
    min-width: 0;
}

.zgz-buscador input[type="search"] {
    width: 100%;
    box-sizing: border-box;
    /* Hueco a la derecha para el botón de borrar. En rem, no en píxeles:
       si alguien sube el tamaño de letra, el hueco crece con el botón. */
    padding: 0.7rem 3rem 0.7rem 0.8rem;
    font-size: 1rem;
    color: var(--zgz-texto);
    background: #fff;
    border: 1px solid var(--zgz-borde);
    border-radius: 4px;
}

/* El aspa nativa de Safari y Chrome sobra: tenemos la nuestra, que sí se
   alcanza con el tabulador y sí tiene nombre accesible. Dos aspas juntas
   confunden a cualquiera. */
.zgz-buscador input[type="search"]::-webkit-search-cancel-button,
.zgz-buscador input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

/* Aviso de obras. Es lo más importante que puede leer alguien antes de
   desplazarse, así que va con más peso visual que el resto del punto.
   No depende del color: lleva «Obras en esta calle» en negrita y borde. */
.zgz-punto__obra {
    display: block;
    margin-top: 0.4rem;
    padding: 0.5rem 0.75rem;
    border-left: 4px solid #a8410b;
    background: #fdf3ec;
    font-size: 0.9rem;
    line-height: 1.45;
    color: #3d1c08;
}

.zgz-punto__obra a {
    color: #8a3409;
}

/* Plaza que hemos comprobado nosotras y el Ayuntamiento no publica.
   No se distingue solo por color: lleva texto explícito y una barra lateral. */
.zgz-punto__propia {
    display: block;
    margin-top: 0.25rem;
    padding-left: 0.6rem;
    border-left: 3px solid #a8410b;
    font-size: 0.85rem;
    color: #3d1c08;
}

/* ---------- Dónde buscar ---------- */

.zgz-ambitos {
    margin: 0.75rem 0 0;
    padding: 0;
    border: 0;
}

.zgz-ambitos__titulo {
    padding: 0;
    margin: 0 0 0.4rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--zgz-texto);
}

.zgz-ambitos__opciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}

/* Toda la etiqueta es el objetivo, no solo la casilla: 44 px de alto
   sin depender de la puntería sobre un cuadradito de 13 px. */
.zgz-ambito {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.25rem 0;
    font-size: 0.95rem;
    cursor: pointer;
}

.zgz-ambito input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    flex: none;
    cursor: pointer;
}

/* El foco se ve en la etiqueta entera, no solo en la casilla. */
.zgz-ambito:focus-within {
    outline: 3px solid var(--zgz-foco, #a8410b);
    outline-offset: 2px;
    border-radius: 4px;
}

.zgz-ambitos__ayuda {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    color: var(--zgz-suave);
}

/* ---------- Grupos de resultados ---------- */

.zgz-grupo {
    margin: 1.5rem 0 0;
}

.zgz-grupo__titulo {
    padding-bottom: 0.3rem;
    border-bottom: 2px solid var(--zgz-borde);
}

.zgz-grupo__cuantas {
    font-weight: 400;
    color: var(--zgz-suave);
}

/* Distrito de una calle. Discreto: sitúa, pero no compite con el nombre. */
.zgz-via__distrito {
    margin: 0.15rem 0 0.35rem;
    font-size: 0.9rem;
    color: var(--zgz-suave);
}

/* Pistas cuando la búsqueda no encuentra nada. */
.zgz-sugerencias-busqueda {
    margin: 0.5rem 0 1rem;
    padding-left: 1.25rem;
    list-style: disc;
    color: var(--zgz-suave);
}

.zgz-sugerencias-busqueda li {
    margin-bottom: 0.35rem;
}

/* ---------- Botón de borrar ---------- */

.zgz-buscador__borrar {
    position: absolute;
    top: 50%;
    right: 0.25rem;
    transform: translateY(-50%);

    /* 44 px de lado: el mínimo del criterio 2.5.8 de las WCAG. */
    width: 2.75rem;
    height: 2.75rem;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--zgz-suave);
    background: transparent;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}

.zgz-buscador__borrar:hover {
    color: var(--zgz-texto);
    background: rgba(0, 0, 0, 0.06);
}

/* El foco no se señala solo con color: hay contorno y separación. */
.zgz-buscador__borrar:focus-visible {
    outline: 3px solid var(--zgz-foco, #a8410b);
    outline-offset: -2px;
    color: var(--zgz-texto);
}

/* hidden por sí solo pierde contra display:flex. */
.zgz-buscador__borrar[hidden] {
    display: none;
}

/* ---------- Sugerencias del autocompletar ---------- */

.zgz-sugerencias {
    position: absolute;
    z-index: 40;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    max-height: 320px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--zgz-borde);
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.zgz-sugerencias li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.2rem 1rem;
    /* 44 px de alto: objetivo táctil */
    min-height: 44px;
    padding: 0.55rem 0.8rem;
    border-bottom: 1px solid #e6e9ec;
    cursor: pointer;
}

.zgz-sugerencias li:last-child {
    border-bottom: 0;
}

/* La opción activa se distingue por fondo Y por barra lateral, no solo por color. */
.zgz-sugerencias li[aria-selected="true"],
.zgz-sugerencias li:hover {
    background: var(--zgz-enlace);
    color: #fff;
    box-shadow: inset 4px 0 0 #0f2f52;
}

.zgz-sugerencia__nombre {
    font-weight: 600;
}

.zgz-sugerencia__detalle {
    font-size: 0.9rem;
    color: var(--zgz-suave);
    white-space: nowrap;
}

.zgz-sugerencias li[aria-selected="true"] .zgz-sugerencia__detalle,
.zgz-sugerencias li:hover .zgz-sugerencia__detalle {
    color: #e8eef5;
}

.zgz-buscador button {
    /* 44 px de alto: objetivo táctil suficiente */
    min-height: 44px;
    padding: 0.7rem 1.4rem;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background: var(--zgz-enlace);
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}

.zgz-buscador button:hover {
    background: #0f4270;
}

/* ---------- Índice alfabético ---------- */

.zgz-indice__titulo {
    font-size: 1.15rem;
    margin: 0 0 0.5rem;
}

.zgz-indice ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
}

.zgz-indice li {
    margin: 0;
}

.zgz-indice a {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 44 × 44: objetivo táctil */
    min-width: 44px;
    min-height: 44px;
    padding: 0 0.6rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--zgz-borde);
    border-radius: 4px;
    background: #fff;
}

.zgz-indice a:hover {
    background: var(--zgz-fondo-suave);
    text-decoration: underline;
}

/* ---------- Secciones por letra ---------- */

.zgz-letra {
    margin: 0 0 2.5rem;
    scroll-margin-top: 1.5rem;
}

/* Al llegar desde el índice, la sección se marca un momento para que se vea
   dónde has aterrizado. Con borde, no solo con color. */
.zgz-letra:target {
    outline: 3px solid var(--zgz-foco);
    outline-offset: 8px;
}

.zgz-letra__titulo {
    margin: 0 0 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 3px solid var(--zgz-enlace);
    font-size: 1.5rem;
}

.zgz-letra__cuenta {
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--zgz-suave);
    white-space: nowrap;
}

.zgz-volver-indice {
    margin: 1rem 0 0;
    font-size: 0.95rem;
}

.zgz-volver-indice a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* ---------- Resultados ---------- */

.zgz-resumen {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 1rem;
}

.zgz-volver {
    margin: 0 0 1.5rem;
}

.zgz-titulo {
    margin: 0 0 1rem;
}

/* ---------- Dos columnas ---------- */

/*
 * Columnas CSS y no rejilla, a propósito. La multicolumna llena primero toda
 * la columna izquierda y luego la derecha, que es como se lee un listado
 * alfabético: de la A a la M a la izquierda, de la M a la Z a la derecha.
 * Con `grid` la lectura iría en zigzag y el orden alfabético dejaría de verse.
 *
 * El ancho va en rem y no en píxeles: cuando alguien sube el tamaño de letra
 * del navegador, las columnas se convierten en una sola solas, sin depender
 * de una media query. Eso es lo que pide el criterio 1.4.10 (reflujo).
 */
.zgz-columnas {
    columns: 24rem 2;
    column-gap: 2.5rem;
    column-rule: 1px solid #d5d9dd;
}

/* Que una calle no se parta por la mitad entre dos columnas. */
.zgz-columnas .zgz-via {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}

/* Una sola columna en pantallas estrechas. */
@media (max-width: 48rem) {
    .zgz-columnas {
        columns: 1;
        column-rule: 0;
    }
}

/* ---------- Una vía ---------- */

.zgz-via {
    border-top: 1px solid #d5d9dd;
    padding: 1.25rem 0;
    margin: 0;
}

.zgz-via__nombre {
    margin: 0 0 0.25rem;
    font-size: 1.2rem;
}

.zgz-via__total {
    margin: 0 0 0.75rem;
    color: var(--zgz-suave);
    font-size: 0.95rem;
}

.zgz-via__puntos {
    list-style: none;
    margin: 0;
    padding: 0;
}

.zgz-via__puntos li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid #e6e9ec;
}

.zgz-via__puntos li:last-child {
    border-bottom: 0;
}

.zgz-punto__direccion {
    font-weight: 700;
    flex: 0 0 auto;
}

.zgz-punto__datos {
    color: var(--zgz-suave);
    flex: 1 1 auto;
}

.zgz-punto__ruta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* ---------- Pie ---------- */

/* Aviso de datos envejecidos: no se transmite solo por color. Lleva la
   palabra «Atención» y una barra lateral, para que se distinga también
   en escala de grises y con hojas de estilo de alto contraste. */
.zgz-fuente__aviso {
    border-left: 4px solid #a8410b;
    background: #fdf3ec;
    padding: 0.75rem 1rem;
    margin: 0 0 1rem;
    color: #3d1c08;
}

.zgz-fuente {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 2px solid var(--zgz-borde);
    font-size: 0.95rem;
    color: var(--zgz-suave);
}

.zgz-fuente p {
    margin: 0 0 0.4rem;
}

/* ---------- Móvil ---------- */

@media (max-width: 34rem) {
    .zgz-via__puntos li {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
    }
}

/* ---------- Preferencias del sistema ---------- */

@media (prefers-contrast: more) {
    .zgz-listado {
        --zgz-suave: #1a1a1a;
        --zgz-borde: #1a1a1a;
    }
}

@media print {
    .zgz-columnas {
        columns: 1;
        column-rule: 0;
    }

    .zgz-sugerencias,
    .zgz-buscador,
    .zgz-indice,
    .zgz-volver-indice,
    .zgz-punto__ruta {
        display: none;
    }
}