/* * Ficha de entidad territorial (/entidades/ficha), municipio y departamento. * * Hoja portada del prototipo del rediseño tal cual. Lo único retirado son las * reglas del cromo, que las define base.css para todo el sitio. * * Los colores, las curvas y las fuentes salen de tokens.css. Aquí solo quedan los * cuatro que son de esta página y de ninguna otra: el alto de la tira y el color * de la temática abierta, que el guion reescribe al cambiar de sección. */ :root{ --tira-h:3.5rem; --tema:#2B4FD1; --tema-tinta:#F6EFDC; --tema-velo:rgba(43,79,209,.10); } /* Escala tipográfica ligada a la dimensión menor de la pantalla: crece en monitores grandes sin desbordar las láminas en pantallas anchas y bajas. */ html{font-size:clamp(16px,0.85rem + 0.42vmin,22px)} *{box-sizing:border-box} body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--fuente-texto);-webkit-font-smoothing:antialiased} h1,h2,h3,p,figure{margin:0} a{color:var(--color-cobalto)} a:hover{color:var(--color-enlace-fuerte)} button{font:inherit;color:inherit;cursor:pointer} .contenedor{width:100%;max-width:min(96rem,100%);margin-inline:auto;padding-inline:var(--sangria)} :focus-visible{outline:3px solid var(--amarillo);outline-offset:2px} /* display en la clase gana al atributo hidden: hay que declararlo. La hamburguesa queda fuera. Va con hidden en el HTML a propósito —si la hoja no carga, el botón no sale y los enlaces quedan a la vista— y la enciende la consulta de medios de base.css por debajo de 62rem. Con el !important de aquí dentro esa consulta no ganaba, así que en el móvil de estas dos páginas no había ni botón ni menú: la cabecera se quedaba sin navegación. El botón de filtros de la tira sale por lo mismo y por el mismo motivo: sin hoja no aparece y los dos mandos se quedan a la vista, que es la forma de escritorio y la que funciona sin nada. */ [hidden]:not(.hamburguesa,.filtros){display:none!important} html{scroll-padding-top:var(--tira-h)} /* Avance por diapositivas: cada escena mide exactamente el espacio disponible y el navegador engancha en ella. Con "always" no se puede saltar dos tarjetas de un gesto, que es lo que hace que se sienta como pasar de lámina. */ @media (min-width:62rem){ html{scroll-snap-type:y mandatory} .escena{scroll-snap-align:start;scroll-snap-stop:always} .cabecera,.entidad,.cierre,.pie{scroll-snap-align:start} } /* ── Cromo del Estado ─────────────────────────────────────────── */ /* La cabecera la define base.css, y solo base.css. Aquí había una copia del prototipo —min-height:4.6875rem y .marca__nombre en 1rem— que parecía decir lo mismo que la de base y no lo decía: esta hoja lleva la escala tipográfica fluida de más arriba, así que ese rem vale entre 16,6 y 22 px según la pantalla, mientras que en base.css la cabecera son 75 px y el rótulo 16 px fijos. El resultado era que el mismo banner medía 76 px en la portada y 86 aquí en un monitor de 1080, con el rótulo «Diccionario Geográfico» creciendo con él. Se nota al pasar de una página a otra, que es justo donde una marca no puede cambiar de tamaño. Lo único que sigue siendo propio de esta hoja es el ancho —al final del archivo—, porque alinea el logotipo con el contenido, que aquí mide 96rem. */ /* ── Encabezado de la entidad ─────────────────────────────────── */ /* El banner de la entidad se mide contra el visor igual que el héroe de la portada: es lo primero que se ve y lo primero que estorba en un portátil, donde su alto sale del de las láminas. En pantalla alta se planta en los valores del diseño. */ .entidad{background:var(--color-cobalto);color:var(--papel-2); padding-block:clamp(1.125rem,3.2vh,2.125rem) clamp(0.875rem,2.4vh,1.625rem)} .miga{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem;font-size:0.875rem;color:rgba(246,239,220,.8)} .miga a{color:rgba(246,239,220,.8);text-decoration:none} .miga a:hover{color:#fff;text-decoration:underline} .entidad__fila{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:2rem;margin-top:clamp(0.375rem,1.1vh,0.75rem)} /* El h1 que envuelve al botón del nombre. Neutro a propósito: la letra, el cuerpo y el interletrado los pone el botón, y el h1 solo aporta el rango del documento. Sin esto, el 2em de fábrica del h1 se sumaría a la escala. */ .entidad__titulo{margin:0;font:inherit;line-height:inherit;letter-spacing:normal} .entidad__nombre{display:inline-flex;align-items:center;gap:0.875rem;padding:0;border:0;background:transparent; color:inherit;font-family:Poppins,var(--fuente-titular);font-weight:800;font-size:clamp(2rem,min(4.6vw,7.4vh),3.6rem); line-height:.98;letter-spacing:-.03em;text-align:left;cursor:pointer} .entidad__nombre::after{content:"";width:.42em;height:.42em;flex:none;border-right:3px solid currentColor; border-bottom:3px solid currentColor;transform:rotate(45deg) translateY(-.1em);opacity:.55; transition:opacity 160ms var(--curva-salida),transform 220ms var(--curva-salida)} .entidad__nombre:hover::after{opacity:1;transform:rotate(45deg) translateY(.05em)} /* El código va en la misma tipografía y cuerpo del nombre, en tinta rebajada: se lee como parte del titular, sin la etiqueta «Código DIVIPOLA». */ .entidad__nombre em{font-style:normal;font-weight:800;font-variant-numeric:tabular-nums; opacity:.42;letter-spacing:-.02em} /* Qué es ese número lo dice una viñeta al posar el ratón sobre las cifras, o al enfocar el botón con el teclado: «Código DANE», en pastilla crema sobre el cobalto, con su punta. Se probó como rótulo escrito encima de las cifras y se descartó: el titular no lo quería. La viñeta va en el envoltorio y no en el em porque la opacidad del em arrastraría a la viñeta al 42 %. El título del botón («Cambiar de entidad territorial») sigue saliendo sobre el nombre; sobre las cifras no sale, porque el envoltorio lleva title="" y un title vacío en el hijo le corta el paso al del padre. Si no, al segundo se doblarían los dos. Quien lee con lector de pantalla no tiene ratón: para él va el texto oculto que precede a las cifras dentro del botón, y así el nombre accesible es «Mompós Código DANE 13468». */ .solo-lector{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .entidad__dane{position:relative;display:inline-flex} .entidad__dane::after,.entidad__dane::before{position:absolute;left:50%;pointer-events:none;opacity:0; transition:opacity 160ms var(--curva-salida),transform 220ms var(--curva-salida)} .entidad__dane::after{content:"Código DANE";bottom:calc(100% + .5rem);transform:translate(-50%,.25rem); font-family:var(--fuente-texto);font-size:0.6875rem;font-weight:700;line-height:1;letter-spacing:.12em; text-transform:uppercase;white-space:nowrap;color:var(--color-cobalto);background:var(--papel-2); padding:0.5rem 0.625rem;border-radius:var(--radio-sm);box-shadow:var(--sombra-tarjeta)} .entidad__dane::before{content:"";bottom:calc(100% + .5rem - .3rem);width:.6rem;height:.6rem; background:var(--papel-2);transform:translate(-50%,.25rem) rotate(45deg)} .entidad__dane:hover::after,.entidad__nombre:focus-visible .entidad__dane::after{opacity:1;transform:translate(-50%,0)} .entidad__dane:hover::before,.entidad__nombre:focus-visible .entidad__dane::before{opacity:1;transform:translate(-50%,0) rotate(45deg)} @media (prefers-reduced-motion:reduce){.entidad__dane::after,.entidad__dane::before{transition:none}} /* Estos dos nacen vacíos —el nombre de la entidad no se sabe hasta que el guión resuelve la URL contra el catálogo— y se les reserva su renglón para que el encabezado no dé un salto al llenarse. Es un mínimo, no un alto: en cuanto hay texto manda el texto. */ .entidad__nombre{min-height:1em} .entidad__codigo{margin-top:0.625rem;font-size:0.875rem;color:rgba(246,239,220,.85);min-height:1.5em} /* El banner en un teléfono: 335 px de 830, dos quintas partes de la primera pantalla para tres renglones. El alto le venía de medidas pensadas para un monitor —relleno de 26 px arriba, 19 abajo, y una línea de código que partía en dos—, no de lo que hay que decir. Se aprieta contra el ancho, que es lo escaso aquí: el relleno sigue al vw en lugar de al vh, el nombre arranca en 1.75rem en vez de 2, y la línea del código baja un cuerpo. No se quita nada: la miga, el nombre, el código DIVIPOLA y la línea de contexto siguen los cuatro. */ @media (max-width:62rem){ .entidad{padding-block:clamp(0.875rem,3.2vw,1.5rem) clamp(0.75rem,2.6vw,1.25rem)} .entidad__nombre{font-size:clamp(1.75rem,8vw,3rem)} .entidad__fila{margin-top:0.25rem;gap:0.75rem} .miga{font-size:0.8125rem;gap:0.375rem} .entidad__codigo{margin-top:0.375rem;font-size:0.8125rem;line-height:1.4} } .mandos{display:flex;flex-wrap:wrap;gap:1.25rem} .mando{display:grid;gap:0.5rem} .mando__rotulo{font-size:0.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(246,239,220,.7)} .chips{display:flex;flex-wrap:wrap;gap:6px} .chip{padding:0.625rem 0.9375rem;min-height:2.75rem;display:inline-flex;align-items:center;border:1.5px solid rgba(246,239,220,.42);background:transparent;color:var(--papel-2);border-radius:62.4375rem;font-size:0.9375rem;font-weight:500;font-variant-numeric:tabular-nums;transition:background 140ms var(--curva-salida)} .chip:hover{background:rgba(246,239,220,.16)} .chip[aria-pressed="true"]{background:var(--amarillo);border-color:var(--amarillo);color:var(--tinta);font-weight:700} .chip[disabled]{opacity:.4;cursor:not-allowed} /* El botón que recoge los mandos. Solo existe en pantalla estrecha —lo enciende la consulta de medios del final de la hoja—, así que aquí solo va lo que no depende del ancho. */ .mandos-caja{position:relative} .filtros{display:none} /* ── Tira de temáticas ────────────────────────────────────────── */ .tira{position:sticky;top:0;z-index:600;background:var(--papel);border-bottom:1px solid var(--color-borde);box-shadow:0 10px 24px -22px rgba(22,35,58,.6)} .tira__interior{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;flex-wrap:wrap} .tira__lista{display:flex;gap:2px;overflow-x:auto;scrollbar-width:thin} .tira .mandos{gap:1.125rem;padding-block:0.5rem;flex-wrap:nowrap} .tira .chips{flex-wrap:nowrap} .tira .mando__rotulo{color:var(--tinta-suave)} /* Los dos mandos comparten línea base: rótulo arriba y control de la misma altura abajo, para que la lista de año y los chips de comparación no queden desalineados entre sí. */ .tira .mandos{align-items:end} .tira .mando{gap:0.25rem;justify-items:start} /* Mando de año propio: pastilla del sitio y menú flotante, con la misma altura y curvas que los chips de comparación. */ .anio{position:relative} .anio__boton{display:inline-flex;align-items:center;gap:0.5rem;min-height:2.125rem;padding:0 0.75rem 0 0.875rem; border:1.5px solid var(--color-borde-firme);border-radius:62.4375rem;background:var(--papel);color:var(--tinta); font-family:var(--fuente-titular);font-size:0.875rem;font-weight:700;font-variant-numeric:tabular-nums; transition:border-color 140ms var(--curva-salida),background 140ms var(--curva-salida),box-shadow 160ms var(--curva-salida)} .anio__boton:hover{background:var(--papel-2);border-color:var(--tinta)} .anio__boton i{width:0.4375rem;height:0.4375rem;border-right:2px solid var(--tinta-suave);border-bottom:2px solid var(--tinta-suave); transform:rotate(45deg) translateY(-0.0625rem);transition:transform 220ms var(--curva-salida)} .anio__boton[aria-expanded="true"]{background:var(--tinta);border-color:var(--tinta);color:var(--papel-2)} .anio__boton[aria-expanded="true"] i{border-color:currentColor;transform:rotate(-135deg) translateY(-0.0625rem)} .anio__menu{position:absolute;top:calc(100% + 0.4375rem);right:0;z-index:700;min-width:100%; display:grid;gap:1px;padding:0.3125rem;border:1px solid var(--color-borde);border-radius:0.875rem; background:var(--papel);box-shadow:0 1.25rem 2.5rem -1.25rem rgba(22,35,58,.5); animation:anio-entra 180ms var(--curva-salida) both} @keyframes anio-entra{from{opacity:0;transform:translateY(-0.25rem)}to{opacity:1;transform:none}} .anio__opcion{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:2rem; padding:0 0.75rem;border:0;border-radius:62.4375rem;background:transparent;color:var(--tinta); font-family:var(--fuente-titular);font-size:0.875rem;font-weight:600;font-variant-numeric:tabular-nums; transition:background 120ms var(--curva-salida),color 120ms var(--curva-salida)} .anio__opcion:hover{background:var(--papel-2)} .anio__opcion[aria-selected="true"]{background:var(--tema);color:var(--tema-tinta);font-weight:700} @media (prefers-reduced-motion:reduce){.anio__menu{animation:none}} .tira .chip{min-height:2.125rem;padding:6px 0.8125rem;font-size:0.875rem;border-color:var(--color-borde-firme);color:var(--tinta)} .tira .chip:hover{background:var(--papel-2)} .tira .chip[aria-pressed="true"]{background:var(--tinta);border-color:var(--tinta);color:var(--papel-2)} .tira a{flex:none;display:inline-flex;align-items:center;gap:0.5625rem;min-height:3rem;padding:0 1rem;font-size:0.9375rem;font-weight:500;text-decoration:none;color:var(--tinta-suave);border-bottom:3px solid transparent;white-space:nowrap;transition:color 140ms var(--curva-salida),border-color 140ms var(--curva-salida)} .tira a i{width:0.5625rem;height:0.5625rem;border-radius:3px;background:var(--punto,currentColor);opacity:.55} .tira a:hover{color:var(--tinta)} .tira a[aria-current]{color:var(--tinta);font-weight:700;border-bottom-color:var(--punto)} .tira__avance{height:3px;background:var(--papel-3)} .tira__avance span{display:block;height:100%;width:0;background:var(--tema);transition:width 220ms linear,background 300ms var(--curva-salida)} /* Móvil y tableta en vertical: la tira en una sola banda. Es lo único que ocupa alto de forma permanente —se queda pegada al techo todo el recorrido—, y en un teléfono medía tres bandas: la fila de temáticas, la de los dos mandos y la nota del año. 120 px de 830 antes de la primera cifra, y pesando más de lo que miden porque son tres franjas distintas. Las tres se van. La nota se mudó a la portada de su temática, donde la lee quien va a mirar esas cifras. Y los dos mandos se recogen tras una pastilla que dice en qué estado están —«2025 · Colombia»—, así que lo que decían sigue a la vista y su alto no: se tocan una vez y estaban ocupando pantalla durante las treinta y cuatro láminas del recorrido. Queda una banda: temáticas y pastilla. 120 px pasan a 51. */ @media (max-width:62rem){ .tira__interior{align-items:center;gap:0 0.75rem} /* La lista de temáticas se queda con todo el ancho que sobre y sigue arrastrándose: es la que puede encogerse sin perder nada, porque ya se desplaza. Con una sola pastilla al lado le quedan dos pestañas y media. */ .tira__lista{flex:1 1 6rem;min-width:0} .mandos-caja{flex:none;padding-left:0.75rem;border-left:1px solid var(--color-borde)} .filtros{display:inline-flex;align-items:center;gap:0.5rem;min-height:2.5rem; padding:0 0.75rem 0 0.875rem;border:1px solid var(--color-borde-firme);border-radius:62.4375rem; background:var(--papel);color:var(--tinta); font-size:0.875rem;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap; transition:background 140ms var(--curva-salida),border-color 140ms var(--curva-salida)} .filtros:hover{background:var(--papel-2);border-color:var(--tinta)} .filtros i{width:0.4375rem;height:0.4375rem;flex:none; border-right:2px solid var(--tinta-suave);border-bottom:2px solid var(--tinta-suave); transform:rotate(45deg) translateY(-0.0625rem); transition:transform 220ms var(--curva-salida)} .filtros[aria-expanded="true"]{background:var(--tinta);border-color:var(--tinta);color:var(--papel-2)} .filtros[aria-expanded="true"] i{border-color:currentColor;transform:rotate(-135deg) translateY(-0.0625rem)} /* El panel. Los mandos recuperan aquí su forma de rejilla —rótulo encima, control debajo—, que es la que se lee cuando hay sitio, y lo hay: el panel se abre sobre la lámina y no le quita alto a nada. Mismo lenguaje que el menú de años que vive dentro de él. */ .tira .mandos{position:absolute;top:calc(100% + 0.5rem);right:0;z-index:700; display:grid;justify-items:start;gap:1rem;width:max-content;min-width:11rem; max-width:calc(100vw - 2 * var(--sangria)); padding:0.9375rem 1rem;border:1px solid var(--color-borde);border-radius:0.875rem; background:var(--papel);box-shadow:0 1.375rem 2.75rem -1.625rem rgba(22,35,58,.55); animation:anio-entra 160ms var(--curva-salida)} .filtros[aria-expanded="false"] + .mandos{display:none} .tira .mando{gap:0.4375rem} .tira .chips{flex-wrap:wrap} /* Dentro del panel los dos mandos son lo único táctil, y con el dedo no pueden quedarse en los 34 px de escritorio: 40 es el suelo que esta hoja ya se puso para los enlaces de temática. */ .tira .chip,.anio__boton{min-height:2.5rem} /* El nombre de la entidad se aparta de la vista sin salir del árbol: el rótulo entero es el nombre accesible del grupo de fichas —aria-labelledby— y ahí sigue. En el panel la anchura la fija el contenido, y «Comparar Chiquinquirá contra» la estiraría media pantalla para repetir el nombre que ya está en el banner, en la miga y en el mapa. */ .mando__rotulo-quien{position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip-path:inset(50%);white-space:nowrap} } @media (prefers-reduced-motion:reduce){.tira .mandos{animation:none}} /* ── Escenario ────────────────────────────────────────────────── */ .relato{display:grid;grid-template-columns:minmax(0,1fr)} @media (min-width:62rem){.relato{grid-template-columns:minmax(0,1.42fr) minmax(0,1fr)}} /* Escritorio estrecho —de 992 a 1376 px, que es donde caen los portátiles y las pantallas al 150 %—: la lámina se lleva más ancho. No es capricho de reparto; cada renglón que deja de partirse en dos es alto que la tarjeta no pide, y ahí el alto es justo lo que falta. El mapa sigue siendo el acompañante y a 460 px enseña el municipio igual de bien. */ @media (min-width:62rem) and (max-width:86rem){.relato{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}} /* Pantallas muy anchas: la lámina no necesita seguir estirándose, así que el reparto se inclina hacia el mapa en vez de dejar la tarjeta con aire muerto. */ @media (min-width:110rem){.relato{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}} /* Índice flotante: va por encima del relato, no en la rejilla, así que no desplaza ni estrecha la tarjeta. Translúcido con desenfoque para que el mapa siga leyéndose por debajo, y compacto: punto de color y nombre, nada más. */ .indice{display:none} @media (min-width:62rem){ .indice{display:grid;gap:2px;justify-items:center;position:fixed;left:0.625rem;top:calc(50% + var(--tira-h)/2);transform:translateY(-50%); z-index:650;width:2.5rem;padding:0.5625rem 0;border-radius:6.1875rem; background:rgba(255,253,247,.3);backdrop-filter:blur(12px) saturate(1.2); border:1px solid rgba(228,223,206,.4); /* El riel es el índice del RECORRIDO: aparece cuando el recorrido empieza, no sobre el encabezado de la entidad, donde señalaría a un relato que aún no está en pantalla. */ opacity:0;pointer-events:none; transition:opacity 320ms var(--curva-salida),transform 320ms var(--curva-salida)} .indice[data-visible]{opacity:1;pointer-events:auto} .indice:not([data-visible]){transform:translateY(-50%) translateX(-0.75rem)} } .indice__arriba{--punto:var(--tinta);--sobre-punto:var(--papel-2); position:relative;display:grid;place-items:center;width:1.625rem;height:1.625rem;margin-bottom:4px; border:0;padding:0;border-radius:6.1875rem;background:transparent;color:var(--tinta-suave);cursor:pointer; opacity:0;transform:scale(.7);pointer-events:none; transition:opacity 240ms var(--curva-salida),transform 300ms var(--curva-salida),color 200ms var(--curva-salida),background 200ms var(--curva-salida)} .indice__arriba.es-visible{opacity:1;transform:none;pointer-events:auto} .indice__arriba:hover{background:rgba(22,35,58,.08);color:var(--tinta)} .indice__arriba svg{width:0.8125rem;height:0.8125rem;display:block} .indice__arriba::after{content:"";position:absolute;left:5px;right:5px;bottom:-4px;height:1px;background:var(--color-borde)} .indice__tema{position:relative;display:grid;place-items:center;width:1.625rem;height:1.625rem;border-radius:6.1875rem;text-decoration:none} /* Rótulo propio en lugar del title del navegador: pastilla de la temática, con la tipografía y las curvas del sitio, y una punta que la ancla al punto. */ .indice__arriba em,.indice__tema em,.indice__escena em{position:absolute;left:1.75rem;top:50%;transform:translate(-6px,-50%) scale(.96);transform-origin:left center; padding:6px 0.75rem;border-radius:62.4375rem;background:var(--punto);color:var(--sobre-punto,var(--papel-2)); font-family:var(--fuente-titular);font-weight:700;font-size:0.7813rem;font-style:normal;line-height:1;white-space:nowrap; /* max-content y no ajuste automático: el punto mide 22 px y el rótulo arranca en 26, así que el ancho disponible sería negativo y la pastilla colapsaba. */ width:max-content; box-shadow:0 12px 24px -16px rgba(22,35,58,.8);opacity:0;pointer-events:none; transition:opacity 200ms var(--curva-salida),transform 260ms var(--curva-salida)} .indice__arriba em::before,.indice__tema em::before,.indice__escena em::before{content:"";position:absolute;left:-4px;top:50%;width:0.5rem;height:0.5rem;margin-top:-4px; background:inherit;transform:rotate(45deg);border-radius:2px} .indice__tema:hover em,.indice__tema:focus-visible em, .indice__arriba:hover em,.indice__arriba:focus-visible em, .indice__escena:hover em,.indice__escena:focus-visible em{opacity:1;transform:translate(0,-50%) scale(1)} /* El rótulo de escena es idéntico al de la temática —mismo color, mismo cuerpo— y solo cambia su punto de anclaje. */ .indice__escena{position:relative} .indice__escena em{left:1.5625rem} .indice__tema i{width:0.75rem;height:0.75rem;border-radius:6.1875rem;background:var(--punto);opacity:.45; transition:opacity 260ms var(--curva-salida),transform 300ms var(--curva-salida),box-shadow 260ms var(--curva-salida)} .indice__tema:hover i{opacity:.85;transform:scale(1.2)} .indice__tema[aria-current] i{opacity:1;transform:scale(1.45);box-shadow:0 0 0 4px color-mix(in oklch, var(--punto) 20%, transparent)} /* Las escenas de la temática en curso son puntos, no una lista de textos: el nombre viaja en el title y en aria-label para no engordar el índice. */ .indice__escenas{display:grid;grid-template-rows:0fr;opacity:0; transition:grid-template-rows 380ms var(--curva-salida),opacity 260ms var(--curva-salida)} .indice__escenas>div{overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:1px;padding:1px 0 4px} .indice__grupo[data-abierto] .indice__escenas{grid-template-rows:1fr;opacity:1} /* El recorte solo hace falta mientras la lista se pliega; abierta debe dejar salir el rótulo, que vive fuera de la columna de puntos. */ .indice__grupo[data-abierto] .indice__escenas, .indice__grupo[data-abierto] .indice__escenas>div{overflow:visible} .indice__escena{width:1.125rem;height:1rem;display:grid;place-items:center;border-radius:6.1875rem;text-decoration:none} .indice__escena::before{content:"";width:6px;height:6px;border-radius:6.1875rem;background:var(--punto);opacity:.32; transition:opacity 220ms var(--curva-salida),transform 280ms var(--curva-salida)} .indice__escena:hover::before{opacity:.7;transform:scale(1.2)} .indice__escena[aria-current]::before{opacity:1;transform:scale(1.45)} .escenas{padding:0 var(--sangria)} @media (min-width:62rem){ .escenas{padding-left:calc(var(--sangria) + 3.1rem)} } /* Cada escena ocupa exactamente el alto disponible y su tarjeta lo llena. Si el contenido pide más, la escena crece: nunca se recorta ni aparece un scroll interno que compita con el de la página. */ /* El aire entre la tira y la tarjeta se mide contra el visor: en un portátil bajo esos 20 px de arriba y abajo son 40 que la lámina no tiene para su contenido, y aquí el alto es justo lo que falta. En pantalla alta se queda en los 20. */ .escena{min-height:calc(100svh - var(--tira-h));display:grid;padding-block:clamp(0.5rem,1.4vh,1.25rem)} @media (min-width:62rem){ .escena{height:calc(100svh - var(--tira-h));min-height:0} /* La tarjeta se compacta cuando el visor queda corto —menos relleno, tipografía y medidores más chicos— en vez de desbordar. Esa compactación se medía con consultas de contenedor sobre la propia tarjeta. Aquí no hacía falta: el alto de la lámina ES el del visor menos la tira, así que una consulta de alto de visor dice exactamente lo mismo. Y al no declarar container-type:size, la lámina puede volver a crecer cuando el contenido no cabe de ninguna manera —ver .es-crecida—, que con contención de tamaño era imposible: un contenedor de tamaño exige alto definido. La contención de disposición se conserva —contain:layout style, que es lo que container-type:size ya traía de propina menos el eje del tamaño—: con 42 láminas en la página, aislar el recalculo de cada tarjeta es lo que mantiene barato el desplazamiento. */ .panel{overflow:hidden;contain:layout style} .indice{padding-right:0.75rem} /* Última red, la pone el guion cuando ni el paso más denso hace caber la lámina: en vez de recortar cifras, la lámina crece y se lee desplazando. Es el mismo trato que la hoja ya promete en móvil. Ocurre en portátiles bajos —un panel 1080p al 150 % de Windows deja 720 px de css, y hay láminas que piden 900—, no en un monitor de 1080 hacia arriba, donde ninguna lámina llega a marcarse. */ .escena.es-crecida{height:auto;min-height:calc(100svh - var(--tira-h))} .escena.es-crecida .panel{overflow:visible} } /* El enganche del recorrido NO se toca cuando una lámina crece, y es a propósito. La regla de enganche dice que si el área es más alta que el visor, vale como posición de enganche cualquiera en la que el área cubra el visor —no solo su principio—, así que una lámina crecida se lee entera con la rueda, la barra espaciadora o AvPág sin que el navegador la devuelva al principio. Comprobado en un visor de 768 px con una lámina de 829: alineada por su fondo, el desplazamiento se queda donde se le deja, con enganche obligatorio. Por eso se conservan los dos: `mandatory` y `scroll-snap-stop:always`. Son los que hacen que una lámina no se pueda saltar de un gesto, que es el paso de diapositiva del recorrido, y perderlo en portátil sería cambiar un problema de recorte por uno de navegación. */ /* La tira es lo primero que le quita alto a la lámina, y en un portátil bajo cada píxel suyo sale del contenido. Se aprieta sin perder ningún mando ni bajar de los 40 px de área táctil que pide WCAG 2.5.8 para los enlaces de temática. No hay que tocar --tira-h: el guion publica el alto real que mida. */ @media (min-width:62rem) and (max-height:57rem){ .tira a{min-height:2.625rem} .tira .mandos{padding-block:0.25rem;gap:0.875rem} .tira .mando{gap:0.125rem} } /* ── Tarjeta ──────────────────────────────────────────────────── */ .panel{display:grid;grid-template-rows:auto auto 1fr;gap:1.125rem;padding:2.125rem;background:var(--papel);border:1px solid var(--color-borde); border-left:6px solid var(--tema);border-radius:1.375rem;box-shadow:0 20px 44px -34px rgba(22,35,58,.45); transition:box-shadow 420ms var(--curva-salida);will-change:transform,opacity} .escena.es-activa .panel{box-shadow:0 34px 68px -30px rgba(22,35,58,.5)} .cuerpo{display:grid;gap:1.625rem;align-content:start} /* En lámina completa el cuerpo estira los huecos: el aire sobrante se reparte entre bloques en vez de acumularse al pie de la tarjeta. */ @media (min-width:62rem){ .panel:not(.panel--portada) .cuerpo{align-content:start;row-gap:clamp(1.5rem,2.4vh,2.125rem)} } /* Lámina de un solo texto (significado, contexto histórico, taxonomía): el bloque toma el alto que sobra y el texto crece con él. Sin esto, el tope del bloque deja el aire entre la caja y la línea de fuente, que es el peor sitio posible: parece que la tarjeta se quedó a medias. Todas las medidas en unidades relativas —min() de vh y rem—, nunca píxeles fijos. */ @media (min-width:62rem){ .panel:not(.panel--portada) .cuerpo:has(> .bloque:nth-child(2):last-child > .lectura), .panel:not(.panel--portada) .cuerpo:has(> .bloque:nth-child(2):last-child > .taxonomia){ grid-template-rows:auto minmax(0,1fr);min-height:0} .cuerpo > .bloque:nth-child(2):last-child:has(> .lectura), .cuerpo > .bloque:nth-child(2):last-child:has(> .taxonomia){ grid-template-rows:auto minmax(0,1fr);min-height:0} /* El tope en unidades relativas se queda como red: si la fila el\u00e1stica no puede encogerse, el bloque no empuja la l\u00ednea de fuente fuera de la tarjeta. */ .bloque:nth-child(2):last-child > .lectura, .bloque:nth-child(2):last-child > .taxonomia{height:100%;min-height:min(24vh,16rem); max-height:min(56vh,36rem)} } /* Dos columnas para las láminas que reúnen varios bloques de un mismo tema: el texto y los bloques marcados como anchos cruzan la rejilla completa. */ .cuerpo--doble{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.625rem 1.75rem} .cuerpo--doble > p,.cuerpo--doble > .bloque--ancho{grid-column:1 / -1} /* Lámina de dos columnas donde el texto redactado del servicio manda: cada bloque toma el ancho entero y el texto queda debajo de las gráficas, en el orden en que ya venían. Quien lo decide es `apilarSiMandaElTexto()` en js/ficha/movimiento.js, midiendo texto contra gráficas; aquí solo está el efecto. Sin `align-items`: el bloque de texto sigue estirándose a su fila, que ahora es suya entera. */ .cuerpo--doble.cuerpo--apilado > .bloque{grid-column:1 / -1} @media (max-width:62rem){ .cuerpo--doble{grid-template-columns:minmax(0,1fr)} } .panel__paso{display:flex;align-items:center;gap:0.625rem;font-size:0.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tema)} .panel__paso b{display:inline-flex;align-items:center;justify-content:center;min-width:1.625rem;height:1.375rem;padding:0 7px;border-radius:62.4375rem;background:var(--tema);color:var(--tema-tinta);font-size:0.75rem;font-variant-numeric:tabular-nums} .panel h2{font-family:var(--fuente-titular);font-weight:800;font-size:clamp(1.7rem,2.7vw,2.4rem);line-height:1.06;letter-spacing:-.02em;max-width:28ch;text-wrap:pretty} .panel p.dice{font-size:1.0625rem;line-height:1.65;color:var(--azul-800);max-width:42rem;text-wrap:pretty} .panel__nota{font-size:0.8125rem;color:var(--tinta-suave)} /* Fuente: siempre la última fila de la tarjeta, pegada al filete inferior y con el mismo cuerpo en todas las láminas. */ .panel__fuente{grid-column:1/-1;margin-top:auto;align-self:end;padding-top:0.625rem; border-top:1px solid var(--color-borde);font-size:0.6875rem;line-height:1.4;color:var(--tinta-suave)} /* Portada de temática: texto a la izquierda, lámina del Diccionario a la derecha */ .panel--portada{display:grid;grid-template-rows:1fr;grid-template-columns:minmax(0,1fr);gap:0; background:var(--tema);border-color:var(--tema);border-left-color:var(--tema);color:var(--tema-tinta);padding:0;overflow:hidden} .portada__texto{display:grid;grid-template-rows:auto 1fr auto;gap:1rem;padding:clamp(1.625rem,3.2vw,2.625rem)} .portada__marca{display:flex;align-items:center;gap:0.8125rem} .portada__marca .ico{width:2.375rem;height:2.375rem;flex:none;opacity:.95} .panel--portada .panel__paso{color:var(--tema-tinta);opacity:.85} .panel--portada .panel__paso b{background:var(--tema-tinta);color:var(--tema)} .panel--portada h2{font-size:clamp(2.6rem,5vw,4.4rem);line-height:.98;max-width:16ch} /* El titular de portada se salía de su propia tarjeta en un teléfono. El mínimo del clamp eran 2.6rem —41,6 px— y «Generalidades» a ese cuerpo pide 297 px de renglón; entre la sangría de la página y el relleno de la tarjeta quedaban 299. Se cortaba la última letra, y con la palabra partida en dos renglones se comía la tarjeta entera. El arreglo es que por debajo de 62rem el mínimo deje de ser fijo y siga al ancho: 8.5vw da 33 px a 393 y 27 a 320, que caben con holgura, y el tope de 2.6rem recoge la escala justo donde empezaba antes. El relleno baja con él: 26 px a cada lado en una tarjeta de 351 son renglón que no se usa. */ @media (max-width:62rem){ .portada__texto{padding:clamp(1.125rem,4.5vw,2.625rem);gap:0.75rem} .panel--portada h2{font-size:clamp(1.75rem,8.5vw,2.6rem)} } .portada__cuerpo{display:grid;gap:0.9375rem;align-content:center} .portada__dice{font-size:clamp(1.1rem,1.7vw,1.45rem);line-height:1.5;max-width:44rem;opacity:.94;text-wrap:pretty} /* Las etiquetas de la portada son el índice de la temática: llevan a su lámina. Antes eran texto muerto y pedían seguir bajando para saber qué había. */ .portada__indice{display:flex;flex-wrap:wrap;gap:0.4375rem} .portada__indice a{display:inline-flex;align-items:center;gap:0.5rem;padding:0.5625rem 1rem;border-radius:62.4375rem; background:color-mix(in oklch, var(--tema-tinta) 15%, transparent);font-size:0.9063rem; color:inherit;text-decoration:none; transition:background 160ms var(--curva-salida),transform 160ms var(--curva-salida)} .portada__indice a:hover,.portada__indice a:focus-visible{transform:translateY(-1px); background:color-mix(in oklch, var(--tema-tinta) 30%, transparent)} .portada__indice a::before{content:"";width:0.3125rem;height:0.3125rem;border-radius:6.1875rem;background:currentColor;opacity:.7} /* El aviso de series que el servicio no publica este año. Vivía en la tira, repitiendo lo mismo sobre las seis temáticas; ahora cada portada dice lo suyo —y no aparece si su temática está completa—. Va en la tinta de la portada rebajada, no en un color de alarma: no es un error, es un hueco del origen. */ .portada__aviso{display:flex;align-items:baseline;gap:0.5rem; font-size:0.8125rem;line-height:1.5;opacity:.8;text-wrap:pretty} .portada__aviso::before{content:"";flex:none;align-self:center; width:0.375rem;height:0.375rem;border-radius:6.1875rem; background:currentColor;opacity:.55} .portada__pie{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0.875rem;font-size:0.7813rem;opacity:.82;font-variant-numeric:tabular-nums; border-top:1px solid color-mix(in oklch, var(--tema-tinta) 26%, transparent);padding-top:0.8125rem} /* Sin imagen: el aire lo llena el pictograma en marca de agua, no una foto. */ .panel--portada{position:relative;isolation:isolate} /* En la esquina, por debajo del filete del pie y sin cruzar el texto: acento, no ilustración. */ .panel--portada .ico--fondo{position:absolute;right:clamp(1rem,2.4vw,2.125rem);bottom:clamp(3.25rem,5vw,4.875rem); width:min(15%,8.5rem);aspect-ratio:1;height:auto;opacity:.2;z-index:-1} .ico{width:1.375rem;height:1.375rem;color:currentColor} .ico--fondo *{stroke-width:1.1;fill:none} .ico--fondo circle[fill]{fill:currentColor} /* ── Bloques de datos ─────────────────────────────────────────── */ .bloque{display:grid;gap:1.125rem} /* Subtítulo de bloque: toma el color de la temática y se apoya en un filete vertical del mismo color. Da jerarquía dentro de la tarjeta —el titular es negro, los bloques son de la temática— sin cajas ni fondos que compitan con las gráficas. */ .bloque__cabeza{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0.625rem 1rem} .bloque__titulo{padding-left:0.8125rem;border-left:3px solid var(--tema);border-radius:2px; font-family:var(--fuente-titular);font-weight:700;font-size:0.9688rem;letter-spacing:-.01em;color:var(--tema-texto,var(--tema))} .bloque__ayuda{font-size:0.7813rem;color:var(--tinta-suave)} .bloque__cabeza .bloque__ayuda{margin-left:auto} /* En la portada, donde el fondo YA es el color de la temática, el subtítulo se invierte para conservar contraste. */ .panel--portada .bloque__titulo{color:var(--tema-tinta)} .panel--portada .bloque__titulo{border-left-color:color-mix(in oklch, var(--tema-tinta) 55%, transparent)} .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0.75rem} /* Las cifras no se reparten a ciegas: con cuatro, o van las cuatro en fila o dos y dos, nunca tres y una huérfana debajo —que era lo que pasaba entre 564 y 636 px de tarjeta, el ancho normal a 1280 y 1400 de pantalla—; con tres, en fila o dos y la tercera a todo lo ancho. El bloque es el contenedor que se consulta. Una cifra larga (`data-largo`) ya toma su fila y se queda fuera de la regla. */ .bloque{container-type:inline-size} .kpis:has(> .kpi:nth-child(4):last-child):not(:has(> [data-largo])){grid-template-columns:repeat(2,minmax(0,1fr))} .kpis:has(> .kpi:nth-child(3):last-child):not(:has(> [data-largo])){grid-template-columns:repeat(2,minmax(0,1fr))} .kpis:has(> .kpi:nth-child(3):last-child):not(:has(> [data-largo])) > .kpi:last-child{grid-column:1 / -1} @container (min-width:35.25rem){ .kpis:has(> .kpi:nth-child(4):last-child):not(:has(> [data-largo])){grid-template-columns:repeat(4,minmax(0,1fr))} } @container (min-width:26.5rem){ .kpis:has(> .kpi:nth-child(3):last-child):not(:has(> [data-largo])){grid-template-columns:repeat(3,minmax(0,1fr))} .kpis:has(> .kpi:nth-child(3):last-child):not(:has(> [data-largo])) > .kpi:last-child{grid-column:auto} } /* Sin relieve al pasar el cursor: la cifra no se pulsa, y un salto de dos píxeles prometía lo contrario. */ /* Tarjetas más bajas de lo que eran (el usuario las vio grandes en el portátil al 150 %): menos relleno, y la cifra con suelo de 1,4 rem y no de 1,7. Con el suelo alto, donde la tarjeta va a todo lo ancho y no rigen las reglas por alto de visor, la cifra salía a 27 px, más grande que los 23 de una pantalla mayor: la escala tiene que crecer con la pantalla, no al revés. */ /* La tarjeta es su propio contenedor de consulta: el cuerpo de la cifra se calcula contra el ancho que le tocó (100cqi), que es lo único que decide si el valor cabe. Sin esto, «Industrias manufactureras» salía a cuerpo 37 y se desbordaba 180 px sobre la tarjeta vecina. */ .kpi{container-type:inline-size;display:grid;gap:3px;padding:0.875rem 1rem;border-radius:0.75rem;background:var(--tema-velo)} /* Dos variables y una sola declaración de cuerpo, para toda la ficha: --kpi-cifra el tope por densidad de lámina (lo fijan las reglas de es-densa/es-suelta y las de alto de visor, más abajo); --kpi-ancho el trozo indivisible más largo del valor, en caracteres, que escribe el guion (ver `kpis` en js/ficha/bloques.js). El tope manda mientras el valor quepa; cuando no cabe, el cuerpo baja a lo que quepa, con suelo en 0,875 rem —por debajo no se lee— y la palabra partiéndose con guion. Antes esto era una cascada de `font-size` y las reglas de densidad, más específicas, pisaban a las de nombre: por eso una lámina suelta tipografiaba un nombre como si fuera un número. */ .kpi b{font-family:var(--fuente-titular);font-weight:800;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums; font-size:clamp(0.875rem, calc(100cqi / (var(--kpi-ancho,3) * 0.66)), var(--kpi-cifra)); overflow-wrap:break-word;hyphens:auto} .kpis{--kpi-cifra:clamp(1.4rem,2.4vw,2.1rem)} .kpi span{font-size:0.8125rem;color:var(--tinta-suave);line-height:1.4} /* KPI de nombre y no de cifra: cuerpo de texto, sin la escala ni el interletraje apretado de un número, y el rótulo pegado al final de la tarjeta para que la fila conserve una línea de base común. Un nombre corto —«Capital», «Templado»— conserva cuerpo grande: bajarlo al de un párrafo lo convertía en una nota al pie de su propia tarjeta. */ .kpi[data-nombre]{align-content:space-between} .kpi[data-nombre] b{--kpi-cifra:1.0625rem;line-height:1.3;letter-spacing:-.01em;text-wrap:pretty} .kpi[data-nombre="corto"] b{--kpi-cifra:1.75rem} /* Nombre largo: fila propia y tope de tres líneas. El texto íntegro sigue disponible en el título de la tarjeta, y en estas láminas ya aparece completo en el titular. */ /* Y va al final de la fila: si parte el grid por la mitad, deja las cifras restantes solas en una tercera línea. */ .kpi[data-largo]{grid-column:1/-1;order:1} .kpi[data-largo] b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden} .barras{display:grid;gap:0.5rem} .barra[disabled]{cursor:default;opacity:1} .barra{display:grid;grid-template-columns:minmax(9rem,auto) minmax(0,1fr) auto;align-items:center;gap:0.875rem;padding:6px 0.5rem;border:0;background:transparent;border-radius:0.625rem;text-align:left;width:100%;transition:background 140ms var(--curva-salida)} .barra:hover,.barra:focus-visible{background:var(--papel-2)} .barra__eje{font-size:0.875rem;color:var(--tinta);font-variant-numeric:tabular-nums;text-wrap:pretty} .barra[aria-pressed="true"] .barra__eje{color:var(--tinta);font-weight:700} .barra__pista{display:flex;height:1.375rem;border-radius:7px;overflow:hidden;background:var(--papel-3)} .barra__seg{height:100%;transition:width 620ms var(--curva-salida),filter 140ms var(--curva-salida)} .barra:hover .barra__seg{filter:brightness(1.12)} .barra__total{font-size:0.8438rem;font-variant-numeric:tabular-nums} .ranking{display:grid;gap:0.75rem} .ranking__fila{display:grid;gap:5px;padding:4px 6px;border-radius:0.625rem;transition:background 140ms var(--curva-salida)} .ranking__fila:hover{background:var(--papel-2)} .ranking__cabeza{display:flex;align-items:baseline;justify-content:space-between;gap:0.875rem;font-size:0.9063rem} .ranking__cabeza b{font-variant-numeric:tabular-nums;white-space:nowrap} .ranking__pista{height:1rem;border-radius:0.5rem;background:var(--papel-3);overflow:hidden} .ranking__valor{height:100%;min-width:5px;border-radius:6px;background:var(--tema);transition:width 720ms var(--curva-salida)} /* Los dos absolutos de la comparación, bajo su pista. */ .ranking__pie{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0.625rem;margin-top:5px; font-size:0.7813rem;color:var(--tinta-suave)} .ranking__pie b{color:var(--tinta);font-weight:700;font-variant-numeric:tabular-nums} /* Cuando la parte supera el total, la pista se llena y se raya: la cifra dice las veces y la barra no finge que cabe dentro. */ .ranking__pista--excede{background:repeating-linear-gradient(135deg,var(--papel-3) 0 5px,var(--papel-2) 5px 10px)} .ranking__pista--excede .ranking__valor{background:repeating-linear-gradient(135deg,var(--tema) 0 6px,color-mix(in oklch,var(--tema) 60%,#fff) 6px 12px)} /* Un ranking marcado `fijo` conserva las proporciones de la ficha municipal —pista de 1rem, filas de 46px— aunque el panel entre en modo denso: la matrícula por nivel se compara entre las dos escalas y unas barras más delgadas en el departamento hacían parecer menor lo que solo estaba más apretado. Va después de las reglas de densidad para ganarles por orden. */ .panel .ranking--fijo{gap:0.75rem} .panel .ranking--fijo .ranking__fila{padding:4px 6px} .panel .ranking--fijo .ranking__cabeza{font-size:0.9063rem} .panel .ranking--fijo .ranking__pista{height:1rem} .panel .ranking--fijo .ranking__pie{margin-top:5px;font-size:0.7813rem} /* Gráficas en SVG: mismo lenguaje que la ficha —rejilla suave, cifras tabulares, color de la temática— y animables por trazo con anime.js. */ .grafico{width:100%;height:auto;display:block;overflow:visible;font-family:var(--fuente-texto)} /* Serie de acompañamiento: cierra la lámina sin competir con la gráfica que responde al titular. */ .grafico-chico{width:100%} .grafico text{fill:var(--tinta-suave);font-size:0.7188rem} .grafico .g-eje{stroke:var(--color-borde);stroke-width:1} .grafico .g-rejilla{stroke:var(--papel-3);stroke-width:1;stroke-dasharray:3 4} .grafico .g-eje-cat{font-size:0.75rem} .grafico .g-valor{fill:var(--tinta);font-weight:700;font-variant-numeric:tabular-nums} .grafico .g-area{fill:var(--tema);opacity:.14} .grafico .g-linea{fill:none;stroke:var(--tema);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round} .grafico .g-punto{fill:var(--papel);stroke:var(--tema);stroke-width:2.4;transform-box:fill-box;transform-origin:center} .grafico .g-barra{fill:var(--tema);transform-box:fill-box;transform-origin:bottom} .grafico .g-toque{fill:transparent;cursor:pointer} .grafico g[data-anio]:hover .g-barra{filter:brightness(1.12)} .grafico g[data-anio]:hover .g-punto{fill:var(--tema)} .grafico g[data-anio][data-activo] .g-eje-rotulo{fill:var(--tinta);font-weight:700} .dona{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:1.25rem} .dona{gap:1.5rem} /* La dona protagonista de una lámina crece y su leyenda sube de escala: es la gráfica que responde al titular, no un adorno junto al texto. */ .dona--grande{gap:2rem} .dona--grande .dona__aro{width:clamp(9rem,min(20vh,17vw),13rem)} .dona--grande .dona__fila{font-size:0.9375rem;padding:0.5rem 6px} .dona--grande .dona__fila i{width:0.75rem;height:0.75rem} .dona--grande .dona__arco{stroke-width:18} /* A columna completa la dona protagonista toma todo el ancho disponible: si es la única gráfica de la lámina, es ella la que debe llenar el alto. */ .cuerpo:not(.cuerpo--doble) .dona--grande, .cuerpo--doble .bloque--ancho .dona--grande{gap:2.75rem;justify-items:stretch} .cuerpo:not(.cuerpo--doble) .dona--grande .dona__aro, .cuerpo--doble .bloque--ancho .dona--grande .dona__aro, .cuerpo:not(.cuerpo--doble) .dona--mayor .dona__aro, .cuerpo--doble .bloque--ancho .dona--mayor .dona__aro{width:clamp(9.5rem,min(23vh,17vw),14rem)} /* Dona protagonista Y mayor, a columna completa: es la única gráfica de la lámina y el reparto es lo que se viene a ver, así que el aro toma todo el alto que la tarjeta le deja y las filas de la leyenda se ajustan para devolvérselo. */ .cuerpo:not(.cuerpo--doble) .dona--grande.dona--mayor{grid-template-columns:auto minmax(0,1.35fr);gap:2.25rem} .cuerpo:not(.cuerpo--doble) .dona--grande.dona--mayor .dona__aro{width:clamp(12rem,min(34vh,24vw),19rem)} .cuerpo:not(.cuerpo--doble) .dona--grande.dona--mayor .dona__fila{padding:0.3125rem 6px;font-size:0.875rem} .cuerpo:not(.cuerpo--doble) .dona--mayor .dona__fila, .cuerpo--doble .bloque--ancho .dona--mayor .dona__fila{font-size:0.9375rem;padding:0.625rem 6px} .cuerpo:not(.cuerpo--doble) .dona--mayor .dona__fila i, .cuerpo--doble .bloque--ancho .dona--mayor .dona__fila i{width:0.875rem;height:0.875rem} .cuerpo:not(.cuerpo--doble) .dona--grande .dona__fila, .cuerpo--doble .bloque--ancho .dona--grande .dona__fila{font-size:0.9375rem;padding:0.625rem 6px;border-bottom:1px solid var(--color-borde);border-radius:0} .cuerpo:not(.cuerpo--doble) .dona--grande .dona__fila:last-child, .cuerpo--doble .bloque--ancho .dona--grande .dona__fila:last-child{border-bottom:0} .dona--grande .dona__arco:hover{stroke-width:22} /* Leyenda compacta (`leyendaCompacta` en el bloque): para la dona protagonista de MUCHAS entradas, donde el alto de la lámina lo fija la LISTA y no el aro —Área construida, doce destinos: 545 px de leyenda contra 336 de aro—. Al apretar la lista, el aro deja de quedar pequeño al lado de ella sin que la lámina crezca: quien manda sigue siendo la leyenda. Se probó repartir la lista en DOS COLUMNAS y no sirve, aunque el alto cuadre: la tarjeta baja de 900 px cuando el mapa ocupa la otra mitad, cada columna se queda en ~160 y el nombre desborda su celda POR ENCIMA de la cifra. El par «nombre · cifra · porcentaje» necesita el ancho entero. */ /* Todo lo de esta dona va en unidades que miran al ALTO del visor, que es la pauta del resto de la ficha —el titular es `clamp(2rem,min(4.6vw,7.4vh),3.6rem)`—. El `rem` no basta aquí: la escala de la casa es `clamp(16px,0.85rem+0.42vmin,22px)` y vmin toma el lado MENOR, así que en una ventana ancha y baja —1891 × 950, la típica de un monitor 1080p con la barra del navegador— el cuerpo se calcula como si sobrara sitio y lo que falta es alto. Con vh, una lista de doce filas se aprieta cuando la ventana es baja en vez de desbordarse. */ .dona--leyenda-compacta .dona__leyenda{gap:clamp(2px,0.3vh,5px)} /* La cifra y el porcentaje sueltan ancho: con doce destinos y el cuerpo suelto de los visores altos, «Administración pública» y «Social y recreación» se partían en dos líneas y descuadraban la lista. */ /* La serie de acompañamiento no crece sin freno con el ancho de la tarjeta. El SVG lleva `viewBox` de 640 y `width:100%`, así que su ALTO es proporcional al ancho: medido, 105 px en una ventana de 1400 y 135 en una de 1891, donde la tarjeta llega a 879. Es alto que la lámina no tiene, y crece justo en las pantallas donde más sobra el ancho. Con el tope, a partir de cierto ancho la gráfica se queda quieta en vez de estirarse hacia abajo. */ @media (min-width:62rem){ .cuerpo:has(.dona--leyenda-compacta) .grafico{max-height:min(7rem,12vh)} } /* Especificidad a propósito: la regla que manda en esta dona es `.cuerpo:not(.cuerpo--doble) .dona--grande.dona--mayor .dona__fila`, de cuatro clases. Escrita con dos, esta se perdía en silencio y el cuerpo seguía en `0.875rem` —comprobado midiendo: 15,39 px, que es 0,875 × la raíz—. */ .cuerpo .dona--leyenda-compacta.dona--grande.dona--mayor .dona__fila{ column-gap:0.5rem; padding:clamp(1px,0.3vh,0.3125rem) 0.375rem; font-size:clamp(0.6875rem,1.45vh,0.9375rem)} .dona--leyenda-compacta .dona__fila b{min-width:3.4rem} .dona--leyenda-compacta .dona__fila em{min-width:2.75rem} /* El aro se acota aunque sea el protagonista, y no le cuesta nada a la lámina: con doce entradas quien fija el alto del bloque es la leyenda, así que los ~50 px que suelta el aro se los queda la lista COMO ANCHO. Es lo que evita que «Administración pública» se parta en dos líneas en una tarjeta de 650 px —la mitad de la pantalla, porque la otra es el mapa—. */ @media (min-width:62rem){ .cuerpo:not(.cuerpo--doble) .dona--leyenda-compacta.dona--grande.dona--mayor .dona__aro{ width:clamp(10.5rem,min(28vh,19vw),16rem)} } .cuerpo--doble .bloque:not(.bloque--ancho) .dona--grande{grid-template-columns:minmax(0,1fr);justify-items:center;gap:1rem} /* Dona corriente en media columna: la leyenda pasa DEBAJO. Con el aro y la leyenda lado a lado, el par «nombre · cifra · porcentaje» pide más ancho del que tiene la columna y se derramaba sobre el bloque vecino. */ .cuerpo--doble .bloque:not(.bloque--ancho) .dona:not(.dona--grande){grid-template-columns:minmax(0,1fr);justify-items:stretch;gap:1rem} .cuerpo--doble .bloque:not(.bloque--ancho) .dona:not(.dona--grande) .dona__aro{justify-self:center} .cuerpo--doble .bloque:not(.bloque--ancho) .dona:not(.dona--grande) .dona__fila{padding:0.4375rem 6px;border-bottom:1px solid var(--color-borde);border-radius:0} .cuerpo--doble .bloque:not(.bloque--ancho) .dona:not(.dona--grande) .dona__fila:last-child{border-bottom:0} .cuerpo--doble .bloque:not(.bloque--ancho) .dona--grande .dona__aro{width:clamp(8.5rem,min(20vh,13vw),11.5rem)} .cuerpo--doble .bloque:not(.bloque--ancho) .dona--grande .dona__leyenda{width:100%} .dona .dona__aro{width:clamp(8rem,min(18vh,15vw),11.5rem)} /* El aro es un div con el SVG dentro, y no el SVG a secas, por la cifra del centro. Antes iba como del SVG: la cifra en unidades del viewBox, y el pie en rem, que dentro de un viewBox NO mira al aro sino a la raíz de la página. Como la raíz crece con la pantalla (clamp(16px,…,22px)) y el hueco del aro mide siempre lo mismo en unidades del dibujo, «km² clasificados» se salía del anillo justo en las pantallas grandes, y ninguna regla en rem podía arreglarlo: no hay unidad de CSS que dentro de un SVG mire al aro. Ahora el aro es su propio contenedor de consulta y la cifra y el pie son HTML puesto encima del hueco, con el cuerpo en cqw —centésimas del ancho del aro—: crecen y encogen con él, en cualquier variante y a cualquier ancho, sin una regla por tamaño. Las medidas salen del dibujo: viewBox de 140, radio 54 y trazo de 16 a 18 (22 al pasar el cursor), así que el hueco mide 86 a 90 unidades de diámetro, el 61-64 % del ancho. Pero la pila «cifra + pie» va centrada, así que la cifra queda POR ENCIMA del centro y el pie por debajo, donde el círculo ya es más estrecho: con la caja de línea de la cifra (1,22 em en Bricolage) a unos 16cqw del centro, el hueco deja 52cqw de ancho; para el pie, 54cqw. Medido por DOM con el trazo del cursor: «100 %» a 58cqw se salía 3 px. */ .dona__aro{position:relative;container-type:inline-size} .dona__aro svg{display:block;width:100%;height:auto;overflow:visible} .dona__arco{fill:none;stroke-width:16;transition:stroke-width 160ms var(--curva-salida)} .dona__arco:hover{stroke-width:19} /* La caja del centro cubre el aro y centra la pila «cifra + pie»; no atiende al ratón, para que el globo y el pulsado de los arcos sigan pasando por debajo. */ .dona__centro-caja{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;row-gap:1cqw;text-align:center;pointer-events:none} /* Como `--kpi-ancho` en las cifras: el guion escribe `--largo`, los caracteres de la cifra, y el cuerpo baja de su tope justo lo que haga falta para que quepa en los 52cqw del hueco —«8.841.802» no cabe al cuerpo de «74 %»—. Dígito de titular en negrita: unos 0,62 em de ancho, y el «%» más. */ .dona__centro{display:block;color:var(--tinta);font-family:var(--fuente-titular);font-weight:800;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap; font-size:min(20cqw, 52cqw / (var(--largo,3) * 0.62))} /* El pie con el mismo cálculo (letra de texto, unos 0,52 em) y un suelo, por debajo del cual prefiere partirse en dos renglones dentro del hueco a hacerse ilegible. Los pies de la ficha —«km² clasificados» es el más largo— caben en uno. */ .dona__pie{display:block;color:var(--tinta-suave);line-height:1.15;max-width:54cqw;text-wrap:balance;overflow-wrap:break-word; font-size:clamp(5.5cqw, 54cqw / (var(--largo,8) * 0.52), 7.5cqw)} /* Leyenda apretada (`apretada`): la cifra y el porcentaje apilados en una columna estrecha a la derecha, y el nombre con el resto del ancho. Para muchas partes con nombres largos al lado de un aro grande, donde en cuatro columnas el nombre se partía en cuatro líneas. Filas más bajas, para que ocho quepan a la altura del aro. */ .dona--apretada .dona__leyenda{gap:2px} /* El aro de la dona apretada va algo más grande que el de la dona ancha a secas: la leyenda a su lado es alta y un aro de 13 rem quedaba chico. */ .cuerpo--doble .bloque--ancho .dona--grande.dona--apretada .dona__aro{width:clamp(11rem,min(27vh,19vw),16rem)} .cuerpo--doble .bloque--ancho .dona--apretada .dona__fila, .dona--apretada .dona__fila{grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;row-gap:0;column-gap:0.625rem;padding:0.375rem 6px;font-size:0.875rem;line-height:1.3} .dona--apretada .dona__fila i,.dona--apretada .dona__fila span{grid-row:1 / 3} .dona--apretada .dona__fila b{grid-column:3;grid-row:1;justify-self:end;white-space:nowrap} .dona--apretada .dona__fila em{grid-column:3;grid-row:2;justify-self:end;font-size:0.75rem} .dona__leyenda{display:grid;gap:7px} .dona__fila{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:0.75rem;font-size:0.9063rem;padding:5px 4px;border-radius:0.5rem;line-height:1.35} .dona__fila>span{text-wrap:pretty} .dona__fila:hover{background:var(--papel-2)} .dona__fila i{width:0.625rem;height:0.625rem;border-radius:3px} .dona__fila b,.dona__fila em{font-variant-numeric:tabular-nums;font-style:normal;white-space:nowrap} .dona__fila em{color:var(--tinta-suave);min-width:3.8rem;text-align:right} .dona__fila b{min-width:4.2rem;text-align:right} /* La dona en un teléfono: una columna siempre, y el anillo centrado siempre. Aquí había una sola regla —`.dona{grid-template-columns:minmax(0,1fr)}`— y no bastaba, por dos motivos. Uno: hay cuatro variantes de dona con reglas de dos columnas más específicas que esa, y la ganaban. La peor era `.dona--grande.dona--mayor` de «Área construida», que reparte 192 px de anillo y deja 82 para la leyenda: dentro, la columna del nombre colapsaba a cero y «Vivienda» se pintaba encima de «469.425». Por eso hay que nombrar las cuatro. Y dos: la regla no decía nada de `justify-items`, así que el anillo solo quedaba centrado cuando la dona caía dentro de un `.cuerpo--doble` —que sí lo fija— y a la izquierda en cualquier otro sitio. De ahí que en Social salieran pegadas al canto y en Movilidad centradas. */ /* Dos formas de pantalla, no una: el teléfono de pie y el teléfono tumbado. En el segundo el visor mide 851 px y la consulta de ancho no salta, pero la tarjeta vive en una columna de 489 y la dona se parte igual —«Indígena» se pintaba sobre «7.827»—. Lo que decide es el ancho de la tarjeta, no el de la pantalla; mientras esto no sea una consulta de contenedor, se nombran las dos formas donde la tarjeta se queda estrecha. La tableta de pie y el escritorio se quedan a dos columnas, que es donde caben. */ @media (max-width:34rem), (max-width:62rem) and (min-aspect-ratio:1.2){ .dona, .cuerpo:not(.cuerpo--doble) .dona--grande.dona--mayor, .cuerpo--doble .bloque--ancho .dona--grande, .cuerpo--doble .bloque:not(.bloque--ancho) .dona--grande, .cuerpo--doble .bloque:not(.bloque--ancho) .dona:not(.dona--grande){ grid-template-columns:minmax(0,1fr);justify-items:stretch;gap:1rem} .dona > .dona__aro{justify-self:center} /* El ancho del anillo deja de tener suelo en rem. Doce rem son 192 px y la tarjeta útil mide 310: el mínimo mandaba siempre y no dejaba sitio a nada más. En una columna manda el ancho que hay. */ .dona .dona__aro, .cuerpo:not(.cuerpo--doble) .dona--mayor .dona__aro, .cuerpo--doble .bloque--ancho .dona--mayor .dona__aro, .cuerpo:not(.cuerpo--doble) .dona--grande.dona--mayor .dona__aro{width:min(100%,13rem)} /* Y la fila de la leyenda afloja sus reservas: con 3,8 y 4,2 rem apartados para las cifras, al nombre no le quedaba renglón en una pantalla estrecha. */ .dona__fila{gap:0.5rem} .dona__fila em{min-width:3rem} .dona__fila b{min-width:3.4rem} } .tasas{display:grid;gap:1.25rem} /* Dos tasas de la misma naturaleza se leen mejor una junto a otra que en pila. */ @media (min-width:62rem){ .tasas--fila{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 32px} } .tasa{display:grid;gap:0.5625rem} .tasa__nombre{display:flex;flex-wrap:wrap;align-items:baseline;gap:0.5rem;font-family:var(--fuente-titular);font-weight:700;font-size:0.9063rem} .tasa__nombre span{font-family:var(--fuente-texto);font-weight:400;font-size:0.7813rem;color:var(--tinta-suave)} /* El «?» de una cifra (ver ayudaDe en bloques.js): pequeño y en tinta suave, para que acompañe al rótulo sin competir con la cifra. Mide 17 px a la vista y 33 al dedo —el pseudo amplía el área sin mover nada—. */ .ayuda-cifra{position:relative;display:inline-grid;place-items:center;width:1.0625rem;height:1.0625rem; margin-left:0.375rem;padding:0;border:1px solid var(--color-borde-firme);border-radius:50%;background:transparent; color:var(--tinta-suave);font:700 0.6875rem/1 var(--fuente-texto);vertical-align:0.1em;cursor:help; transition:color 140ms var(--curva-salida),border-color 140ms var(--curva-salida)} .ayuda-cifra::after{content:"";position:absolute;inset:-0.5rem} .ayuda-cifra:hover,.ayuda-cifra:focus-visible{color:var(--tema);border-color:var(--tema)} .ayuda-cifra:focus-visible{outline:2px solid var(--tema);outline-offset:2px} .tasa__par{display:grid;gap:5px} .tasa__fila{display:grid;grid-template-columns:5.6rem minmax(0,1fr) 4.4rem;align-items:center;gap:0.75rem;padding:3px 4px;border-radius:0.5rem} .tasa__fila:hover{background:var(--papel-2)} .tasa__quien{font-size:0.8125rem;color:var(--tinta-suave)} .tasa__pista{height:0.8125rem;border-radius:7px;background:var(--papel-3);overflow:hidden} .tasa__valor{display:block;height:100%;border-radius:7px;background:var(--tema);transition:width 720ms var(--curva-salida)} .tasa__fila--ref .tasa__valor{background:color-mix(in oklch, var(--tinta) 42%, var(--papel-3))} .tasa__fila b{font-size:0.875rem;font-variant-numeric:tabular-nums;text-align:right} .destacado{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px 1.625rem; padding:1.375rem 1.625rem;border-radius:1.125rem;background:var(--tema-velo)} .destacado__cifra{grid-row:1 / span 3} @media (max-width:48rem){ .destacado{grid-template-columns:minmax(0,1fr)} .destacado__cifra{grid-row:auto} } .destacado__cifra{display:grid;font-family:var(--fuente-titular);font-weight:800; font-size:clamp(2rem,3.4vw,2.7rem);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums} .destacado__cifra em{display:none} .destacado__unidad{align-self:end;font-family:var(--fuente-titular);font-weight:700;font-size:1rem;line-height:1.3} .destacado__dice{align-self:center} .destacado__dice{font-size:1rem;line-height:1.55;color:var(--azul-800);max-width:44rem;text-wrap:pretty} .destacado__pie{font-size:0.7813rem;color:var(--tinta-suave)} .ficha-datos{display:grid;align-self:start} .ficha-datos__fila{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:0.625rem 0;border-bottom:1px solid var(--color-borde);font-size:0.875rem} .ficha-datos__fila:last-child{border-bottom:0} .ficha-datos__fila b{font-variant-numeric:tabular-nums;text-align:right;max-width:60%} .nombres{display:flex;flex-wrap:wrap;gap:0.5rem} .nombres span{padding:0.5rem 0.8125rem;border-radius:62.4375rem;background:var(--tema-velo);font-size:0.8438rem} /* Colindantes pulsables: mismo chip, con estado y relieve al pasar. */ .nombres--pulsables button{padding:0.5rem 0.875rem;border:0;border-radius:62.4375rem;background:var(--tema-velo); font-family:inherit;font-size:0.8438rem;color:var(--tinta);cursor:pointer; transition:background 140ms var(--curva-salida),color 140ms var(--curva-salida),transform 160ms var(--curva-salida),box-shadow 180ms var(--curva-salida)} .nombres--pulsables button:hover{transform:translateY(-1px); background:color-mix(in oklch, var(--tema) 22%, transparent); box-shadow:0 0.5rem 1rem -0.7rem rgba(22,35,58,.55)} .nombres--pulsables button[aria-pressed="true"]{background:var(--tema);color:var(--tema-tinta);font-weight:700} .nombres--pulsables .nombre--todo{border:1.5px solid var(--tema);background:transparent;color:var(--tema);font-weight:700} .nombres--pulsables .nombre--todo[aria-pressed="true"]{background:var(--tema);color:var(--tema-tinta)} .tabla-marco{overflow-x:auto;border:1px solid var(--color-borde);border-radius:0.875rem} table{width:100%;border-collapse:collapse;font-size:0.875rem} th,td{padding:0.6875rem 0.875rem;text-align:left;border-bottom:1px solid var(--color-borde)} th{font-size:0.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-suave)} td:not(:first-child),th:not(:first-child){text-align:right;font-variant-numeric:tabular-nums} tbody tr:hover{background:var(--papel-2)} tbody tr:last-child td{border-bottom:0} tbody tr[data-activo]{background:var(--tema-velo)} tbody tr[data-activo] td:first-child{box-shadow:inset 3px 0 0 var(--tema)} /* Tabla de texto y no de cifras: la última columna es una lista de nombres, así que se alinea a la izquierda, envuelve y cuelga desde arriba. Con el alineado numérico por omisión, cuarenta reservas naturales quedaban en una sola línea empujada a la derecha. El marco lleva su propio desplazamiento: la lista más larga del país (Antioquia) no cabe en ninguna lámina. */ .tabla-marco--texto{max-height:min(26rem,52vh);overflow-y:auto} @media (min-height:56rem){ .tabla-marco--texto{max-height:min(38rem,58vh)} } .tabla-marco--texto td,.tabla-marco--texto th{vertical-align:top} .tabla-marco--texto td:last-child,.tabla-marco--texto th:last-child{text-align:left;font-variant-numeric:normal;line-height:1.5;text-wrap:pretty} .tabla-marco--texto td:first-child{font-weight:700} /* Las columnas que no son la lista miden lo que su contenido: con el min-width de 11rem que tuvo la primera hasta el 21 de septiembre de 2026, «Aeropuertos» daba 342 px a una columna con 48 de texto y la lista se quedaba con lo que sobraba; en el teléfono las diez tablas de texto de un departamento se salían del marco. width:1% con nowrap es la forma de pedirle a la tabla el ancho mínimo de una columna: el resto se lo lleva la lista. */ .tabla-marco--texto td:not(:last-child),.tabla-marco--texto th:not(:last-child){width:1%;white-space:nowrap} /* En el teléfono la tabla no cabe en columnas: cada fila se apila —las celdas de nombre y cifra en un renglón, la lista a todo el ancho debajo— y la cabecera se esconde; el nombre de cada columna de cifras lo escribe la propia celda desde `data-etiqueta` (bloques.js). Los papeles ARIA de la tabla van explícitos en el HTML porque aquí fila y celda dejan de ser `display:table-*`. */ @media (max-width:40rem){ .tabla-marco--texto thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .tabla-marco--texto tbody,.tabla-marco--texto tr,.tabla-marco--texto td{display:block} .tabla-marco--texto tr{display:flex;flex-wrap:wrap;column-gap:0.875rem;row-gap:0.375rem;padding:0.875rem;border-bottom:1px solid var(--color-borde)} .tabla-marco--texto tbody tr:last-child{border-bottom:0} .tabla-marco--texto td,.tabla-marco--texto td:not(:last-child){width:auto;padding:0;border:0;text-align:left;white-space:normal} .tabla-marco--texto td:last-child{flex-basis:100%} .tabla-marco--texto td:not(:first-child):not(:last-child)::before{content:attr(data-etiqueta) ": ";font-weight:400;color:var(--tinta-suave)} .tabla-marco--texto tbody tr[data-activo] td:first-child{box-shadow:none} .tabla-marco--texto tbody tr[data-activo]{box-shadow:inset 3px 0 0 var(--tema)} } /* Lista de nombres en columnas: 120 reservas naturales separadas por comas son un párrafo que hay que leer entero para encontrar uno. Un nombre por línea, en tantas columnas como quepan, se recorre con la vista y aprovecha el desplazamiento que la celda ya tiene. */ .lista-nombres{margin:0;padding:0;list-style:none;display:grid; grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:1px 1.5rem} .lista-nombres li{padding:3px 0;font-size:0.8438rem;line-height:1.35;border-bottom:1px solid color-mix(in oklab,var(--color-borde) 60%,transparent)} .lista-nombres li:last-child{border-bottom:0} .tabla-marco--texto td,.tabla-marco--texto th{padding-block:0.875rem} .tabla-marco--texto thead th{position:sticky;top:0;background:var(--papel);z-index:1} .cita{padding:1.125rem 1.25rem;border-radius:0.875rem;background:var(--papel-2);font-size:1rem;line-height:1.6;color:var(--azul-800);text-wrap:pretty} .cita b{color:var(--tinta)} .cita small{display:block;margin-top:0.625rem;font-size:0.7813rem;color:var(--tinta-suave)} .enlaces{display:grid;gap:0.625rem} .enlaces a{display:flex;align-items:baseline;justify-content:space-between;gap:0.875rem;padding:0.8125rem 1rem;border:1px solid var(--color-borde);border-radius:0.75rem;text-decoration:none;color:var(--tinta);font-size:0.9063rem;transition:border-color 140ms var(--curva-salida),background 140ms var(--curva-salida)} .enlaces a:hover{border-color:var(--tema);background:var(--tema-velo);color:var(--tinta)} .enlaces a span{font-size:0.7813rem;color:var(--tinta-suave)} /* Texto redactado del servicio, íntegro y con desplazamiento propio. Su alto ocupa la lámina: con un tope corto el texto queda en una franja y la tarjeta se llena de espacio muerto, que es lo contrario de lo que hace falta aquí. */ /* Lámina larga —data-larga, la de Hidrografía—: la tarjeta conserva el alto de las demás, para que el enganche del recorrido siga siendo un gesto por lámina, y es su cuerpo el que se desplaza por dentro. Al llegar al final, el gesto siguiente pasa a la lámina que sigue. La lectura no lleva su propio desplazamiento: sería un rollo dentro de otro. */ @media (min-width:62rem){ .escena[data-larga] .cuerpo{overflow-y:auto;min-height:0;padding-right:0.5rem;scrollbar-width:thin; scrollbar-color:var(--color-borde-firme) transparent} /* Aviso de que hay más abajo: el pie del cuerpo se desvanece mientras quede contenido por leer, y se aclara al llegar al final (data-fin lo pone el guion al desplazar). */ .escena[data-larga] .cuerpo:not([data-fin]){-webkit-mask-image:linear-gradient(#000 calc(100% - 2.75rem),transparent); mask-image:linear-gradient(#000 calc(100% - 2.75rem),transparent)} } .escena[data-larga] .lectura{max-height:none;overflow:visible} .escena[data-larga] .tabla-marco--texto{max-height:none;overflow:visible} /* Pero en pantalla estrecha la tabla conserva su desplazamiento horizontal. Allí el cuerpo no se desplaza por dentro —eso es solo de escritorio, arriba—, así que no hay nada que ganar dejándola suelta, y suelta su ancho mínimo —la primera columna va a 11rem— ensanchaba la columna de la rejilla y la tabla y su cabecera se cortaban contra el filo de la tarjeta: 393 px de tabla en una tarjeta de 307 en un teléfono de 390, y 472 la de estaciones del IDEAM (medido el 10 de septiembre de 2026 en ocho de las doce láminas de Generalidades del Meta). `overflow-x:auto` hace auto también el eje vertical, pero sin tope de alto no aparece barra. */ @media (max-width:62rem){ .escena[data-larga] .tabla-marco--texto{overflow-x:auto} } /* Zona o subzona pulsable en la tabla de hidrografía. Texto con subrayado punteado, no píldora: son treinta nombres en celdas de tabla. */ .sel-mapa{background:none;border:0;padding:0 2px;margin:0 -2px;font:inherit;color:inherit;cursor:pointer; border-radius:0.25rem;text-decoration:underline dotted;text-underline-offset:.2em;text-decoration-color:var(--tinta-suave)} .sel-mapa:hover{background:var(--tema-velo);text-decoration-color:var(--tema)} .sel-mapa[aria-pressed="true"]{background:var(--tema);color:var(--tema-tinta);font-weight:700;text-decoration:none} .sel-mapa[aria-pressed="true"] i{box-shadow:0 0 0 1.5px var(--tema-tinta)} .sel-mapa:focus-visible{outline:2px solid var(--tema);outline-offset:2px} /* La lista de subzonas se lee como prosa, alineada a la izquierda aunque la tabla centre sus celdas. */ .hidro-lista{display:block;text-align:left;line-height:1.6} /* Dona pulsable: arco y fila de leyenda con papel de botón. La fila elegida se marca con la tinta de la temática; el arco elegido, con el filo del papel. */ .dona__arco--pulsable,.dona__fila--pulsable{cursor:pointer} .dona__fila--pulsable{border-radius:0.5rem;transition:background 140ms var(--curva-salida)} .dona__fila--pulsable:hover{background:var(--tema-velo)} /* Fila elegida, en la dona y en el ranking: un tinte del tema y una barra al canto, no la fila entera en tema. Con la fila llena, la barra del ranking —del mismo tema— se perdía sobre su propio color y la muestra de tinta de la dona quedaba sin contraste (lo señaló el usuario el 8 de septiembre de 2026). El tinte es del doble que el del hover, para que se distingan. */ .dona__fila--pulsable[aria-pressed="true"]{background:color-mix(in oklch, var(--tema) 16%, transparent);box-shadow:inset 3px 0 0 var(--tema);color:var(--tinta)} .dona__fila--pulsable[aria-pressed="true"]>span,.dona__fila--pulsable[aria-pressed="true"] b{font-weight:700} .dona__fila--pulsable[aria-pressed="true"] i{box-shadow:0 0 0 1.5px var(--papel),0 0 0 3px var(--tinta)} .dona__fila--pulsable:focus-visible{outline:2px solid var(--tema);outline-offset:2px} /* Barras pulsables del ranking —las categorías de áreas protegidas— con la muestra de tinta del mapa delante del nombre. Mismo estado que la dona. */ .ranking__tinta{display:inline-block;width:0.625rem;height:0.625rem;border-radius:3px;margin-right:0.45rem;flex:none} .ranking__fila--pulsable{cursor:pointer} .ranking__fila--pulsable:hover{background:var(--tema-velo)} .ranking__fila--pulsable[aria-pressed="true"]{background:color-mix(in oklch, var(--tema) 16%, transparent);box-shadow:inset 3px 0 0 var(--tema);color:var(--tinta)} .ranking__fila--pulsable[aria-pressed="true"] .ranking__cabeza{font-weight:700} .ranking__fila--pulsable[aria-pressed="true"] .ranking__pista{background:var(--papel)} .ranking__fila--pulsable:focus-visible{outline:2px solid var(--tema);outline-offset:2px} /* Los bloques a dos columnas se alinean arriba: la rejilla estira los bloques a la altura del más alto y, sin esto, el de al lado repartía el sobrante entre sus filas y empezaba a media altura. Hasta el 11 de septiembre de 2026 valía solo para las láminas largas; ese día apareció fuera de ellas, en la de Extensión y relieve de San Andrés: el texto fisiográfico de la derecha mide 710 px y el título de la comparación de la izquierda crecía a 240 (lo señaló el usuario). Con `es-suelta-3` las filas son explícitas —`auto minmax(0,1fr)`— y la fracción se sigue quedando con el sobrante. */ .cuerpo--doble > .bloque{align-content:start} .lectura{max-height:min(44vh,29rem);overflow-y:auto;padding:1.125rem 1.25rem;border:1px solid var(--color-borde); border-radius:0.875rem;background:var(--papel-2);display:grid;gap:0.75rem; font-size:0.9375rem;line-height:1.62;color:var(--azul-800);text-wrap:pretty; scrollbar-width:thin;scrollbar-color:var(--tema) transparent} .lectura p{margin:0} .lectura:focus-visible{outline:2px solid var(--tema);outline-offset:2px} .cronologia{list-style:none;margin:0;padding:0 0 0 1.125rem;display:grid;gap:0.6875rem; border-left:2px solid var(--tema-velo)} .cronologia li{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;gap:0.25rem 0.75rem} .cronologia li::before{content:"";position:absolute;left:-1.4375rem;top:.5em;width:0.5rem;height:0.5rem; border-radius:50%;background:var(--tema);opacity:.4} .cronologia li[data-actual]::before{opacity:1;box-shadow:0 0 0 0.1875rem var(--tema-velo)} .cronologia b{font-family:var(--fuente-titular);font-size:1rem;font-weight:700} .cronologia span{font-size:0.8125rem;color:var(--tinta-suave);font-variant-numeric:tabular-nums} .taxonomia{max-height:min(40vh,26rem);overflow-y:auto;display:grid;gap:0.375rem;padding-right:0.25rem; scrollbar-width:thin;scrollbar-color:var(--tema) transparent} .taxonomia__fila{display:grid;grid-template-columns:minmax(7.5rem,auto) 1fr;gap:0.125rem 0.875rem; padding:0.5rem 0.75rem;border-radius:0.625rem;background:var(--papel-2)} .taxonomia__fila[data-propio]{background:var(--tema-velo);box-shadow:inset 0.1875rem 0 0 var(--tema)} .taxonomia__fila b{font-family:var(--fuente-titular);font-size:0.875rem} .taxonomia__fila span{font-size:0.8125rem;line-height:1.5;color:var(--azul-800)} .taxonomia__fila em{grid-column:2;font-size:0.75rem;color:var(--tinta-suave);font-style:normal} /* La ilustración manda en su columna cuando la hay: es la lámina del libro, no un adorno al pie de la tarjeta. */ .ilustracion{margin:0;display:grid;grid-template-rows:1fr auto;gap:0.5rem;min-height:min(42vh,26rem)} .ilustracion__hueco{border:1.5px dashed var(--color-borde);border-radius:0.875rem; display:grid;place-items:center;padding:1rem;text-align:center;font-size:0.8125rem; line-height:1.5;color:var(--tinta-suave);background:var(--papel-2)} .ilustracion figcaption{font-size:0.6875rem;line-height:1.5;color:var(--tinta-suave);text-wrap:pretty} /* Leyenda cualitativa: una entrada por categoría presente, la del municipio de la ficha resaltada. No es una escala, así que no lleva tramos. Va en una columna —«cognomotopónimo» no cabe en media— y con la tinta del documento: la caja de la leyenda es de papel, no oscura como el globo. */ /* La lista tiene tope y a partir de ahí se desplaza. Que se pueda desplazar se ve de dos maneras: la barra, fina pero con la tinta del texto, y el desvanecido del borde de abajo, que se retira al llegar al final (`data-fin`, ver aplicarPliegue). Antes la barra era del color del borde y la octava categoría se perdía sin aviso. */ /* Tres píxeles de aire arriba, abajo y a la izquierda, compensados con margen negativo: el anillo de la muestra pulsada sobresale 3 px del cuadrito y la lista, que se desplaza por dentro, lo recortaba en la primera fila. */ .leyenda-mapa__cats{display:grid;gap:0.1875rem;max-height:min(30vh,12rem);overflow-y:auto;padding:3px 0.25rem 3px 3px;margin:-3px 0 -3px -3px; scrollbar-width:thin;scrollbar-color:color-mix(in oklch,var(--tinta) 55%,transparent) transparent; mask-image:linear-gradient(to bottom,#000 calc(100% - 1.25rem),transparent)} .leyenda-mapa__cats[data-fin]{mask-image:none} /* Cabecera de grupo dentro de la lista de categorías: la vertiente a la que pertenecen las zonas que siguen. */ .leyenda-mapa__grupo{margin-top:0.25rem;font-size:0.625rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-suave)} .leyenda-mapa__grupo:first-child{margin-top:0} /* Muestra de tinta dentro de una celda de tabla: la zona con el color que lleva en el mapa. */ /* A la izquierda: es un