/* Hotfix: etapa sem substituir a cor do status, 2026-05-07-10 */
:root{
  --etapa-primeira-stroke:#d6a33a;
  --etapa-segunda-stroke:#00a6c8;
  --etapa-segunda-stroke-dark:#005f8f;
}
.legend-item.legend-etapa{
  background:linear-gradient(180deg,#fffdf8,#fff8ee);
}
.legend-item.legend-etapa .legend-dot{
  width:22px;
  height:12px;
  border-radius:999px;
  background:#f7f2e8!important;
  border:3px solid currentColor;
}
.legend-item.primeira_etapa{
  color:#8a5c16;
}
.legend-item.primeira_etapa .legend-dot{
  border-color:var(--etapa-primeira-stroke)!important;
}
.legend-item.segunda_etapa{
  color:var(--etapa-segunda-stroke-dark);
}
.legend-item.segunda_etapa .legend-dot{
  background:#e8fbff!important;
  border-color:var(--etapa-segunda-stroke)!important;
}
.svg-unidade.etapa-primeira,
.svg-unidade.etapa-segunda{
  vector-effect:non-scaling-stroke;
  stroke-linejoin:round;
  paint-order:stroke fill markers;
}
.svg-unidade.etapa-primeira:not(.is-active){
  stroke:var(--etapa-primeira-stroke)!important;
  stroke-width:3.4!important;
  stroke-dasharray:none!important;
}
.svg-unidade.etapa-segunda:not(.is-active){
  stroke:var(--etapa-segunda-stroke)!important;
  stroke-width:3.6!important;
  stroke-dasharray:none!important;
  filter:drop-shadow(0 0 1px rgba(0,95,143,.35));
}
.map-canvas.map-locked .svg-unidade.etapa-primeira:hover:not(.is-active){
  stroke:var(--etapa-primeira-stroke)!important;
  stroke-width:3.4!important;
  stroke-dasharray:none!important;
}
.map-canvas.map-locked .svg-unidade.etapa-segunda:hover:not(.is-active){
  stroke:var(--etapa-segunda-stroke)!important;
  stroke-width:3.6!important;
  stroke-dasharray:none!important;
}
.svg-unidade.is-active{
  stroke:#062a47!important;
  stroke-width:5!important;
  stroke-dasharray:none!important;
  filter:drop-shadow(0 0 2px rgba(6,42,71,.45));
}
.unit-tag[style*="#8b9494"],
.unit-tag[style*="#0097b2"]{
  border-width:1px;
}
.map-stage-note{
  margin:10px 0 0;
  color:var(--muted);
  font-weight:750;
  font-size:14px;
}
.map-stage-note strong{
  color:var(--navy);
}
@media (max-width:980px){
  .svg-unidade.etapa-primeira:not(.is-active),
  .map-canvas.map-locked .svg-unidade.etapa-primeira:hover:not(.is-active){
    stroke-width:2.8!important;
  }
  .svg-unidade.etapa-segunda:not(.is-active),
  .map-canvas.map-locked .svg-unidade.etapa-segunda:hover:not(.is-active){
    stroke-width:3!important;
  }
  .svg-unidade.is-active{
    stroke-width:3.4!important;
  }
}
@media (max-width:640px){
  .legend-item.legend-etapa .legend-dot{
    width:20px;
    height:10px;
    border-width:2px;
  }
}

/* Hotfix: arrastar mapa com mouse em qualquer area do canvas, 2026-05-07-12 */
.map-canvas{
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
  overscroll-behavior:contain;
}
.map-canvas.is-dragging,
.map-canvas.is-dragging *{
  cursor:grabbing!important;
}
.map-canvas.is-dragging .svg-unidade{
  pointer-events:none;
}
.map-canvas svg{
  user-select:none;
  -webkit-user-select:none;
}
.svg-unidade{
  cursor:pointer;
}

/* Hotfix: destaque visual ao abrir pelo card e galeria ativa, 2026-05-08-02 */
.map-focus-notice{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:18px 0 22px;
  padding:16px 18px;
  border-radius:20px;
  border:1px solid rgba(6,42,71,.12);
  background:linear-gradient(135deg,#fffefb,#eef8ff);
  box-shadow:0 14px 32px rgba(6,42,71,.08);
}
.map-focus-notice strong{
  color:var(--navy);
}
@keyframes unitSpotlightPulse{
  0%{stroke-width:5!important;filter:drop-shadow(0 0 0 rgba(13,95,143,.05));}
  45%{stroke-width:8!important;filter:drop-shadow(0 0 6px rgba(13,95,143,.42)) drop-shadow(0 0 14px rgba(214,163,58,.28));}
  100%{stroke-width:5!important;filter:drop-shadow(0 0 2px rgba(6,42,71,.45));}
}
.svg-unidade.is-spotlight{
  stroke:#0d5f8f!important;
  animation:unitSpotlightPulse 1.2s ease-in-out 4;
}
.unit-gallery-wrap{
  margin-top:20px;
}
.unit-gallery{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:10px;
}
.unit-media-item{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(6,42,71,.12);
  border-radius:16px;
  padding:0;
  background:#fff;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(6,42,71,.08);
}
.unit-media-item img{
  display:block;
  width:100%;
  height:122px;
  object-fit:cover;
  transition:transform .25s ease;
}
.unit-media-item:hover img,
.unit-media-item:focus-visible img{
  transform:scale(1.04);
}
.unit-media-item.is-video:after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(5,22,38,0) 32%,rgba(5,22,38,.34));
}
.media-play-badge{
  position:absolute;
  left:10px;
  bottom:10px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(6,42,71,.82);
  color:#fff;
  font-size:12px;
  font-weight:800;
}
.media-modal-card{
  max-width:min(960px,calc(100vw - 28px));
}
.media-modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}
.media-counter{
  padding:8px 12px;
  border-radius:999px;
  background:#f5f8fb;
  color:var(--navy);
  font-weight:800;
}
.media-stage{
  min-height:340px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:22px;
  overflow:hidden;
  background:#eef3f7;
  border:1px solid rgba(6,42,71,.08);
}
.media-stage img,
.media-stage video,
.media-stage iframe{
  display:block;
  width:100%;
  max-height:72vh;
  object-fit:contain;
  border:0;
  background:#000;
}
.media-iframe-wrap{
  width:100%;
  aspect-ratio:16/9;
}
.media-iframe-wrap iframe{
  height:100%;
}
.media-external{
  display:grid;
  gap:14px;
  justify-items:center;
  padding:32px 20px;
}
.media-controls{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:16px;
}
@media (max-width:980px){
  .map-focus-notice{
    flex-direction:column;
    align-items:flex-start;
  }
}
@media (max-width:640px){
  .unit-gallery{
    grid-template-columns:1fr;
  }
  .media-stage{
    min-height:220px;
  }
  .media-controls{
    justify-content:stretch;
  }
  .media-controls .btn{
    flex:1;
  }
}