.container {
  justify-content:flex-start}
main {
  justify-content:flex-start;
  align-items:stretch;
  padding-bottom:0}
.mapa-header {
  text-align:center;
  padding:2.1em 1em 1.2em}
.mapa-header h1 {
  display:inline-block;
  text-transform:uppercase;
  color:var(--gray,#555);
  font-size:clamp(1.2em,1.5em + 2vw,1.875em);
  font-weight:900;
  letter-spacing:.06em;
  margin:0}
.mapa-divider {
  width:min(120px,38vw);
  height:3px;
  margin:.9em auto 0;
  background:linear-gradient(90deg,transparent,var(--yellow,#f9d821),transparent);
  border-radius:99px}
.mapa-header p {
  color:#888;
  margin-top:.7em;
  font-size:.93em;
  font-weight:500}
.mapa-wrapper {
  position:relative;
  width:100%;
  padding:0 2em 2em;
  box-sizing:border-box;
  display:flex;
  flex-direction:column}
#map {
  width:100%;
  height:72vh;
  min-height:420px;
  border-radius:10px;
  border:1px solid #d0d0d0;
  box-shadow:0 4px 24px rgba(0,0,0,.12);
  z-index:0}
.mapa-painel {
  position:absolute;
  top:16px;
  right:calc(2em + 14px);
  z-index:1005;
  background:#fff;
  border:1px solid #e0e0e0;
  border-top:3px solid var(--yellow,#f9d821);
  border-radius:6px;
  padding:1.2em 1.5em 1.4em;
  color:var(--gray,#555);
  min-width:190px;
  box-shadow:0 2px 12px rgba(0,0,0,.12)}
.painel-titulo {
  font-size:9px;
  font-weight:800;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--gray,#555);
  margin-bottom:1em;
  padding-bottom:.6em;
  border-bottom:1px solid #eee}
.painel-stat {
  display:flex;
  flex-direction:column;
  margin-bottom:.85em}
.stat-num {
  font-size:1.6em;
  font-weight:900;
  line-height:1;
  color:var(--gray,#555);
  letter-spacing:-.5px}
.stat-num.amarelo {
  color:#c8a800}
.stat-label {
  font-size:8px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#aaa;
  margin-top:3px}
.painel-progress {
  margin-top:.4em}
.progress-label {
  font-size:11px;
  color:#888;
  margin-bottom:6px}
.progress-label strong {
  color:#c8a800;
  font-weight:800}
.progress-bar-track {
  width:100%;
  height:5px;
  background:#eee;
  border-radius:99px;
  overflow:hidden}
.progress-bar-fill {
  height:100%;
  width:0%;
  background:var(--yellow,#f9d821);
  border-radius:99px}
.mapa-legenda {
  position:absolute;
  bottom:calc(2em + 14px);
  right:calc(2em + 14px);
  z-index:1005;
  display:flex;
  gap:1em;
  background:#fff;
  border:1px solid #e0e0e0;
  border-radius:5px;
  padding:.5em 1em;
  box-shadow:0 2px 8px rgba(0,0,0,.1)}
.leg-item {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:10px;
  font-weight:700;
  color:#555;
  text-transform:uppercase;
  letter-spacing:.5px}
.leg-dot {
  width:10px;
  height:10px;
  border-radius:50%;
  display:inline-block;
  flex-shrink:0}
.leg-mod {
  background:#f9d821;
  border:1px solid #c8a800}
.leg-pend {
  background:#e0e0e0;
  border:1px solid #aaa}
.tile-escuro {
  filter:brightness(.42) contrast(1.12) saturate(.7)}
.tile-escuro-ref {
  filter:brightness(.85) contrast(1.05)}
.leaflet-control-layers,.leaflet-control-geocoder {
  border:1px solid #e0e0e0!important;
  border-radius:6px!important;
  box-shadow:0 2px 8px rgba(0,0,0,.15)!important;
  background:#fff!important;
  font-family:'Montserrat',sans-serif!important}
.leaflet-control-layers {
  font-size:11px!important;
  font-weight:700!important}
.leaflet-control-geocoder-form input,.leaflet-control-geocoder-alternatives {
  font-family:'Montserrat',sans-serif!important;
  font-size:12px!important}
.leaflet-control-geocoder-form input {
  width:220px!important}
.leaflet-popup-content-wrapper {
  background:#1a1a2e!important;
  border:1px solid #2e2e50!important;
  border-radius:7px!important;
  box-shadow:0 4px 16px rgba(0,0,0,.5)!important;
  padding:0!important}
.leaflet-popup-content {
  margin:0!important;
  line-height:1.4!important}
.leaflet-popup-tip {
  background:#1a1a2e!important}
.leaflet-popup-close-button {
  color:#666!important;
  font-size:14px!important;
  top:4px!important;
  right:6px!important}
.popup-card {
  padding:9px 13px 8px;
  min-width:120px}
.popup-row {
  display:flex;
  align-items:baseline;
  gap:6px;
  margin-bottom:4px}
.popup-row:last-child {
  margin-bottom:0}
.popup-lbl {
  font-size:8px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#555;
  flex-shrink:0}
.popup-val {
  font-size:11px;
  font-weight:700;
  color:#d0d0d0}
.popup-val.led-val {
  color:#f9d821}
.leaflet-popup-content a.popup-btn,.leaflet-popup-content a.popup-btn:visited,.leaflet-popup-content a.popup-btn:link {
  display:block;
  width:100%;
  margin-top:10px;
  padding:6px 0;
  background:rgba(255,255,255,.08);
  color:#c0c0c0!important;
  font-size:9px;
  font-weight:800;
  letter-spacing:1.2px;
  text-transform:uppercase;
  text-align:center;
  text-decoration:none!important;
  border-radius:5px;
  border:1px solid rgba(255,255,255,.15);
  box-sizing:border-box;
  transition:background .15s,color .15s}
.leaflet-popup-content a.popup-btn:hover {
  background:rgba(255,255,255,.14);
  color:#e8e8e8!important}
@media (max-width:1120px) {
  .mapa-wrapper {
  padding:0 1em 1.5em}
.mapa-painel {
  right:calc(1em + 12px);
  min-width:165px}
.mapa-legenda {
  right:calc(1em + 12px);
  bottom:calc(1.5em + 14px)}
}
@media (max-width:500px) {
  .mapa-wrapper {
  padding:0 .5em 1em;
  flex-direction:column}
#map {
  height:55vh;
  min-height:300px;
  order:1;
  border-radius:8px}
.mapa-painel {
  position:static;
  order:2;
  margin-top:.75em;
  min-width:unset;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:.4em;
  border-radius:8px}
.painel-titulo {
  grid-column:1 / -1;
  margin-bottom:.2em}
.painel-stat {
  margin-bottom:0}
.painel-progress {
  grid-column:1 / -1}
.mapa-legenda {
  position:static;
  order:3;
  margin-top:.5em;
  justify-content:center;
  border-radius:8px;
  width:100%;
  box-sizing:border-box}
}

/* Integração com o cabeçalho e rodapé existentes de Guarapuava. */
main { height: auto; min-height: 0; }
.mapa-wrapper { isolation: isolate; }
.popup-lbl { color: #aaa; }
.leaflet-popup-close-button { color: #bbb !important; }
.popup-row { flex-wrap: wrap; }
.popup-val { overflow-wrap: anywhere; }
@media (max-width: 500px) {
  .leaflet-control-geocoder-form input { width: min(220px, calc(100vw - 115px)) !important; }
}