body {
    font-family: Arial, sans-serif;
    text-align: center;
  }
  svg {
    margin-top: 20px;
  }
  path {
cursor: pointer;
transition: fill 0.3s;
}

path:hover {
fill: #ffaaaa;
}

.tooltip {
position: absolute;
background-color: rgba(0, 0, 0, 0.8);
color: white;
padding: 10px;
border-radius: 25px;
font-size: 13px !important;
display: none;
pointer-events: none;
width: auto;
max-width: 200px;
}

.tooltip strong{
  font-size: 16px;
}

.no-hover {
pointer-events: none; 
fill: none;
stroke-width: 1px;
}

#map-container svg{
  width: 70%;
  float: left;
  height: 100%;
}

#info-container {
  width: 25%;
  float: right;
  padding: 10px;
  border-left: 1px solid #ccc;
  font-size: 16px !important;
}

#polo-info {
  max-height: 80vh; 
  overflow-y: auto;
  padding: 10px;
  border: 1px solid #ccc;
  font-size: 16px;
  background-color: #eee9e9; 
  font-size: 16px !important;
}

#polo-info {
  margin-top: 20px;
  height: 100%;
}

#municipio-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px; 
}

path.has-polos {
  fill: #D13239; 
}

path:hover {
  fill: #ff7878;
  cursor: pointer; 
}

@media (max-width: 770px) {
  #polo-info{
    font-size: 14px !important;
  }
  h3{
    font-size: 13px;
  }
  #info-container{
    padding: 0;
    display: none;
  }
  #polo-info{
    font-size: 8px !important;
    width: 100%;
    padding: 2px;
    max-height: 60vh; 
   
  }
  #polo-info h3{
    font-size: 8px;
  }
  #map-container svg{
    height: 100% !important;
    width: 100%;
  }
  .tooltip strong{
    font-size: 10px;
  }
  .tooltip{
    font-size: 8px !important;
    max-width: 100px;
    padding: 1%;
  }
}