/* estilos globales */
body { font-family: Arial, sans-serif; margin:0; padding:0; }

/* contenedor: más pequeño pero responsive */
#svg-container {
  width: 90%;
  max-width: 720px; /* ajustar aquí si quieres aún más pequeño */
  margin: 18px auto;
  box-sizing: border-box;
  border: 1px solid black;
  background-color: aquamarine;
}

/* el SVG mantiene su responsividad */
#svg-container svg { width: 100%; height: auto; display: block; }

/* color por defecto para todas las provincias: usa fill del SVG como fallback */
#features path { transition: fill .18s; fill: #6f9c76; }

/* solo las provincias interactivas muestran cursor y cambian color al hover */
#features path.interactive { cursor: pointer; }
#features path.interactive:hover { filter: brightness(0.7); }

/* provincias no interactivas grises (se aplica desde JS también) */
#features path.not-interactive { fill: #cccccc; cursor: default; }

/* tooltip */
#tooltip {
  position: fixed; /* usar fixed para que las coordenadas del viewport (clientX/Y) funcionen correctamente */
  pointer-events: none;
  background: rgba(0,0,0,.8);
  color: #fff;
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 13px;
  display: none;
  white-space: nowrap;
  z-index: 1000;
}

/* borde por defecto para todas las provincias */
#svg-container svg path {
  stroke: #000;                /* borde negro por defecto */
  stroke-width: 1;           /* grosor por defecto */
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke; /* mantiene grosor al escalar */
  transition: fill .18s, stroke .12s, stroke-width .12s;
}

/* provincias interactivas: hover con borde amarillo y más grueso */
#svg-container svg #features path.interactive:hover {
  stroke: #ff0;    /* amarillo */
  stroke-width: 2; /* más grueso al pasar el cursor */
  filter: brightness(0.86);
}

/* provincias no interactivas: borde tenue (opcional) */
#svg-container svg #features path.not-interactive {
  stroke: #999;
  stroke: #000;
}

/* ajuste para pantallas muy pequeñas */
@media (max-width: 590px) {
  #svg-container { width: 90%; max-width: 350px; margin: 12px auto; }
  #tooltip { font-size: 12px; padding: 5px 7px; }
  #svg-container svg path { stroke-width: 0.5; }
  #svg-container svg #features path.interactive:hover { stroke-width: 1.6; }
}