/*
  Els Rebuts — hoja de estilos del sitio público, Fase 0.
  Paleta y tokens: DISENO.md §5.6 (identidad visual, cerrada 24/08/2026). Modo claro únicamente
  por ahora — DISENO.md no fija modo oscuro para el sitio público, solo para el editor de
  artifacts, así que no se inventa uno.

  Copiada tal cual (sin build step) de web/estatic/ a web_build/estatic/ en cada generación —
  ver scripts/generar_web.py::vendoritzar_estatics().
*/

:root {
  --c-primary: #12766B;
  --c-primary-strong: #0C4A44;
  --c-accent: #C06A34;
  --c-paper: #F1F4F3;
  --c-ink: #16211F;

  --c-paper-alt: #ffffff;
  --c-vora: rgba(18, 118, 107, 0.18);
  --c-text-suau: #52625e;
  --c-avis-fons: rgba(192, 106, 52, 0.08);

  --font-titulars: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-cos: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --capcalera-alt: 84px;   /* D20: dues files a la capçalera */
  --peu-alt: 44px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-cos);
  background: var(--c-paper);
  color: var(--c-ink);
  line-height: 1.55;
  /* Sessió 9, 25/08/2026: sense padding-top. header.site és sticky (es queda al flux normal del
     document), no fixed (que sí caldria compensar) — aquest padding només afegia un espai buit
     per sobre de la barra, bug real trobat per l'usuari. El peu SÍ és fixed (fora del flux), per
     això manté el seu padding-bottom compensatori. */
  padding-bottom: calc(var(--peu-alt) + 0.5rem);
}

h1, h2, h3 { font-family: var(--font-titulars); color: var(--c-primary-strong); line-height: 1.2; }
h1 { font-size: 2rem; margin: 0.4rem 0 0.3rem; }
h2 { font-size: 1.3rem; margin: 0 0 0.6rem; }
h3 { font-size: 1.05rem; margin: 0 0 0.4rem; }

a { color: var(--c-primary-strong); }
a:hover { color: var(--c-accent); }

.marca {
  font-family: var(--font-titulars);
  font-weight: 600;
  color: var(--c-primary-strong);
}

/* Capçalera fixa (sticky) — DISENO.md §5.6. Sessió 9, 25/08/2026: l'element .site és qui pinta
   el fons a tota l'amplada de la finestra (la "barra"); el seu contingut viu dins d'un .site-int
   amb el mateix max-width que main.contingut, centrat igual — bug real trobat per l'usuari: el
   contingut de la barra anava d'una punta a l'altra de la finestra mentre la resta de la pàgina
   respectava l'amplada màxima, inconsistent amb la convenció web habitual. */
header.site {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--capcalera-alt);
  padding: 0 1.2rem;
  background: var(--c-paper-alt);
  border-bottom: 1px solid var(--c-vora);
}
/* D20 (sessió 10): dues files. El logo ocupa les dues a l'esquerra i creix; a la dreta, una
   columna amb la navegació a dalt i els selectors a baix. */
header.site .site-int {
  max-width: 960px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
header.site .capcalera-files {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  min-width: 0;
}
/* Segona fila centrada i cada selector dins del seu recuadre, per què es llegeixin com dues
   coses separades i no com una tira de text (sessió 10, pedido explícito). */
header.site .capcalera-selectors {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  font-size: 0.82rem;
}
header.site .selector-any,
header.site .idiomes {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--c-vora);
  border-radius: 7px;
  padding: 0.12rem 0.5rem;
  background: var(--c-paper);
}
header.site .selector-etiqueta { color: var(--c-text-suau); }
header.site .selector-any select {
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--c-ink);
  background: transparent;
  border: 0;
  padding: 0.05rem 0;
  cursor: pointer;
}
header.site .marca {
  font-family: var(--font-titulars);
  font-size: 1.5rem;
  line-height: 1.05;
  font-weight: 700;
  color: var(--c-primary-strong);
  text-decoration: none;
  white-space: nowrap;
}
header.site nav { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
header.site nav a { text-decoration: none; font-size: 0.92rem; color: var(--c-ink); }
header.site nav a:hover { color: var(--c-primary-strong); }
header.site .idiomes a { color: var(--c-text-suau); text-decoration: none; }
header.site .idiomes a.actiu { color: var(--c-primary-strong); font-weight: 600; }
/* Sessió 9, 25/08/2026: "Castellano" visible abans que hi hagi contingut real — sense enllaç, es
   distingeix visualment (opacitat baixa, cursor per defecte) d'un idioma que sí funciona. */
header.site .idioma-proxim { color: var(--c-text-suau); opacity: 0.55; cursor: default; }

/* Peu fix (fixed) — DISENO.md §5.6 */
footer.site {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  height: var(--peu-alt);
  padding: 0 1.2rem;
  background: var(--c-primary-strong);
  color: #eef4f2;
  font-size: 0.8rem;
  overflow: hidden;
}
footer.site .site-int {
  max-width: 960px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
footer.site a { color: #eef4f2; text-decoration: underline; }
footer.site .avis { opacity: 0.85; }
/* Sessió 9, 25/08/2026, pedido explícit: data de generació al peu — amagada en viewports
   estrets (mateix patró d'ocultar la nav a @media max-width:480px, sota) perquè el peu és fixed
   i d'alçada fixa, sense marge per embolicar text. */
footer.site .avis-data { opacity: 0.7; white-space: nowrap; }

main.contingut {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.4rem 1.2rem 2rem;
}

.breadcrumbs { font-size: 0.85rem; color: var(--c-text-suau); }
.breadcrumbs a { text-decoration: none; }

.capsalera-municipi { margin-bottom: 1rem; }
.meta-municipi { color: var(--c-text-suau); font-size: 0.92rem; }

.avis-abast {
  background: var(--c-avis-fons);
  border-left: 3px solid var(--c-accent);
  border-radius: 0 8px 8px 0;
  padding: 0.7rem 1rem;
  font-size: 0.9rem;
  margin: 0.9rem 0 1.4rem;
}
.avis-abast strong { color: var(--c-primary-strong); }

.graella-tributs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin-top: 0.6rem;
}

.card-tribut {
  background: var(--c-paper-alt);
  border: 1px solid var(--c-vora);
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
}
.card-tribut .etiqueta-tribut {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--c-primary-strong);
  margin: 0 0 0.4rem;
}
.card-tribut .exercici {
  font-size: 0.78rem;
  color: var(--c-text-suau);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  margin-left: 0.4rem;
}
.card-tribut .valor-principal {
  font-family: var(--font-titulars);
  font-size: 1.7rem;
  color: var(--c-ink);
  margin: 0.1rem 0 0.3rem;
}
.card-tribut .valor-principal .unitat {
  font-size: 1rem;
  color: var(--c-text-suau);
  font-family: var(--font-cos);
  margin-left: 0.2rem;
}
.card-tribut .font-linia {
  font-size: 0.78rem;
  color: var(--c-text-suau);
}
.card-tribut .nota {
  font-size: 0.82rem;
  color: var(--c-text-suau);
  margin-top: 0.4rem;
}
.card-tribut details {
  margin-top: 0.5rem;
  font-size: 0.82rem;
}
.card-tribut details summary {
  cursor: pointer;
  color: var(--c-primary-strong);
}
.card-tribut .cita {
  font-style: italic;
  color: var(--c-text-suau);
  border-left: 2px solid var(--c-vora);
  padding-left: 0.6rem;
  margin: 0.4rem 0;
}

/* Patrón D2: los 3 estados que NO publican número — DISENO.md §10 D2 */
.card-tribut.card-absencia {
  border-style: dashed;
  border-color: rgba(18, 118, 107, 0.35);
  background: rgba(255, 255, 255, 0.5);
}
.card-tribut.card-absencia .absencia-icona {
  font-size: 1.4rem;
  margin-right: 0.4rem;
}
.card-tribut.card-absencia .absencia-titol {
  font-family: var(--font-titulars);
  font-size: 1.05rem;
  color: var(--c-primary-strong);
}
.card-tribut.card-absencia .absencia-text {
  font-size: 0.86rem;
  color: var(--c-text-suau);
  margin-top: 0.3rem;
}

table.taula-simple {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin-top: 0.4rem;
}
table.taula-simple th, table.taula-simple td {
  text-align: left;
  padding: 0.3rem 0.5rem 0.3rem 0;
  border-bottom: 1px solid var(--c-vora);
}
table.taula-simple caption {
  text-align: left;
  font-weight: 600;
  color: var(--c-primary-strong);
  margin-bottom: 0.2rem;
  caption-side: top;
}

/* Rànquings per escenari, comparar.html (sessió 9, 25/08/2026) */
/* Sessió 9, 25/08/2026, pedido explícit: cada escenari, una targeta pròpia (abans no es veia on
   començava/acabava). */
.ranking-escenari {
  margin: 1rem 0 1.6rem;
  background: var(--c-paper-alt);
  border: 1px solid var(--c-vora);
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
}
.ranking-escenari h3 { margin-top: 0; }
.ranking-taules { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; margin-top: 0.4rem; }
/* Excepció deliberada a "mai semàfor" (DISENO.md §5.6), pedido explícit: aquí el vermell/verd no
   qualifica cap ajuntament (regla CLAUDE.md #7 intacta), és pur contrast visual entre "els 5 més
   cars" i "els 5 més barats" perquè es distingeixin d'un cop d'ull dins la mateixa targeta. */
.ranking-taula-caixa { border-radius: 10px; padding: 0.8rem 0.9rem; }
.ranking-taula-caixa table.taula-simple { margin-top: 0; }
.ranking-cars { background: rgba(176, 58, 58, 0.07); }
.ranking-barats { background: rgba(18, 118, 107, 0.08); }
.ranking-valor { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ranking-peu { font-size: 0.78rem; color: var(--c-text-suau); margin: 0.7rem 0 0; }

/* Comparació camp a camp, comparar.html (sessió 10, 26/08/2026, pedido explícit). Mateixa
   excepció deliberada a "mai semàfor" que els rànquings de dalt, i pels mateixos motius: el color
   diu quina de les xifres que l'usuari ha posat una al costat de l'altra és la més alta i quina la
   més baixa, no qualifica cap ajuntament (CLAUDE.md #7). Els mateixos dos tons dels rànquings.
   La barra lateral no és decoració: el color sol no ha de ser l'únic portador del significat. */
/* Aire a l'esquerra a TOTES les cel·les de la taula, no només a les de color (sessió 10, pedido
   explícito): posar-lo només on hi ha fons deixava les columnes desalineades entre elles. */
/* `table.taula-comparador`, no `.taula-comparador`: la regla de dalt és `table.taula-simple td`
   (element+classe+element) i guanya per especificitat a un selector de classe+element encara que
   vagi després al fitxer. Amb el `table.` al davant les dues empaten i mana l'ordre. */
table.taula-comparador th, table.taula-comparador td { padding-left: 0.55rem; }
/* Les xifres van a l'ESQUERRA com la resta de la taula (sessió 10, pedido explícito: tot a la
   dreta quedava coherent però lleig), i la coma decimal s'alinea igualment: la part entera ocupa
   una amplada mínima fixa i s'alinea a la dreta dins d'aquest espai. Cap espai fals al marcatge —
   ho fa el CSS, que és el que sap quant ocupa cada xifra. `tabular-nums` és el que ho fa quadrar:
   sense ell, un "1" i un "8" no amiden igual i les comes ballen. */
table.taula-comparador td.cel-num { text-align: left; }
.xifra { font-variant-numeric: tabular-nums; white-space: nowrap; }
.xifra-ent { display: inline-block; min-width: 4.2ch; text-align: right; }
.taula-comparador td.cmp-alt {
  background: rgba(176, 58, 58, 0.09);
  box-shadow: inset 3px 0 0 rgba(176, 58, 58, 0.55);
}
.taula-comparador td.cmp-baix {
  background: rgba(18, 118, 107, 0.10);
  box-shadow: inset 3px 0 0 rgba(18, 118, 107, 0.6);
}
.llegenda-colors { font-size: 0.8rem; margin-top: 0.5rem; }

/* El TOTAL no és una fila més de la taula (sessió 10, pedido explícit): barra gruixuda a sobre i
   una mica d'aire, perquè es llegeixi com el tancament de la suma i no com un tribut més. */
.taula-comparador tr.fila-total > td {
  border-top: 3px solid var(--c-primary);
  padding-top: 0.75rem;
  font-weight: 600;
}

.graf-caixa {
  background: var(--c-paper-alt);
  border: 1px solid var(--c-vora);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  margin: 1rem 0;
}
.graf-caixa canvas { max-width: 100%; }

.correccio {
  margin-top: 2rem;
  padding: 1rem 1.2rem;
  background: var(--c-paper-alt);
  border: 1px solid var(--c-vora);
  border-radius: 10px;
  font-size: 0.9rem;
}

/* ---------- Portada (Fase 2, DISENO.md §5.7) ---------- */

.hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.6rem;
  margin: 0.4rem 0 1.6rem;
}
.hero-text { flex: 1 1 320px; }
.hero-text h1 { margin-top: 0; }
.hero-subtitol { color: var(--c-text-suau); font-size: 1.02rem; margin: 0.2rem 0 0; }
/* Sessió 9, 25/08/2026, pedido explícit: sense text, només la imatge -- la targeta pot ser més
   petita (menys padding, menys amplada base al flex). */
.hero-mapa-miniatura { margin: 0; }
.hero-mapa-miniatura svg { display: block; width: 100%; height: auto; }
.hero-mapa-placeholder {
  flex: 0 1 220px; margin: 0; padding: 0.6rem;
  /* Sessió 9, 25/08/2026: aquesta targeta va deixar de ser un "encara no hi és" (Fase 5 ja va
     construir el mapa real) i ara enllaça a mapa.html — reset dels estils per defecte d'enllaç,
     mateix patró que .card-tribut-explic. */
  display: block; text-decoration: none; color: inherit;
}
.hero-mapa-placeholder:hover { border-color: var(--c-primary); }

section { margin: 1.8rem 0; }
section h2 { margin-bottom: 0.5rem; }

/* Sessió 9, 25/08/2026, pedido explícit: la caixa de cerca de la portada, centrada. */
.cerca-seccio { text-align: center; }
.cerca-caixa { position: relative; max-width: 420px; margin: 0 auto; text-align: left; }
.cerca-input {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--c-vora);
  border-radius: 8px;
  background: var(--c-paper-alt);
  color: var(--c-ink);
}
.cerca-input:focus { outline: 2px solid var(--c-primary); outline-offset: 1px; }
.cerca-resultats {
  position: absolute;
  z-index: 15;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0.3rem 0;
  list-style: none;
  background: var(--c-paper-alt);
  border: 1px solid var(--c-vora);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(12, 74, 68, 0.14);
  max-height: 320px;
  overflow-y: auto;
}
.cerca-resultats li a, .cerca-resultats li button {
  display: block;
  width: 100%;
  padding: 0.4rem 0.8rem;
  text-decoration: none;
  color: var(--c-ink);
  font-size: 0.92rem;
  /* .cerca-resultats li button: sessió 9, 25/08/2026 — el selector del comparador reutilitza
     aquesta mateixa llista però amb <button> (clic = afegir a la comparació, no navegar) en
     comptes de <a> (clic = anar a la fitxa), per això cal desfer l'estil per defecte de botó. */
  background: none;
  border: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.cerca-resultats li a:hover, .cerca-resultats li button:hover { background: var(--c-avis-fons); color: var(--c-primary-strong); }
.cerca-resultats .cerca-buit { padding: 0.4rem 0.8rem; color: var(--c-text-suau); font-size: 0.88rem; }
.cerca-veure-tots { font-size: 0.86rem; margin: 0.5rem 0 0; }

.boto {
  display: inline-block;
  font-weight: 600;
  text-decoration: none;
  padding: 0.65rem 1.2rem;
  border-radius: 8px;
  white-space: nowrap;
}
.boto-accent { background: var(--c-accent); color: #fff; }
.boto-accent:hover { background: var(--c-primary-strong); color: #fff; }

.comparar-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--c-paper-alt);
  border: 1px solid var(--c-vora);
  border-radius: 12px;
  padding: 1.1rem 1.3rem;
}
.comparar-cta h2 { margin: 0 0 0.2rem; }
.comparar-cta p { margin: 0; color: var(--c-text-suau); font-size: 0.92rem; }

.destacat-seccio .destacat { margin: 0; }
/* Sessió 9, 25/08/2026, pedido explícit: cada targeta de dades/destacats/cards/*.html porta el
   seu propi color de fons (variables --c-paper locals a l'estil inline de cada targeta), que
   sovint coincideix amb el fons de la pàgina — sense vora ni ombra pròpies, es confonia amb la
   resta de la portada. Marc comú aquí (no a cada targeta individual) perquè totes en tinguin un,
   independentment dels seus colors interns: vora + ombra suau ("3D simulat"), no un color de
   fons propi que podria xocar amb el de la targeta. */
#destacat-mostra {
  border-radius: 16px;
  border: 1px solid var(--c-vora);
  box-shadow: 0 6px 22px rgba(12, 74, 68, 0.14);
  overflow: hidden;
}

.cobertura-graella {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.8rem;
  margin-top: 0.6rem;
}
.stat-card {
  background: var(--c-paper-alt);
  border: 1px solid var(--c-vora);
  border-radius: 10px;
  padding: 0.8rem 0.9rem;
}
.stat-valor {
  font-family: var(--font-titulars);
  font-size: 1.6rem;
  color: var(--c-primary-strong);
  margin: 0;
}
.stat-valor-petit {
  font-family: var(--font-titulars);
  font-size: 1.15rem;
  color: var(--c-primary-strong);
  margin: 0;
}
/* Sessió 9, 25/08/2026, pedido explícit: on hi ha una relació (n de total), el percentatge és
   la dada gran, en taronja (--c-accent) — la fracció "n de total" queda com a detall petit. */
.stat-valor-pct {
  font-family: var(--font-titulars);
  font-size: 1.6rem;
  color: var(--c-accent);
  margin: 0;
}
.stat-valor-detall { font-size: 0.78rem; color: var(--c-text-suau); margin: 0.1rem 0 0; }
.stat-etiqueta { font-size: 0.78rem; color: var(--c-text-suau); margin: 0.15rem 0 0; }
/* Sessió 9, 25/08/2026, pedido explícit: a les targetes AMB percentatge (stat-card-tribut), el
   tribut és qui encapçala (verd de marca, negreta) — sense això el % gran taronja s'enduia tota
   l'atenció i no quedava clar de quin tribut era. Les targetes SENSE percentatge (municipis amb
   fitxa / fonts citades) es queden tal qual, amb .stat-etiqueta a sota. */
.stat-etiqueta-top { font-size: 0.78rem; font-weight: 700; color: var(--c-primary-strong); margin: 0 0 0.15rem; }
.cobertura-enllac { font-size: 0.9rem; margin: 0.6rem 0 0; }

.catalunya-text { color: var(--c-text-suau); font-size: 0.9rem; margin: 0 0 0.6rem; }
.catalunya-graella {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}
.catalunya-graella .graf-caixa { margin: 0; }
.catalunya-graella h3 { margin: 0 0 0.5rem; font-size: 0.98rem; }
.catalunya-graella .nota { margin-top: 0.5rem; }

.entrades-graella {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.9rem;
  margin-top: 0.6rem;
}
.entrada-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: var(--c-paper-alt);
  border: 1px solid var(--c-vora);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  text-decoration: none;
  color: var(--c-ink);
}
.entrada-card:hover { border-color: var(--c-primary); }
.entrada-card h3 { margin: 0; color: var(--c-primary-strong); }
.entrada-card-accent { border-color: rgba(192, 106, 52, 0.35); }
.entrada-cta { font-size: 0.82rem; font-weight: 600; color: var(--c-accent); }

@media (max-width: 720px) {
  .hero { flex-direction: column; align-items: stretch; }
  .comparar-cta { flex-direction: column; align-items: flex-start; }
}

/* Directori complet (municipis.html) — la portada real (index.html) usa el cercador, Fase 2 */

/* Pàgina "Tributs" (Fase 4, DISENO.md §5.9) — portada-índex i pàgina de detall per tribut */
.grid-tributs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.card-tribut-explic {
  background: var(--c-paper-alt);
  border: 1px solid var(--c-vora);
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
  text-decoration: none;
  color: var(--c-ink);
  display: block;
}
.card-tribut-explic:hover { border-color: var(--c-primary); }
.card-tribut-explic h3 { margin: 0; }
/* Sessió 9, 25/08/2026, pedido explícit: el nom oficial llarg (p. ex. "Impost sobre Béns
   Immobles") ja no és el titular (confonia amb ell) — passa a subtítol, entre el nom curt (h3,
   "IBI") i la descripció. Mateixa regla a .subtitol-tribut fora de la targeta, a tribut.html. */
.subtitol-tribut { font-size: 0.86rem; color: var(--c-accent); font-weight: 600; margin: 0.15rem 0 0.5rem; }
/* Generalitzada (abans només .card-tribut-explic .badge-tipus): tribut.html en fa servir un
   fora de targeta, a sota de la descripció, i li calia el mateix estil. */
.badge-tipus {
  display: inline-block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-primary-strong);
  background: rgba(18, 118, 107, 0.1);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  margin-top: 0.6rem;
}
.card-tribut-explic p { font-size: 0.88rem; color: var(--c-text-suau); margin: 0; }
.card-tribut-explic .veure-detall { display: block; margin-top: 0.5rem; font-size: 0.85rem; text-decoration: none; }

.limits-llista { padding-left: 1.2rem; }
.limits-llista li { margin-bottom: 0.6rem; font-size: 0.94rem; }

.grafic-nota { font-size: 0.82rem; color: var(--c-text-suau); margin-top: 0.4rem; }

.accions-tribut {
  margin-top: 1.4rem;
  padding: 1rem 1.2rem;
  background: var(--c-paper-alt);
  border: 1px solid var(--c-vora);
  border-radius: 10px;
  font-size: 0.9rem;
}
.accions-tribut p { margin: 0.3rem 0; }
.text-suau { color: var(--c-text-suau); }
/* Percentatge corporatiu — taronja, en negreta, per a qualsevol xifra "n de total" arreu del
   lloc (sessió 9, 25/08/2026, pedido explícit: "en muchos sitios", no només la portada). */
.pct-corporatiu { color: var(--c-accent); font-weight: 700; }

/* Pastilles de confiança — taula resum de la fitxa de municipi (sessió 9, 25/08/2026). Mai
   semàfor (DISENO.md §5.6): dues famílies de color només (verd de marca = dada forta, taronja =
   aproximada/a revisar), no un codi vermell/groc/verd. */
.pill { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.74rem; font-weight: 600; }
.pill-verificat, .pill-validat, .pill-concordant, .pill-extret { background: rgba(18, 118, 107, 0.12); color: var(--c-primary-strong); }
.pill-aproximat, .pill-sospitos { background: var(--c-avis-fons); color: var(--c-accent); }
.pill-no_determinat, .pill-absent { background: rgba(82, 98, 94, 0.12); color: var(--c-text-suau); }

/* Pàgina "Cobertura" (Fase 4, DISENO.md §5.10) */
.stats-resum {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0.8rem 0 1.4rem;
}
.stat-tile {
  background: var(--c-paper-alt);
  border: 1px solid var(--c-vora);
  border-radius: 12px;
  padding: 0.9rem 1.2rem;
  flex: 1 1 200px;
}
.stat-tile .stat-valor {
  font-family: var(--font-titulars);
  font-size: 1.8rem;
  color: var(--c-primary-strong);
}
.stat-tile .stat-etiqueta { font-size: 0.85rem; color: var(--c-text-suau); }

.avis-responsabilitat {
  background: var(--c-avis-fons);
  border-left: 3px solid var(--c-accent);
  border-radius: 0 8px 8px 0;
  padding: 0.8rem 1.1rem;
  margin: 1rem 0 1.6rem;
}
.avis-responsabilitat strong { color: var(--c-primary-strong); display: block; margin-bottom: 0.2rem; }
.avis-responsabilitat p { margin: 0; font-size: 0.92rem; }

table.taula-cobertura { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin-top: 0.6rem; }
table.taula-cobertura th, table.taula-cobertura td {
  text-align: left;
  padding: 0.5rem 0.6rem 0.5rem 0;
  border-bottom: 1px solid var(--c-vora);
  vertical-align: middle;
}
table.taula-cobertura th { color: var(--c-text-suau); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.02em; }
table.taula-cobertura td.cel-tribut { font-weight: 600; color: var(--c-primary-strong); white-space: nowrap; }

.barra-cobertura {
  height: 10px;
  border-radius: 6px;
  background: rgba(18, 118, 107, 0.12);
  overflow: hidden;
  min-width: 90px;
}
.barra-cobertura .fill { height: 100%; background: var(--c-primary); }

details.detall-nivells { margin-top: 0.3rem; font-size: 0.85rem; }
details.detall-nivells summary { cursor: pointer; color: var(--c-primary-strong); }

.mapa-pendent, .cicle-caixa {
  background: var(--c-paper-alt);
  border: 1px dashed var(--c-vora);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  font-size: 0.9rem;
  color: var(--c-text-suau);
  margin-top: 0.6rem;
}

/* Índice provisional de navegación (Fase 0) */
.index-llista {
  columns: 3;
  column-gap: 1.6rem;
  margin-top: 1rem;
}
.index-llista li { break-inside: avoid; margin-bottom: 0.15rem; font-size: 0.92rem; }
.index-llista a { text-decoration: none; }
@media (max-width: 720px) {
  .index-llista { columns: 2; }
}
@media (max-width: 480px) {
  .index-llista { columns: 1; }
  header.site nav { display: none; }
  footer.site .avis-data { display: none; }
}

/* ---------- Fase 3: comparador + escenaris comparatius (D16) + metodologia ---------- */

/* Envoltori amb scroll horitzontal propi per a qualsevol taula ampla (comparador amb fins a 5
   municipis, escenaris amb 5 columnes) — el body mai fa scroll horitzontal. */
.taula-ampla-caixa {
  background: var(--c-paper-alt);
  border: 1px solid var(--c-vora);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  margin: 0.8rem 0 1.2rem;
  overflow-x: auto;
}
.taula-comparador, .taula-metodologia, .taula-escenaris { min-width: 100%; }
/* Sense això, el navegador reparteix l'amplada segons el contingut i la primera columna de dades
   surt més ampla que la resta (es notava sobretot a la taula d'escenaris). Amb `fixed`, les
   columnes que no porten amplada declarada se la reparteixen a parts iguals, que és el que ha de
   passar quan totes són el mateix tipus de dada. Sessió 10, vist per l'usuari. */
table.taula-comparador, table.taula-escenaris { table-layout: fixed; }
table.taula-comparador th:first-child, table.taula-escenaris th:first-child { width: 30%; }
table.taula-comparador td:first-child, table.taula-escenaris td:first-child {
  overflow-wrap: anywhere;
}
.taula-comparador th:first-child, .taula-comparador td:first-child,
.taula-escenaris th:first-child, .taula-escenaris td:first-child {
  white-space: nowrap;
  font-weight: 600;
  color: var(--c-primary-strong);
}
/* Amb 5 municipis, els noms llargs es trepitjaven entre ells: la capçalera ha de poder saltar de
   línia (sessió 10, vist per l'usuari). El `nowrap` només es manté a la primera columna, que és
   l'etiqueta de la fila i és curta. */
.taula-comparador th, .taula-escenaris th {
  white-space: normal;
  overflow-wrap: anywhere;
  vertical-align: bottom;
  line-height: 1.25;
}
.taula-comparador th:first-child, .taula-escenaris th:first-child { white-space: nowrap; }
.taula-escenaris-caixa { margin: 0.6rem 0 0.4rem; overflow-x: auto; }
.taula-escenaris { border-collapse: collapse; font-size: 0.85rem; width: 100%; }
.taula-escenaris th, .taula-escenaris td { text-align: left; padding: 0.3rem 0.6rem 0.3rem 0; border-bottom: 1px solid var(--c-vora); }
.taula-escenaris tr.fila-total td { border-top: 1px solid var(--c-vora); border-bottom: none; font-weight: 700; padding-top: 0.5rem; }

.cel-sense-dada, .cmp-absencia { color: var(--c-text-suau); font-size: 0.9em; cursor: help; }
.cel-no-aplicable { color: var(--c-text-suau); font-style: italic; font-size: 0.9em; cursor: help; }
/* Sessió 9, 25/08/2026: component calculat amb fórmula/rang (p. ex. guals de Barcelona), no una
   xifra única — es mostra igualment (mai s'amaga per no ser exacta), amb el "~" i un color
   d'avís suau perquè es distingeixi d'una xifra precisa d'un cop d'ull. */
.cel-aproximat { color: var(--c-accent); cursor: help; }

.titol-escenaris { margin-top: 1.8rem; }

.avis-ponderacio { margin-top: 0.7rem; font-size: 0.86rem; }
.avis-comparabilitat { border-left-color: var(--c-primary); background: rgba(18,118,107,0.08); }

/* Selector de municipis del comparador — sessió 9, 25/08/2026, pedido explícit: centrat, i el
   desplegable de resultats en viu (.cerca-resultats, reutilitzat de cerca.js/portada) en comptes
   del <datalist> natiu del navegador (no filtrava en viu, UX inconsistent amb la portada). */
.selector-comparador { margin: 0.8rem 0 1.4rem; text-align: center; }
.selector-comparador label { display: block; font-size: 0.85rem; color: var(--c-text-suau); margin-bottom: 0.3rem; }
.selector-fila { display: flex; gap: 0.5rem; max-width: 420px; margin: 0 auto; position: relative; text-align: left; }
.selector-fila input {
  flex: 1;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--c-vora);
  border-radius: 8px;
  font-family: var(--font-cos);
  font-size: 0.95rem;
  background: var(--c-paper-alt);
  color: var(--c-ink);
}
.chips-municipis { list-style: none; margin: 0.7rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.chip {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--c-paper-alt);
  border: 1px solid var(--c-vora);
  border-radius: 999px;
  padding: 0.3rem 0.4rem 0.3rem 0.8rem;
  font-size: 0.86rem;
}
.chip-elimina {
  border: none;
  background: rgba(18,118,107,0.12);
  color: var(--c-primary-strong);
  border-radius: 50%;
  width: 1.4rem;
  height: 1.4rem;
  line-height: 1.4rem;
  text-align: center;
  cursor: pointer;
  font-size: 1rem;
  padding: 0;
}
.chip-elimina:hover { background: var(--c-accent); color: #fff; }

/* Pestanyes A-E dels escenaris comparatius */
.pestanyes-escenaris { display: flex; gap: 0.4rem; margin: 0.8rem 0 0.2rem; flex-wrap: wrap; }
.pestanya-escenari {
  border: 1px solid var(--c-vora);
  background: var(--c-paper-alt);
  color: var(--c-ink);
  border-radius: 8px 8px 0 0;
  padding: 0.4rem 0.9rem;
  font-family: var(--font-cos);
  font-weight: 600;
  cursor: pointer;
}
.pestanya-escenari.activa { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

/* Metodologia */
.bloc-calcul h3 { margin-top: 1.1rem; font-size: 1rem; }
.llista-columnes { columns: 2; column-gap: 1.4rem; margin: 0.6rem 0 0; padding-left: 1.1rem; }
.llista-columnes li { break-inside: avoid; font-size: 0.88rem; }
@media (max-width: 560px) {
  .llista-columnes { columns: 1; }
  .selector-fila { max-width: 100%; }
}

/* "Webs amigues" (sessió 10, pedido explícit). Cada targeta porta els colors de la web enllaçada
   a les seves pròpies variables --wa-*, definides al `style` de la targeta (que viu a
   dades/webs_amigues/cards/). Aquí només hi ha l'esquelet: si una targeta no defineix cap color,
   cau a la nostra paleta i queda igualment presentable. */
.webs-amigues { display: grid; gap: 1.4rem; margin: 1.2rem 0 2rem; }
.web-amiga {
  background: var(--wa-fons, var(--c-paper-alt));
  border: 1px solid var(--wa-vora, var(--c-vora));
  border-left: 5px solid var(--wa-accent, var(--c-primary));
  border-radius: 12px;
  padding: 1.3rem 1.5rem;
  color: var(--wa-text, var(--c-ink));
  max-width: 62rem;
}
.web-amiga p { margin: 0 0 0.75rem; }
.web-amiga .wa-etiqueta {
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem; font-weight: 600;
  color: var(--wa-titol, var(--c-primary-strong)); margin-bottom: 0.35rem;
}
.web-amiga .wa-titol {
  font-family: var(--font-titulars); font-size: 1.45rem; line-height: 1.2;
  margin: 0 0 0.8rem; color: var(--wa-titol, var(--c-primary-strong));
}
.web-amiga .wa-titol a { color: inherit; text-decoration: none; }
.web-amiga .wa-titol a:hover { text-decoration: underline; }
.web-amiga .wa-relacio {
  background: rgba(255, 255, 255, 0.6); border-left: 3px solid var(--wa-accent, var(--c-accent));
  border-radius: 0 8px 8px 0; padding: 0.6rem 0.8rem; font-size: 0.9rem;
}
.web-amiga .wa-nota { font-size: 0.86rem; opacity: 0.85; }
.web-amiga .wa-enllac { margin-bottom: 0; font-weight: 600; }
.web-amiga .wa-enllac a { color: var(--wa-accent, var(--c-primary)); text-decoration: none; }
.web-amiga .wa-enllac a:hover { text-decoration: underline; }
.intro-pagina { max-width: 62rem; }

/* D20 fase 3: la fitxa quan s'està mirant un exercici que no és el que va pintar el servidor. */
.avis-any {
  background: var(--c-avis-fons);
  border-left: 3px solid var(--c-accent);
  border-radius: 0 8px 8px 0;
  padding: 0.55rem 0.85rem;
  margin: 0.8rem 0 1rem;
  font-size: 0.88rem;
}
/* Una xifra d'un exercici veí no s'amaga (D20, punt 4: val més ensenyar-la ben etiquetada que
   deixar un buit tenint la dada), però tampoc es dissimula. */
.card-tribut.card-any-vei { border-color: var(--c-accent); }
.card-tribut.card-any-vei .exercici { color: var(--c-accent); font-weight: 600; }
.marca-any-vei { color: var(--c-accent); font-size: 0.85em; cursor: help; }
.valor-principal.valor-absent { font-size: 1rem; color: var(--c-text-suau); font-weight: 500; }

/* D20: comparar el municipi amb si mateix en un altre exercici (sessió 10, pedido explícito).
   La targeta i les files del segon any es distingeixen sense cridar: van una mica enrere, amb
   vora discontínua, per què quedi clar quina és la xifra principal i quina la de context. */
.comparar-any {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  margin: 0.6rem 0 1rem; font-size: 0.9rem;
}
.comparar-any select {
  font-family: inherit; font-size: 0.9rem; padding: 0.15rem 0.4rem;
  border: 1px solid var(--c-vora); border-radius: 6px; background: var(--c-paper-alt);
}
.comparar-any .nota { margin: 0; }
/* El segon exercici, dins de la mateixa targeta: una línia a sota, clarament secundària. */
.linia-any-comparat {
  margin: 0.15rem 0 0.5rem;
  font-size: 0.92rem;
  color: var(--c-text-suau);
  border-top: 1px dotted var(--c-vora);
  padding-top: 0.35rem;
}
.linia-any-comparat strong { color: var(--c-ink); font-weight: 600; }
.linia-any-etiqueta { font-variant: small-caps; letter-spacing: 0.02em; }
.linia-any-sense-dada { font-style: italic; }
tr.fila-comparada > td {
  border-top: 0;
  color: var(--c-text-suau);
  font-style: italic;
}
tr.fila-comparada > td:first-child { padding-left: 1.4rem; font-weight: 400; }