/* =====================================================================
   EL MAPA DE UNA COMUNIDAD, PARTIDO EN SUS MUNICIPIOS
   Hasta el 04/10/2026 esto era un lienzo con polvo naranja y ocho o nueve
   chinchetas: las unicas ciudades que tenian pagina. Ahora la tiene cada
   municipio con gasolinera, asi que el mapa son los terminos municipales
   de verdad (limites del INE), y se pulsa el que sea.

   Se pinto un dia por tercios de precio -- verde, amarillo y rojo-- y el
   dueno lo quito: el mapa de la comunidad no esta para decir si una zona es
   cara o barata, eso lo dice la pagina del municipio. Vuelve el color de
   antes, el mismo con el que esa comunidad se dibujaba en el lienzo
   (`--cp-col`, que lo pone la propia pagina), uno solo para todos los que
   tienen gasolinera. Oscuros los que no tienen ninguna: esos no se pulsan,
   ni se levantan, ni dicen nada.
   ===================================================================== */
.cp-map2{
  position:relative;width:100%;
  border:1px solid var(--line);border-radius:22px;background:var(--surface-2);
  box-shadow:0 50px 100px -55px #000, inset 0 1px 0 rgba(255,255,255,.03);
  overflow:hidden;padding:10px;touch-action:none;
}
.cp-map2 svg{display:block;width:100%;height:auto;max-height:min(72vh,680px);margin:0 auto;}
/* El borde se mide en pixeles de pantalla y no del mapa: si no, al acercar
   catorce veces los terminos se separan con una franja de dos dedos. */
.cp-mun{
  fill:#211c19;stroke:#15110e;stroke-width:.6;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.cp-mun.hay{
  fill:var(--cp-col,#5a352c);
  transition:fill .15s ease,transform .14s cubic-bezier(.2,.7,.2,1);
}
.cp-map2 a{cursor:pointer;}
.cp-map2 a:focus{outline:none;}
/* El municipio se levanta al pasar por encima. El salto y la sombra los
   pone el JS: son pixeles de pantalla, y aqui no se sabe a que escala se
   esta dibujando el mapa ni cuanto se ha acercado. */
.cp-mun.hay.on{fill:var(--accent);stroke:var(--accent-soft);stroke-width:1.1;}
@media (prefers-reduced-motion:reduce){
  .cp-mun.hay{transition:none;}
}
.cp-rot{
  fill:rgba(214,202,189,.72);font-family:var(--sans);font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;text-anchor:middle;
  pointer-events:none;paint-order:stroke;stroke:rgba(0,0,0,.8);stroke-linejoin:round;
}
/* el cartelito sigue al raton; en el movil sale al tocar, antes de entrar.
   El filo naranja es el de las chinchetas de antes. */
.cp-tip{
  position:absolute;z-index:4;pointer-events:none;
  transform:translate(-50%,-100%);margin-top:-12px;
  background:rgba(12,8,6,.92);border:1px solid rgba(249,115,22,.34);border-radius:11px;
  padding:8px 11px;box-shadow:0 18px 30px -18px #000;white-space:nowrap;
}
.cp-tip b{display:block;font-size:13.5px;font-weight:800;line-height:1.2;}
.cp-tip span{display:block;margin-top:3px;font-size:11.5px;color:var(--dim);}
.cp-tip span.pr{color:var(--accent-soft);}
.cp-zoom{position:absolute;right:16px;top:16px;z-index:3;display:grid;gap:6px;}
.cp-zoom button{
  width:34px;height:34px;display:grid;place-items:center;cursor:pointer;
  background:rgba(20,16,13,.84);border:1px solid rgba(255,255,255,.12);
  border-radius:10px;color:var(--text);font:700 15px/1 var(--sans);
}
.cp-zoom button:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);}
.cp-map2.arrastra{cursor:grabbing;}

@media (max-width:900px){
  .cp-map2{padding:6px;border-radius:18px;}
  .cp-map2 svg{max-height:62vh;}
  .cp-zoom{right:10px;top:10px;}
  .cp-zoom button{width:38px;height:38px;}
  .cp-rot{letter-spacing:.12em;}
}