/* Lo poco que las páginas GENERADAS añaden sobre legal.css.
   Se apoyan en legal.css a propósito: son las mismas hojas de texto, y
   mantener dos sistemas de estilo para lo mismo es como uno se queda viejo.

   Se llamaba pueblos.css hasta que la guía de LUMA necesitó lo mismo —el
   botón, el fino, las fuentes— y el nombre pasó a mentir. Ahora acompaña a
   scripts/hoja.mjs, que es quien la pone en todas. */

/* El número, grande. Es lo que la persona vino a buscar y tiene que verse
   antes de leer una línea. */
.cifra {
  display: flex; align-items: baseline; gap: 12px;
  margin: 22px 0 6px; padding: 16px 18px;
  border-left: 3px solid #2563EB; border-radius: 10px;
  background: rgba(245, 197, 66, .07);
}
.cifraN {
  font-family: 'IBM Plex Mono', monospace; font-weight: 400;
  font-size: 38px; line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.cifraQ { font-size: 14px; opacity: .75; line-height: 1.4; }

/* Los números de una tabla se leen en columna, así que van a la derecha y en
   mono tabular: sin eso, «5.8 h» y «12» bailan de ancho y no se comparan. */
.tabla .num {
  text-align: right; font-family: 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* La fila de la región que estás leyendo, marcada. */
.tabla tr.yo { background: rgba(245, 197, 66, .1); }

.pueblos { line-height: 1.9; }
/* Una tabla ancha se desplaza DENTRO de su caja, no arrastrando la pagina.
   Con overflow-x puesto en el <table> —que es donde estaba— el navegador no
   hace nada: hace falta un contenedor de bloque. Medido: la tabla de aires
   pide 649 px y un telefono da 343 de ancho util. */
/* En pantalla ancha las figuras se salen de la columna de texto: 60 px a cada
   lado. No es capricho — es lo que deja estrechar el texto a 75 caracteres sin
   que las tablas se queden sin sitio. Por debajo de 860 px no hay margen que
   robar, asi que no se aplica. */
.hoja > img { width: 100%; max-width: 100%; }
@media (min-width: 860px) {
  .tablaCaja, .hoja > img { width: calc(100% + 120px); margin-left: -60px; }
  /* El `max-width:100%` en linea de la imagen la topaba en el ancho de la
     columna, asi que la fuga se aplicaba y no se veia. Aqui se le suelta —solo
     en pantalla ancha, que es donde hay margen que robar. */
  .hoja > img { max-width: none; }
}
.tablaCaja { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 16px; }
.tablaCaja table { margin-bottom: 0; }
/* Y la primera columna deja de ir en una sola linea: legal.css le pone
   nowrap para que los numeros no bailen, pero cuando lleva una frase debajo
   eso es justo lo que hace la tabla impasable. */
.tablaCaja td:first-child { white-space: normal; }

.fino { font-size: 13px; opacity: .7; line-height: 1.6; }
.fuentes { font-size: 13px; opacity: .8; line-height: 1.7; }

/* La llamada al simulador. Es el único botón de estas páginas: si hubiera
   tres, no habría ninguno. */
.cta { margin: 26px 0 4px; }
.cta a {
  display: inline-block; padding: 13px 20px; border-radius: 10px;
  background: #2563EB; color: #FFFFFF; font-weight: 700;
  text-decoration: none;
}
.cta a:hover { filter: brightness(1.06); }
.finoCta { font-size: 13px; opacity: .7; line-height: 1.6; margin-top: 8px; }

/* Un municipio enlazado desde fuera (/pueblos/#ponce) tiene que quedar
   despegado de la barra de arriba al saltar, no pegado al borde. */
.tabla tr[id] { scroll-margin-top: 24px; }

@media (max-width: 480px) {
  .cifraN { font-size: 30px; }
  .cifra { flex-direction: column; gap: 4px; }
}