/* Páginas de lectura del Diccionario Geográfico de Colombia
 *
 * Las páginas que son texto y nada más: /acerca, las tres políticas
 * (/politicas/privacidad, /politicas/cookies, /politicas/datos-personales) y el
 * mapa del sitio. Ninguna consulta un servicio ni pinta un mapa; lo que tienen
 * que hacer bien es leerse.
 *
 * Una sola hoja para las cinco y no una por página: son la misma clase de
 * documento —banner, índice, cuerpo a medida de lectura— y si cada una llevara
 * la suya, a la tercera habría tres medidas de columna distintas.
 *
 * Orden de carga: tokens.css → base.css → paginas.css. El banner cobalto con la
 * miga y el h1 es el `.entrada` de base.css: el mismo de /entidades, /bnng y
 * /aportar, sin tocarle el tamaño (es la regla escrita allí).
 */

/* ══ Superficies del navegador ═══════════════════════════════════════════
   En una página que es todo texto, la selección se ve más que en ninguna otra.
   El azul de fábrica del navegador no es de este sistema; el amarillo de
   interfaz sí, y sobre él la tinta se lee. */
.lectura ::selection { background: var(--color-acento); color: var(--tinta); }

/* ══ La página ═══════════════════════════════════════════════════════════
   Índice a la izquierda, cuerpo a la derecha. En pantalla estrecha el índice
   va primero y en línea, porque un índice pegajoso en un teléfono se lleva
   media pantalla. */
.lectura {
  display: grid;
  gap: var(--esp-8);
  padding-block: var(--esp-8) var(--esp-16);
}

/* ── El índice ─────────────────────────────────────────────────────────── */
.indice-pagina { align-self: start; }
.indice-pagina__titulo {
  font-family: var(--fuente-texto);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-texto-suave);
  margin-bottom: var(--esp-3);
}
.indice-pagina ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.indice-pagina a {
  display: block;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radio-sm);
  font-size: var(--texto-sm);
  line-height: 1.4;
  color: var(--color-texto-suave);
  text-decoration: none;
  transition: background var(--dur-rapida) var(--curva-salida), color var(--dur-rapida) var(--curva-salida);
}
.indice-pagina a:hover { background: var(--papel-2); color: var(--color-texto); }

/* ── El cuerpo ─────────────────────────────────────────────────────────── */
/* La medida de lectura del sistema, unos 65 caracteres por renglón. Es la
   misma que usa la 404 y la portada para sus párrafos. */
.cuerpo { max-width: var(--ancho-lectura); min-width: 0; }

.cuerpo > * + * { margin-top: var(--esp-4); }

/* Más aire por encima de un título que por debajo: el título pertenece a lo
   que sigue, no a lo que termina. El filete separa los apartados sin recurrir
   a una caja. El primero no lo lleva: el banner ya separó. */
.cuerpo h2 {
  font-size: var(--texto-xl);
  font-weight: var(--peso-negro);
  margin-top: var(--esp-12);
  padding-top: var(--esp-6);
  border-top: var(--trazo);
  text-wrap: balance;
}
.cuerpo h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.cuerpo h2 + * { margin-top: var(--esp-3); }
.cuerpo h3 {
  font-size: var(--texto-lg);
  font-weight: var(--peso-fuerte);
  margin-top: var(--esp-8);
  text-wrap: balance;
}
.cuerpo h3 + * { margin-top: var(--esp-2); }

.cuerpo p, .cuerpo li { text-wrap: pretty; }

/* El primer párrafo, más grande y en tinta rebajada: dice de qué va la página
   en dos frases antes de entrar en materia. */
.cuerpo .resumen {
  font-size: var(--texto-lg);
  line-height: 1.5;
  color: var(--color-texto-suave);
}

.cuerpo a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.cuerpo ul, .cuerpo ol { margin: var(--esp-4) 0 0; padding-left: 1.25rem; }
.cuerpo li + li { margin-top: var(--esp-2); }
.cuerpo li::marker { color: var(--color-cobalto); }
.cuerpo li b { font-weight: var(--peso-fuerte); }

/* ── Pares dato–valor (quién es el responsable, cómo contactar) ────────── */
.datos {
  margin: var(--esp-6) 0 0;
  display: grid;
  gap: var(--esp-3) var(--esp-6);
}
.datos dt {
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-texto-suave);
}
.datos dd { margin: 0; }
.datos dd + dt { margin-top: var(--esp-2); }

/* ── Tabla (las cookies, con su duración) ──────────────────────────────── */
/* La caja desplaza en horizontal si hace falta; la página nunca. */
.tabla-caja { overflow-x: auto; margin-top: var(--esp-6); }
.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--texto-sm);
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
.tabla caption {
  text-align: left;
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
  padding-bottom: var(--esp-3);
}
.tabla th, .tabla td {
  text-align: left;
  vertical-align: top;
  padding: 0.625rem 0.75rem 0.625rem 0;
  border-bottom: var(--trazo);
}
.tabla th {
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-texto-suave);
  border-bottom-color: var(--color-borde-firme);
}
.tabla td:first-child { font-weight: var(--peso-medio); }
.tabla code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.9em;
  background: var(--papel-2);
  padding: 0.05em 0.35em;
  border-radius: var(--radio-sm);
}

/* ── Un apunte destacado ───────────────────────────────────────────────── */
/* Fondo crema y esquinas del sistema. Sin filete lateral: el color de acento
   lo lleva la acción, no una franja decorativa. */
.nota {
  margin-top: var(--esp-6);
  padding: var(--esp-4) var(--esp-6);
  background: var(--papel-2);
  border-radius: var(--radio-md);
  font-size: var(--texto-sm);
  line-height: 1.55;
}
.nota b { font-weight: var(--peso-fuerte); }

/* ══ Piezas de /acerca ═══════════════════════════════════════════════════ */
/* Los cuatro módulos, como los «Por dónde seguir» de la 404: filete de color
   arriba, nombre y una frase. Los mismos cuatro colores de la línea gráfica
   que ordenan «Para qué sirve» en la portada; no codifican estado. */
.modulos {
  list-style: none;
  margin: var(--esp-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--esp-6);
}
.modulos li + li { margin-top: 0; }
.modulo {
  display: grid;
  gap: var(--esp-2);
  padding-top: var(--esp-3);
  border-top: 3px solid var(--color-borde);
  color: var(--color-texto);
  text-decoration: none;
}
.modulo:hover { color: var(--color-texto); }
.modulo:hover .modulo__nombre { text-decoration: underline; text-underline-offset: 4px; }
.modulo__nombre {
  font-family: var(--fuente-titular);
  font-size: var(--texto-lg);
  font-weight: var(--peso-fuerte);
  line-height: 1.15;
}
.modulo__dice { font-size: var(--texto-sm); line-height: 1.55; color: var(--color-texto-suave); }
.modulo--cobalto  { border-top-color: var(--color-cobalto); }
.modulo--verde    { border-top-color: var(--verde-hondo); }
.modulo--amarillo { border-top-color: var(--color-acento); }
.modulo--coral    { border-top-color: var(--coral); }

/* Para quién es: seis perfiles en una retícula, cada uno con su frase. Lista,
   no tarjetas. */
.perfiles {
  list-style: none;
  margin: var(--esp-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--esp-4) var(--esp-6);
}
.perfiles li { padding-top: var(--esp-3); border-top: var(--trazo); margin-top: 0; }
.perfiles h3 { margin-top: 0; font-size: var(--texto-md); }
.perfiles p { margin-top: var(--esp-1); font-size: var(--texto-sm); color: var(--color-texto-suave); }

/* ══ Mapa del sitio ══════════════════════════════════════════════════════ */
.mapa-sitio {
  display: grid;
  gap: var(--esp-8);
  padding-block: var(--esp-8) var(--esp-16);
}
.mapa-sitio__grupo h2 {
  font-size: var(--texto-lg);
  font-weight: var(--peso-negro);
  padding-bottom: var(--esp-3);
  border-bottom: var(--trazo);
}
.mapa-sitio__grupo ul { list-style: none; margin: var(--esp-3) 0 0; padding: 0; }
.mapa-sitio__grupo li + li { margin-top: var(--esp-3); }
.mapa-sitio__grupo a { font-weight: var(--peso-medio); text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
.mapa-sitio__grupo small { display: block; font-size: var(--texto-sm); color: var(--color-texto-suave); line-height: 1.5; }

/* ══ Pantallas medianas ═════════════════════════════════════════════════ */
@media (min-width: 48rem) {
  .datos { grid-template-columns: max-content minmax(0, 1fr); align-items: baseline; }
  .datos dd + dt { margin-top: 0; }
  .modulos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .perfiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mapa-sitio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ══ Escritorio ═════════════════════════════════════════════════════════ */
@media (min-width: 62rem) {
  .lectura {
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: var(--esp-16);
    padding-block: var(--esp-12) var(--esp-24);
  }
  /* Pegajoso por debajo del cromo y de la barra de sección, que es lo que hay
     encima cuando se ha bajado. Quien añada otro sticky en una página con
     banner tiene que restar lo mismo (está dicho en tokens.css). */
  .indice-pagina {
    position: sticky;
    top: calc(var(--cromo-h) + var(--barra-alta) + var(--esp-4));
  }
  .mapa-sitio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}