/* Base del Diccionario Geográfico de Colombia * * Lo que comparten TODAS las páginas: el reinicio, las primitivas (contenedor, * botón, rótulo) y el cromo del sitio —barra del Estado, cabecera y pie—. * Nada de aquí sabe de una sección concreta. * * Se separó de portada.css al aparecer la segunda página. Si el cromo se copia * en cada hoja, a la tercera página ya hay tres cabeceras distintas: una se * corrige, las otras dos no, y nadie se entera hasta que alguien las ve juntas. * * Orden de carga: tokens.css → base.css → la hoja de la página. * Todo color, tamaño, espacio y duración sale de tokens.css; aquí no debería * aparecer ni un valor de color escrito a mano. */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; /* clip y no hidden: hidden en el elemento raíz crea un contexto de scroll que rompe position: sticky más abajo en la página. */ overflow-x: clip; } body { background: var(--color-fondo); color: var(--color-texto); font-family: var(--fuente-texto); font-size: var(--texto-md); line-height: var(--alto-linea-texto); -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--fuente-titular); font-style: normal; /* los titulares nunca van en cursiva */ line-height: var(--alto-linea-titular); letter-spacing: -0.02em; /* Un nombre largo sin espacios no debe desbordar en un teléfono */ overflow-wrap: anywhere; min-width: 0; margin: 0; } p { margin: 0; } img { max-width: 100%; } a { color: var(--color-enlace); } a:hover { color: var(--color-enlace-fuerte); } /* El anillo de foco aparece al instante: animarlo se lo esconde a quien navega con teclado, que es justo quien lo necesita. Va en cobalto y no en amarillo porque el fondo de la página es crema: un amarillo sobre crema queda en 1,6:1 y el indicador de foco necesita 3:1 (WCAG 1.4.11). Sobre los fondos oscuros se invierte en cada franja. */ :focus-visible { outline: 3px solid var(--color-cobalto); outline-offset: 3px; border-radius: var(--radio-sm); } .contenedor { width: 100%; max-width: var(--ancho-maximo); margin-inline: auto; padding-inline: var(--sangria); } /* El cromo del Estado se mide con el ancho del sitio en todas las páginas, aunque el contenido de esa página mida otra cosa. /entidades y la ficha llevan su contenido a 96rem —el mapa y las láminas necesitan ese ancho— y con él se llevaban también la cabecera y el pie. El efecto en un monitor de 1920 era que el logotipo saltaba 186 px a la izquierda al pasar de la portada al selector: la marca del Estado cambiando de sitio según la sección. Se prefiere que el cromo no se mueva nunca, aunque en esas dos páginas deje de caer en la misma vertical que el contenido. El selector de descendencia gana al .contenedor de esas hojas por especificidad, no por orden: no depende de qué archivo se cargue el último. */ .cabecera .contenedor, .pie .contenedor { max-width: var(--ancho-cromo); padding-inline: var(--sangria-cromo); } /* ── El banner de sección ────────────────────────────────────────────────── La franja cobalto con la miga y el título. La llevan /entidades, la ficha, /nombres-y-terminos, /bnng y /aportar: cinco páginas, y por eso vive aquí. Estaba escrita dos veces, igual, en nombres.css y en entidades.css. Duplicada se sostiene mientras nadie la toca; en cuanto alguien ajusta el clamp de una, cambiar de sección cambia el tamaño del banner y parece otro sitio. Y una página nueva que no supiera de esa duplicación -/aportar fue exactamente eso- se queda con el título en negro sobre blanco y la bajada, que es color crema, invisible. Vivía aquí y aun así había cuatro tamaños, porque esta nota terminaba diciendo que cada sección podía ajustarlo «en pantalla baja». Por esa rendija pasaron: entidades lo dejaba a tamaño completo, nombres lo encogía por debajo de 46rem de alto, /bnng lo recogía a un renglón y /aportar tenía el suyo. Cuatro. Y las tres primeras conviven en la misma navegación, así que la diferencia se veía al cambiar de pestaña. Encogían por una razón buena: en /bnng y en /nombres el asunto es un mapa y una tabla, y el banner se llevaba altura de trabajo. Lo que pasa es que encogerlo es pagar siempre por un problema que solo existe cuando se ha bajado —arriba del todo el banner no le quita sitio a nada, porque no hay nada que mirar todavía—. Eso es lo que resuelve la barra de sección de más abajo, y por eso ahora el tamaño puede ser uno solo. REGLA: ninguna hoja de sección cambia el tamaño de este banner. Lo que sí puede cambiar es su reparto interior -/bnng pone la cifra a la derecha del título, y está bien-. Si hace falta más sitio, no se encoge el banner: se mira por qué la barra no está haciendo su trabajo. */ .entrada { position: relative; background: var(--color-cobalto); color: var(--papel-2); padding-block: clamp(1rem, 2.4vh, 1.5rem) clamp(0.875rem, 2vh, 1.25rem); } .entrada h1 { margin-top: clamp(0.375rem, 1vh, 0.625rem); font-family: Poppins, var(--fuente-titular); font-weight: var(--peso-negro); font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1.05; letter-spacing: -.03em; } /* El tope baja de 3rem a 2.5 y se va el término en vh. Los dos motivos: 3rem era el mayor de los cuatro tamaños que había, y tomarlo de estándar habría hecho más grandes tres páginas de cuatro; y el vh hacía que el mismo título midiera distinto en un portátil que en un monitor, que es medio camino andado hacia la falta de uniformidad que se viene a arreglar. Con vw solo, el tamaño depende del ancho -que es lo que decide si el título cabe- y no de si la ventana está maximizada. */ /* En ch y no en rem: 58rem son unos 145 caracteres por renglón, casi el doble de lo que se lee cómodamente, y era justo lo que cada sección venía corrigiendo por su cuenta -46ch en /bnng, 54ch en /aportar, 50rem en entidades-. Con una medida de lectura de verdad aquí, esas tres correcciones sobran. */ .entrada p { margin-top: clamp(0.3125rem, 0.9vh, 0.5rem); max-width: 62ch; font-size: 0.9375rem; line-height: 1.5; color: var(--crema-90); text-wrap: pretty; } .entrada b { font-weight: var(--peso-fuerte); } /* Un apunte al lado de la cifra, no parte de la frase principal. Llevaba --crema-75 y no pasaba el mínimo: sobre el cobalto son 3,99:1 y hace falta 4,5. Salió al medir el contraste de la barra de sección -la tabla está junto a .barra-seccion__apunte, más abajo- y es texto de verdad, a 15 px y sin negrita, así que no le vale la excepción de «texto grande». --crema-85 y no --crema-90: aquí el apunte tiene que seguir leyéndose como secundario frente a la frase principal, que va en --crema-90. A 4,67:1 pasa, y conserva el escalón. */ .entrada__nota { color: var(--crema-85); } /* ── La barra de sección ─────────────────────────────────────────────────── El banner se va con la página; pasados 48 px entra desde arriba una franja fija con el mismo título en pequeño, y al volver arriba se retira. SON DOS ELEMENTOS, Y NO UNO QUE ENCOGE. Importa lo suficiente como para dejarlo escrito, porque «que el banner se haga pequeño al bajar» es la forma en que a uno se le ocurre primero y no funciona: un elemento pegajoso que encoge cambia el alto del documento mientras se desplaza. El navegador recoloca el scroll a media transición, la nueva posición puede volver a cruzar el umbral, y aquello oscila —con el título grande y el pequeño superpuestos mientras dura—. Con dos elementos no hay nada que recolocar: el banner ocupa lo que ocupa de principio a fin, y la barra está fuera del flujo. De ahí que aquí no se anime ninguna altura. Solo transform y opacity, que el compositor resuelve sin volver a maquetar nada. El disparo no es un escuchador de scroll sino un centinela observado con IntersectionObserver -ver navegacion.js-. La barra solo tiene que saber pintarse; cuándo, lo decide el observador. Y el estado es una CLASE, no una animación de JavaScript. El guion solo pone y quita `--puesta`; el movimiento entero está descrito aquí abajo en una `transition`. Importa por lo que pasa cuando la transición no llega a ejecutarse: con una clase el elemento se planta igual en el estado final, mientras que una animación por JavaScript se queda a medias —marcada como visible y con opacidad cero, que es peor que no aparecer—. */ .barra-seccion { /* Debajo del cromo, no encima: la cabecera se queda pegada arriba y la franja de sección sale de debajo de ella. --cromo-h lo publica navegacion.js con el alto medido, que es el que vale donde el menú no cabe en una fila y la cabecera se va a dos -entre 992 y 1.116 px de ancho-. Escribir aquí el número del boceto dejaría la franja solapando la cabecera justo en esos anchos. */ position: fixed; inset-block-start: var(--cromo-h); inset-inline: 0; /* Por encima de los mapas pegajosos (400) y de sus fichas flotantes (500), por debajo del cromo (720) —para que al retirarse se meta detrás de él y no por encima— y por debajo del visor de lámina y del buscador de la ficha (1000+). */ z-index: 700; height: var(--barra-alta); display: flex; align-items: center; background: var(--color-cobalto); color: var(--papel-2); box-shadow: 0 10px 24px -20px rgba(22, 35, 58, .75); transform: translateY(-100%); opacity: 0; /* Sin transición al cargar: el observador dispara nada más observar, y si la página abre ya desplazada -una recarga a media altura, un enlace con ancla- la barra se deslizaría sola sin que nadie haya hecho nada. La pone navegacion.js en cuanto termina el primer aviso. */ transition: none; /* Retirada no atrapa el ratón. Hace falta de verdad: la franja está fija sobre el canto superior, así que sin esto se come los clics de los 52 px de arriba de la página aun siendo invisible —y con movimiento reducido, donde no se desplaza, se los comería siempre—. No lleva `visibility: hidden`. Se intentó, para sacarla también del orden de tabulación, y sobra por partida doble: la barra va con aria-hidden y no tiene nada que se pueda enfocar. Lo que sí traía era un problema, porque ocultarla así obliga a transicionar `visibility` con retardo para no cortar la salida en seco, y esa lista de retardos deja de cuadrar con la de propiedades en cuanto el bloque de movimiento reducido cambia la transición. Menos piezas. */ pointer-events: none; } /* La SALIDA. Va en la regla base porque es el estado al que se vuelve, y es la transición que corre cuando se quita la clase. Más corta que la entrada a propósito: al volver arriba quien mira ya está mirando, y esperar lo mismo que a la ida se siente lento. Se usan los dos tokens que ya tiene el sitio en vez de escribir milisegundos nuevos: --dur-rapida son 140 ms de salida contra los 260 de --dur-media a la entrada. Lo que importa es que la vuelta sea más corta, y lo es casi a la mitad. */ .barra-seccion--animada { transition: transform var(--dur-rapida) var(--curva-entrada), opacity var(--dur-rapida) var(--curva-entrada); } /* La ENTRADA, más larga, y con la curva de salida -que es la que frena al final- porque la barra llega a su sitio y se para ahí. */ .barra-seccion--animada.barra-seccion--puesta { transition: transform var(--dur-media) var(--curva-salida), opacity var(--dur-rapida) var(--curva-salida); } .barra-seccion--puesta { transform: none; opacity: 1; pointer-events: auto; } /* En el pie se retira aunque siga «puesta». Va después y con más peso que la regla de arriba porque es una excepción a ella, no un estado aparte: se sigue estando desplazado, lo que pasa es que ya no se está en la sección. */ .barra-seccion--puesta.barra-seccion--en-el-pie { transform: translateY(-100%); opacity: 0; pointer-events: none; } /* Aquí llegué a meter dentro de la franja el logotipo de GOV.CO y la marca del Diccionario, para que la identidad no se perdiera al desplazar. Era resolver el problema por el lado equivocado: la identidad no hay que reconstruirla en miniatura, hay que dejar que la de verdad se quede. Eso lo hace el cromo pegajoso de más abajo, y esta franja vuelve a lo suyo —decir en qué sección se está— y se coloca debajo de él. */ .barra-seccion__interior { display: flex; align-items: baseline; gap: 0.75rem; min-width: 0; width: 100%; } /* `flex: 1 1 auto`: el título se queda el hueco libre, así que al estrecharse la ventana lo que se aprieta es él y no el apunte, y solo recorta al final. */ .barra-seccion__titulo { flex: 1 1 auto; } /* Un span y no un h2: repite el h1 que ya está en la página, y un segundo encabezado con el mismo texto ensucia el índice del lector de pantalla. Por eso la barra entera va con aria-hidden y no lleva nada que se pueda pulsar: no aporta información nueva, solo recuerda dónde se está. */ .barra-seccion__titulo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: Poppins, var(--fuente-titular); font-weight: var(--peso-fuerte); font-size: 1rem; letter-spacing: -.01em; } /* El apunte de la barra: hoy solo lo lleva /bnng, con su cifra de registros. Se va antes que el título al estrecharse, no después: si algo tiene que desaparecer, que sea el detalle y no el nombre de dónde se está. El color está medido, no elegido a ojo, y componiendo el alfa contra el cobalto, que es donde estas cuentas suelen salir mal: se compara la crema translúcida con el azul de detrás, no la crema opaca con el blanco. Sobre --color-cobalto (#2B4FD1), a 13 px: --papel-2 sin alfa 5,83:1 el título de la barra --crema-90 0,90 5,04:1 el apunte. Es el que se usa --crema-85 0,85 4,67:1 pasa, pero con 0,17 de margen --crema-75 0,75 3,99:1 NO PASA Se elige --crema-90 por el margen, no porque las otras fallen. Lo que sí falla es --crema-75, y conviene saberlo porque es el token que el sitio usa para «pie de cifra» -.entrada__nota, el pie del héroe-: ahí va sobre otros fondos, pero traerlo a esta franja lo dejaría por debajo del mínimo. */ /* El apunte: hoy solo lo lleva /bnng, con su cifra de registros. Iba como texto corrido arrimado al título —«…Nombres Geográficos 837.045 registros»— y se leía como una coletilla del título, no como un dato. En la banda azul esa misma cifra tiene filete, número en la fuente de titulares y la palabra en versalitas; al pasar a la barra perdió las tres cosas. Se le devuelven, y se manda al canto derecho con `margin-inline-start: auto`: así no compite con el nombre de la sección, que es exactamente el reparto que ya tiene la banda. */ .barra-seccion__apunte { flex: none; display: flex; align-items: baseline; gap: 0.375rem; padding-inline: 1rem var(--sangria); border-inline-start: 1px solid var(--crema-38); white-space: nowrap; } .barra-seccion__apunte b { font-family: var(--fuente-titular); font-weight: var(--peso-negro); font-size: 0.9375rem; font-variant-numeric: tabular-nums; color: var(--papel-2); } .barra-seccion__apunte span { font-size: 0.6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--crema-90); } .barra-seccion__apunte:empty { display: none; } /* Al estrecharse se va el detalle y se queda el nombre de la sección, que es lo único que dice dónde está uno y para lo que existe la barra. */ @media (max-width: 48rem) { .barra-seccion__apunte { display: none; } } /* El centinela mide LA PÁGINA, no la cabecera: 48 px de alto pegados al origen del documento. Mientras se le vea seguimos arriba; en cuanto sale por el canto superior -o sea, en cuanto se han desplazado más de 48 px- entra la barra. Se observa con threshold 0 y SIN rootMargin, y las dos cosas son deliberadas. La alternativa era colgarlo del banner y compensar con un rootMargin negativo de «alto de cabecera + umbral», y eso ata el disparo a dos medidas que se mueven solas: la cabecera del Estado pasa a dos filas entre 992 y 1.116 px de ancho -por eso navegacion.js mide --cromo-h en vez de escribirlo-. Por un píxel de más la barra nace ya mostrada, y por uno de menos no vuelve a retirarse nunca. `position: absolute` sin ancestro posicionado se ancla al bloque contenedor inicial, que está en el origen del documento y no en el del visor. Por eso no hace falta tocar el `position` de . Y OCUPA ANCHO. Iba con `width: 0`, que parecía lo prudente -no estorba porque no mide nada- y es justo lo que no hay que hacerle a un centinela: lo que se observa es el rectángulo del elemento, y un rectángulo sin área no cruza nada. Blink lo tolera; el resto de motores no tiene por qué, y un umbral que depende de una particularidad del motor es un umbral que un día deja de dispararse y se lleva la barra entera por delante sin dejar rastro en la consola. Con `inset-inline: 0` mide lo que mide la página, que es lo que dice la nota de arriba que hace. No estorba porque no pinta nada y lleva pointer-events: none, no porque sea invisible por degenerado. */ .centinela-cabecera { position: absolute; inset-block-start: 0; inset-inline: 0; height: 48px; pointer-events: none; } /* ── Que se acomode sola: los tramos ────────────────────────────────────── El área de trabajo mide el visor menos la franja, pero eso solo se ve si uno deja el desplazamiento justo ahí. La página tiene TRES sitios donde tiene sentido pararse, y ninguno en medio: arriba el banner de sección entero, que es la presentación trabajo el mapa y la lista llenando el visor, con la franja puesta pie el pie completo Aquí vivió el enganche del navegador -`scroll-snap-type: y proximity` con `scroll-snap-align` repartido por las tres hojas de sección- y se ha quitado. No por gusto: el enganche del navegador decide por CERCANÍA y lo que hace falta aquí es que decida por DIRECCIÓN. La diferencia se ve en el sitio donde más duele, que es el primero. Con proximidad, un empujón corto desde arriba deja la página a unos cien píxeles: más cerca del principio que del área, así que el navegador la devuelve al principio. Pero cien píxeles ya pasan el centinela de la barra, así que por el camino la franja entra y vuelve a salir. Eso es el parpadeo, y no se arregla moviendo el umbral: es que dos mecanismos -uno que mide cercanía y otro que mide altura- están contestando a la misma pregunta y no contestan lo mismo. Con `mandatory` en vez de proximidad el parpadeo se va y aparece el otro defecto, el de siempre: un empujón corto se queda donde estaba y la página se siente agarrotada. Lo que se pidió -y es lo correcto para una página de tres estados- es que cualquier gesto hacia abajo, corto o largo, avance UN tramo. Eso el CSS no lo sabe expresar, porque `scroll-snap` no tiene noción de hacia dónde ibas. Lo resuelve navegacion.js, que sí la tiene, y esta hoja se queda solo con lo que le toca: DECIR DÓNDE se aplica. --tramos es esa señal, y va aquí y no en un matchMedia porque el punto de corte es una medida, y las medidas del sitio viven en las hojas de estilo. Solo desde 62rem, y por el mismo motivo por el que se enganchaba solo desde ahí: por debajo no existe la caja de pantalla completa -el mapa y la lista se apilan y se recorren desplazando-, no hay tres estados que recorrer, y tomarle prestado el gesto al pulgar sería pelearse con él. Sin JavaScript no queda ningún tramo y la página se desplaza como cualquier otra: se lee entera, solo que sin las paradas. Que es exactamente lo que pasa ya sin JavaScript con la franja compacta, porque la franja también la arma navegacion.js. Antes no era así -el enganche corría igual sin guion, con las posiciones calculadas para descontar una franja que no llegaba a existir- y esa combinación no la probaba nadie. */ /* Escrito en los dos sentidos, y el 0 no sobra: navegacion.js lee esta propiedad en cada gesto, y una propiedad que no está declarada devuelve cadena vacía —lo mismo que devolvería si la hoja no hubiera cargado. Con el 0 escrito, «no hay tramos» es una respuesta y no un silencio. Y UNA HOJA DE SECCIÓN PUEDE APAGARLO. Esto dice dónde CABEN tres estados, no dónde los hay siempre: una página puede tener vistas que no los tengan, y entonces le toca a ella decirlo. Hoy lo hace nombres.css, que lo apaga en el glosario —una rejilla de 275 tarjetas se lee desplazando, no por paradas—. Como el guion lee la propiedad en cada gesto, basta con la regla: conmutar de vista enciende y apaga el pase sin que nadie tenga que avisar a nadie. */ html:has(.pantalla) { --tramos: 0; } @media (min-width: 62rem) { html:has(.pantalla) { --tramos: 1; } } /* El desplazamiento de anclaje también descuenta la franja. Vale para el enganche y, sobre todo, para el enlace «Saltar al contenido»: sin esto aterriza con el encabezado metido debajo de la barra, que es justo a quien más le estorba. Va en las páginas con banner, que son las que tienen barra; la ficha declara el suyo contra --tira-h y la portada no lleva ninguna de las dos. */ html:has(.entrada) { scroll-padding-top: calc(var(--cromo-h) + var(--barra-alta)); } .miga { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.875rem; color: var(--crema-85); } .miga a { color: var(--crema-85); text-decoration: none; } .miga a:hover { color: #fff; text-decoration: underline; } /* Fuera de la vista, no fuera del documento: lo que lleva esta clase se sigue leyendo en lector de pantalla. */ .solo-lectura { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .saltar { position: absolute; left: var(--esp-4); top: -100px; z-index: 100; background: var(--color-acento); color: var(--tinta); padding: var(--esp-3) var(--esp-4); border-radius: var(--radio-sm); font-weight: var(--peso-fuerte); text-decoration: none; transition: top var(--dur-rapida) var(--curva-salida); } .saltar:focus { top: var(--esp-4); } /* ── Rótulo de sección (el renglón corto en versalitas) ─────────────────── */ .rotulo { font-size: var(--texto-xs); font-weight: var(--peso-fuerte); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-cobalto); margin-bottom: var(--esp-3); } .rotulo--verde { color: var(--verde-hondo); } /* Sobre fondo oscuro el cobalto del rótulo desaparece contra el azul. */ .rotulo--claro { color: var(--crema-75); } /* ── Botones ────────────────────────────────────────────────────────────── */ .boton { /* Un .boton puede ser un o un