/* Mapa leve das entregas (assets/mapa-entrega.js): link do cliente, painel e aplicativo. */
/* Mapa leve (GLMap) */
.glmap { position: relative; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; background: #e5e3df; cursor: grab; }
.glmap-tiles img { position: absolute; left: 0; top: 0; width: 256px; height: 256px; opacity: 0; transition: opacity .25s; pointer-events: none; }
.glmap-tiles img.on { opacity: 1; }
.glmap-marker { position: absolute; left: 0; top: 0; z-index: 2; }
.glmap-pin { position: absolute; transform: translate(-50%, -100%); white-space: nowrap; }
.glmap-zoom { position: absolute; right: 10px; top: 10px; z-index: 4; display: grid; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.glmap-zoom button { width: 38px; height: 38px; border: 0; background: #fff; color: #0D1520; font-size: 20px; font-weight: 700; cursor: pointer; }
.glmap-zoom button + button { border-top: 1px solid #e5e7eb; }
.glmap-center { position: absolute; right: 10px; bottom: 30px; z-index: 4; width: 40px; height: 40px; border: 0; border-radius: 12px; background: #fff; color: #2563EB; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); cursor: pointer; display: grid; place-items: center; }
.glmap-center svg { width: 22px; height: 22px; }
.glmap-attr { position: absolute; right: 0; bottom: 0; z-index: 4; padding: 1px 6px; background: rgba(255, 255, 255, .8); color: #333; font-size: 10px; text-decoration: none; }
/* Marcadores */
.mk-driver { display: flex; flex-direction: column; align-items: center; transform: translate(-50%, -50%); }
.mk-driver i { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #2563EB; color: #fff; border: 3px solid #fff; box-shadow: 0 6px 18px rgba(37, 99, 235, .55); }
.mk-driver i svg { width: 24px; height: 24px; }
.mk-driver b { margin-top: 4px; padding: 2px 8px; border-radius: 99px; background: #0D1520; color: #fff; font-size: 11px; font-weight: 700; }
.mk-driver.stale i { background: #8d939c; box-shadow: none; }
.mk-driver::before { content: ""; position: absolute; top: 0; left: 50%; width: 44px; height: 44px; margin-left: -22px; border-radius: 50%; background: rgba(37, 99, 235, .35); animation: halo 2s infinite; z-index: -1; }
.mk-driver.stale::before { display: none; }
@keyframes halo { from { transform: scale(1); opacity: .9; } to { transform: scale(2.4); opacity: 0; } }
.mk-done { width: 22px; height: 22px; border-radius: 50%; background: #15803D; border: 2px solid #fff; transform: translate(0, 11px); box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }

.glmap-center[hidden] { display: none; }

/* Rota de entrega (painel): pedidos por regiao, tocar marca/desmarca. */
.glmap-marker.tap { cursor: pointer; }
.mk-order { transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; -webkit-tap-highlight-color: transparent; }
.mk-order b { min-width: 30px; height: 30px; padding: 0 6px; box-sizing: border-box; border-radius: 15px; display: grid; place-items: center; background: #fff; color: var(--c); border: 3px solid var(--c); font-size: 12px; font-weight: 800; box-shadow: 0 3px 10px rgba(0, 0, 0, .28); }
.mk-order i { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid var(--c); margin-top: -1px; }
.mk-order.on b { background: var(--c); color: #fff; transform: scale(1.12); }
.mk-store { transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #0D1520; color: #fff; border: 3px solid #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .35); }
.mk-store svg { width: 18px; height: 18px; }

/* Ampliar: mapa na tela inteira (entregas em tempo real, rota e acompanhamento). */
.glmap-expand { position: absolute; right: 10px; top: 96px; z-index: 4; width: 40px; height: 40px; border: 0; border-radius: 12px; background: #fff; color: #0D1520; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); cursor: pointer; display: grid; place-items: center; }
.glmap-expand svg { width: 22px; height: 22px; }
.glmap.glmap-full { position: fixed !important; inset: 0 !important; width: auto !important; height: auto !important; max-height: none !important; margin: 0 !important; border-radius: 0 !important; border: 0 !important; z-index: 2000 !important; background: #e8ecf2; }
.glmap.glmap-full .glmap-expand { top: calc(max(10px, env(safe-area-inset-top)) + 86px); }
.glmap.glmap-full .glmap-zoom { top: max(10px, env(safe-area-inset-top)); }
html.glmap-lock, html.glmap-lock body { overflow: hidden; }

/* Google Maps (link do cliente): o mapa do Google por baixo, mesmos marcadores e botoes. */
.glmap.glmap-g { cursor: auto; touch-action: auto; }
.glmap-g .glmap-gmap { position: absolute; inset: 0; }
.glmap-g .glmap-center { bottom: 24px; }

/* Referencias do Google (mapas do profissional): ligar/desligar comercio, saude, escolas... */
.glmap-places-btn { position: absolute; left: 10px; top: 10px; z-index: 5; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 0; border-radius: 12px; background: #fff; color: #0D1520; font: 700 12px/1 inherit; font-family: inherit; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); cursor: pointer; }
.glmap-places-btn svg { width: 18px; height: 18px; }
.glmap-places-btn.on { background: #0D1520; color: #fff; }
.glmap-places { position: absolute; left: 10px; top: 52px; z-index: 6; width: min(270px, calc(100% - 70px)); max-height: calc(100% - 64px); overflow: auto; padding: 10px; border-radius: 14px; background: #fff; color: #0D1520; box-shadow: 0 8px 24px rgba(0, 0, 0, .22); font-size: 13px; }
.glmap-places[hidden] { display: none; }
.glmap-places label { display: flex; align-items: center; gap: 8px; padding: 7px 2px; cursor: pointer; }
.glmap-places input { width: 18px; height: 18px; accent-color: #2563EB; }
.glmap-places__acts { display: flex; gap: 6px; margin-bottom: 4px; }
.glmap-places__acts button { flex: 1; padding: 7px 6px; border: 1px solid #d6dbe3; border-radius: 10px; background: #f4f6f9; color: #0D1520; font: 700 12px inherit; font-family: inherit; cursor: pointer; }