/* Hallmark · genre: modern-minimal · macrostructure: Map / Diagram · theme: custom institucional v2
 * paper-band: light · display-style: grotesk + mono-paired · accent-hue: guinda oklch(40% 0.155 6)
 * enrichment: none (tipografía y datos) · nav/footer: heredados del layout institucional
 * motion: hairline-hover · skeleton-shimmer · lightbox-fade
 * states: default · hover · focus · active · disabled · loading · error · empty
 * nav interno: vistas de primer nivel (Mapa y datos / Galería / Mi colonia,
 *   con hash propio) — barra de pills estilo Apple TV+: fondo
 *   neutro, pills de ancho natural, la activa se rellena en guinda sólido,
 *   sticky al borde superior
 *   + tab strip (Lista / Filtros) en el panel izquierdo, deliberadamente
 *     subordinado: sigue en gris sobre papel para no competir con el primer nivel
 * expediente: datos → resultados del proyecto (último valor, sin historial)
 * galería: vista completa, grid fluido 4:3 desde public/img/galeria_fotos + visor modal
 * logros: tarjeta rotatoria sobre el mapa + celdas guinda cada 8 fotos (logros.json)
 * zona: colonias/comunidades listan sus actividades bajo el conteo del filtro
 * vista colonia: hero centrado (ilustración SVG a mano: colonias + calles + pines)
 *   + selectores lado a lado → banda de panorama (cifras con icono | ranking 2 col)
 *   → respuesta (chips con icono, títulos de proyecto sticky, vacío ilustrado)
 * enrichment: Tier B — SVG a mano con tokens (--trazo, --acento); sin assets externos
 * móvil (≤768px): pila vertical lienzo → panel izquierdo → expediente → pie, scroll de página
 * pre-emit critique: P5 H5 E5 S5 R5 V4
 */

/* ================================ */
/* TOKENS                           */
/* ================================ */

:root {
    /* Superficies: blanco tintado hacia el guinda, nunca #fff puro. */
    --papel: oklch(98.6% 0.004 6);
    --papel-2: oklch(96.4% 0.006 6);
    --papel-3: oklch(93.8% 0.008 6);

    --tinta: oklch(22% 0.02 6);
    --tinta-2: oklch(46% 0.016 6);
    --tinta-3: oklch(63% 0.012 6);

    --regla: oklch(89% 0.008 6);
    --regla-firme: oklch(79% 0.012 6);

    /* Guinda institucional del municipio: rgb(144 12 63). */
    --acento: oklch(40% 0.155 6);
    --acento-oscuro: oklch(33% 0.14 6);
    --acento-tinte: oklch(95.5% 0.022 6);
    --acento-papel: oklch(99% 0 0);
    --foco: oklch(50% 0.2 6);

    /* Verde de mapa: cúmulos y trazos del filtro geográfico (#1e5c50 en el JS). */
    --trazo: #1e5c50;
    --trazo-tinte: color-mix(in srgb, #1e5c50 18%, white);

    --fuente-display: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
    --fuente-cuerpo: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
    --fuente-dato: 'Montserrat', ui-sans-serif, system-ui, sans-serif;

    --espacio-3xs: 0.25rem;
    --espacio-2xs: 0.375rem;
    --espacio-xs: 0.5rem;
    --espacio-sm: 0.75rem;
    --espacio-md: 1rem;
    --espacio-lg: 1.5rem;
    --espacio-xl: 2rem;

    --texto-2xs: 0.6875rem;
    --texto-xs: 0.75rem;
    --texto-sm: 0.8125rem;
    --texto-md: 0.875rem;
    --texto-lg: 1.0625rem;
    --texto-xl: 1.25rem;
    --texto-2xl: 1.625rem;

    /* Superficie del visor: sobre ella el papel institucional no aplica. */
    --visor-fondo: oklch(18% 0.02 6 / 0.94);
    --visor-tenue: oklch(100% 0 0 / 0.6);
    --visor-borde: oklch(100% 0 0 / 0.25);
    --visor-hover: oklch(100% 0 0 / 0.12);
    --visor-activo: oklch(100% 0 0 / 0.2);

    --radio: 4px;
    --radio-chip: 2px;

    --salida: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-corta: 140ms;
    --dur-media: 220ms;

    --capa-flotante: 20;
    --capa-vistas: 40;
    --capa-visor: 60;

    /* Lo calcula el JS a partir del alto real del encabezado institucional. */
    --alto-cromo: 190px;
}

/* ================================ */
/* ARMAZÓN — consola de tres paneles */
/* ================================ */

html,
body {
    overflow-x: clip;
}

.consola {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: calc(100dvh - var(--alto-cromo));
    min-height: 34rem;
    background-color: var(--papel);
    border-top: 1px solid var(--regla);
    border-bottom: 1px solid var(--regla);
    color: var(--tinta);
    font-family: var(--fuente-cuerpo);
}

.consola-cuerpo {
    display: grid;
    grid-template-columns: 20rem minmax(0, 1fr) 23rem;
    min-height: 0;
}

/* Las vistas alternan por hidden; sin esta regla el display: grid ganaría. */
.consola-cuerpo[hidden] {
    display: none;
}

/* ================================ */
/* VISTAS — Mapa y datos / Galería  */
/* ================================ */

/* Barra de pills, fondo neutro: cada vista es una cápsula de ancho natural que
   flota sobre el papel, como la barra superior de Apple TV+. La activa se
   rellena en guinda sólido; las demás son texto plano hasta el hover. */
.vistas {
    position: sticky;
    top: 0;
    z-index: var(--capa-vistas);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--espacio-3xs);
    overflow-x: auto;
    padding: var(--espacio-xs) var(--espacio-sm);
    border-bottom: 1px solid var(--regla);
    background-color: var(--papel-2);
    scrollbar-width: none;
}

/* Cápsula guinda que Anime.js desliza y redimensiona detrás de la pill activa
   (core.js, moverIndicadorVistas). El color de relleno vive aquí, no en la
   pill activa: así el cambio se ve como un morph y no como un salto. Sin
   transition CSS: la anima Anime.js con easing elástico. */
.vista-indicador {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    border-radius: 999px;
    background-color: var(--acento);
    pointer-events: none;
}

.vista-tab {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    padding: 0.5rem var(--espacio-md);
    border-radius: 999px;
    font-family: var(--fuente-dato);
    font-size: var(--texto-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--tinta-2);
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--dur-corta) var(--salida),
                background-color var(--dur-corta) var(--salida);
}

.vista-tab:hover {
    background-color: var(--papel-3);
    color: var(--tinta);
}

.vista-tab:focus-visible {
    outline: 2px solid var(--foco);
    outline-offset: 2px;
}

.vista-tab:active {
    background-color: var(--regla);
}

/* El relleno guinda de la pestaña activa lo pinta .vista-indicador debajo;
   aquí solo cambia el color del texto para que quede legible sobre él. El
   fondo se anula explícito: si no, el hover gris de la regla base se ve
   encima del guinda del indicador. */
.vista-tab[aria-selected='true'],
.vista-tab[aria-selected='true']:hover {
    background-color: transparent;
    color: var(--acento-papel);
}

.vista-tab[aria-selected='true']:focus-visible {
    outline-color: var(--foco);
}

/* Sin actividad seleccionada el expediente se oculta y el mapa gana su espacio. */
.consola-cuerpo.sin-expediente {
    grid-template-columns: 20rem minmax(0, 1fr);
}

.consola-cuerpo.sin-expediente .panel-derecho {
    display: none;
}

.panel {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    background-color: var(--papel);
}

.panel-izquierdo {
    border-right: 1px solid var(--regla);
}

.panel-derecho {
    border-left: 1px solid var(--regla);
    background-color: var(--papel-2);
}

/* Título de la página: lo rotula el encabezado institucional, pero el documento
   necesita su encabezado para lectores de pantalla. */
.solo-lectores {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ================================ */
/* PANEL IZQUIERDO — tabs           */
/* ================================ */

/* Bajo las tabs: solo filtra proyectos, se oculta al entrar a un proyecto. */
.panel-buscador {
    flex-shrink: 0;
    padding: var(--espacio-xs) var(--espacio-sm);
    border-bottom: 1px solid var(--regla);
    background-color: var(--papel-2);
}

.panel-buscador[hidden] {
    display: none;
}

.campo-buscador {
    position: relative;
}

.campo-buscador svg {
    position: absolute;
    top: 50%;
    left: 0.625rem;
    translate: 0 -50%;
    color: var(--tinta-3);
    pointer-events: none;
}

.buscador {
    width: 100%;
    padding: 0.4375rem 0.75rem 0.4375rem 2rem;
    border: 1px solid var(--regla-firme);
    border-radius: var(--radio);
    background-color: var(--papel);
    font-family: var(--fuente-cuerpo);
    font-size: var(--texto-md);
    color: var(--tinta);
    outline: none;
    transition: border-color var(--dur-corta) var(--salida);
}

.buscador::placeholder {
    color: var(--tinta-3);
}

.buscador:hover {
    border-color: var(--tinta-3);
}

.buscador:focus-visible {
    border-color: var(--acento);
    outline: 2px solid var(--foco);
    outline-offset: 1px;
}

.tabs {
    display: flex;
    flex-shrink: 0;
    border-bottom: 1px solid var(--regla);
    background-color: var(--papel-2);
}

.tab {
    flex: 1;
    padding: var(--espacio-xs) var(--espacio-sm);
    border-bottom: 2px solid transparent;
    font-family: var(--fuente-dato);
    font-size: var(--texto-2xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tinta-3);
    cursor: pointer;
    transition: color var(--dur-corta) var(--salida),
                border-color var(--dur-corta) var(--salida),
                background-color var(--dur-corta) var(--salida);
}

.tab:hover {
    background-color: var(--papel-3);
    color: var(--tinta-2);
}

.tab:focus-visible {
    outline: 2px solid var(--foco);
    outline-offset: -2px;
}

.tab:active {
    color: var(--acento-oscuro);
}

.tab[aria-selected='true'] {
    border-bottom-color: var(--acento);
    background-color: var(--papel);
    color: var(--acento);
}

/* Cada tab ocupa el alto libre del panel y administra su propio scroll. */
.tab-cuerpo {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
}

.tab-cuerpo[hidden] {
    display: none;
}

/* ================================ */
/* PANEL IZQUIERDO — filtros        */
/* ================================ */

/* Con scroll propio: si no, el contenido desborda el panel y se monta sobre el
   pie de la página. El precio es que Choices recorta su desplegable al borde
   inferior; por eso los selectores van arriba, donde tienen sitio para abrirse. */
.filtros {
    gap: var(--espacio-md);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--espacio-md);
}

/* Con un desplegable de Choices abierto, el scroll propio del panel recorta
   la parte que se abre hacia arriba (colonia, comunidad); se suelta el
   overflow mientras esté abierto para que no se oculte. */
.filtros:has(.choices.is-open) {
    overflow-y: visible;
}

.filtros-nota {
    font-size: var(--texto-xs);
    line-height: 1.5;
    color: var(--tinta-3);
}

.campo-etiqueta {
    display: block;
    margin-bottom: var(--espacio-2xs);
    font-family: var(--fuente-dato);
    font-size: var(--texto-2xs);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tinta-2);
}

.campo-conteo {
    margin-top: var(--espacio-2xs);
    font-family: var(--fuente-dato);
    font-size: var(--texto-2xs);
    font-variant-numeric: tabular-nums;
    color: var(--trazo);
}

.campo-conteo-error {
    color: var(--acento);
}

.campo-conteo:empty {
    display: none;
}

/* Spinner mini: junto a la etiqueta, visible solo mientras el select de abajo
   sigue deshabilitado (cargando su índice). Misma animación que .spinner. */
.mini-spinner {
    display: none;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    border: 2px solid var(--regla-firme);
    border-top-color: var(--acento);
    animation: girar 0.7s linear infinite;
}

.campo-filtro:has(select:disabled) .mini-spinner {
    display: inline-block;
    vertical-align: middle;
}

/* Lista de la zona: qué se hizo en la colonia o comunidad elegida. Con su
   propio tope de alto para no sepultar las capas del final del panel. */
.zona-lista {
    max-height: 15rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin-top: var(--espacio-2xs);
    border: 1px solid var(--regla);
    border-radius: var(--radio);
    background-color: var(--papel);
}

.zona-lista:empty {
    display: none;
}

/* En el expediente del histórico (panel de escritorio #expedienteHistorico o
   modal #expedienteModalCuerpo, ambos .expediente) la lista es todo el
   contenido del panel, no comparte espacio con capas debajo: su propio scroll
   interno solo atrapaba el gesto (overscroll-behavior: contain) sin dejarlo
   llegar al scroll de .expediente que sí se ve, así tocar una fila para bajar
   la página no hacía nada. */
.expediente .zona-lista {
    max-height: none;
    overflow-y: visible;
    overscroll-behavior: auto;
}

.zona-fila {
    padding: var(--espacio-xs) var(--espacio-sm);
    border-bottom: 1px solid var(--regla);
    cursor: pointer;
    transition: background-color var(--dur-corta) var(--salida);
}

.zona-fila:last-child {
    border-bottom: 0;
}

.zona-fila:hover {
    background-color: var(--papel-2);
}

.zona-fila:focus-visible {
    outline: 2px solid var(--foco);
    outline-offset: -2px;
}

.zona-fila:active {
    background-color: var(--papel-3);
}

/* Fila de solo lectura (acciones del histórico): mismo listado, sin look de botón. */
.zona-fila-estatica {
    cursor: default;
}

.zona-fila-estatica:hover,
.zona-fila-estatica:active {
    background-color: transparent;
}

.zona-titulo {
    font-size: var(--texto-xs);
    font-weight: 600;
    line-height: 1.35;
    color: var(--tinta);
    overflow-wrap: anywhere;
}

.zona-datos {
    margin-top: 0.125rem;
    font-family: var(--fuente-dato);
    font-size: var(--texto-2xs);
    font-variant-numeric: tabular-nums;
    color: var(--tinta-3);
    overflow-wrap: anywhere;
}

.capas {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    gap: var(--espacio-3xs);
    padding-top: var(--espacio-xs);
    border-top: 1px solid var(--regla);
}

.capas .campo-etiqueta {
    margin-bottom: var(--espacio-2xs);
    padding: 0;
}

.capas-regla {
    margin: var(--espacio-3xs) 0;
    border: 0;
    border-top: 1px solid var(--regla);
}

.capa {
    display: flex;
    align-items: center;
    gap: var(--espacio-xs);
    margin-left: -0.375rem;
    padding: 0.25rem 0.375rem;
    border-radius: var(--radio);
    font-size: var(--texto-sm);
    color: var(--tinta-2);
    cursor: pointer;
    transition: background-color var(--dur-corta) var(--salida),
                color var(--dur-corta) var(--salida);
}

.capa:hover {
    background-color: var(--papel-3);
    color: var(--tinta);
}

.capa:has(:focus-visible) {
    outline: 2px solid var(--foco);
    outline-offset: 1px;
}

.capa:has(:checked) {
    color: var(--trazo);
    font-weight: 600;
}

.capa:has(:disabled) {
    color: var(--tinta-3);
    cursor: progress;
}

.capa input {
    flex-shrink: 0;
    width: 0.875rem;
    height: 0.875rem;
    accent-color: var(--trazo);
    cursor: inherit;
}

.capa input:focus-visible {
    outline: none;
}

.capa img {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    object-fit: contain;
}

.capa-opacidad {
    display: flex;
    align-items: center;
    gap: var(--espacio-xs);
    margin: 0 0 var(--espacio-2xs) 1.375rem;
}

.capa-opacidad label {
    font-family: var(--fuente-dato);
    font-size: var(--texto-2xs);
    color: var(--tinta-3);
    white-space: nowrap;
}

.capa-opacidad input[type='range'] {
    flex: 1;
    accent-color: var(--trazo);
}

.capa-opacidad output {
    min-width: 2.25rem;
    font-family: var(--fuente-dato);
    font-size: var(--texto-2xs);
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--tinta-3);
}

.categorias-acciones {
    display: flex;
    gap: var(--espacio-2xs);
}

/* No debe romper el layout flex de .capas: sus hijos siguen siendo los
   elementos que cuentan para el gap entre filas. */
#listaCategorias {
    display: contents;
}

.boton-limpiar {
    align-self: flex-start;
    flex-shrink: 0;
    padding: 0.4375rem 0.75rem;
    border: 1px solid var(--regla-firme);
    border-radius: var(--radio);
    background-color: var(--papel);
    font-family: var(--fuente-cuerpo);
    font-size: var(--texto-xs);
    font-weight: 600;
    color: var(--tinta-2);
    cursor: pointer;
    transition: border-color var(--dur-corta) var(--salida),
                background-color var(--dur-corta) var(--salida),
                color var(--dur-corta) var(--salida);
}

.boton-limpiar:hover:not(:disabled) {
    border-color: var(--acento);
    background-color: var(--acento-tinte);
    color: var(--acento);
}

.boton-limpiar:focus-visible {
    outline: 2px solid var(--foco);
    outline-offset: 1px;
}

.boton-limpiar:active:not(:disabled) {
    color: var(--acento-oscuro);
}

.boton-limpiar:disabled {
    color: var(--tinta-3);
    cursor: not-allowed;
}

/* Filtros geográficos: selectores Choices.js con el lenguaje del buscador. */
.campo-filtro {
    flex-shrink: 0;
}

/* Estado de carga / error: el select nativo antes de montar Choices. */
.campo-filtro select:disabled {
    width: 100%;
    padding: 0.4375rem 0.75rem;
    border: 1px solid var(--regla-firme);
    border-radius: var(--radio);
    background-color: var(--papel-2);
    font-family: var(--fuente-cuerpo);
    font-size: var(--texto-md);
    color: var(--tinta-3);
    cursor: not-allowed;
}

.campo-filtro .choices {
    margin-bottom: 0;
}

.campo-filtro .choices__inner {
    min-height: 0;
    padding: 0.4375rem 0.75rem;
    border: 1px solid var(--regla-firme);
    border-radius: var(--radio);
    background-color: var(--papel);
    font-family: var(--fuente-cuerpo);
    font-size: var(--texto-md);
    color: var(--tinta);
    transition: border-color var(--dur-corta) var(--salida);
}

.campo-filtro .choices:hover .choices__inner {
    border-color: var(--tinta-3);
}

.campo-filtro .choices.is-focused .choices__inner,
.campo-filtro .choices.is-open .choices__inner {
    border-color: var(--acento);
    outline: 2px solid var(--foco);
    outline-offset: 1px;
}

.campo-filtro .choices__placeholder {
    color: var(--tinta-3);
    opacity: 1;
}

.campo-filtro .choices__list--dropdown,
.campo-filtro .choices__list[aria-expanded] {
    border: 1px solid var(--regla-firme);
    border-radius: var(--radio);
    background-color: var(--papel);
    /* Por encima de .vistas (--capa-vistas): al abrirse hacia arriba, el
       desplegable no debe quedar tapado por la barra sticky superior. */
    z-index: var(--capa-visor);
}

.campo-filtro .choices__input {
    background-color: var(--papel);
    font-family: var(--fuente-cuerpo);
    font-size: var(--texto-md);
    color: var(--tinta);
}

.campo-filtro .choices__list--dropdown .choices__item {
    font-size: var(--texto-sm);
    color: var(--tinta);
}

.campo-filtro .choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: var(--acento-tinte);
    color: var(--acento);
}

/* ================================ */
/* PANEL IZQUIERDO — navegador      */
/* ================================ */

.nav-cabecera {
    display: flex;
    align-items: center;
    gap: var(--espacio-xs);
    min-height: 2.75rem;
    padding: 0 var(--espacio-md);
    border-bottom: 1px solid var(--regla);
    background-color: var(--papel);
}

.nav-titulo {
    font-family: var(--fuente-dato);
    font-size: var(--texto-2xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tinta-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-conteo {
    margin-left: auto;
    font-family: var(--fuente-dato);
    font-size: var(--texto-2xs);
    font-variant-numeric: tabular-nums;
    color: var(--tinta-3);
    white-space: nowrap;
}

/* Cierra el expediente sin pasar por la lista de proyectos. Chip con contorno
   guinda: visible de entrada, no solo al pasar el cursor, para que se note
   que hay una salida antes de que el usuario tenga que buscarla. */
.nav-cerrar {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.3125rem;
    margin-left: auto;
    padding: 0.25rem 0.5625rem;
    border: 1px solid var(--acento);
    border-radius: 999px;
    font-family: var(--fuente-dato);
    font-size: var(--texto-2xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--acento);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dur-corta) var(--salida),
                color var(--dur-corta) var(--salida);
}

.nav-cerrar:hover {
    background-color: var(--acento);
    color: var(--acento-papel);
}

.nav-cerrar:focus-visible {
    outline: 2px solid var(--foco);
    outline-offset: 1px;
}

.nav-cerrar:active {
    background-color: var(--acento-oscuro);
    border-color: var(--acento-oscuro);
    color: var(--acento-papel);
}

.boton-volver {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-3xs);
    margin-left: -0.375rem;
    padding: 0.25rem 0.375rem;
    border-radius: var(--radio);
    font-size: var(--texto-xs);
    font-weight: 600;
    color: var(--acento);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dur-corta) var(--salida);
}

.boton-volver:hover {
    background-color: var(--acento-tinte);
}

.boton-volver:focus-visible {
    outline: 2px solid var(--foco);
    outline-offset: 1px;
}

.boton-volver:active {
    color: var(--acento-oscuro);
}

/* Descripción del proyecto seleccionado, sobre sus actividades. */

.descripcion-proyecto {
    flex-shrink: 0;
    max-height: 40%;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--espacio-sm) var(--espacio-md);
    border-bottom: 1px solid var(--regla);
    background-color: var(--papel-2);
}

.descripcion-etiqueta {
    font-family: var(--fuente-dato);
    font-size: var(--texto-2xs);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--acento);
}

.descripcion-texto {
    margin-top: var(--espacio-2xs);
    font-size: var(--texto-sm);
    line-height: 1.5;
    color: var(--tinta-2);
    overflow-wrap: anywhere;
}

.descripcion-texto.plegada {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.descripcion-alternar {
    margin-top: var(--espacio-2xs);
    margin-left: -0.375rem;
    padding: 0.25rem 0.375rem;
    border-radius: var(--radio);
    font-size: var(--texto-xs);
    font-weight: 600;
    color: var(--acento);
    cursor: pointer;
    transition: background-color var(--dur-corta) var(--salida);
}

.descripcion-alternar:hover {
    background-color: var(--acento-tinte);
}

.descripcion-alternar:focus-visible {
    outline: 2px solid var(--foco);
    outline-offset: 1px;
}

.descripcion-alternar:active {
    color: var(--acento-oscuro);
}

.lista {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.fila {
    display: grid;
    grid-template-columns: 0.375rem minmax(0, 1fr);
    gap: var(--espacio-sm);
    padding: var(--espacio-sm) var(--espacio-md);
    border-bottom: 1px solid var(--regla);
    cursor: pointer;
    transition: background-color var(--dur-corta) var(--salida);
}

.fila::before {
    content: '';
    width: 0.375rem;
    height: 0.375rem;
    margin-top: 0.375rem;
    border-radius: var(--radio-chip);
    background-color: var(--regla-firme);
    transition: background-color var(--dur-corta) var(--salida);
}

.fila:hover {
    background-color: var(--papel-2);
}

.fila:hover::before {
    background-color: var(--tinta-3);
}

.fila:focus-visible {
    outline: 2px solid var(--foco);
    outline-offset: -2px;
}

.fila:active {
    background-color: var(--papel-3);
}

.fila.activa {
    background-color: var(--acento-tinte);
}

.fila.activa::before {
    background-color: var(--acento);
}

.fila.activa .fila-titulo {
    color: var(--acento);
}

.fila-titulo {
    font-size: var(--texto-sm);
    font-weight: 600;
    line-height: 1.35;
    color: var(--tinta);
    overflow-wrap: anywhere;
}

.fila-datos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2xs);
    margin-top: var(--espacio-2xs);
    font-family: var(--fuente-dato);
    font-size: var(--texto-2xs);
    font-variant-numeric: tabular-nums;
    color: var(--tinta-3);
}

.marca {
    display: inline-flex;
    align-items: center;
    padding: 0.0625rem 0.3125rem;
    border: 1px solid var(--regla);
    border-radius: var(--radio-chip);
    font-family: var(--fuente-dato);
    font-size: var(--texto-2xs);
    font-variant-numeric: tabular-nums;
    color: var(--tinta-2);
    white-space: nowrap;
}

/* Estados vacío y error del panel izquierdo. */

.aviso {
    padding: var(--espacio-xl) var(--espacio-md);
    text-align: center;
    font-size: var(--texto-sm);
    line-height: 1.5;
    color: var(--tinta-3);
}

.aviso-error {
    color: var(--acento);
}

.aviso small {
    display: block;
    margin-top: var(--espacio-xs);
    font-family: var(--fuente-dato);
    font-size: var(--texto-2xs);
    color: var(--tinta-3);
    overflow-wrap: anywhere;
}

/* Estado de carga. */

.esqueleto {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-xs);
    padding: var(--espacio-sm) var(--espacio-md);
    border-bottom: 1px solid var(--regla);
}

.hueso {
    display: block;
    height: 0.625rem;
    border-radius: var(--radio-chip);
    background-image: linear-gradient(90deg, var(--papel-3) 25%, var(--papel-2) 45%, var(--papel-3) 65%);
    background-size: 300% 100%;
    animation: brillo 1.4s ease-in-out infinite;
}

.hueso-corto {
    height: 0.5rem;
}

@keyframes brillo {
    from { background-position: 100% 0; }
    to { background-position: 0 0; }
}

/* ================================ */
/* PANEL CENTRAL — mapa             */
/* ================================ */

.lienzo {
    position: relative;
    min-width: 0;
    min-height: 0;
}

#mapa,
#mapaHistorico,
#mapaReportes {
    width: 100%;
    height: 100%;
    background-color: var(--papel-3);
}

.mapa-cargando {
    position: absolute;
    inset: 0;
    z-index: var(--capa-flotante);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--espacio-sm);
    background-color: var(--papel-3);
    transition: opacity var(--dur-media) var(--salida);
}

.mapa-cargando[hidden] {
    display: none;
}

.mapa-cargando p {
    font-family: var(--fuente-dato);
    font-size: var(--texto-xs);
    letter-spacing: 0.04em;
    color: var(--tinta-3);
}

.spinner {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 3px solid var(--regla-firme);
    border-top-color: var(--acento);
    animation: girar 0.8s linear infinite;
}

@keyframes girar {
    to { transform: rotate(360deg); }
}

/* ================================ */
/* LOGROS — tarjeta y celdas        */
/* ================================ */

/* Sobre el mapa, espejo de la leyenda: presente sin taparlo. */
.logro-tarjeta {
    position: absolute;
    right: var(--espacio-md);
    bottom: var(--espacio-md);
    z-index: var(--capa-flotante);
    max-width: 17rem;
    padding: var(--espacio-sm) var(--espacio-md);
    border: 1px solid var(--regla-firme);
    border-left: 3px solid var(--acento);
    border-radius: var(--radio);
    background-color: var(--papel);
    transition: opacity var(--dur-media) var(--salida);
}

.logro-tarjeta[hidden] {
    display: none;
}

.logro-tarjeta.cambiando,
.logro-celda.cambiando {
    opacity: 0;
}

.logro-cerrar {
    position: absolute;
    top: var(--espacio-3xs);
    right: var(--espacio-3xs);
    width: 1.25rem;
    height: 1.25rem;
    border-radius: var(--radio-chip);
    font-size: var(--texto-sm);
    line-height: 1;
    color: var(--tinta-3);
    cursor: pointer;
    transition: background-color var(--dur-corta) var(--salida),
                color var(--dur-corta) var(--salida);
}

.logro-cerrar:hover {
    background-color: var(--papel-3);
    color: var(--tinta);
}

.logro-cerrar:focus-visible {
    outline: 2px solid var(--foco);
    outline-offset: 1px;
}

.logro-cifra {
    font-family: var(--fuente-dato);
    font-size: var(--texto-xl);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--acento);
}

.logro-mensaje {
    margin-top: var(--espacio-3xs);
    font-size: var(--texto-xs);
    line-height: 1.45;
    color: var(--tinta-2);
}

/* En la galería, una celda guinda entre las fotos con la cifra en grande. */
.logro-celda {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--espacio-2xs);
    aspect-ratio: 4 / 3;
    padding: var(--espacio-md);
    border-radius: var(--radio);
    background-color: var(--acento);
    transition: opacity var(--dur-media) var(--salida);
}

.logro-celda .logro-cifra {
    font-size: var(--texto-xl);
    color: var(--acento-papel);
}

.logro-celda .logro-mensaje {
    margin-top: 0;
    color: var(--acento-tinte);
}

/* ================================ */
/* PANEL DERECHO — expediente       */
/* ================================ */

.expediente {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--espacio-lg);
}

.expediente-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espacio-sm);
    margin-top: 20%;
    padding: 0 var(--espacio-md);
    text-align: center;
    font-size: var(--texto-sm);
    line-height: 1.5;
    color: var(--tinta-3);
}

.expediente-vacio svg {
    color: var(--regla-firme);
}

.expediente-proyecto {
    font-family: var(--fuente-dato);
    font-size: var(--texto-2xs);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--acento);
    overflow-wrap: anywhere;
}

.expediente-titulo {
    margin-top: var(--espacio-2xs);
    font-family: var(--fuente-display);
    font-size: var(--texto-xl);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--tinta);
    overflow-wrap: anywhere;
}

.expediente-datos {
    margin-top: var(--espacio-lg);
    border-top: 1px solid var(--regla);
}

.expediente-datos > div {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr);
    gap: var(--espacio-sm);
    padding: var(--espacio-xs) 0;
    border-bottom: 1px solid var(--regla);
}

.expediente-datos dt {
    font-family: var(--fuente-dato);
    font-size: var(--texto-2xs);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tinta-3);
    padding-top: 0.125rem;
}

.expediente-datos dd {
    font-size: var(--texto-sm);
    line-height: 1.45;
    color: var(--tinta);
    overflow-wrap: anywhere;
}

.expediente-datos dd.dato {
    font-family: var(--fuente-dato);
    font-size: var(--texto-xs);
    font-variant-numeric: tabular-nums;
}

.expediente-seccion {
    display: flex;
    align-items: baseline;
    gap: var(--espacio-xs);
    margin-top: var(--espacio-lg);
    margin-bottom: var(--espacio-sm);
    font-family: var(--fuente-dato);
    font-size: var(--texto-2xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tinta-2);
}

.expediente-seccion b {
    font-variant-numeric: tabular-nums;
    color: var(--acento);
}

/* Evidencia fotográfica de un reporte ciudadano, en el expediente de la
   vista "Mapa de reportes". */
.expediente-reporte-figura {
    aspect-ratio: 4 / 3;
    margin-top: var(--espacio-md);
    overflow: hidden;
    border: 1px solid var(--regla);
    border-radius: var(--radio);
    background-color: var(--papel-3);
    cursor: zoom-in;
    transition: border-color var(--dur-corta) var(--salida);
}

.expediente-reporte-figura:hover {
    border-color: var(--acento);
}

.expediente-reporte-figura:focus-visible {
    outline: 2px solid var(--foco);
    outline-offset: 2px;
}

.expediente-reporte-figura.sin-imagen {
    cursor: default;
}

.expediente-reporte-figura img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* La imagen del API externo puede fallar (404, host caído); se oculta y el
   marco queda como aviso neutro en vez de mostrar el ícono roto del navegador. */
.expediente-reporte-figura.sin-imagen {
    display: flex;
    align-items: center;
    justify-content: center;
}

.expediente-reporte-figura.sin-imagen::after {
    content: 'Imagen no disponible';
    font-family: var(--fuente-dato);
    font-size: var(--texto-xs);
    color: var(--tinta-3);
}

.expediente-reporte-figura.sin-imagen img {
    display: none;
}

/* ================================ */
/* MODAL EXPEDIENTE (MÓVIL)         */
/* ================================ */

/* Solo se usa ≤768px (el JS decide cuándo abrirlo); por encima de ese ancho
   permanece oculto aunque el JS fallara, para no duplicar el panel lateral. */
.expediente-modal[hidden] {
    display: none;
}

.expediente-modal {
    position: fixed;
    inset: 0;
    z-index: var(--capa-visor);
    display: grid;
    place-items: end center;
    background-color: var(--visor-fondo);
    animation: aparecer var(--dur-media) var(--salida);
}

.expediente-modal-tarjeta {
    display: flex;
    width: 100%;
    max-height: min(85dvh, 40rem);
    flex-direction: column;
    border-top-left-radius: calc(var(--radio) * 2);
    border-top-right-radius: calc(var(--radio) * 2);
    background-color: var(--papel);
    animation: subir var(--dur-media) var(--salida);
}

@keyframes subir {
    from { translate: 0 0.75rem; opacity: 0; }
    to { translate: 0 0; opacity: 1; }
}

.expediente-modal-tarjeta .nav-cabecera {
    flex-shrink: 0;
    border-radius: inherit;
}

.expediente-modal-tarjeta .expediente {
    flex: 1;
}

@media (min-width: 769px) {
    .expediente-modal {
        display: none;
    }
}

/* ================================ */
/* VISTA GALERÍA                    */
/* ================================ */

.galeria {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--espacio-lg);
}

.galeria[hidden] {
    display: none;
}

/* Grid fluido: las columnas se acomodan solas al ancho disponible. */
.galeria-fotos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: var(--espacio-sm);
}

.galeria-foto {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid var(--regla);
    border-radius: var(--radio);
    background-color: var(--papel-3);
    cursor: zoom-in;
    transition: border-color var(--dur-corta) var(--salida);
}

.galeria-foto:hover {
    border-color: var(--acento);
}

.galeria-foto:focus-visible {
    outline: 2px solid var(--foco);
    outline-offset: 2px;
}

.galeria-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Resultados de las variables de eficiencia del proyecto. */

.variables-nota {
    margin-top: calc(var(--espacio-sm) * -1 + var(--espacio-3xs));
    margin-bottom: var(--espacio-sm);
    font-size: var(--texto-xs);
    line-height: 1.45;
    color: var(--tinta-3);
}

.variables {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-3xs);
}

.variable {
    display: flex;
    align-items: baseline;
    gap: var(--espacio-xs);
    padding: var(--espacio-xs) var(--espacio-sm);
    border: 1px solid var(--regla);
    border-radius: var(--radio);
    background-color: var(--papel);
    font-size: var(--texto-sm);
    line-height: 1.35;
    color: var(--tinta);
}

.variable-nombre {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.variable-ultimo {
    flex-shrink: 0;
    font-family: var(--fuente-dato);
    font-size: var(--texto-md);
    font-variant-numeric: tabular-nums;
    color: var(--acento);
}

/* ================================== */
/* VISTA ¿QUÉ SE HIZO EN MI COLONIA?  */
/* ================================== */

/* La vista ciudadana usa el scroll de la página: con esta pestaña activa la
   consola crece a su alto natural y hero, panorama, respuesta y pie quedan en
   un solo flujo, sin scrolls anidados que se tapen entre sí. Deja de ser grid
   porque un sticky dentro de una fila `auto` no tiene recorrido: la barra de
   vistas solo se pega si es hija de un bloque normal. */
.consola:has(#panelColonia:not([hidden])) {
    display: block;
    height: auto;
    min-height: calc(100dvh - var(--alto-cromo));
}

.zona-vista {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - var(--alto-cromo));
    padding: var(--espacio-lg);
}

/* Patrón de fondo en su propia capa para poder atenuarlo sin afectar el
   contenido de encima (opacity en el elemento tocaría a sus hijos también). */
.zona-vista::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('/img/Patron-fondo.png');
    background-repeat: repeat;
    background-position: top left;
    opacity: 0.75;
    pointer-events: none;
}

.zona-buscar,
.zona-respuesta {
    position: relative;
    z-index: 1;
}

.zona-vista[hidden],
.zona-buscar[hidden],
.zona-respuesta[hidden] {
    display: none;
}

/* Estado 1: hero centrado vertical y horizontalmente en el alto disponible. */

.zona-buscar {
    position: relative;
    width: 100%;
    max-width: 56rem;
    margin: auto;
}

/* Ollin: par de ilustraciones que flanquean el hero cuando sobra espacio a
   los lados. Ancladas al viewport (no a .zona-buscar) para llegar hasta el
   borde real de la pantalla; se ocultan en cuanto no hay hueco real. */
.zona-ollin {
    display: none;
    position: fixed;
    top: 50%;
    width: clamp(8rem, 12vw, 14rem);
    height: auto;
    transform: translateY(-50%);
    pointer-events: none;
}

.zona-ollin-izq {
    left: 0;
}

.zona-ollin-der {
    right: 0;
}

@media (min-width: 1400px) {
    .zona-ollin {
        display: block;
    }
}

.zona-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Ilustración a mano: colonias en verde, calles punteadas, pines guinda. */
.zona-ilustracion {
    display: block;
    width: min(31rem, 100%);
    height: auto;
    margin-bottom: var(--espacio-sm);
}

.il-zona {
    fill: var(--trazo);
    fill-opacity: 0.06;
    stroke: var(--trazo);
    stroke-opacity: 0.4;
    stroke-width: 1.5;
    stroke-linejoin: round;
}

.il-zona-activa {
    fill-opacity: 0.13;
    stroke-opacity: 0.7;
}

.il-calle {
    fill: none;
    stroke: var(--regla-firme);
    stroke-width: 1.5;
    stroke-dasharray: 2 6;
    stroke-linecap: round;
}

.il-pin path {
    fill: var(--acento);
    stroke: var(--acento-papel);
    stroke-width: 1.4;
}

.il-pin circle {
    fill: var(--acento-papel);
}

.zona-pregunta {
    font-family: var(--fuente-display);
    font-size: var(--texto-2xl);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--tinta);
    overflow-wrap: anywhere;
}

.zona-apoyo {
    max-width: 32rem;
    margin: var(--espacio-xs) 0 var(--espacio-lg);
    font-size: var(--texto-sm);
    line-height: 1.5;
    color: var(--tinta-2);
}

/* Los dos selectores lado a lado, separados por una "o" tipográfica. */
.zona-selectores {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: end;
    gap: var(--espacio-sm);
    width: min(34rem, 100%);
    text-align: left;
}

.zona-o {
    padding-bottom: 0.5rem;
    font-family: var(--fuente-dato);
    font-size: var(--texto-xs);
    color: var(--tinta-3);
}

/* Estado 2: la respuesta. Un solo scroll (el de la vista): la lista fluye a su
   alto natural y el mapa y el expediente la acompañan en sticky, así la rueda
   funciona desde cualquier punto y no hay scrolls anidados que atrapen. */

.zona-respuesta {
    display: flex;
    flex-direction: column;
}

.zona-titular {
    margin-top: var(--espacio-xs);
    font-family: var(--fuente-display);
    font-size: var(--texto-2xl);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--tinta);
    overflow-wrap: anywhere;
}

.zona-totales {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-xs);
    margin-top: var(--espacio-xs);
    font-family: var(--fuente-dato);
    font-size: var(--texto-xs);
    font-variant-numeric: tabular-nums;
    color: var(--tinta-2);
}

.zona-totales b {
    color: var(--acento);
}

/* Totales de la zona como chips con icono; los pinta el JS. */
.zona-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2xs);
    padding: 0.1875rem 0.5rem;
    border: 1px solid var(--regla);
    border-radius: var(--radio-chip);
    background-color: var(--papel);
    white-space: nowrap;
}

.zona-chip svg {
    flex-shrink: 0;
    color: var(--trazo);
}

/* Acotado a la pantalla: las tres columnas comparten un alto de viewport y la
   lista tiene su scroll interno, así cien actividades no alargan la página y
   el pie queda justo debajo, a un golpe de rueda. */
.zona-cuerpo {
    display: grid;
    grid-template-columns: 1.1fr 1fr 0.9fr;
    grid-template-rows: minmax(0, 1fr);
    height: max(24rem, calc(100dvh - var(--alto-cromo) - 12rem));
    gap: var(--espacio-md);
    margin-top: var(--espacio-md);
}

.zona-mapa {
    min-height: 0;
    border: 1px solid var(--regla);
    border-radius: var(--radio);
    background-color: var(--papel-3);
}

.zona-proyectos {
    min-height: 0;
    min-width: 0;
    overflow-y: auto;
}

.zona-proyecto + .zona-proyecto {
    margin-top: var(--espacio-sm);
}

/* Fijo al hacer scroll: siempre se sabe de qué proyecto es la lista visible. */
.zona-proyecto-titulo {
    position: sticky;
    top: 0;
    z-index: 1;
    margin-bottom: var(--espacio-2xs);
    padding: var(--espacio-2xs) 0;
    background-color: var(--papel);
    font-family: var(--fuente-dato);
    font-size: var(--texto-2xs);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tinta-2);
}

.zona-proyecto-titulo b {
    font-variant-numeric: tabular-nums;
    color: var(--acento);
}

/* En la respuesta, la lista de cada proyecto se despliega plana y sin scroll
   propio: el único scroll de la columna es el de .zona-proyectos. */
.zona-proyectos .zona-lista {
    max-height: none;
    overflow-y: visible;
    overscroll-behavior: auto;
    margin-top: 0;
}

.zona-fila.activa {
    background-color: var(--acento-tinte);
}

.zona-fila.activa .zona-titulo {
    color: var(--acento);
}

.zona-expediente {
    min-height: 0;
    overflow-y: auto;
    border: 1px solid var(--regla);
    border-radius: var(--radio);
    background-color: var(--papel-2);
    padding: var(--espacio-md);
}

.zona-expediente-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espacio-sm);
    margin-top: 20%;
    padding: 0 var(--espacio-md);
    text-align: center;
    font-size: var(--texto-sm);
    line-height: 1.5;
    color: var(--tinta-3);
}

.zona-expediente-vacio svg {
    color: var(--regla-firme);
}

/* ================================ */
/* VISOR DE LA GALERÍA              */
/* ================================ */

.visor[hidden] {
    display: none;
}

.visor {
    position: fixed;
    inset: 0;
    z-index: var(--capa-visor);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    background-color: var(--visor-fondo);
    animation: aparecer var(--dur-media) var(--salida);
}

@keyframes aparecer {
    from { opacity: 0; }
    to { opacity: 1; }
}

.visor-barra {
    display: flex;
    align-items: center;
    gap: var(--espacio-md);
    padding: var(--espacio-sm) var(--espacio-md);
    color: var(--acento-papel);
}

.visor-nombre {
    min-width: 0;
    flex: 1;
    font-size: var(--texto-sm);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.visor-indice {
    font-family: var(--fuente-dato);
    font-size: var(--texto-xs);
    font-variant-numeric: tabular-nums;
    color: var(--visor-tenue);
    white-space: nowrap;
}

.visor-figura {
    display: grid;
    place-items: center;
    min-height: 0;
    padding: 0 var(--espacio-md);
}

.visor-figura img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.visor-pie {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--espacio-xs);
    padding: var(--espacio-md);
}

.visor-boton {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-3xs);
    padding: 0.4375rem 0.75rem;
    border: 1px solid var(--visor-borde);
    border-radius: var(--radio);
    background-color: transparent;
    font-family: var(--fuente-cuerpo);
    font-size: var(--texto-xs);
    font-weight: 600;
    color: var(--acento-papel);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dur-corta) var(--salida);
}

.visor-boton:hover:not(:disabled) {
    background-color: var(--visor-hover);
}

.visor-boton:focus-visible {
    outline: 2px solid var(--acento-papel);
    outline-offset: 2px;
}

.visor-boton:active:not(:disabled) {
    background-color: var(--visor-activo);
}

.visor-boton:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.visor-boton-cerrar {
    border-color: transparent;
}

/* ================================ */
/* ADAPTACIÓN A PANTALLAS ESTRECHAS */
/* ================================ */

@media (max-width: 1180px) {
    .consola-cuerpo {
        grid-template-columns: 17rem minmax(0, 1fr) 19rem;
    }

    .consola-cuerpo.sin-expediente {
        grid-template-columns: 17rem minmax(0, 1fr);
    }

    .expediente {
        padding: var(--espacio-md);
    }
}

@media (max-width: 1023px) {
    /* Tabletas conservan los paneles laterales; solo se estrechan las columnas. */
    .consola-cuerpo {
        grid-template-columns: 15rem minmax(0, 1fr) 17rem;
    }

    .consola-cuerpo.sin-expediente {
        grid-template-columns: 15rem minmax(0, 1fr);
    }

    .expediente {
        padding: var(--espacio-md);
    }

    /* La respuesta pasa a dos columnas: el mapa toma la fila completa arriba y
       las listas se reparten el alto restante con su scroll interno. */
    .zona-cuerpo {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: 15rem minmax(0, 1fr);
    }

    .zona-mapa {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    /* En móvil la consola se apila: primero el lienzo, debajo el panel izquierdo
       y, con actividad seleccionada, el expediente al final. Sin altura fija:
       la página recupera su scroll natural y el pie cierra la pila. */
    .consola {
        display: block;
        height: auto;
        min-height: 0;
    }

    .consola-cuerpo,
    .consola-cuerpo.sin-expediente {
        grid-template-columns: minmax(0, 1fr);
    }

    .lienzo {
        order: -1;
        height: 60vh;
        min-height: 20rem;
        border-bottom: 1px solid var(--regla);
    }

    .panel-izquierdo {
        border-left: 0;
        border-right: 0;
        border-bottom: 1px solid var(--regla);
    }

    .panel-izquierdo .lista {
        max-height: 21rem;
    }

    /* El expediente se ve en el modal (.expediente-modal), no en el panel: si no,
       se despliega en el flujo de la página hasta el pie. */
    .panel-derecho {
        display: none;
    }

    /* La galería en móvil: dos columnas cómodas y menos aire alrededor. */
    .galeria {
        padding: var(--espacio-md);
    }

    .galeria-fotos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--espacio-xs);
    }

    /* Las 5 pills no caben con sus etiquetas largas: centradas + scroll se ve
       raro (arranca a media barra). Se alinean al inicio, como cualquier
       carrusel horizontal, y se compactan para que quepan más a la vista. */
    .vistas {
        justify-content: flex-start;
        padding: var(--espacio-2xs) var(--espacio-sm);
    }

    .vista-tab {
        padding: 0.4375rem var(--espacio-sm);
        font-size: var(--texto-2xs);
    }

    /* La vista de colonia se apila y recupera el scroll de la página. */
    .zona-vista {
        padding: var(--espacio-md);
    }

    .zona-buscar {
        margin: var(--espacio-md) auto 0;
    }

    /* Los selectores se apilan; la "o" pierde sentido en vertical. */
    .zona-selectores {
        grid-template-columns: minmax(0, 1fr);
    }

    .zona-o {
        display: none;
    }

    /* En móvil la respuesta se apila y todo fluye con el scroll de la página;
       sin alto acotado ni scrolls internos. */
    .zona-cuerpo {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        height: auto;
    }

    .zona-mapa {
        height: 16rem;
    }

    .zona-proyectos,
    .zona-expediente {
        overflow-y: visible;
    }
}

@media (max-width: 420px) {
    .expediente-datos > div {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--espacio-3xs);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hueso {
        animation: none;
    }

    .visor {
        animation-duration: 1ms;
    }

    .spinner {
        animation-duration: 1.4s;
    }
}