body { background: #f4f6f8; }
.navbar-recarga { background: #0f5132; }
.tela-login { max-width: 420px; padding-top: 10vh; }
.card { border: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }

/* Mapas */
.mapa { height: 420px; }
.mapa-baixo { height: 320px; }
.legenda-mapa { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.bolinha { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; margin-right: .35rem;
           vertical-align: -.1rem; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); }
.s-disponivel { background: #198754; } .s-ocupado { background: #0d6efd; }
.s-falha { background: #dc3545; } .s-desconhecido { background: #6c757d; }
.popup-posto { min-width: 200px; }
.e-desconhecido { background: #6c757d; } .e-disponivel { background: #198754; } .e-ocupado { background: #0d6efd; }
.e-falha { background: #dc3545; } .e-indisponivel { background: #fd7e14; }

/* Mapa publico em tela cheia (celular primeiro) */
.tela-mapa { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.topo-mapa { background: #0f5132; color: #fff; padding: .6rem 1rem; }
.mapa-cheio { flex: 1; min-height: 0; }
.rodape-mapa { background: #fff; padding: .5rem 1rem; border-top: 1px solid #dee2e6; }
.foto-miniatura { aspect-ratio: 3 / 2; object-fit: cover; }