@media (max-width:768px){
  /* Mapa atrás de tudo que é UI */
  #coluna_mapa{
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100vw !important; height: 100vh !important;
    z-index: 1000; /* ↓ mapa fica por baixo */
    margin: 0 !important; padding: 0 !important;
  }
  #resultado_mapa{ width:100% !important; height:100% !important; }

  /* Gavetas reais */
 #coluna_lateral,
  #coluna_detalhes{
    position: fixed;
    top: 0; bottom: 0;
    width: 85vw; max-width: 400px;
    background:#fff;
    box-shadow: 0 0 30px rgba(0,0,0,.3);
    overflow-y:auto;
    transition: transform .3s ease;
    z-index: 6000;        /* ↑ acima do mapa e dos controles do Maps */
    padding: 15px;
    margin: 0 !important;
    border-radius: 0;
  }

   /* Esquerda */
  #coluna_lateral{ left:0; transform: translateX(-100%); }
  #coluna_lateral.mobile-open{ transform: translateX(0); }

  /* Direita */
  #coluna_detalhes{ right:0; transform: translateX(100%); display:block !important; }
  #coluna_detalhes.mobile-open{ transform: translateX(0); }


  /* Abas flutuantes oficiais */
  .mobile-tabs.d-md-none{
    position: fixed;
    left: 10px; bottom: 14px;
    z-index: 9000;
    display: flex; gap: 8px;
  }
  .mobile-tabs .mobile-tab{
    background:#fff; border:1px solid #e5e7eb;
    padding:8px 12px; border-radius:9999px; font-size:14px;
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
    pointer-events: auto;
  }

  /* === Abas verticais coloridas (as que você quer) === */
  .mobile-drawer-btn{
    position: fixed; top: 50%;
    transform: translateY(-50%);
    color:#fff; border:0; cursor:pointer;
    padding: 56px 10px;
    font-weight:700; letter-spacing:.5px;
    box-shadow: 0 12px 24px rgba(0,0,0,.25);
    z-index: 9000;               /* ↑ sempre acima */
  }
 .mobile-drawer-btn .vertical-text{
    display:inline-block; writing-mode: vertical-rl; text-orientation: mixed;
    font-size:12px; white-space:nowrap;
  }
  .mobile-drawer-btn.left{
    left:0; border-radius: 0 10px 10px 0;
    background: linear-gradient(180deg, #6a5af9 0%, #8a2be2 100%);
  }
  .mobile-drawer-btn.right{
    right:0; border-radius: 10px 0 0 10px;
    background: linear-gradient(180deg, #20c997 0%, #17a2b8 100%);
  }
  .mobile-drawer-btn:active{ transform: translateY(-50%) scale(.98); }

  /* Esconde completamente as abas de rodapé (não queremos elas) */
  .mobile-tabs{ display:none !important; }
}

/* ===== DESKTOP (>=769px) ===== */
@media (min-width:769px){
  .mobile-drawer-btn{ display:none !important; }
  #coluna_mapa, #coluna_lateral, #coluna_detalhes{
    position: relative !important; transform:none !important; height:auto !important;
  }
  #resultado_mapa{ position:relative !important; height:700px !important; }
}