.columna{
        /* position: relative; */
         max-width: 1000px; 
         border:none;
        }

.map-container {
  position: relative;
  display: inline-block;
  border: none;
}
.map-image {
  max-width: 100%;
  max-height: 100vh;
  opacity: 1;
  height: auto;
}
.uprmj_hotspot {
  position: absolute;
  width: 40px;
  height: 40px; 
  background: transparent;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  transform: translate(-49.1%, -49%);  
  padding: 0;
}

.pulse-circle {
  position: relative;
  display: block;
  width: 40px;
  aspect-ratio: 1 / 1; /* mantiene proporción 1:1 */
  /* height: 45px;*/
  background: rgba(255,255,255,0);
  border: 2px solid rgba(0,160,198,1);
  border-radius: 50%;
  animation: pulse 1.5s infinite ease-in-out;
}

#hotspot-1{top: 41%; left: 51.5%; }  /*6.  Administración Central*/
#hotspot-2{top: 69.6%; left: 34.4%;}   /*1.  Centro de Información*/
#hotspot-3{top: 55.3%; left: 65.2%;}   /*12. Antiguo Acueducto de San Juan*/
#hotspot-4{top: 55.3%; left: 49.7%;} /*    Edificio de Biología EEA*/
#hotspot-5{top: 21.4%; left: 22.5%;}   /*9.  Edificio de Plantas Medicinales*/
#hotspot-6{top: 80.5%; left: 59.4%;}   /*38. Editorial, Jardín Botánico Norte*/
#hotspot-7{top: 49.2%; left: 49.4%;} /*5.  Invernaderos*/
#hotspot-8{top: 38.3%; left: 42.5%;} /*8.  Instituto de Dasonomía Tropical*/


@keyframes pulse {
  0%   {transform: translate(0, 0) scale(1);    border-color: rgba(0,160,198,0) }
  25%   {transform: translate(0, 0) scale(1);    border-color: rgba(0,160,198,.8) }
  100% {transform: translate(0, 0) scale(1.8);  border-color: rgba(0,160,198,0) }
 
}



.uprmj_hotspot:focus {
  outline: 4px solid rgba(0,160,198,1);
  background: rgba(0,160,198,.5);
}


/* Ocultar el texto auxiliar para lectores de pantalla */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/*Contenedor de la imagen*/
.uprmj_tooltip {
  position: absolute; 
  top: 0px;
  left: 100vw;
  background: white;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 2px 2px 10px rgba(0,0,0,.3);
  padding: 10px;
  /*  display: none;  */
  opacity: 0;
  transition: all .5s;
  width: 45vw;  
  z-index: 1000;
}
.uprmj_tooltip.uprmj-aparece{opacity: 1;  left: 95%;   transition: all .5s;}

/*Texto debajo de la imagen*/
.uprmj_tooltip p{text-align: center; font-weight: bold; margin-top: 5px;}


/*================================TEXTO=========================================*/
.uprmj-titulo{font-weight: bold; font-size: 1.3rem;}
.uprmj-margin-top{margin-top: 3rem;}

.uprmj-seccion-estructuras,
.uprmj-seccion-veredas,
.uprmj-seccion-calles,
.uprmj-seccion-jardines,
.uprmj-seccion-otros{margin-top: 1rem; font-weight: bold;}

.uprmj-seccion-estructuras::before{
  content: "";
  display: inline-block;   /* o block, según necesites */
  width: 16px;
  height: 16px;
  background-color: #00a0c6;   /* color del círculo */
  border-radius: 50%;      /* lo convierte en círculo */
  margin-right: 8px;
}
.uprmj-seccion-veredas::before{
  content: "";
  display: inline-block;   /* o block, según necesites */
  width: 16px;
  height: 16px;
  background-color: #37b34a;   /* color del círculo */
  border-radius: 50%;      /* lo convierte en círculo */
  margin-right: 8px;
}
.uprmj-seccion-calles::before{
  content: "";
  display: inline-block;   /* o block, según necesites */
  width: 16px;
  height: 16px;
  background-color: #8b5c29;   /* color del círculo */
  border-radius: 50%;      /* lo convierte en círculo */
  margin-right: 8px;
}
.uprmj-seccion-jardines::before{
  content: "";
  display: inline-block;   /* o block, según necesites */
  width: 16px;
  height: 16px;
  background-color: #6141a4;   /* color del círculo */
  border-radius: 50%;      /* lo convierte en círculo */
  margin-right: 8px;
}

.uprmj-seccion-otros::before{
  content: "";
  display: inline-block;   /* o block, según necesites */
  width: 16px;
  height: 16px;
  background-color: #d59758;   /* color del círculo */
  border-radius: 50%;      /* lo convierte en círculo */
  margin-right: 8px;
}

.dashicons{margin-right: 1rem;}
.uprmj-visual{outline: 1px dotted #00a0c6; font-weight: bold; border-radius: 10px;}
.uprmj-visual:hover {background: #00a0c6; color: #fff; cursor: pointer;} 

.uprmj-lista{
             display:inline-flex; 
             white-space: nowrap; 
             word-break: keep-all;
             padding: .1rem .4rem;
             font-size: .8rem;
             margin: 0px;
             margin-bottom: 2px;
             gap: 0px;             
            
            }

.uprmj-lista2{
             display:inline-flex;              
             padding: .1rem .4rem;
             font-size: .8rem;
             margin: 0px;
             margin-bottom: 10px;
             gap: 0px;            
            }


@media (max-width: 768px) 
{
    
    .uprmj_tooltip {
            width: 90%;
            top: 0px;
            left: 5vw;
    }
    .pulse-circle {  width: 25px;  }
    .uprmj_hotspot:focus .pulse-circle{  outline: 4px solid #333;}

}