#mapa-container {
  overflow: visible; /* Permitir que se vea todo */
  background: transparent;
  display: block; /* Cambiamos flex por block para evitar centrados forzados */
  width: 100%;
  min-height: auto;
  transition: all 0.3s ease;
}

#mapa-container svg {
  width: 100%;
  height: auto;
  display: block;
  background: transparent;
}

.sector {
  fill: rgba(255, 255, 255, 0.01);
  stroke: transparent;
  stroke-width: 1.5;
  cursor: pointer;
  transition: all 0.2s ease;
  vector-effect: non-scaling-stroke;
}

.sector:hover {
  fill: rgba(13, 110, 253, 0.2);
  stroke: rgba(13, 110, 253, 0.5);
}

.activo {
  fill: rgba(13, 110, 253, 0.4) !important;
  stroke: #0d6efd !important;
  stroke-width: 3;
}

#info {
    transition: opacity 0.2s ease-in-out;
    min-height: 150px;
}

/* RESPONSIVE */
@media (max-width: 991.98px) {
    #main-visor-container {
        padding: 15px !important;
    }
    #mapa-container {
        min-height: 300px;
        margin-bottom: 20px;
    }
    .card-body#info {
        min-height: auto;
    }
}

@media (max-width: 575.98px) {
    #main-visor-container {
        padding: 10px !important;
        border-radius: 10px !important;
    }
    #mapa-container {
        min-height: 250px;
    }
}