.ci-map-wrap{
  width: 100%;
}

.ci-map-stage{
  width: 100%;
  line-height: 0;
}

.ci-svg-map{
  width: 100%;
  height: auto;
  display: block;
}

/* Layer de pins */
.ci-pin-layer{
  pointer-events: none;
}

.ci-pin{
  pointer-events: none;
}

/* Error */
.ci-map-error{
  padding: 12px 14px;
  border: 1px solid #e7b0b0;
  background: #fff1f1;
  color: #7a1f1f;
  border-radius: 10px;
  font: 14px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

/* ===== Estados base ===== */
.ci-svg-map .ci-state{
  fill: #d0d0d0;
  stroke: #ffffff;
  stroke-width: 1;
  transition: transform .12s ease, filter .12s ease, fill .12s ease;
  transform-origin: center;
}

/* Si tu SVG NO usa .ci-state, aplica a paths con clase de estado */
.ci-svg-map path[class],
.ci-svg-map polygon[class]{
  transition: transform .12s ease, filter .12s ease, fill .12s ease;
  transform-origin: center;
}

/* ===== Activos (amarillo) ===== */
.ci-svg-map .ci-active{
  fill: #fccf00 !important; /* tu amarillo */
}

/* Solo activos tienen cursor */
.ci-svg-map .ci-active{
  cursor: pointer;
}

/* Hover: solo si está activo */
.ci-svg-map .ci-active:hover{
  filter: brightness(1.03);
  transform: scale(1.02);
}

/*SVG SHORTCODE MÓVIL*/
.ci-map-stage svg{
  width: 100% !important;
  height: auto !important;
  display: block;
}

.ci-map-wrap {
  width: 100%;
}

.ci-map-stage {
  width: 100%;
  position: relative;
  overflow: visible !important;
}

.ci-active:hover svg {
  width: 100% !important;
  height: auto !important;
  max-width: 100%;
  display: block;
}