/*
  Mapa interactiu — Fase 5 (docs/WEB-FINAL.md). Es carrega només a mapa.html, no al CSS
  base perquè no cal al pes de la resta de pàgines (DISENO.md §5.5: res s'infla per a tothom
  perquè una pàgina ho necessita). Tokens de color reutilitzats d'estil.css (:root).
*/

body.pagina-mapa main.contingut {
  max-width: 1180px;
}
/* Sessió 9, 25/08/2026, pedido explícit (tercer avís): amb el selector d'escenari i la
   llegenda ja a sobre del mapa, calia guanyar espai vertical d'on fos perquè el conjunt
   càpiga sense fer scroll -- marges i padding més ajustats només en aquesta pàgina. */
body.pagina-mapa h1 { margin-bottom: 0.3rem; }

.mapa-contenidor {
  margin-top: 0.8rem;
}

/* Selector d'escenari (sessió 9, 25/08/2026, pedido explícit) — abans del mapa, mateixa
   targeta que .mapa-llegenda perquè es llegeixi com a part del mateix bloc de controls. */
.mapa-selector-escenari {
  margin-bottom: 0.6rem;
  background: var(--c-paper-alt);
  border: 1px solid var(--c-vora);
  border-radius: 10px;
  padding: 0.6rem 1rem;
}
.mapa-selector-escenari h2 { font-size: 1rem; margin: 0 0 0.5rem; }
.mapa-escenari-botons { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mapa-escenari-boto {
  font: inherit;
  font-size: 0.85rem;
  background: var(--c-paper);
  color: var(--c-ink);
  border: 1px solid var(--c-vora);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
}
.mapa-escenari-boto:hover { border-color: var(--c-primary); }
.mapa-escenari-boto.actiu {
  background: var(--c-primary-strong);
  color: #fff;
  border-color: var(--c-primary-strong);
  font-weight: 600;
}
.mapa-llegenda-nivell { font-size: 0.78rem; color: var(--c-text-suau); margin: -0.3rem 0 0.5rem; font-style: italic; }

.mapa-breadcrumb {
  margin: 0 0 0.6rem;
  font-size: 0.92rem;
  color: var(--c-text-suau);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.mapa-breadcrumb-boto {
  font: inherit;
  color: var(--c-primary-strong);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}
.mapa-breadcrumb-boto:hover { color: var(--c-accent); }
.mapa-breadcrumb-actual { color: var(--c-ink); font-weight: 600; }

.mapa-lienzo {
  /* Sessió 9, 25/08/2026, pedido explícit: prou petit perquè es vegi sencer d'un cop d'ull
     (amb el selector i la llegenda ja a sobre) i l'efecte de canviar d'escenari es noti sense
     fer scroll -- centrat, no calia que ocupés tota l'amplada de 1180px. */
  max-width: 480px;
  margin: 0 auto;
  position: relative;
  background: var(--c-paper-alt);
  border: 1px solid var(--c-vora);
  border-radius: 12px;
  overflow: hidden;
}

#mapa-svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 760 / 540;
  cursor: grab;
}
#mapa-svg:active { cursor: grabbing; }

.mapa-carregant {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--c-text-suau);
  font-size: 0.9rem;
  margin: 0;
}
.mapa-carregant.mapa-error { color: var(--c-accent); }

/* Provincies (nivell inicial) */
path.provincia {
  /* Sessió 9, 25/08/2026: el fill ja no és fix aquí -- cada província porta el seu propi
     gradient (JS, .attr("fill", ...), mitjana dels seus municipis per a l'escenari actiu). Una
     regla CSS de fill aquí el taparia sencer (un atribut de presentació SVG té MENYS prioritat
     que qualsevol regla CSS, encara que sigui més antiga en cascada). El hover es marca només
     amb el traç, mai canviant el fill (trencaria el color de dada). */
  stroke: var(--c-primary-strong);
  stroke-width: 1.2px;
  cursor: pointer;
}
path.provincia:hover, path.provincia:focus {
  stroke-width: 2.4px;
  outline: none;
}

/* Municipis (coropletic) */
path.municipi {
  stroke: rgba(255, 255, 255, 0.65);
  stroke-width: 0.6px;
  cursor: pointer;
}
path.municipi:hover, path.municipi:focus {
  stroke: var(--c-primary-strong);
  stroke-width: 1.4px;
  outline: none;
}
path.municipi.sense-dada {
  stroke-dasharray: 2 1.5;
  stroke: rgba(22, 33, 31, 0.35);
}
path.municipi.seleccionat {
  stroke: var(--c-accent);
  stroke-width: 2.2px;
}

path.comarques-mesh {
  fill: none;
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 0.9px;
  stroke-dasharray: 3 2;
  pointer-events: none;
}

/* Panell de detall d'un municipi, flotant sobre el mapa */
.mapa-panell {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  max-width: 260px;
  background: var(--c-paper-alt);
  border: 1px solid var(--c-vora);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  box-shadow: 0 6px 18px rgba(12, 74, 68, 0.14);
}
.mapa-panell h3 {
  margin: 0 1.4rem 0.15rem 0;
  font-size: 1.05rem;
}
.mapa-panell-meta {
  margin: 0 0 0.5rem;
  font-size: 0.82rem;
  color: var(--c-text-suau);
}
.mapa-panell-valor {
  font-family: var(--font-titulars);
  font-size: 1.35rem;
  color: var(--c-ink);
  margin: 0 0 0.6rem;
}
.mapa-panell-valor .unitat {
  font-family: var(--font-cos);
  font-size: 0.85rem;
  color: var(--c-text-suau);
}
.mapa-panell-valor.sense-dada {
  font-family: var(--font-cos);
  font-size: 0.9rem;
  color: var(--c-text-suau);
}
.mapa-panell-link {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}
.mapa-panell-tanca {
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  border: none;
  background: none;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--c-text-suau);
  cursor: pointer;
  padding: 0.1rem 0.3rem;
}
.mapa-panell-tanca:hover { color: var(--c-accent); }

/* Llegenda */
.mapa-llegenda {
  /* Sessió 9, 25/08/2026, pedido explícit: ara va abans del mapa i a tota l'amplada (abans
     quedava sota, estreta a 640px). */
  margin: 0 0 0.6rem;
  background: var(--c-paper-alt);
  border: 1px solid var(--c-vora);
  border-radius: 10px;
  padding: 0.6rem 1rem;
}
.mapa-llegenda h2 { font-size: 1rem; margin: 0 0 0.3rem; }
.mapa-llegenda-text {
  font-size: 0.85rem;
  color: var(--c-text-suau);
  margin: 0 0 0.6rem;
}
.mapa-llegenda-escala {
  width: 100%;
  height: 46px;
  display: block;
}
.mapa-llegenda-etiqueta {
  font-size: 11px;
  fill: var(--c-text-suau);
  font-family: var(--font-cos);
}
.mapa-cobertura {
  font-size: 0.8rem;
  color: var(--c-text-suau);
  margin: 0.4rem 0 0;
}

@media (max-width: 640px) {
  .mapa-panell { position: static; max-width: none; margin-top: 0.6rem; box-shadow: none; }
}