/* ============================================================
   BSTEN Glass Theme — gpsten.com.br
   v3 — tema-neutro (funciona em qualquer cor de tema GPSWox)
   ============================================================ */

/* Sem import externo — usar system-ui para zero latência */
body { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif !important; }

/* ── MAPA: nunca tocar ── */
#mapWrap, #mapWrap * { color: initial !important; background: initial !important; }

/* ── HEADER fixo e visível ── */
#header {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 1001 !important;
  height: auto !important;
}

#header .main-navbar,
#header .navbar {
  background: rgba(0,0,0,0.40) !important;
  backdrop-filter: blur(20px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.6) !important;
  border-bottom: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.18) !important;
  min-height: 50px !important;
}

#header .nav > li > a,
#header .nav > li > a i {
  color: rgba(255,255,255,0.90) !important;
}

#header .nav > li > a:hover {
  background: rgba(255,255,255,0.15) !important;
  color: #fff !important;
  border-radius: 8px !important;
}

/* ── LOGO: centralizada no navbar ── */
/* O navbar-header fica absolute no centro; os itens do nav ficam flutuando nas laterais */
#header .navbar {
  position: relative !important;
}
#header .navbar-header {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  float: none !important;
  z-index: 2 !important;
}
#header .navbar-brand {
  position: static !important;
  left: auto !important; top: auto !important; transform: none !important;
  float: none !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 6px 16px !important;
  margin: 0 !important;
}
/* Nav-left (ADMIN, Ferramentas) flutua à esquerda — JS move os itens */
#header .bsten-nav-left { float: left !important; margin: 0 !important; padding: 0 !important; list-style: none !important; }
/* Garantir visibilidade do texto no hover — reforçar especificidade */
#header .nav > li > a,
#header .bsten-nav-left > li > a { color: rgba(255,255,255,0.90) !important; }
#header .nav > li > a:hover,
#header .bsten-nav-left > li > a:hover,
#header .nav > li.open > a { background: rgba(255,255,255,0.18) !important; color: #fff !important; border-radius: 8px !important; }
/* Texto da conta visível — garantir */
#header #dropMyAccount, #header #dropMyAccount .text { color: rgba(255,255,255,0.90) !important; }
#header li.open #dropMyAccount, #header #dropMyAccount:hover { color: #fff !important; background: rgba(255,255,255,0.18) !important; border-radius: 8px !important; }

#header .navbar-brand img {
  height: 30px !important;
  filter: brightness(0) invert(1) !important;
  opacity: 0.95 !important;
}

/* Separador coral sob o logo — detalhe de marca */
#header .navbar-brand::after {
  content: '' !important;
  display: block !important;
  width: 100% !important;
  height: 2px !important;
  background: #EA5B62 !important;
  border-radius: 2px !important;
  margin-top: 3px !important;
  opacity: 0.75 !important;
}

#header .label, #header .badge {
  background: #EA5B62 !important;
  color: #fff !important;
}

#header .dropdown-menu {
  background: rgba(20,20,20,0.92) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25) !important;
}

#header .dropdown-menu > li > a {
  color: rgba(255,255,255,0.90) !important;
  font-size: 13px !important;
}

#header .dropdown-menu > li > a:hover {
  background: rgba(255,255,255,0.12) !important;
  color: #fff !important;
}

/* ── SIDEBAR GLASS FLUTUANTE ── */
#sidebar.sidebar.left {
  top: 58px !important;
  left: 12px !important;
  bottom: 12px !important;
  height: auto !important;
  /* GPSWox limita com max-height: calc(100% - 100px) (sobrava pro bottombar
     que ficava embaixo). Como o bottombar agora é ao LADO, liberamos a lista
     pra ir até o fundo (bottom:12) e alinhar com o modal de endereço. */
  max-height: none !important;
  border-radius: 14px !important;
  background: rgba(0,0,0,0.42) !important;
  /* blur reduzido de 24→8px: GPU ~1/9 do custo anterior; sem saturate (eliminado 2º passo GPU) */
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  box-shadow: 0 4px 28px rgba(0,0,0,0.22) !important;
  overflow: visible !important;
  z-index: 999 !important;
  transition: width 0.3s cubic-bezier(0.4,0,0.2,1) !important;
  /* Própria camada de compositor: isola repaints do sidebar do mapa */
  will-change: transform !important;
  transform: translateZ(0) !important;
  /* Containment: repaints internos não afetam o mapa */
  contain: layout style !important;
}

.sidebar-content,
#sidebar .sidebar-content {
  /* Fundo semi-opaco escuro: garante legibilidade do texto em QUALQUER aba
     (Objetos/Eventos/Histórico) mesmo sobre mapa de satélite claro.
     Combinado com o 0.42 do sidebar dá ~0.68 efetivo — ainda glass. */
  background: rgba(12,14,22,0.46) !important;
  background-color: rgba(12,14,22,0.46) !important;
  border-right: none !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  height: 100% !important;
}

/* Conteúdo das abas Eventos/Histórico: backing extra para texto longo */
#sidebar .tab-content,
#sidebar .tab-pane {
  background: transparent !important;
}

/* ── TABS (Objetos / Eventos / Histórico) ── */
#sidebar .nav-tabs {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.18) !important;
  padding: 6px 8px 0 !important;
}

#sidebar .nav-tabs > li > a {
  color: rgba(255,255,255,0.80) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 8px 8px 0 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 8px 14px !important;
}

#sidebar .nav-tabs > li > a:hover {
  background: rgba(255,255,255,0.14) !important;
  color: #fff !important;
}

#sidebar .nav-tabs > li.active > a,
#sidebar .nav-tabs > li.active > a:focus,
#sidebar .nav-tabs > li.active > a:hover {
  background: rgba(255,255,255,0.24) !important;
  color: #fff !important;
  font-weight: 600 !important;
  border: none !important;
}

/* ── CAMPO DE BUSCA ── */
#sidebar .form-control,
#sidebar input[type="text"],
#sidebar input[type="search"] {
  background: rgba(255,255,255,0.15) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-size: 12.5px !important;
}

#sidebar .form-control::placeholder { color: rgba(255,255,255,0.50) !important; }

#sidebar .form-control:focus {
  background: rgba(255,255,255,0.25) !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.18) !important;
  outline: none !important;
}

/* ── CABEÇALHOS DE GRUPO ── */
#sidebar .group-heading,
#sidebar .group > .group-heading {
  background: rgba(0,0,0,0.28) !important;
  border-bottom: 1px solid rgba(255,255,255,0.12) !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  padding: 6px 10px !important;
}

#sidebar .group-heading:hover,
#sidebar .group > .group-heading:hover {
  background: rgba(255,255,255,0.16) !important;
}

/* Texto dos cabeçalhos de grupo */
#sidebar .group-heading label,
#sidebar .group-heading span,
#sidebar .group-heading a,
#sidebar .group-heading .group-title,
#sidebar .group-title {
  color: #fff !important;
  background: transparent !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
}

/* ── ITENS DE DISPOSITIVO ── */
#sidebar .group-content tr,
#sidebar .group-content li,
#sidebar .group > .collapse li,
#sidebar .device-row {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}

#sidebar .group-content tr:hover,
#sidebar .group-content li:hover,
#sidebar .group > .collapse li:hover {
  background: rgba(255,255,255,0.13) !important;
}

/* Todos os textos de item em branco (base) */
#sidebar .group-content tr td,
#sidebar .group-content tr td a,
#sidebar .group-content tr td span,
#sidebar .group-content li a,
#sidebar .group-content li span,
#sidebar .group > .collapse li span,
#sidebar .group > .collapse li a,
#sidebar .group > .collapse li div {
  color: rgba(255,255,255,0.88) !important;
  background: transparent !important;
}
/* EXCEÇÃO: bolinha de status (.details > span:nth-child(3)) tem background inline definido pelo GPSWox
   — não sobrescrever para preservar as cores customizáveis por cliente */
#sidebar .details > span:nth-child(3) {
  background: unset !important;
  background-color: unset !important;
}

/* Timestamp e info secundária mais suave */
#sidebar .group-content .text-muted,
#sidebar .group-content small,
#sidebar .group > .collapse li span:nth-of-type(2) {
  color: rgba(255,255,255,0.62) !important;
  font-size: 11px !important;
}

/* Texto das linhas de Eventos/Histórico: legível (endereços são o conteúdo) */
#sidebar .tab-pane.active,
#sidebar .tab-pane.active td,
#sidebar .tab-pane.active span,
#sidebar .tab-pane.active div,
#sidebar .tab-pane.active small,
#sidebar .tab-pane.active .text-muted {
  color: rgba(255,255,255,0.86) !important;
}

/* Nome do device: cor varia por status (classe adicionada pelo JS) */
/* Padrão (sem status identificado) — coral BSTEN */
#sidebar .group .collapse li span.bsten-device-name,
#sidebar li span.bsten-device-name {
  color: #EA5B62 !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}

/* Online parado — coral BSTEN (igual ao padrão) */
#sidebar .group .collapse li.bsten-online span.bsten-device-name,
#sidebar li.bsten-online span.bsten-device-name {
  color: #EA5B62 !important;
}

/* Em movimento — verde vivo */
#sidebar .group .collapse li.bsten-moving span.bsten-device-name,
#sidebar li.bsten-moving span.bsten-device-name {
  color: #22c55e !important;
  font-weight: 700 !important;
}

/* Offline / dormindo — branco suave */
#sidebar .group .collapse li.bsten-offline span.bsten-device-name,
#sidebar li.bsten-offline span.bsten-device-name {
  color: rgba(255,255,255,0.45) !important;
  font-weight: 400 !important;
}

/* Linha selecionada */
#sidebar .group-content tr.active,
#sidebar .group-content li.active,
#sidebar .group > .collapse li.active {
  background: rgba(255,255,255,0.22) !important;
}

#sidebar .group-content tr.active td,
#sidebar .group-content tr.active td a,
#sidebar .group-content tr.active td span {
  color: #fff !important;
}

/* ── BOTÕES DENTRO DO SIDEBAR ── */
#sidebar .btn-default,
#sidebar .btn:not(.btn-primary):not(.btn-danger):not(.btn-success) {
  background: rgba(255,255,255,0.14) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  color: #fff !important;
  border-radius: 7px !important;
}

#sidebar .btn-default:hover {
  background: rgba(255,255,255,0.24) !important;
}

/* ── DROPDOWN ⋮ dentro do sidebar ── */
#sidebar .dropdown-menu {
  background: rgba(20,20,20,0.92) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.28) !important;
}

#sidebar .dropdown-menu li a {
  color: rgba(255,255,255,0.90) !important;
  background: transparent !important;
  font-size: 13px !important;
}

#sidebar .dropdown-menu li a:hover {
  background: rgba(255,255,255,0.14) !important;
  color: #fff !important;
}

/* ── STATUS DOTS ── */
#sidebar .label-success { background: rgba(34,197,94,0.85) !important; }
#sidebar .label-danger  { background: rgba(234,91,98,0.85) !important; }
#sidebar .label-warning { background: rgba(245,158,11,0.85) !important; }

/* ── BOTÕES DE ESCONDER (lista < e endereço v) — VISUAL UNIFICADO ──
   Mesmo estilo nos dois: círculo escuro glass, ícone branco, hover coral. */
.btn-collapse {
  position: absolute !important;
  right: -15px !important;
  top: 20px !important;
  width: 30px !important; height: 30px !important;
  border-radius: 50% !important;
  background: rgba(20,22,32,0.92) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.35) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 1001 !important;
  cursor: pointer !important;
}

.btn-collapse:hover { background: rgba(234,91,98,0.92) !important; border-color: rgba(234,91,98,0.6) !important; }
.btn-collapse i, .btn-collapse span, .btn-collapse svg {
  color: #fff !important; fill: #fff !important; font-size: 13px !important;
}

/* ── ESCONDER LISTA: o GPSWox colapsa encolhendo a largura pra ~0. No mobile
   eu forçava width:100% !important, o que QUEBRAVA o colapso. Aqui forço
   width:0 no estado colapsado (especificidade 1,3,0 vence o width:100% do
   mobile que é 1,2,0) → funciona em qualquer largura. */
#sidebar.sidebar.left { transition: max-width 0.3s ease !important; }
#sidebar.sidebar.left.collapsed {
  max-width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* ── SCROLLBAR ── */
#sidebar ::-webkit-scrollbar { width: 4px !important; }
#sidebar ::-webkit-scrollbar-track { background: transparent !important; }
#sidebar ::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.28) !important;
  border-radius: 2px !important;
}

/* ── BOTTOMBAR: encostar na lista, sem espaço vazio nem estouro à direita ──
   O GPSWox já tem padding-left nativo (~328px) pra livrar a sidebar.
   Antes eu somava left:342 por cima = duplo deslocamento (conteúdo em 671,
   vazio à esquerda + sensores cortados à direita). Correção: left:0, largura
   total, padding-left = borda direita da sidebar + folga. Container sem fundo
   (o card branco do GPSWox é o visual); só posicionamos. */
#bottombar {
  left: 0 !important;
  /* Reservar ~56px à direita pros controles do mapa + FLUTUAR: descolado do
     fundo (bottom:14) e das laterais (padding-left = sidebar + folga). */
  right: 56px !important;
  bottom: 12px !important;
  width: auto !important;
  padding-left: calc(var(--bsten-sidebar-right, 342px) + 12px) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
/* Conteúdo (card do device): card FLUTUANTE — cantos arredondados + sombra,
   descolado das bordas (não mais colado no rodapé/laterais). */
#bottombar > div {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.32) !important;
  overflow: hidden !important;
}

/* Botão FECHAR do modal de endereço (bottombar) — claro e visível.
   Já existe nativo (.btn-collapse), só estava fora da tela antes da
   correção de largura. Agora damos destaque circular. */
/* Botão FECHAR do modal de endereço — encaixado no VÃO de ~26px entre a
   lista (termina em sidebar-right) e o ícone do device (~+26px), vertical-
   mente centralizado. Não invade a lista nem o conteúdo do modal. */
#bottombar .btn-collapse,
#bottombar .btn-close {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  /* top/left definidos pelo JS: ancora logo à direita do "ONLINE", no topo */
  right: auto !important;
  transform: none !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background: rgba(20,22,32,0.92) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.35) !important;
  cursor: pointer !important;
  opacity: 1 !important;
  z-index: 10 !important;
}
#bottombar .btn-collapse:hover,
#bottombar .btn-close:hover {
  background: rgba(234,91,98,0.90) !important;
}
#bottombar .btn-collapse svg,
#bottombar .btn-collapse i,
#bottombar .btn-close i {
  color: rgba(255,255,255,0.9) !important;
  fill: rgba(255,255,255,0.9) !important;
}
#bottombar .btn-collapse:hover,
#bottombar .btn-close:hover {
  background: rgba(234,91,98,0.92) !important;
  border-color: rgba(234,91,98,0.6) !important;
}
#bottombar .btn-collapse:hover svg,
#bottombar .btn-collapse:hover i,
#bottombar .btn-close:hover i {
  color: #fff !important;
  fill: #fff !important;
}

/* ── MODAIS: SEM customização (a pedido) ──
   Removemos toda a estilização de modal (fundo/cabeçalho/rodapé/painéis).
   Assim a tela de ENVIAR COMANDO e os demais modais nativos do GPSWox ficam
   no ORIGINAL, sem nosso tema descaracterizar a usabilidade. */

/* ── BOTÕES GLOBAIS: só um arredondamento leve, consistente ── */
.btn { border-radius: 8px !important; }

/* ── STATUS INDICATORS ── */
/* .off / .on: texto/ícone do status */
#sidebar .details span.off { color: rgba(180,180,180,0.50) !important; }
#sidebar .details span.on  { color: rgba(34,197,94,0.70) !important; }

/* BOLINHA DE STATUS: NÃO sobrescrever background-color.
   O GPSWox define a cor via inline style (ex: style="background-color: red").
   CSS !important mataria as cores customizáveis por cliente.
   Apenas ajustamos forma e borda — a cor vem do GPSWox nativamente. */
#sidebar .details > span:nth-child(3) {
  border-radius: 50% !important;
  display: inline-block !important;
  width: 10px !important;
  height: 10px !important;
  flex-shrink: 0 !important;
  opacity: 0.90 !important;
}

/* ── ÍCONE DO MOTOR: cor segue o status ── */
#sidebar .details i.icon.detect_engine,
#sidebar i.icon.detect_engine {
  color: rgba(180,180,180,0.45) !important;
}
#sidebar li.bsten-online  i.icon.detect_engine { color: #EA5B62 !important; }
#sidebar li.bsten-moving  i.icon.detect_engine { color: #22c55e !important; }
#sidebar li.bsten-offline i.icon.detect_engine { color: rgba(180,180,180,0.40) !important; }

/* Ícones de contexto do device (historico, hoje, ontem, etc.) — NÃO recebem coral */
#sidebar .dropdown-menu li span,
#sidebar .dropdown-menu li span.bsten-device-name,
#sidebar .dropdown-menu a span {
  color: rgba(255,255,255,0.90) !important;
  font-weight: 400 !important;
}

/* ── MAP CONTROLS: BOTÕES NATIVOS DO GPSWOX (revertido) ──
   Removida toda a reestilização (tamanho/cor/gradiente/layout/scroll).
   Mantemos APENAS a engrenagem que recolhe/mostra os controles. */

/* Engrenagem (inserida pelo JS como 1º filho de #map-controls) */
#map-controls #bsten-mc-gear {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: rgba(20,22,32,0.92) !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35) !important;
  cursor: pointer !important;
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
  outline: none !important;
}
#map-controls #bsten-mc-gear svg {
  animation: bsten-gear-spin 6s linear infinite !important;
}
@keyframes bsten-gear-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* COLAPSADO: esconde os botões nativos, deixa só a engrenagem */
#map-controls.bsten-mc-collapsed > *:not(#bsten-mc-gear) {
  display: none !important;
}

/* VISIBILIDADE: fundo escuro translúcido atrás dos botões nativos + ícone
   branco. O #mapWrap * { background: initial } tirava o fundo deles e ficavam
   invisíveis no mapa claro. Mínimo: só contraste, sem gradiente/cor/tamanho. */
#map-controls a,
#map-controls button,
#map-controls .btn,
#map-controls label.btn {
  background: rgba(28,30,40,0.78) !important;
  border-radius: 9px !important;
  box-shadow: 0 1px 5px rgba(0,0,0,0.35) !important;
}
#map-controls .icon,
#map-controls i,
#map-controls .btn .icon,
#map-controls a .icon,
#map-controls label .icon {
  color: #ffffff !important;
}
/* toggle ligado (a Wox marca .active) — leve destaque, sem inventar cor */
#map-controls .btn.active,
#map-controls label.btn.active {
  background: rgba(45,48,62,0.9) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25), 0 1px 5px rgba(0,0,0,0.35) !important;
}

/* ── LAYER SELECTOR — painel nativo do Leaflet DESATIVADO ──
   Usamos nosso modal próprio (#bsten-layer-modal). O painel nativo nunca
   deve aparecer (era difícil de usar no celular). */
.leaflet-control-layers-expanded .leaflet-control-layers-list {
  display: none !important;
}

/* ── MODAL DE MAPA (nosso, mobile-first, centralizado) ── */
#bsten-layer-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 3000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#bsten-layer-modal.bsten-hidden { display: none !important; }

.bsten-layer-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.50) !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
}
.bsten-layer-card {
  position: relative !important;
  z-index: 1 !important;
  background: rgba(16,18,28,0.98) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 16px !important;
  padding: 18px !important;
  width: 300px !important;
  max-width: 90vw !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6) !important;
}
.bsten-layer-title {
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  margin-bottom: 14px !important;
  text-align: center !important;
}
.bsten-layer-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.bsten-layer-item {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  padding: 14px 16px !important;
  border-radius: 11px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.90) !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: background 0.12s !important;
}
.bsten-layer-item:hover,
.bsten-layer-item:active {
  background: rgba(255,255,255,0.15) !important;
}
.bsten-layer-item.bsten-layer-active {
  background: rgba(234,91,98,0.22) !important;
  border-color: rgba(234,91,98,0.6) !important;
  color: #fff !important;
  font-weight: 600 !important;
}
.bsten-layer-cancel {
  display: block !important;
  width: 100% !important;
  margin-top: 14px !important;
  padding: 11px !important;
  border-radius: 11px !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  color: rgba(255,255,255,0.70) !important;
  font-size: 13px !important;
  cursor: pointer !important;
}
.bsten-layer-cancel:hover { background: rgba(255,255,255,0.08) !important; color: #fff !important; }

/* ── LABEL DO DEVICE NO MAPA ── */
/* TODOS os nomes no mapa (veículo, rota, geocerca) brancos com halo escuro →
   legíveis sobre satélite/qualquer mapa. .name (110) ganha do #mapWrap * (101).
   Antes só pegava .leaflet-popup-route .name e o nome do VEÍCULO ficava preto. */
#mapWrap .name,
#mapWrap .leaflet-popup-route .name,
#mapWrap .leaflet-marker-icon .name {
  /* Pílula escura limpa (estilo Google Maps) — texto branco PURO, sem sombra
     (sobre o fundo escuro a sombra só borrava o branco). Fundo sólido. */
  color: #ffffff !important;
  background: rgba(17,19,27,0.55) !important;
  background-color: rgba(17,19,27,0.55) !important;
  padding: 2px 9px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.35 !important;
  text-shadow: none !important;
  white-space: nowrap !important;
}
/* Qualquer texto interno do label também branco puro (caso haja span) */
#mapWrap .name * {
  color: #ffffff !important;
  text-shadow: none !important;
}

/* ── DROPDOWN MINHA CONTA: ocultar Idioma e Bate-papo do nav principal ── */
/* Os itens foram clonados para dentro do dropdown de conta pelo JS. */
#header .navbar-right > ul > li.language-selection {
  display: none !important;
}

/* Header de usuário no dropdown de conta */
#header .dropdown-menu .bsten-user-header {
  padding: 10px 16px 8px !important;
  border-bottom: 1px solid rgba(255,255,255,0.12) !important;
  margin-bottom: 4px !important;
  pointer-events: none !important;
  cursor: default !important;
}

/* ── BOTÃO REABRIR LISTA — aparece (via JS) quando a lista está escondida,
   em QUALQUER largura. Mesmo visual dos outros botões: círculo escuro glass. */
#bsten-list-toggle {
  display: none; /* JS coloca flex quando a lista está escondida */
  align-items: center !important;
  justify-content: center !important;
  position: fixed !important;
  top: 66px !important;
  left: 10px !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: rgba(20,22,32,0.94) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  box-shadow: 0 3px 12px rgba(0,0,0,0.4) !important;
  color: #fff !important;
  cursor: pointer !important;
  padding: 0 !important;
  z-index: 1003 !important;
}
#bsten-list-toggle:hover { background: rgba(234,91,98,0.92) !important; }

/* ── MOBILE ── */
@media (max-width: 767px) {
  /* Botão ESCONDER/MOSTRAR lista — topo-esquerdo do header, sempre visível
     (espelha o hambúrguer à direita). É o botão que faltava no celular. */
  #bsten-list-toggle {
    top: 7px !important;
    left: 10px !important;
    width: 36px !important;
    height: 36px !important;
    z-index: 1004 !important;
  }

  /* Header: barra compacta escura no topo (era um bloco cinza) */
  #header { position: fixed !important; top: 0 !important; z-index: 1001 !important; }
  #header .navbar,
  #header .main-navbar {
    background: rgba(8,10,18,0.94) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    min-height: 48px !important;
    height: 48px !important;
  }

  /* Logo centralizada, compacta */
  #header .navbar-header {
    position: static !important;
    transform: none !important;
    float: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    height: 48px !important;
  }
  #header .navbar-brand { padding: 6px 12px !important; }
  #header .navbar-brand img { height: 26px !important; }

  /* Hambúrguer visível e themed */
  #header .navbar-toggle {
    display: block !important;
    position: absolute !important;
    right: 8px !important; top: 7px !important;
    background: rgba(255,255,255,0.12) !important;
    border: 1px solid rgba(255,255,255,0.28) !important;
    border-radius: 7px !important;
    margin: 0 !important;
    padding: 7px 9px !important;
    z-index: 2 !important;
  }
  #header .navbar-toggle .icon-bar { background: #fff !important; }

  /* Nav esquerda/direita ocultos; menu vira painel FLUTUANTE (não empurra layout = sem bloco cinza) */
  #header .bsten-nav-left { display: none !important; }
  #header .navbar-right { display: none !important; }
  #header .navbar-collapse {
    position: absolute !important;
    top: 48px !important; left: 0 !important; right: 0 !important;
    background: rgba(8,10,18,0.97) !important;
    border-top: 1px solid rgba(255,255,255,0.12) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    transition: max-height 0.22s ease !important;
  }
  #header .navbar-collapse.in {
    max-height: 75vh !important;
    overflow-y: auto !important;
  }
  #header .navbar-collapse.in .bsten-nav-left,
  #header .navbar-collapse.in .navbar-right {
    display: block !important;
    float: none !important;
  }

  /* Sidebar: tela cheia overlay, logo abaixo do header de 48px */
  #sidebar.sidebar.left {
    top: 48px !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    border-radius: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
  }
  /* collapsed: o transform translateX(-110%) (regra global) já desliza pra
     fora; não sobrescrever width/left aqui pra não conflitar na animação */

  /* Mapa abaixo do header */
  #mapWrap { top: 48px !important; }

  /* Bottombar: largura total (sidebar é overlay no mobile) — zerar o padding do desktop */
  #bottombar {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    padding-left: 0 !important;
    border-radius: 0 !important;
    max-height: 50vh !important;
    overflow-y: auto !important;
  }

  /* Engrenagem dos controles — abaixo do header */
  #map-controls { top: 56px !important; }

  /* Botões de fechar VISÍVEIS no mobile (lista e modal) — eram escondidos por engano */
  .btn-collapse { display: flex !important; }

  /* Touch targets maiores */
  #sidebar .group > .collapse li { min-height: 44px !important; }
  #sidebar .details .btn-group .btn { min-width: 36px !important; min-height: 36px !important; }
}

/* ── 12. MODO APP MOBILE (tocar veículo → mapa enquadrado) ──
   Botões flutuantes (no body) + transformação só quando body.bsten-mmap.
   Reversível: remover este bloco + a seção 12 do JS. */
#bsten-back, #bsten-hideall {
  display: none;
  position: fixed !important;
  z-index: 1006 !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  background: rgba(20,22,32,0.94) !important;
  color: #fff !important;
  cursor: pointer !important;
  box-shadow: 0 3px 12px rgba(0,0,0,0.4) !important;
}
#bsten-back {
  top: 56px !important; left: 10px !important;
  height: 38px !important; padding: 0 13px 0 7px !important;
  gap: 2px; border-radius: 10px !important;
  font-size: 14px !important; font-weight: 600 !important;
}
#bsten-hideall {
  top: 56px !important; right: 10px !important;
  width: 38px !important; height: 38px !important;
  border-radius: 10px !important; padding: 0 !important;
}
#bsten-back:hover, #bsten-hideall:hover { background: rgba(3,145,203,0.92) !important; }

@media (max-width: 767px) {
  /* anima a saída/entrada da lista */
  #sidebar.sidebar.left { transition: transform 0.3s ease, max-width 0.3s ease !important; }

  /* modo mapa: lista desliza pra fora, mapa aparece */
  body.bsten-mmap #sidebar.sidebar.left { transform: translateX(-110%) !important; }
  body.bsten-mmap #bsten-list-toggle { display: none !important; }
  body.bsten-mmap #bsten-back { display: inline-flex !important; }
  body.bsten-mmap #bsten-hideall { display: inline-flex !important; }

  /* cartão de endereço vira bottom sheet limpo, sem estouro horizontal */
  body.bsten-mmap #bottombar {
    top: auto !important;
    bottom: 0 !important;
    max-height: 44vh !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -8px 30px rgba(0,0,0,0.32) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  /* COMPACTAR pra caber: nada pode exceder a largura da tela */
  body.bsten-mmap #bottombar * { max-width: 100% !important; box-sizing: border-box !important; }
  /* wrappers em bloco (coluna única) */
  body.bsten-mmap #bottombar > div,
  body.bsten-mmap #bottombar .popup-content,
  body.bsten-mmap #bottombar .popup-body { display: block !important; width: 100% !important; float: none !important; margin: 0 !important; }
  /* empilhar painéis lado-a-lado (endereço | sensores) em coluna única */
  body.bsten-mmap #bottombar [class*="col-"],
  body.bsten-mmap #bottombar .row > div,
  body.bsten-mmap #bottombar .popup-body > div {
    width: 100% !important; max-width: 100% !important;
    float: none !important; display: block !important;
    padding-left: 10px !important; padding-right: 10px !important;
  }
  body.bsten-mmap #bottombar .row { display: block !important; margin-left: 0 !important; margin-right: 0 !important; }
  /* tabelas (endereço + sensores): largura total, texto quebra, compacto */
  body.bsten-mmap #bottombar table { width: 100% !important; table-layout: fixed !important; margin: 0 0 8px !important; }
  body.bsten-mmap #bottombar th,
  body.bsten-mmap #bottombar td {
    word-break: break-word !important; white-space: normal !important;
    padding: 4px 7px !important; font-size: 12px !important; vertical-align: top !important;
  }
  body.bsten-mmap #bottombar th { width: 40% !important; color: #6b7077 !important; font-weight: 600 !important; }
  body.bsten-mmap #bottombar img,
  body.bsten-mmap #bottombar canvas { max-width: 100% !important; height: auto !important; }

  /* sumir tudo: só o mapa (mantém o olho pra voltar) */
  body.bsten-mmap.bsten-mhide #bottombar { display: none !important; }
  body.bsten-mmap.bsten-mhide #bsten-back { display: none !important; }
}

/* ── 13. LISTA CLARA estilo app (SÓ no celular) ──
   Deixa a lista com a cara do mockup: fundo claro, linhas brancas, sem checkbox/
   menu 3-pontos/ícone de motor. Desktop continua escuro (fora do @media).
   Reversível: remover este bloco. */
@media (max-width: 767px) {
  /* fundo claro */
  #sidebar.sidebar.left {
    background: #f2f4f7 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  #sidebar .sidebar-content { background: #f2f4f7 !important; }

  /* header azul da marca */
  #header .navbar, #header .main-navbar {
    background: #05426D !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* busca: input branco */
  #sidebar .form-control,
  #sidebar input[type="text"],
  #sidebar input[type="search"] {
    background: #ffffff !important;
    color: #1f2937 !important;
    border: 1px solid #e3e6ea !important;
    border-radius: 10px !important;
  }
  #sidebar .form-control::placeholder { color: #9aa0a6 !important; }

  /* abas (Objetos/Eventos/Histórico) claras */
  #sidebar .nav-tabs { background: #f2f4f7 !important; border-bottom: 1px solid #e3e6ea !important; }
  #sidebar .nav-tabs > li > a { color: #6b7077 !important; background: transparent !important; }
  #sidebar .nav-tabs > li.active > a { color: #05426D !important; background: #ffffff !important; }

  /* label de grupo (Desagrupado 2701) */
  #sidebar .group-heading, #sidebar .group > .group-heading { background: #eef1f4 !important; }
  #sidebar .group-heading label,
  #sidebar .group-heading span,
  #sidebar .group-title { color: #6b7077 !important; }

  /* linhas: cartão branco, separador fino */
  #sidebar .group-content li,
  #sidebar .group > .collapse li,
  #sidebar .device-row {
    background: #ffffff !important;
    border-bottom: 1px solid #edf0f2 !important;
    padding: 12px 18px !important;
    min-height: 58px !important;
  }
  /* respiro lateral pra não colar nas bordas */
  #sidebar .group-content,
  #sidebar .group > .collapse,
  #sidebar .tab-content { padding-left: 6px !important; padding-right: 6px !important; }
  #sidebar .group-content li,
  #sidebar .group > .collapse li { border-radius: 10px !important; }
  #sidebar .group-content li:hover,
  #sidebar .group > .collapse li:hover { background: #f6f8fa !important; }

  /* texto escuro nas linhas */
  #sidebar .group-content li span,
  #sidebar .group-content li a,
  #sidebar .group > .collapse li span,
  #sidebar .group > .collapse li a,
  #sidebar .group > .collapse li div { color: #1f2937 !important; }

  /* hora / texto secundário */
  #sidebar .group-content .text-muted,
  #sidebar .group-content small,
  #sidebar .group > .collapse li span:nth-of-type(2) { color: #8a8f96 !important; }

  /* nome do device: escuro por padrão; status colore o nome.
     IMPORTANTE: tratar .bsten-online também (senão fica branco invisível no claro) */
  #sidebar li span.bsten-device-name,
  #sidebar li.bsten-online span.bsten-device-name { color: #1f2937 !important; background: none !important; }
  #sidebar li.bsten-moving span.bsten-device-name { color: #15803d !important; }
  #sidebar li.bsten-offline span.bsten-device-name { color: #374151 !important; }
  /* fallback: nome não-marcado também escuro (nunca texto invisível) */
  #sidebar li .name, #sidebar li .name > span:first-child { color: #1f2937 !important; }

  /* selecionado: faixa verde clara */
  #sidebar .group-content li.active,
  #sidebar .group > .collapse li.active { background: #eafaf0 !important; }

  /* checkbox "marcar o rastreador no mapa" fica VISÍVEL (original do GPSWox).
     iCheck: o quadradinho visível é .icheckbox_minimal. */
  #sidebar li .checkbox,
  #sidebar li [data-toggle="checkbox"],
  #sidebar li .icheckbox_minimal,
  #sidebar li .iradio_minimal { display: inline-block !important; opacity: 1 !important; }

  /* menu de controle do veículo (3-pontinhos). No GPSWox:
     <div class="pull-right"><i class="btn icon options" data-toggle="dropdown"></i><ul class="dropdown-menu">.
     Estava com a cor clara do tema escuro = branco invisível no fundo branco. */
  #sidebar li .pull-right { display: block !important; float: right !important; opacity: 1 !important; }
  #sidebar li .pull-right .btn-group,
  #sidebar li .pull-right .dropdown { display: inline-block !important; }
  /* o 3-pontinhos: .icon{display:none} é a base do GPSWox; forçar visível */
  #sidebar li .icon.options,
  #sidebar li i.options,
  #sidebar li .options[data-toggle="dropdown"],
  #sidebar li .pull-right [data-toggle="dropdown"] {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #5a6068 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 20px !important;
    line-height: 1 !important;
    padding: 8px 10px !important;
  }
  /* glifo do ícone (\e941) + cor escura no :before (era #ddd, invisível) */
  #sidebar li .icon.options:before,
  #sidebar li i.options:before,
  #sidebar li .options[data-toggle="dropdown"]:before {
    content: "\e941" !important;
    color: #5a6068 !important;
  }

  /* menu de ações do veículo (dropdown aberto): COMPACTAR pra caber na tela.
     Estava com itens enormes/espaçados (cards). Vira lista enxuta com rolagem. */
  #sidebar li .dropdown-menu {
    max-height: 72vh !important;
    overflow-y: auto !important;
    padding: 4px 0 !important;
    border-radius: 12px !important;
  }
  #sidebar li .dropdown-menu > li { margin: 0 !important; padding: 0 !important; }
  #sidebar li .dropdown-menu > li > a,
  #sidebar li .dropdown-menu > li > button {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    font-size: 13.5px !important;
    line-height: 1.2 !important;
    color: #1f2937 !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #eef1f4 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    white-space: normal !important;
  }
  #sidebar li .dropdown-menu > li:last-child > a { border-bottom: none !important; }
  #sidebar li .dropdown-menu i,
  #sidebar li .dropdown-menu .icon {
    display: inline-block !important;
    font-size: 16px !important;
    margin: 0 !important;
    color: #5a6068 !important;
  }

  /* bolinha de status mantém a cor inline; só ajusta o tamanho */
  #sidebar .details > span:nth-child(3) {
    width: 10px !important; height: 10px !important;
    border-radius: 50% !important; border: none !important;
  }

  /* cartão de endereço só aparece no modo mapa; em modo lista fica escondido
     (evita cobrir a lista e reforça que a lista não some sozinha) */
  body:not(.bsten-mmap) #bottombar { display: none !important; }

  /* ── NOMES SEMPRE LEGÍVEIS (igual fiz com o 3-pontinhos) ──
     Vários ficavam brancos/invisíveis no fundo claro. Força escuro cobrindo
     TODAS as variações e estados, com alta especificidade. O status continua
     visível pela bolinha colorida. */
  #sidebar .sidebar-content li .name,
  #sidebar .group-content li .name,
  #sidebar .group > .collapse li .name,
  #sidebar li .name,
  #sidebar li .name span,
  #sidebar li span.bsten-device-name,
  #sidebar li.bsten-online .name, #sidebar li.bsten-online .name span,
  #sidebar li.bsten-online span.bsten-device-name,
  #sidebar li.bsten-offline .name, #sidebar li.bsten-offline .name span,
  #sidebar li.bsten-offline span.bsten-device-name,
  #sidebar li.active .name, #sidebar li.active .name span {
    color: #1f2937 !important;
    opacity: 1 !important;
  }
  /* veículo em movimento: nome verde (o resto fica escuro) */
  #sidebar li.bsten-moving .name,
  #sidebar li.bsten-moving .name span,
  #sidebar li.bsten-moving span.bsten-device-name { color: #15803d !important; }

  /* CAUSA REAL: o nome offline herda rgba(255,255,255,0.45) (branco) de uma regra
     do tema escuro com peso 142 (#sidebar .group .collapse li.bsten-offline ...).
     Bater com a MESMA especificidade + body (143) pra ganhar de vez. */
  body #sidebar .group .collapse li span.bsten-device-name,
  body #sidebar .group .collapse li.bsten-online span.bsten-device-name,
  body #sidebar .group-list li span.bsten-device-name,
  body #sidebar .group-list li.bsten-online span.bsten-device-name {
    color: #1f2937 !important;
  }
  body #sidebar .group .collapse li.bsten-offline span.bsten-device-name,
  body #sidebar .group-list li.bsten-offline span.bsten-device-name {
    color: #374151 !important;
  }
  body #sidebar .group .collapse li.bsten-moving span.bsten-device-name,
  body #sidebar .group-list li.bsten-moving span.bsten-device-name {
    color: #15803d !important;
  }

  /* títulos de grupo mais escuros (estavam muito apagados) */
  #sidebar .group-heading,
  #sidebar .group-heading label,
  #sidebar .group-heading span,
  #sidebar .group-heading a,
  #sidebar .group-title,
  #sidebar .group > .group-heading,
  #sidebar .group > .group-heading span { color: #374151 !important; opacity: 1 !important; }
}

/* ── BARRA DE ROLAGEM DA LISTA — maior e fácil de arrastar (subir/descer) ──
   A geral era 4px (muito fininha). Aqui a da lista (.tab-pane-body) fica larga
   e com pegador azul bem visível pra arrastar. */
#sidebar .tab-pane-body::-webkit-scrollbar { width: 14px !important; }
#sidebar .tab-pane-body::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.08) !important;
  border-radius: 8px !important;
}
#sidebar .tab-pane-body::-webkit-scrollbar-thumb {
  background: #0391CB !important;
  border-radius: 8px !important;
  border: 3px solid transparent !important;
  background-clip: padding-box !important;
  min-height: 48px !important;
}
#sidebar .tab-pane-body::-webkit-scrollbar-thumb:hover { background: #0277a8 !important; }
#sidebar .tab-pane-body {
  scrollbar-width: auto !important;
  scrollbar-color: #0391CB rgba(255,255,255,0.08) !important;
}

/* [DEV] Bug: "Gráfico / Registro de dados" (#bottom-history) vazava no cartão de
   info do veículo no mobile (minha compactação deixou visível). Esconder só no cartão. */
@media (max-width: 767px) {
  #bottombar #bottom-history { display: none !important; }
}

/* [DEV] Olho do endereço não renderizava (glifo vazio/fonte errada no GPSWox nativo).
   Força um olho em SVG (independe de fonte de ícone). */
@media (max-width: 767px) {
  #bottombar .icon.eye {
    display: inline-block !important;
    width: 15px !important; height: 15px !important;
    vertical-align: -2px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat !important;
  }
  #bottombar .icon.eye:before { content: none !important; }
}

/* [DEV] Histórico: o container .history tem fundo claro (#f9f9f9), mas o tema glass
   pintava o texto de branco = invisível. Voltar o texto escuro (visão original). */
#sidebar .tab-pane.active .history,
#sidebar .tab-pane.active .history div,
#sidebar .tab-pane.active .history span,
#sidebar .tab-pane.active .history td,
#sidebar .tab-pane.active .history th,
#sidebar .tab-pane.active .history a,
#sidebar .tab-pane.active .history p,
#sidebar .tab-pane.active .history small,
#sidebar .tab-pane.active .history strong { color: #2c2c2c !important; }

/* [DEV] Ativar o botão preto de recolher o painel de baixo. O GPSWox adiciona
   .collapsed no #widgets ao clicar (toggleWidgets), mas NÃO tinha CSS pra recolher.
   Aqui: quando .collapsed, o painel de detalhes some (mostra o mapa); clica de novo, volta. */
#widgets.collapsed { display: none !important; }

/* [DEV 2026-07-02] Recolher o modal de baixo quando o JS marca #bottombar.bsten-collapsed.
   Esconde todo o conteudo do bottombar, mantendo so o puxador (.btn-collapse/.btn-close)
   pra reabrir. Encolhe o bottombar pra sobrar mapa. */
#bottombar.bsten-collapsed > *:not(.btn-collapse):not(.btn-close) { display: none !important; }
#bottombar.bsten-collapsed {
  min-height: 0 !important;
  height: auto !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* [DEV 2026-07-02] Menu de opcoes do device SEMPRE centralizado na tela (modal),
   com rolagem. !important vence o top/left inline que o GPSWox reposiciona. */
.dropdown-menu.bsten-centered-menu {
  position: fixed !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  max-height: calc(100vh - 16px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  z-index: 20000 !important;
}

/* [DEV 2026-07-02] Popup do device NO MAPA (.leaflet-popup-device) estava com fundo
   transparente -> o mapa vazava atras do texto (ilegivel). Fundo branco solido + sombra,
   virando um cartao limpo. */
#mapWrap .leaflet-popup.leaflet-popup-device .leaflet-popup-content-wrapper,
#mapWrap .leaflet-popup.leaflet-popup-device .leaflet-popup-tip {
  background: #ffffff !important;
}
#mapWrap .leaflet-popup.leaflet-popup-device .leaflet-popup-content-wrapper {
  box-shadow: 0 3px 16px rgba(0, 0, 0, 0.28) !important;
  border-radius: 8px !important;
}