 * {
     /* border: solid red 1px; */

 }

 .bg-none {
     background: none;
 }

 #legenda-mapa div {
     cursor: pointer;
 }

 .sidebar {
     /* z-index: 2000; */
 }

 .sidebar-overlay {
     /* z-index: 1500; */
 }

 #map {
     /* z-index: 1; */
 }

 .map {
     margin-left: var(--sidebar-icon-width);
     margin-top: var(--header-height);
     width: calc(100% - var(--sidebar-icon-width)) !important;
 }

 .ol-street-view--activated.ol-street-view--hidden .ol-street-view--map {
     position: absolute;
     width: 100%;
     height: 100%;
 }

 .ol-perspective-map .ol-street-view--map {
     height: 100% !important;
 }

 .ol-street-view--activated #ol-street-view--panorama {
     position: absolute !important;
     display: block !important;
     margin-left: var(--sidebar-icon-width);
     margin-top: var(--header-height);
     width: calc(100% - var(--sidebar-icon-width)) !important;
     height: 50%;
     border: solid white 2px;
     z-index: 99999999999999999999999999999 !important;
     transition: width .1s, height .1s;
     border: solid white 1px !important;

 }

 .ol-street-view--map-container {
     position: absolute !important;
     display: block !important;
     margin-left: var(--sidebar-icon-width);
     margin-top: var(--header-height);
     width: calc(100% - var(--sidebar-icon-width)) !important;
     height: 50%;
     border: solid white 2px;
     z-index: 99999999999999999999999999999 !important;
     transition: width .1s, height .1s;
     border: solid white 1px !important;
 }

 .ol-street-view--activated #ol-street-view--panorama:hover {
     /*width: ;width: 50% !important;
            height: 50% !important;*/
     /*border: solid red 10px !important;*/
 }


 /* ===== Toolbar (ícones transparentes) ===== */
 .toolbar {
     position: absolute;
     top: 100px;
     right: 22px;
     /* <<< aqui */
     left: auto;
     /* opcional, mas recomendado */
     /* z-index: 10; */
 }

 .icon-btn {
     width: 34px;
     height: 34px;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     user-select: none;
     background: transparent;
     border: none;
     box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
     padding: 0;
     background-color: #fff;
     border-radius: 50%;
     margin: 0 0 10px 0;
 }

 .icon-btn i {
     font-size: 22px;
     color: #111;
     opacity: 1;
     transition: opacity .15s ease, transform .15s ease;
     text-shadow: 0 1px 2px rgba(255, 255, 255, 0.65);
 }

 .icon-btn.inactive i {
     opacity: .30;
 }

 .icon-btn:hover i {
     transform: scale(1.06);
 }

 /* ===== Modal 360 ===== */
 #modal360 {
     display: none;
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.9);
     z-index: 2000;
 }

 #viewerWrap {
     width: 92%;
     height: 90%;
     margin: 2% auto;
     position: relative;
 }

 #viewer {
     width: 100%;
     height: 100%;
 }

 #closeBtn {
     position: absolute;
     top: 12px;
     right: 20px;
     font-size: 28px;
     color: #fff;
     cursor: pointer;
     z-index: 2100;
     user-select: none;
 }