#mapa-roteadores {
  padding: 60px 0;
}

.mapa-sub {
  color: #666;
  margin: -18px 0 20px;
  font-size: .95rem;
}

.mapa-legenda {
  display: flex;
  gap: 24px;
  margin-bottom: 18px;
  font-size: .9rem;
  color: var(--cinza-escuro);
}

.legenda-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legenda-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.legenda-up {
  background: var(--sucesso);
}

.legenda-down {
  background: var(--vermelho);
}

.mapa-container {
  width: 100%;
  height: 520px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--cinza-medio);
}

.mapa-vazio {
  padding: 40px;
  text-align: center;
  color: #777;
}

.mapa-back {
  text-align: center;
  padding: 0 0 60px;
}

.mapa-back a {
  color: var(--vermelho);
  font-weight: 700;
  text-decoration: none;
}

.mapa-back a:hover {
  text-decoration: underline;
}