/* todoloquepagas — zona «Provincias» y «Comunidades».
   Solo lo que no está ya en sitio.css y ritmo.css. Todos los colores salen de tokens.css.

   Ritmo editorial (ronda 20; docs/CONSTRUCCION.md, «Ritmo editorial»): «En 30 segundos» arriba, la cifra de cada
   provincia frente a la de España en la banda de tinta, los recibos con el color de su familia (vivienda y vehículos),
   lo técnico plegado y «Sigue por aquí» al final. Las páginas no llevan índice lateral: las bandas van de lado a lado. */

/* ---- Ritmo de la página: «En 30 segundos», «Con tus respuestas» y cierre ------------- */
/* La llamada del final toca el pie, como en el resto de la web: sin papel entre la banda amarilla y el pie. */
.terr-cierre { padding-block: var(--espacio-4) 0; }

/* ---- La cifra de aquí frente a la de España: la banda de tinta de cada provincia ----
   Va dentro del bloque «por qué», de lado a lado (.ancho-total), y por dentro sigue la rejilla de la página: el rótulo
   en el rail y los tres pasos en la lectura; las tres partes, a lo ancho, una al lado de otra. */
.terr-frente { display: grid; gap: var(--espacio-5); }
.terr-frente > * { min-width: 0; }
.terr-frente__rotulo { margin: 0; }
.terr-frente__escalones { display: grid; gap: var(--espacio-4); }
.terr-frente__mismo { margin: 0; font: var(--tipo-cuerpo); }
.terr-frente__partes { display: grid; gap: var(--espacio-6); }
.terr-frente__hermanas { margin: 0; font: var(--tipo-cuerpo-pequeno); }
.terr-frente__escalones + .terr-frente__rotulo { margin-top: var(--espacio-6); }
@media screen and (min-width: 60em) {
  .terr-frente { grid-template-columns: var(--pistas); column-gap: var(--canal); row-gap: var(--espacio-6); align-items: start; }
  .terr-frente > .terr-frente__rotulo { grid-column: rail; }
  .terr-frente > .terr-frente__escalones { grid-column: lectura; }
  .terr-frente > .terr-frente__partes { grid-column: total; }
  .terr-frente__escalones + .terr-frente__rotulo { grid-column: total; margin-top: var(--espacio-8); }
  .terr-frente__hermanas { width: calc((100% - var(--canal)) * 9 / 14); margin-left: auto; }
}

/* ---- Lista de definiciones con explicación y fuente debajo del concepto ---- */
.terr-definiciones > div { align-items: start; }
.terr-definiciones dt { font-weight: 650; }
/* La explicación es contenido, no una nota: en tinta. El gris queda para la fuente de cada línea. */
.terr-definiciones dt small { margin-top: var(--espacio-1); font: var(--tipo-cuerpo-pequeno); color: var(--tinta); }
.terr-definiciones dd { padding-top: 3px; }
/* El valor, en la tinta de la familia del bloque o de la línea (si la tiene): el nombre va al lado. */
[data-familia] .terr-definiciones dd, .terr-definiciones > [data-familia] dd { color: var(--familia-tinta); font-weight: 650; }
/* Las listas que mezclan familias (<Definiciones familias>): delante del nombre de cada línea, la muestra de su color. */
.terr-definiciones--familias > [data-familia] .terr-definiciones__termino::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: var(--espacio-2); border-radius: 2px; background: var(--familia); vertical-align: 0.05em; }
/* La fuente de cada línea es la nota de toda la web (chip y enlace), debajo de la explicación. */
.terr-definiciones dt .tlqp-nota { margin-top: var(--espacio-2); font-weight: 450; }
/* En pantallas estrechas el valor baja a su propia línea: los conceptos son largos. */
@media (max-width: 30em) {
  .terr-definiciones > div { grid-template-columns: minmax(0, 1fr); gap: var(--espacio-1); }
  .terr-definiciones dd { order: -1; padding-top: 0; text-align: left; font-weight: 760; color: var(--tinta); }
}
/* Las tres partes de una diferencia: cada una con su cifra en grande encima, una al lado de otra. */
.terr-definiciones--partes { max-width: none; gap: var(--espacio-6) var(--espacio-8); }
.terr-definiciones--partes > div { grid-template-columns: minmax(0, 1fr); gap: var(--espacio-2); align-content: start; padding: var(--espacio-4) 0 0; border-top: var(--grosor-control) solid var(--tinta); border-bottom: 0; }
.terr-definiciones--partes dd { order: -1; padding-top: 0; text-align: left; font: 860 clamp(32px, 3.6vw, 44px)/1.05 var(--font-sans); letter-spacing: -0.03em; color: var(--tinta); }
.terr-definiciones--partes dt { font: 650 19px/26px var(--font-sans); letter-spacing: -0.01em; }
.terr-definiciones--partes dt small { margin-top: var(--espacio-2); font: var(--tipo-cuerpo-pequeno); }
@media (min-width: 46em) { .terr-definiciones--partes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* La familia de cada concepto en la tabla: la muestra de su color, junto a su nombre. */
.terr-tabla .terr-familia { white-space: nowrap; }
.terr-tabla .terr-familia::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: var(--espacio-2); border-radius: 2px; background: var(--familia); vertical-align: 0.05em; }

/* ---- Cifras de una vida dentro de un bloque (con y sin la cotización de la empresa) ---- */
.terr-cifras-vida .cifras-clave__valor { white-space: normal; }

/* ---- Tablas de la zona -------------------------------------------------------- */
.terr-tabla th[scope="row"] { font-weight: 650; }
.terr-tabla tbody th[scope="row"] a { text-decoration-thickness: 1px; }
.terr-tabla tfoot th, .terr-tabla tfoot td { border-top: var(--grosor-control) solid var(--tinta); border-bottom: 0; font-weight: 760; }
.terr-tabla tfoot .num { font-weight: 760; }
/* Columnas de contexto (comunidad, régimen): en el móvil se quitan para que las cifras por las que se ordena queden a la vista. */
@media (max-width: 59.99em) { .terr-tabla .terr-solo-ancho { display: none; } }
/* Nombres de comunidad en la clasificación: en una línea donde hay sitio (en el móvil se parten para que las cifras queden más cerca). */
@media (min-width: 60em) { .terr-tabla .terr-sin-partir { white-space: nowrap; } }
/* Las cabeceras largas se parten en dos líneas: la tabla cabe sin desplazarse en un escritorio. */
.tabla-datos.terr-tabla thead th { white-space: normal; vertical-align: bottom; }
.tabla-datos.terr-tabla thead th.num { min-width: 5.5em; }
.terr-tabla td small, .terr-tabla th small { display: block; font: var(--tipo-nota); color: var(--tinta-suave); font-weight: 450; }

/* Cabeceras que ordenan la tabla (las pone apps/web/cliente/territorios.ts). */
.terr-ordenar { display: inline-flex; align-items: center; gap: var(--espacio-1); min-height: var(--alto-control); margin: calc(-1 * var(--espacio-3)) 0; padding: 0; border: 0; background: none; font: inherit; font-weight: 650; color: var(--tinta); text-align: inherit; cursor: pointer; }
.terr-ordenar::after { content: "↕"; font: var(--tipo-dato); color: var(--tinta-suave); }
.terr-ordenar:hover { background: var(--subrayador-suave); }
th[aria-sort="ascending"] .terr-ordenar::after { content: "↑"; color: var(--tinta); }
th[aria-sort="descending"] .terr-ordenar::after { content: "↓"; color: var(--tinta); }
.num .terr-ordenar { flex-direction: row-reverse; }

/* ---- Mapas ---------------------------------------------------------------------- */
.terr-mapas { display: grid; gap: var(--espacio-12); }
.terr-mapas__uno { display: grid; align-content: start; gap: var(--espacio-3); min-width: 0; }
.terr-mapas__uno .mapa-leyenda { gap: var(--espacio-1) var(--espacio-3); }
@media (min-width: 60em) { .terr-mapas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espacio-8); } }

.terr-mapa-y-enlaces { display: grid; gap: var(--espacio-8); }
.terr-mapa-pequeno { display: grid; align-content: start; gap: var(--espacio-3); max-width: 440px; min-width: 0; }
.terr-mapa-pequeno .mapa-leyenda { gap: var(--espacio-1) var(--espacio-3); }
.terr-enlaces { display: grid; align-content: start; gap: var(--espacio-4); min-width: 0; }
.terr-enlaces .titular-3 { margin: 0; }
/* Con las demás provincias al lado: el mapa en el rail y la lista en la lectura, como el resto de la página. */
@media screen and (min-width: 60em) { .terr-mapa-y-enlaces.ancho-total { grid-template-columns: var(--pistas); column-gap: var(--canal); } }
/* Las demás provincias de la comunidad, en columnas. */
.terr-hermanas { columns: 2 150px; column-gap: var(--espacio-8); margin: 0; padding: 0; list-style: none; font: var(--tipo-cuerpo); }
.terr-hermanas li { padding-block: var(--espacio-1); break-inside: avoid; }

/* ---- Dos tablas, una al lado de la otra (escala autonómica y estatal) -------- */
.terr-pareja { display: grid; gap: var(--espacio-8); }
.terr-pareja > * { min-width: 0; }
@media (min-width: 50em) { .terr-pareja { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espacio-12); } }

/* ---- Texto de apoyo dentro de un bloque: contenido, en tinta; la nota de un pie, en gris -------- */
.terr-apoyo { max-width: var(--ancho-lectura); font: var(--tipo-cuerpo-pequeno); color: var(--tinta); }
.terr-nota { max-width: var(--ancho-lectura); margin: 0; font: var(--tipo-nota); color: var(--tinta-suave); }

/* ---- Lista dentro de un recuadro «Ojo» -------------------------------------------- */
.terr-lista-ojo { display: grid; gap: var(--espacio-2); margin: 0; padding-left: var(--espacio-5); }

/* ---- Lo que se recibe: lo que gasta la comunidad y lo de una vida -------------------- */
/* Lo que es cada partida es una explicación con cifras, no texto corrido: un punto menos que la lectura. */
.terr-recibe .lista-iconos__texto { font: var(--tipo-cuerpo-pequeno); }
.terr-recibe .tlqp-nota { margin-top: var(--espacio-2); }
.terr-recibe-vida__entrada { margin: 0; font: var(--tipo-cuerpo); }
.terr-recibe-vida { display: grid; gap: var(--espacio-5) var(--espacio-6); margin: 0; padding: 0; list-style: none; }
.terr-recibe-vida > li { display: grid; align-content: start; gap: var(--espacio-1); padding-top: var(--espacio-3); border-top: 6px solid var(--tinta); }
.terr-recibe-vida b { overflow-wrap: anywhere; font: 860 clamp(24px, 2.6vw, 30px)/1.1 var(--font-sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.terr-recibe-vida b + span { font: var(--tipo-cuerpo-pequeno); text-wrap: pretty; }
@media (min-width: 46em) { .terr-recibe-vida { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- Los ejemplos de la compra, dentro de un recuadro «Un ejemplo» ------------------- */
.terr-ejemplos { display: grid; gap: var(--espacio-4); margin: 0; }
.terr-ejemplos > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--espacio-1) var(--espacio-4); align-items: baseline; }
.terr-ejemplos dt { font: 650 17px/24px var(--font-sans); }
.terr-ejemplos dd { margin: 0; font: 860 clamp(26px, 3vw, 32px)/1.1 var(--font-sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.terr-ejemplos p { grid-column: 1 / -1; margin: 0; font: var(--tipo-cuerpo-pequeno); }
.terr-ejemplos > div + div { padding-top: var(--espacio-4); border-top: var(--grosor-linea) dashed var(--tinta); }

/* ---- Las calculadoras de una comunidad: el enlace y, debajo, lo que hace ---------------- */
.terr-calculadoras li { display: grid; justify-items: start; padding-bottom: var(--espacio-3); }
.terr-calculadoras__linea { font: var(--tipo-cuerpo-pequeno); text-wrap: pretty; }

/* ---- Los cuatro regímenes, como razones en la banda de tinta (comunidades) ----------- */
.terr-regimenes__quien { display: block; margin-bottom: var(--espacio-2); font: var(--tipo-dato); font-size: 14px; }

/* ---- Las cuentas de los ayuntamientos (CuentasAyuntamientos.astro y cliente/cuentas.ts) ----------------------------- */
.cuentas-busca { display: grid; gap: var(--espacio-5); }
.cuentas-busca[hidden] { display: none; }
.cuentas-busca .tlqp-campo { max-width: 26rem; }
.cuentas-busca__select { position: relative; }
.cuentas-busca__select select { width: 100%; padding-right: var(--espacio-12); border-radius: var(--radio-m); appearance: none; -webkit-appearance: none; cursor: pointer; text-overflow: ellipsis; }
.cuentas-busca__select::after { content: ""; position: absolute; top: 50%; right: var(--espacio-5); width: 9px; height: 9px; margin-top: -8px; border-right: var(--grosor-control) solid var(--tinta); border-bottom: var(--grosor-control) solid var(--tinta); transform: rotate(45deg); pointer-events: none; }
.cuentas-busca__select select option { background: var(--superficie); color: var(--tinta); }
.cuentas-ficha { display: grid; gap: var(--espacio-4); padding: var(--espacio-5); border: var(--grosor-linea) solid var(--borde-tarjeta); border-radius: var(--radio-l); background: var(--papel); box-shadow: var(--sombra-tarjeta); }
.cuentas-ficha[hidden] { display: none; }
.cuentas-ficha > * { margin: 0; min-width: 0; }
.cuentas-ficha__poblacion, .cuentas-ficha__cargando { font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); text-wrap: pretty; }
.cuentas-ficha__cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); gap: var(--espacio-4) var(--espacio-6); }
.cuentas-ficha__cifra { display: grid; align-content: start; gap: 2px; padding-top: var(--espacio-3); border-top: var(--grosor-control) solid var(--tinta); }
.cuentas-ficha__cifra dt { font: var(--tipo-nota); color: var(--tinta-suave); }
.cuentas-ficha__cifra dd { display: grid; gap: 2px; margin: 0; }
.cuentas-ficha__cifra small { font: var(--tipo-nota); color: var(--tinta-suave); text-wrap: pretty; }
.cuentas-ficha__valor { font: 860 clamp(26px, 4vw, 32px)/1.1 var(--font-sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cuentas-ficha__subtitulo { font: 760 17px/24px var(--font-sans); }
.cuentas-ficha__areas { display: grid; gap: var(--espacio-3); margin: 0; padding: 0; list-style: none; }
.cuentas-ficha__areas li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--espacio-1) var(--espacio-3); align-items: center; }
@media (min-width: 46em) { .cuentas-ficha__areas li { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr) 3.5em; } }
.cuentas-ficha__area { display: grid; font: var(--tipo-cuerpo-pequeno); }
.cuentas-ficha__area small { font: var(--tipo-nota); color: var(--tinta-suave); }
.cuentas-ficha__barra { grid-column: 1 / -1; grid-row: 2; display: block; height: 12px; background: var(--superficie-hundida); }
@media (min-width: 46em) { .cuentas-ficha__barra { grid-column: auto; grid-row: auto; } }
.cuentas-ficha__barra > span { display: block; height: 100%; background: var(--tinta); }
.cuentas-ficha__areas b { font: 760 15px/20px var(--font-sans); font-variant-numeric: tabular-nums; text-align: right; }
@media (max-width: 45.99em) { .cuentas-ficha__areas b { grid-column: 2; grid-row: 1; } }
/* El enlace a la página del municipio, si la tiene (20.000 habitantes o más). */
.cuentas-ficha__mas { padding-top: var(--espacio-3); border-top: var(--grosor-linea) solid var(--borde-tarjeta); font: 650 16px/24px var(--font-sans); }

/* ---- El comparador de comunidades (/comunidades/comparar/) ---------------------------------------------------------
   Dos comunidades una al lado de otra: cada fila, lo que se compara a la izquierda (o encima, en el móvil) y las dos
   cifras con su barra, en la misma escala y desde cero, con la marca discontinua de la referencia. Una comunidad en
   tinta y la otra en amarillo, con su nombre escrito en cada fila: el color no es lo único que las distingue. */
.par-elige { display: grid; gap: var(--espacio-4); align-items: end; margin: var(--espacio-6) 0 var(--espacio-4); }
.par-elige[hidden] { display: none; }
@media (min-width: 46em) { .par-elige { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } }
.par-elige .tlqp-campo { max-width: none; min-width: 0; }
.par-elige .tlqp-campo__etiqueta { display: flex; align-items: center; gap: var(--espacio-2); }
.par-elige__select { position: relative; }
.par-elige__select select { width: 100%; padding-right: var(--espacio-12); border-radius: var(--radio-m); appearance: none; -webkit-appearance: none; cursor: pointer; text-overflow: ellipsis; }
.par-elige__select::after { content: ""; position: absolute; top: 50%; right: var(--espacio-5); width: 9px; height: 9px; margin-top: -8px; border-right: var(--grosor-control) solid var(--tinta); border-bottom: var(--grosor-control) solid var(--tinta); transform: rotate(45deg); pointer-events: none; }
.par-elige__select select option { background: var(--superficie); color: var(--tinta); }
.par-elige__cambiar { justify-self: start; white-space: nowrap; }
@media (min-width: 46em) { .par-elige__cambiar { justify-self: center; } }
.par-sin-js { margin: var(--espacio-6) 0 var(--espacio-4); font: var(--tipo-cuerpo); text-wrap: pretty; }
.par-sin-js[hidden] { display: none; }

/* Las muestras de color: la de cada comunidad y la de la referencia. */
.par-muestra { display: inline-block; flex: none; width: 14px; height: 14px; vertical-align: -2px; }
.par-muestra--a { background: var(--tinta); }
.par-muestra--b { background: var(--subrayador); box-shadow: inset 0 0 0 1px var(--sobre-subrayador); }
.par-muestra--marca { width: 0; height: 16px; border-left: 2px dashed var(--tinta-suave); }
.par-leyenda { display: flex; flex-wrap: wrap; gap: var(--espacio-2) var(--espacio-6); margin: 0 0 var(--espacio-8); font: var(--tipo-cuerpo-pequeno); }
.par-leyenda__item { display: inline-flex; align-items: center; gap: var(--espacio-2); min-width: 0; }
.par-leyenda a { color: inherit; font-weight: 650; }

/* Las filas. */
.par-filas { display: grid; margin: 0; }
.par-fila { display: grid; gap: var(--espacio-3); padding-block: var(--espacio-5); border-top: var(--grosor-linea) solid var(--linea); }
.par-filas > .par-fila:first-child { border-top: var(--grosor-control) solid var(--tinta); }
@media (min-width: 48em) { .par-fila { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--espacio-3) var(--canal); align-items: start; } }
.par-fila > * { min-width: 0; }
.par-fila__que { display: grid; gap: var(--espacio-1); }
.par-fila__titulo { margin: 0; font: 760 17px/23px var(--font-sans); letter-spacing: -0.01em; text-wrap: pretty; }
.par-fila__titulo a { color: inherit; text-decoration: none; }
.par-fila__titulo a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.par-fila__nota { margin: 0; font: var(--tipo-nota); color: var(--tinta-suave); text-wrap: pretty; }
.par-fila__fuente { white-space: nowrap; }
.par-fila__datos { display: grid; gap: var(--espacio-3); }
.par-lado { display: grid; gap: var(--espacio-1); }
.par-lado__texto { display: flex; justify-content: space-between; align-items: baseline; gap: var(--espacio-3); margin: 0; }
.par-lado__nombre { min-width: 0; font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); overflow-wrap: anywhere; }
.par-lado__valor { flex: none; font: 760 19px/24px var(--font-sans); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.par-lado[data-sin-dato] .par-lado__valor { font: 500 15px/24px var(--font-sans); color: var(--tinta-suave); }
.par-lado__pista { position: relative; display: block; height: 12px; background: var(--superficie-hundida); }
.bloque--superficie .par-lado__pista { background: var(--papel); }
.par-lado__barra { position: absolute; inset: 0 auto 0 0; width: calc(var(--parte, 0) * 100%); background: var(--tinta); }
.par-lado--b .par-lado__barra { background: var(--subrayador); box-shadow: inset 0 0 0 1px var(--sobre-subrayador); }
.par-lado__marca { position: absolute; top: -4px; bottom: -4px; left: calc(var(--marca, 0) * 100%); width: 0; margin-left: -1px; border-left: 2px dashed var(--tinta-suave); }
.par-lado__marca[hidden] { display: none; }
.par-fila__referencia { display: flex; align-items: center; gap: var(--espacio-2); margin: 0; font: var(--tipo-nota); color: var(--tinta-suave); }
.par-fila__referencia b { color: var(--tinta); font-weight: 650; font-variant-numeric: tabular-nums; }
.par-mas.detalle { max-width: 100%; margin-top: var(--espacio-2); }
.par-mas .par-filas > .par-fila:first-child { border-top: 0; }
@media print { .par-lado__pista { border: 1px solid var(--linea); } }

/* «Compara tu municipio» (/provincias/comparar-municipios/): cuatro campos para elegir, en rejilla. */
.comparar-muni__elige { display: grid; gap: var(--espacio-4); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); max-width: 100%; }
.comparar-muni__elige .tlqp-campo { margin: 0; }
.comparar-muni__tabla thead th small { display: block; font-weight: 450; color: var(--tinta-suave); }