/* Caminho: /apps/rot/css/rota.css */
/* RotaPro v9.0 — CSS exclusivo do módulo Rotas — Arcoll Digital      */
/* Cobre: index.php (dashboard), rota_calc.php, rota_gps.php           */
/* Mobile-first · Responsivo · App-like em celular                     */

/* ════════════════════════════════════════════════════════════════════
   1. DASHBOARD (index.php)
   ════════════════════════════════════════════════════════════════════ */
/* Nota: os componentes visuais do dashboard (.rdash-cnt-*, .rdash-item, .rdash-busca,
   .rdash-toolbar, .rdash-quick-*, .rdash-stat-*, .ico-*, etc.) vivem no <style> interno
   de index.php — mantidos lá para não fragmentar layout específico daquela tela.
   Aqui ficam só as 2 regras realmente compartilhadas/usadas fora daquele bloco. */

.rdash-info-box {
    background: rgba(231,76,60,.07); border: 1px solid rgba(231,76,60,.2);
    border-radius: 9px; padding: 10px 12px; margin-top: 8px;
    font-size: 11px; color: #8b98ac; display: flex; align-items: flex-start; gap: 8px; line-height: 1.5;
}
.rdash-empty { text-align: center; padding: 40px 20px; color: #8b98ac; font-size: 13px; }
.rdash-empty i { display: block; font-size: 36px; margin-bottom: 12px; opacity: .4; }

/* ════════════════════════════════════════════════════════════════════
   2. CALC (rota_calc.php)
   ════════════════════════════════════════════════════════════════════ */
#rcRoot {
    display: flex; flex-direction: column;
    height: calc(100dvh - var(--header-h) - var(--safe-top));
    overflow: hidden; background: #0b1120; position: relative;
}
@media (max-width: 768px) {
    #rcRoot {
        height: calc(100dvh - var(--header-h) - var(--safe-top) - var(--bnav-h) - var(--safe-bottom));
    }
}

/* Barra de navegação interna */
#rcPanel {
    flex: 0 0 auto; 
    padding: 8px; display: flex; flex-direction: column; gap: 6px; z-index: 20;
    position: relative;
}

/* Desktop: rcPanel em uma única linha horizontal (mobile permanece empilhado, ver @media max-width:768 acima) */
@media (min-width: 769px) {
    #rcPanel {
        flex-direction: row;
        align-items: flex-start;
        flex-wrap: nowrap;
        gap: 16px;
        overflow: visible;
    }
    #rcPanel > .rota-row-locais {
        flex: 1 1 260px;
        min-width: 0;
    }
    #rcPanel > .rota-row-config {
        flex: 0 0 auto;
        flex-wrap: nowrap;
    }
    #rcPanel > #rcErrInline {
        flex: 0 0 auto;
    }
}
/* Painel de configurações da tela de cálculo (engrenagem) */
#rcConfigPanel {
    position: absolute; top: 44px; right: 8px; z-index: 80;
    width: 260px; max-width: calc(100vw - 20px); max-height: 70vh; overflow-y: auto;
    background: rgba(13,17,28,.97); border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--radius-lg); box-shadow: 0 12px 40px rgba(0,0,0,.7);
    backdrop-filter: blur(16px); display: none; padding: 14px;
    scrollbar-width: thin; scrollbar-color: #1f2940 transparent;
}
#rcConfigPanel.open { display: block; }
#rcConfigPanel::-webkit-scrollbar { width: 4px; }
#rcConfigPanel::-webkit-scrollbar-thumb { background: #1f2940; border-radius: 4px; }
#rcConfigPanel input.gps-cfg-select { -webkit-appearance: auto; }

/* Mapa calc */
#rcMapWrap { flex: 1; position: relative; overflow: hidden; z-index: 0;}
#rcMap     { position: absolute; inset: 0; background: #0b1120; }
#rcMap .leaflet-container { width: 100%; height: 100%; background: #0b1120; font-family: inherit; }
#rcMap .leaflet-bottom { bottom: 8px !important; }
#rcMap .leaflet-right  { right: 12px !important; }

/* Hint de pin */
#rcPinHint {
    display: none; position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%);
    background: rgba(108,92,231,.95); color: #fff; border-radius: 10px;
    padding: 8px 14px; font-size: 12px; font-weight: 700; z-index: 30;
    align-items: center; gap: 8px; white-space: nowrap;
}
#rcPinCancel {
    background: rgba(255,255,255,.2); border: none; color: #fff;
    border-radius: 6px; padding: 3px 9px; cursor: pointer; font-size: 10px;
    font-weight: 700; font-family: inherit; margin-left: auto;
}

/* Barra de resultado */
#rcResultBar {
    display: none; align-items: center; gap: 4px;
    background: #0d1117;
    border-top: 1px solid #1f2940;
        justify-content: space-around;
    padding: 6px 10px; flex-wrap: wrap;
}
#rcResultBar.show {     display: flex;
    z-index: 400;
    margin-bottom: 60px;  }
.rc-res-item { display: flex; align-items: center; gap: 4px; font-size: 11px; }
.rc-res-item .rv { font-weight: 800; font-size: 14px; color: #fff; }
.rc-res-item .rl { font-size: 9px; color: #8b98ac; }
.rc-res-item.laranja .rv { color: #f39c12; }
.rc-res-item.verde   .rv { color: #27ae60; }
.rc-res-sep { width: 1px; height: 28px; background: #1f2940; flex-shrink: 0; }

/* Botão Iniciar GPS */
#rcBtnIniciar {
    position: fixed;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 25px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(108, 92, 231, 0.11);
    z-index: 9999;
    box-sizing: border-box;
    background: #0f1525;
    color: #fff;
    border: 1px solid #1f2940;
    border-radius: 15px;
    font-size: 24px;
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Efeito Hover */
#rcBtnIniciar:hover {
    background: #1a2438;
    border-color: #6c5ce7;
    box-shadow: 0 6px 20px rgba(108, 92, 231, 0.25);
    transform: translateX(-50%) translateY(-2px);
}

/* Efeito Clique */
#rcBtnIniciar:active {
    transform: translateX(-50%) scale(0.96);
    opacity: 0.85;
    box-shadow: 0 2px 8px rgba(108, 92, 231, 0.15);
}

/* Efeito de brilho no hover (opcional) */
#rcBtnIniciar:hover::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 15px;
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.2), transparent);
    z-index: -1;
    filter: blur(4px);
}

/* ════════════════════════════════════════════════════════════════════
   3. COMPONENTES COMPARTILHADOS (calc + index)
   ════════════════════════════════════════════════════════════════════ */

/* Linha de locais */
.rota-row-locais {
    display: grid; grid-template-columns: 1fr 32px 1fr;
    gap: 4px; align-items: end;
}
.rota-loc-field { position: relative; display: flex; flex-direction: column; gap: 2px; }
.rota-loc-lbl   { font-size: 9px; font-weight: 700; color: #8b98ac; text-transform: uppercase;
    letter-spacing: .4px; display: flex; align-items: center; gap: 4px; }
.rota-loc-dot   { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.rota-loc-dot.green { background: #27ae60; }
.rota-loc-dot.red   { background: #e74c3c; }

.rota-loc-input-wrap { position: relative; display: flex; align-items: center; }
.rota-loc-input {
    width: 100%; padding: 5px 68px 5px 5px;
    background: #0f1525; color: #fff;
    border: 1px solid #1f2940; border-radius: 8px;
    font-size: 11px; font-family: inherit; -webkit-appearance: none;
    transition: border-color .15s;
}
.rota-loc-input:focus { outline: none; border-color: #6c5ce7; box-shadow: 0 0 0 2px rgba(108,92,231,.15); }
.rota-loc-input::placeholder { color: #5b667e; font-size: 10px; }

.rota-gps-btn {
    position: absolute; right: 22px;
    width: 17px; height: 17px; border: none;
    background: rgba(39,174,96,.2); color: #27ae60; border-radius: 6px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 9px; z-index: 2; transition: all .15s; flex-shrink: 0;
}
.rota-gps-btn:active,
.rota-gps-btn.loading { background: #27ae60; color: #fff; }
.rota-gps-btn.loading i { animation: rcSpin .8s linear infinite; }

.rota-clear-btn {
    position: absolute; right: 2px;
    width: 17px; height: 17px; border: none;
    background: rgba(255,255,255,.08); color: #8b98ac;
    border-radius: 6px; cursor: pointer;
    display: none; align-items: center; justify-content: center; font-size: 9px; z-index: 2;
}

.rota-swap-btn {
    width: 25px; height: 25px; border: 1px solid #1f2940; border-radius: 50%;
    background: #0f1525; color: #6c5ce7; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; transition: all .2s; align-self: center;
}
.rota-swap-btn:active { background: #6c5ce7; color: #fff; transform: rotate(180deg); }

/* Autocomplete */
.rota-ac-box {
    display: none; position: absolute;
    top: calc(100% + 3px); left: 0; right: 0;
    background: #131829; border: 1px solid #1f2940;
    border-radius: 8px; max-height: 220px; overflow-y: auto;
    z-index: 5000; box-shadow: 0 12px 40px rgba(0,0,0,.7);
}
.rota-ac-box.open { display: block; }
.rota-ac-item {
    padding: 8px 10px; border-bottom: 1px solid #1f2940;
    cursor: pointer; display: flex; align-items: center; gap: 7px; font-size: 11px; color: #fff;
}
.rota-ac-item:last-child  { border-bottom: none; }
.rota-ac-item:hover       { background: #1f2940; }
.rota-ac-ico              { color: #6c5ce7; font-size: 10px; width: 12px; text-align: center; flex-shrink: 0; }
.rota-ac-nome             { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rota-ac-tag              { font-size: 8px; color: #6c5ce7; background: rgba(108,92,231,.15); padding: 1px 5px; border-radius: 4px; flex-shrink: 0; }

/* Linha de config */
.rota-row-config { display: flex; gap: 4px; align-items: flex-end; }

/* Icon-select compacto (Veículo / Combustível / Ida-Volta) — no desktop
   mostra ícone + texto; no mobile (ver media query abaixo) só o ícone. */
.rota-isel { position: relative; flex-direction: column; gap: 2px; flex-shrink: 0; }
.rota-isel-trigger {
    align-items: center; gap: 6px;
    height: 30px; padding: 0 8px; box-sizing: border-box;
    background: #0f1525; color: #fff; border: 1px solid #1f2940; border-radius: 7px;
    font-size: 10px; font-family: inherit; font-weight: 700; cursor: pointer;
    white-space: nowrap; transition: border-color .15s;
}
.rota-isel-trigger:hover        { border-color: #3a4360; }
.rota-isel.open .rota-isel-trigger { border-color: #6c5ce7; }
.rota-isel-trigger i            { color: #6c5ce7; font-size: 12px; width: 13px; text-align: center; flex-shrink: 0; }
.rota-isel-trigger-txt          { color: #fff; }
.rota-isel-trigger .fa-chevron-down,
.rota-isel-trigger .fa-caret-down { display: none; }

.rota-isel-menu {
    position: absolute; top: calc(100% + 5px); left: 0; z-index: 90;
    min-width: 150px; max-width: 220px;
    background: rgba(13,17,28,.98); border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.6); backdrop-filter: blur(16px);
    padding: 4px; display: none; flex-direction: column; gap: 2px;
}
.rota-isel.open .rota-isel-menu { display: flex; }
.rota-isel-opt {
    display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 7px;
    font-size: 11px; font-weight: 600; color: #c7ccd8; cursor: pointer; transition: background .15s;
}
.rota-isel-opt i        { width: 14px; text-align: center; color: #6c5ce7; font-size: 12px; flex-shrink: 0; }
.rota-isel-opt:hover    { background: #1f2940; }
.rota-isel-opt.active   { background: rgba(108,92,231,.18); color: #fff; }
.rota-cfg-field  { display: flex; flex-direction: column; gap: 2px; }
.rota-cfg-lbl    { font-size: 8px; font-weight: 700; color: #8b98ac; text-transform: uppercase;
    letter-spacing: .3px; white-space: nowrap; display: flex; align-items: center; gap: 3px; }
.rota-cfg-input  {
    padding: 6px 7px; background: #0f1525; color: #fff;
    border: 1px solid #1f2940; border-radius: 7px;
    font-size: 10px; font-family: inherit; width: 100%; -webkit-appearance: none;
}
.rota-cfg-input:focus  { outline: none; border-color: #6c5ce7; }
select.rota-cfg-input  { cursor: pointer; }

/* UF Badge */
.rota-uf-badge {
    background: rgba(108,92,231,.2); color: #6c5ce7;
    font-size: 8px; font-weight: 700; padding: 1px 5px; border-radius: 4px;
}

/* Botão Calcular */
.rota-calc-btn {
    flex: 1; min-width: 0; padding: 0 8px; height: 30px;
    background: #6c5ce7; color: #fff; border: none; border-radius: 7px;
    font-size: 11px; font-weight: 700; cursor: pointer; align-self: center;
    display: flex; align-items: center; justify-content: center; gap: 4px;
    font-family: inherit; transition: opacity .15s; white-space: nowrap;
}
.rota-calc-btn:active   { opacity: .8; }
.rota-calc-btn:disabled { opacity: .5; }

/* Compartilhar */
.rota-share-bar-btn {
    flex-shrink: 0; padding: 0 10px; height: 30px;
    background: #25d366; color: #fff; border: none; border-radius: 7px;
    font-size: 11px; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; gap: 4px; font-family: inherit;
    transition: opacity .15s; white-space: nowrap;
}
.rota-share-bar-btn:active { opacity: .8; }

/* Tipo de veículo */
.rota-tipo-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 4px;
}
.rota-tipo-btn {
    padding: 8px 4px; border-radius: 8px; border: 1px solid #1f2940;
    background: #0f1525; color: #8b98ac; cursor: pointer;
    font-size: 10px; font-weight: 600; font-family: inherit;
    display: flex; align-items: center; justify-content: center; gap: 4px;
    transition: all .15s;
}
.rota-tipo-btn.active { border-color: #6c5ce7; background: rgba(108,92,231,.15); color: #6c5ce7; }

/* Range */
.rota-range-wrap {
    display: flex; align-items: center; gap: 8px; margin-top: 4px;
}
.rota-range-wrap input[type=range] { flex: 1; accent-color: #6c5ce7; }
.rota-range-val { font-size: 10px; font-weight: 700; color: #fff; min-width: 32px; text-align: right; }

/* Modais gerais */
.rota-modal {
    position: fixed; inset: 0; z-index: 600;
    background: rgba(0,0,0,.75); display: none;
    align-items: center; justify-content: center;
    backdrop-filter: blur(4px);
}
.rota-modal.show { display: flex; }
.rota-sheet {
    background: #131829; border: 1px solid #1f2940;
    border-radius: 20px; max-width: 480px; width: 100%;
    padding: 20px 18px calc(20px + var(--safe-bottom)); max-height: 92vh; overflow-y: auto;
}
.rota-sheet-close {
    float: right; background: rgba(255,255,255,.06); border: none; color: #8b98ac;
    width: 28px; height: 28px; border-radius: 7px; cursor: pointer; font-size: 14px;
    display: flex; align-items: center; justify-content: center;
}
.rota-sheet h3 { font-size: 15px; font-weight: 800; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.rota-sheet-desc { font-size: 12px; color: #8b98ac; margin-bottom: 14px; line-height: 1.5; }
.rota-form-group { margin-bottom: 12px; }
.rota-form-label { display: block; font-size: 10px; font-weight: 700; color: #8b98ac;
    margin-bottom: 4px; text-transform: uppercase; letter-spacing: .4px; }
.rota-form-input {
    width: 100%; padding: 9px 12px; background: #0f1525; color: #fff;
    border: 1px solid #1f2940; border-radius: 8px; font-size: 13px;
    font-family: inherit; outline: none; transition: border-color .15s; -webkit-appearance: none;
}
.rota-form-input:focus { border-color: #6c5ce7; }
select.rota-form-input { cursor: pointer; }
.rota-modal-actions { display: flex; gap: 8px; margin-top: 14px; }
.rota-btn-primary {
    flex: 1; padding: 10px 14px; background: var(--cor-accent); border: none;
    border-radius: 9px; color: #fff; font-size: 13px; font-weight: 700; cursor: pointer;
    font-family: inherit; display: flex; align-items: center; justify-content: center;
    gap: 6px; transition: opacity .15s;
}
.rota-btn-primary:active  { opacity: .85; }
.rota-btn-secondary {
    padding: 10px 14px; background: #1f2940; border: none; border-radius: 9px;
    color: #8b98ac; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
}

/* ════════════════════════════════════════════════════════════════════
   4. GPS (rota_gps.php) — Layout fullscreen
   ════════════════════════════════════════════════════════════════════ */
.gps-body {
    overflow: hidden; background: #0b1120;
    -webkit-user-select: none; user-select: none;
    overscroll-behavior: none;
    /* Espaço reservado no topo/rodapé para o header e o bottom-nav do sistema Arcoll.
       Enquanto eles estão visíveis, banner/rodapé/painéis do GPS somam esse espaço pra não
       ficar por baixo. Quando a navegação entra em TELA CHEIA (.gps-chrome-hidden, aplicada
       via JS em ocultarChromeSistema()), o espaço vira só a safe-area do aparelho e todo
       esse grupo desliza pra ocupar a tela toda — em vez de ficar "no mesmo lugar". */
    --gps-top-off:    calc(var(--header-h, 54px) + var(--safe-top));
    --gps-bottom-off: calc(var(--bnav-h, 62px) + var(--safe-bottom));
}
.gps-body input, .gps-body textarea { -webkit-user-select: text; user-select: text; }

/* Header, sidebar e rodapé/bottom-nav do sistema Arcoll ficam visíveis
   normalmente nesta página. Eles só são escondidos quando a navegação entra
   em TELA CHEIA (classe .gps-chrome-hidden aplicada via JS em
   ocultarChromeSistema/mostrarChromeSistema), pra não sobrepor o mapa. */
body.gps-chrome-hidden #rdxHeader,
body.gps-chrome-hidden #rdxSidebar,
body.gps-chrome-hidden #sidebarOverlay,
body.gps-chrome-hidden #rdxFooter,
body.gps-chrome-hidden #rdxBottomNav,
body.gps-chrome-hidden .rdx-sidebar-overlay,
body.gps-chrome-hidden .rdx-bottom-nav {
    display: none !important;
}
body.gps-chrome-hidden #rdxMain {
    margin-left: 0 !important;
    padding-bottom: 0 !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
}

/* Tela cheia simulada (fallback iOS Safari antigo, sem suporte a Fullscreen API) */
.gps-body.gps-fullscreen-fake {
    position: fixed !important;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw; height: 100vh; height: 100dvh;
    margin: 0; padding: 0;
    z-index: 2147483647;
}
.gps-body.gps-fullscreen-fake #gpsMap { height: 100vh; height: 100dvh; }
#gpsBtnFullscreen.ativo { background: rgba(108,92,231,.3); border-color: var(--cor-accent); color: var(--cor-accent); }

/* ════════════════════════════════════════════════════════════════════
   CAMADA IMERSIVA GPS — z-index
   O chrome do sistema Arcoll (#rdxHeader z-index:1000, #rdxSidebar:401,
   #rdxBottomNav:410, #rdxFooter:99) continua visível normalmente nesta tela —
   só some quando entra em TELA CHEIA real (ocultarChromeSistema(), ver JS).
   Por isso TODOS os elementos próprios do GPS que ficam sobre o mapa (banner,
   rodapé, coluna de botões, painel duplo, cockpit, painéis, modais, toasts)
   usam a faixa 2000+ de z-index — folgada acima do maior valor do sistema
   (1000) — preservando a ordem relativa que já existia entre eles (40→2040,
   50→2050, 60→2060 etc.). Sem isso esses elementos ficavam "atrás" do
   header/rodapé/bottom-nav do sistema sempre que os dois se sobrepunham.
   Só #gpsMap/#gpsMap3D/#gpsFog3D (o mapa em si) continuam com z-index baixo
   de propósito: o mapa é o "fundo" da tela, por baixo do chrome do sistema.
   ════════════════════════════════════════════════════════════════════ */

/* Mapa fullscreen */
#gpsMap      { position: fixed; inset: 0; background: #0b1120; z-index: 0; }
#gpsMap3D    { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .4s ease; }
#gpsMapCanvas { position: absolute; inset: 0; }
#gpsFog3D {
    position: absolute; bottom: 0; left: 0; right: 0; height: 30%;
    background: linear-gradient(to top, rgba(11,17,32,.7), transparent);
    pointer-events: none; z-index: 1; display: none;
}

/* ════════════════════════════════════════════════════════════════════
   LAYOUTS ESPECIAIS DA TELA GPS
   Painel Duplo (independente, aplicarPainelDuplo()) + Cockpit Motorista
   (perspectiva 7, aplicarPerspectiva()) — ambos em rota_gps.php
   ════════════════════════════════════════════════════════════════════ */

/* Painel Duplo — LAYOUT INDEPENDENTE DA PERSPECTIVA (aplicarPainelDuplo() em rota_gps.php).
   Ativado via classe .gps-painel-duplo-ativo no <body>, funciona junto com QUALQUER uma das
   7 perspectivas (não só a nº6). Mapa reduzido à esquerda, dados da viagem à direita — e TODOS
   os demais componentes da tela reajustam a largura automaticamente pra não ficar por baixo dele:
   header/banner, rodapé de status, coluna de botões-bolinha, e os toasts de alerta (via a
   variável --gps-painel-offset, lida em tempo real por mostrarToast() no JS). */
:root { --gps-painel-offset: 0px; }
body.gps-painel-duplo-ativo { --gps-painel-offset: 132px; }

#gpsMap.gps-map--duplo { right: 132px; transition: right .3s ease; }
body.gps-painel-duplo-ativo #gpsNavBanner  { right: 132px; transition: right .3s ease; }
body.gps-painel-duplo-ativo #gpsFooter     { right: 132px; transition: right .3s ease; }
body.gps-painel-duplo-ativo #gpsSideStack  { right: 142px; transition: right .3s ease; }

#gpsPainelLateral {
    /* z-index 2040: acima do chrome do sistema (rdxHeader chega a 1000) — ver bloco
       "CAMADA IMERSIVA GPS" no topo deste arquivo, que explica a faixa 2000+. */
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 2040;
    width: 132px; display: none; flex-direction: column; gap: 8px;
    /* padding-bottom por padrão sem reserva — no desktop o menu inferior do
       sistema não aparece (mesmo raciocínio do #gpsFooter, ver acima) */
    padding: calc(var(--safe-top) + 92px) 8px var(--safe-bottom) 8px;
    background: rgba(10,13,24,.94); border-left: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); overflow-y: auto;
}
@media (max-width: 768px) {
    #gpsPainelLateral { padding-bottom: calc(60px + var(--safe-bottom)); }
}
body.gps-chrome-hidden #gpsPainelLateral { padding-bottom: var(--safe-bottom); }
.gpl-card {
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px; padding: 9px 6px; text-align: center; flex-shrink: 0;
}
.gpl-card i { color: var(--cor-accent); font-size: 15px; margin-bottom: 5px; display: block; }
.gpl-lbl { font-size: 8px; color: #8b98ac; text-transform: uppercase; letter-spacing: .3px; margin-bottom: 3px; }
.gpl-val { font-size: 12px; font-weight: 800; color: #fff; line-height: 1.3; word-break: break-word; }

/* 7 · Motorista — mini-mapa em cima, "pára-brisa" simulado com pista e seta 3D embaixo */
#gpsMap.gps-map--motorista { bottom: 38vh; transition: bottom .3s ease; }

#gpsCockpit {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 2002;
    height: 38vh; display: none; overflow: hidden;
    background: linear-gradient(180deg, #0b1120 0%, #141c2e 55%, #05070c 100%);
}
.gps-cockpit-ceu {
    position: absolute; top: 0; left: 0; right: 0; height: 45%;
    background: linear-gradient(180deg, rgba(108,92,231,.14), transparent);
}
.gps-cockpit-estrada {
    position: absolute; left: 8%; right: 8%; top: 28%; bottom: 22%;
    background: #171d2e;
    clip-path: polygon(40% 0, 60% 0, 97% 100%, 3% 100%);
    overflow: hidden;
}
.gps-cockpit-faixa-central {
    position: absolute; left: 50%; top: 0; bottom: -46px; width: 6px; margin-left: -3px;
    background: repeating-linear-gradient(180deg, #ffd166 0 22px, transparent 22px 46px);
    animation: gpsFaixaMove .6s linear infinite;
}
@keyframes gpsFaixaMove { from { transform: translateY(-46px); } to { transform: translateY(0); } }
.gps-cockpit-seta {
    position: absolute; left: 50%; top: 33%; transform: translate(-50%,-50%) rotate(0deg);
    width: 56px; height: 56px; border-radius: 50%;
    background: rgba(108,92,231,.9); border: 3px solid rgba(255,255,255,.92);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; color: #fff; box-shadow: 0 0 24px rgba(108,92,231,.65);
    transition: transform .3s ease; z-index: 3;
}
.gps-cockpit-dash {
    position: absolute; left: 0; right: 0; bottom: 0; height: 22%;
    background: rgba(10,13,24,.92); border-top: 1px solid rgba(255,255,255,.08);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 20px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.gps-cockpit-vel { display: flex; flex-direction: column; align-items: center; }
.gps-cockpit-vel span { font-size: 21px; font-weight: 900; color: var(--cor-accent); line-height: 1; }
.gps-cockpit-vel small { font-size: 8px; color: #8b98ac; text-transform: uppercase; letter-spacing: .3px; }
.gps-cockpit-dist { font-size: 15px; font-weight: 800; color: #fff; }

/* Banner instrução
   z-index 2050: o chrome do sistema (#rdxHeader) fica sticky com z-index 1000 e continua
   visível nesta tela (só some em tela cheia real via ocultarChromeSistema()). Com z-index 50
   o banner ficava POR TRÁS do #rdxHeader sempre que os dois ocupavam a mesma região — por
   isso "não se ajustava": não era posição, era o banner perdendo a disputa de camadas. */
#gpsNavBanner {
    position: relative; top: var(--safe-top); left: 0; right: 0; z-index: 2050;
    background: rgba(13,17,28,.95); border-bottom: 1px solid rgba(255,255,255,.08);
    padding: 10px 14px; display: flex; align-items: center; gap: 10px;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.gps-nav-seta-box {
    width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0;
    background: rgba(108,92,231,.2); border: 2px solid rgba(108,92,231,.4);
    display: flex; align-items: center; justify-content: center; font-size: 22px; color: #6c5ce7;
}
.gps-nav-instrucao    { flex: 1; min-width: 0; }
.gps-nav-instrucao-txt  { font-size: 14px; font-weight: 800; line-height: 1.3; margin-bottom: 2px; }
.gps-nav-instrucao-dist { font-size: 11px; color: #8b98ac; }
#gpsNavLiveBadge {
    display: none; font-size: 9px; font-weight: 800; color: #e84393;
    white-space: nowrap; flex-shrink: 0; align-items: center; gap: 4px;
    background: rgba(232,67,147,.15); border: 1px solid rgba(232,67,147,.3);
    border-radius: 20px; padding: 3px 8px;
}
#gpsNavLiveBadge.show { display: flex; }

/* Rodapé stats
   z-index 2050: era 0 — bem abaixo do #rdxFooter (99) e do #rdxBottomNav (410) do sistema,
   que continuam visíveis nesta tela. Por isso o rodapé do GPS sumia atrás deles. */
#gpsFooter {
    /* Por padrão encosta na borda de baixo — no desktop o menu inferior do
       sistema (.rdx-bottom-nav) não aparece, então não há espaço a reservar. */
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 2050;
    background: rgba(10,13,24,.97); border-top: 1px solid rgba(255,255,255,.08);
    padding: 8px 14px calc(8px + var(--safe-bottom));
    display: flex; align-items: center;
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
/* No mobile o menu inferior do sistema fica visível por padrão — reserva o espaço dele */
@media (max-width: 768px) {
    #gpsFooter { bottom: var(--bnav-h, 62px); }
}
/* Cabeçalho/rodapé do sistema ocultos (tela cheia real ou via painel do olho):
   o menu inferior some de qualquer forma, então volta a encostar na borda. */
body.gps-chrome-hidden #gpsFooter { bottom: 0; }
.gps-stat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    border-right: 1px solid rgba(255,255,255,.07); }
.gps-stat:last-child { border-right: none; }
.gps-stat .nv { font-size: 14px; font-weight: 800; color: #fff; line-height: 1.1; }
.gps-stat .nl { font-size: 8px; color: #5b667e; text-transform: uppercase; letter-spacing: .4px; }
.gps-stat.destaque .nv { color: #6c5ce7; }

/* Painel lateral de bolinhas — z-index 2060, mesma faixa da "camada imersiva GPS" (ver banner) */
#gpsSideStack {
    position: fixed; right: 10px; top: 50%; transform: translateY(-50%);
    z-index: 2060; display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.gps-ball {
    width: 42px; height: 42px; border-radius: 50%;
    background: rgba(13,17,28,.92); border: 1px solid rgba(255,255,255,.12);
    color: #fff; font-size: 15px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,.5); backdrop-filter: blur(8px);
    transition: transform .15s, background .15s, border-color .15s;
    position: relative; flex-shrink: 0; font-family: inherit; border-style: solid;
    text-decoration: none;
}
.gps-ball:hover  { transform: scale(1.08); background: rgba(108,92,231,.25); border-color: rgba(108,92,231,.4); }
.gps-ball:active { transform: scale(.94); }
.gps-ball.ativo  { background: rgba(108,92,231,.3); border-color: var(--cor-accent); color: var(--cor-accent); }
.gps-ball--kmh {
    flex-direction: column; gap: 0; font-size: 12px; font-weight: 800;
    background: rgba(13,17,28,.95);
}
.gps-ball--kmh small { font-size: 7px; color: #8b98ac; font-weight: 600; line-height: 1; }
.gps-ball--modelo {
    flex-direction: column; gap: 0; background: rgba(13,17,28,.95);
}
.gps-ball--modelo span { font-size: 15px; font-weight: 800; color: var(--cor-accent); line-height: 1; }
.gps-ball--modelo small { font-size: 7px; color: #8b98ac; font-weight: 600; line-height: 1; text-transform: uppercase; }
.gps-ball--sos { border-color: rgba(231,76,60,.4); }
.gps-ball--sos:hover { background: rgba(231,76,60,.25); border-color: #e74c3c; color: #e74c3c; }
.gps-ball--stop {
    background: rgba(231,76,60,.16); border-color: rgba(231,76,60,.5); color: #ff6b5b;
}
.gps-ball--stop:hover { background: rgba(231,76,60,.32); border-color: #e74c3c; color: #fff; }
.gps-ball-sep { width: 32px; height: 1px; background: rgba(255,255,255,.1); margin: 2px 0; }

/* Botão engrenagem */
#gpsBtnConfig {
    position: fixed; top: calc(var(--safe-top) + 130px); left: 10px; z-index: 2060;
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(13,17,28,.92); border: 1px solid rgba(255,255,255,.12);
    color: #fff; font-size: 16px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,.5); backdrop-filter: blur(8px);
    transition: transform .25s, background .15s;
}
#gpsBtnConfig:hover { background: rgba(108,92,231,.25); border-color: rgba(108,92,231,.4); }
#gpsBtnConfig.open  { transform: rotate(90deg); }

/* Botão do olho — abre o painel de visibilidade granular (mostrar/ocultar cada
   elemento da tela de navegação individualmente). Fica sempre visível: não entra
   na lista de itens ocultáveis do próprio painel que ele abre. */
#gpsBtnVisibilidade {
    position: fixed; top: calc(var(--safe-top) + 178px); left: 10px; z-index: 2061;
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(13,17,28,.92); border: 1px solid rgba(255,255,255,.12);
    color: #fff; font-size: 15px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,.5); backdrop-filter: blur(8px);
    transition: transform .15s, background .15s, border-color .15s;
}
#gpsBtnVisibilidade:hover { background: rgba(108,92,231,.25); border-color: rgba(108,92,231,.4); }
#gpsBtnVisibilidade.tem-ocultos { border-color: var(--cor-accent); color: var(--cor-accent); }

/* Painel de configurações */
#gpsConfigPanel {
    position: fixed; left: 10px; z-index: 2070;
    top: calc(var(--safe-top) + 118px);
    width: 260px; max-height: 80vh; overflow-y: auto;
    background: rgba(13,17,28,.97); border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--radius-lg); box-shadow: 0 12px 40px rgba(0,0,0,.7);
    backdrop-filter: blur(16px); display: none; padding: 14px;
    scrollbar-width: thin; scrollbar-color: #1f2940 transparent;
}
#gpsConfigPanel.open { display: block; }
#gpsConfigPanel::-webkit-scrollbar { width: 4px; }
#gpsConfigPanel::-webkit-scrollbar-thumb { background: #1f2940; border-radius: 4px; }

.gps-cfg-titulo { font-size: 11px; font-weight: 800; color: #8b98ac;
    text-transform: uppercase; letter-spacing: .5px;
    padding-bottom: 8px; border-bottom: 1px solid #1f2940;
    margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.gps-cfg-secao { margin-bottom: 14px; }
.gps-cfg-secao-titulo { font-size: 10px; font-weight: 700; color: #8b98ac;
    text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px; }

/* Grade de modelos (5x2) */
.gps-modelo-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 4px; }
.gps-modelo-btn {
    aspect-ratio: 1; border-radius: 8px; border: 1px solid #1f2940;
    background: #0f1525; color: #8b98ac; font-size: 9px; font-weight: 700;
    cursor: pointer; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2px;
    transition: all .15s; font-family: inherit; padding: 4px 2px;
}
.gps-modelo-btn:hover { border-color: var(--cor-accent); color: #fff; }
.gps-modelo-btn.ativo { border-color: var(--cor-accent); background: rgba(108,92,231,.2); color: var(--cor-accent); }
.gm-num  { font-size: 11px; font-weight: 800; }
.gm-nome { font-size: 7px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; text-align: center; }

/* Grade de perspectivas (reaproveita .gps-modelo-grid/.gps-modelo-btn — só o ícone muda) */
.gps-perspectiva-btn .gp-ico { font-size: 13px; }
.gps-perspectiva-btn.ativo .gp-ico { color: var(--cor-accent); }

/* ── Temas visuais dos 10 modelos de navegação ──
   Ativados via atributo data-nav-modelo no <body>, definido em aplicarTemaModelo() (rota_gps.php).
   Muda a aparência real do rodapé e fundo do mapa. O banner (#gpsNavBanner) NÃO participa mais
   disso — agora é uma placa de trânsito com cores realistas (amarelo/azul/verde) e mantém a
   mesma paleta em qualquer modelo, ver bloco "PLACA DE TRÂNSITO" mais abaixo. */
.gps-body[data-nav-modelo] #gpsFooter,
.gps-body[data-nav-modelo] #gpsMap { transition: background .35s ease, border-color .35s ease, box-shadow .35s ease; }

/* 1 · Clássico */
.gps-body[data-nav-modelo="1"] #gpsFooter    { border-top-color: rgba(108,92,231,.3); }
.gps-body[data-nav-modelo="1"] #gpsMap       { background: radial-gradient(circle at 50% 25%, rgba(108,92,231,.08), #0b1120 65%); }

/* 2 · Rodovia */
.gps-body[data-nav-modelo="2"] #gpsFooter    { border-top-color: rgba(149,165,166,.3); }
.gps-body[data-nav-modelo="2"] #gpsMap       { background: linear-gradient(180deg, rgba(149,165,166,.06), #0b1120 60%); }

/* 3 · Neon */
.gps-body[data-nav-modelo="3"] #gpsFooter    { border-top-color: rgba(0,255,204,.4); box-shadow: 0 -2px 20px rgba(0,255,204,.12); }
.gps-body[data-nav-modelo="3"] #gpsMap       { background: radial-gradient(circle at 50% 20%, rgba(0,255,204,.1), #060a14 70%); }

/* 4 · Turbo 3D */
.gps-body[data-nav-modelo="4"] #gpsFooter    { border-top-color: rgba(52,152,219,.35); }
.gps-body[data-nav-modelo="4"] #gpsMap       { background: radial-gradient(circle at 50% 35%, rgba(52,152,219,.1), #0b1120 70%); }

/* 5 · HUD Racing */
.gps-body[data-nav-modelo="5"] #gpsFooter    { border-top-color: rgba(231,76,60,.4); }
.gps-body[data-nav-modelo="5"] #gpsMap       { background: radial-gradient(circle at 50% 15%, rgba(231,76,60,.1), #0b1120 65%); }

/* 6 · Aqua Nav */
.gps-body[data-nav-modelo="6"] #gpsFooter    { border-top-color: rgba(0,188,212,.35); }
.gps-body[data-nav-modelo="6"] #gpsMap       { background: linear-gradient(180deg, rgba(0,188,212,.07), #0b1120 60%); }

/* 7 · Inferno */
.gps-body[data-nav-modelo="7"] #gpsFooter    { border-top-color: rgba(231,76,60,.5); }
.gps-body[data-nav-modelo="7"] #gpsMap       { background: radial-gradient(circle at 50% 90%, rgba(231,76,60,.16), #14060a 70%); }

/* 8 · Matrix */
.gps-body[data-nav-modelo="8"] #gpsFooter    { border-top-color: rgba(0,230,118,.4); }
.gps-body[data-nav-modelo="8"] #gpsMap       { background: radial-gradient(circle at 50% 25%, rgba(0,230,118,.08), #060a08 70%); }

/* 9 · Sunset */
.gps-body[data-nav-modelo="9"] #gpsFooter    { border-top-color: rgba(255,152,0,.4); }
.gps-body[data-nav-modelo="9"] #gpsMap       { background: radial-gradient(circle at 50% 10%, rgba(255,152,0,.14), #1a0f05 65%); }

/* 10 · Cosmos */
.gps-body[data-nav-modelo="10"] #gpsFooter    { border-top-color: rgba(156,39,176,.4); }
.gps-body[data-nav-modelo="10"] #gpsMap       { background: radial-gradient(ellipse at 50% 20%, rgba(156,39,176,.12), #08060f 70%); }

/* Select no config */
.gps-cfg-select {
    width: 100%; padding: 7px 10px; background: #0f1525; color: #fff;
    border: 1px solid #1f2940; border-radius: 8px; font-size: 11px;
    font-family: inherit; outline: none; transition: border-color .15s; -webkit-appearance: none;
}
.gps-cfg-select:focus { border-color: var(--cor-accent); }

/* Range no config */
.gps-range-wrap { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.gps-range-wrap input[type=range] { flex: 1; accent-color: var(--cor-accent); }
.gps-range-val { font-size: 10px; font-weight: 700; color: #fff; min-width: 28px; text-align: right; }
.gps-range-lbl { font-size: 9px; color: #8b98ac; flex-shrink: 0; }

/* Toggle switch config */
.gps-toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.05);
}
.gps-toggle-row:last-child { border-bottom: none; }
.gps-toggle-lbl { font-size: 11px; color: #cdd3e0; display: flex; align-items: center; gap: 6px; }
.gps-toggle-lbl i { font-size: 12px; color: var(--cor-accent); width: 14px; text-align: center; }
.gps-toggle-track {
    width: 34px; height: 18px; border-radius: 9px;
    background: #1f2940; border: 1px solid #2a3550;
    position: relative; cursor: pointer; transition: background .2s; flex-shrink: 0;
}
.gps-toggle-track.on { background: var(--cor-accent); border-color: var(--cor-accent); }
.gps-toggle-thumb {
    position: absolute; top: 2px; left: 2px;
    width: 12px; height: 12px; border-radius: 50%; background: #fff;
    transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.gps-toggle-track.on .gps-toggle-thumb { transform: translateX(16px); }

/* Pílula minimizado */
#gpsNavPill {
    position: fixed; bottom: calc(60px + var(--safe-bottom)); left: 50%; transform: translateX(-50%);
    z-index: 2070; background: rgba(13,17,28,.95); border: 1px solid rgba(108,92,231,.35);
    border-radius: 30px; padding: 8px 16px;
    display: none; align-items: center; gap: 10px; cursor: pointer;
    backdrop-filter: blur(12px); box-shadow: 0 8px 24px rgba(0,0,0,.5); white-space: nowrap;
}
#gpsNavPill.show { display: flex; }
#gpsNavPill i { color: var(--cor-accent); font-size: 13px; }
.gps-pill-txt  { display: flex; flex-direction: column; }
.gps-pill-instr { font-size: 12px; font-weight: 700; color: #fff; }
.gps-pill-dist  { font-size: 10px; color: #8b98ac; }

/* SOS Overlay */
#gpsSosOverlay {
    position: fixed; inset: 0; z-index: 2200;
    background: linear-gradient(180deg, rgba(198,36,36,.95) 0%, rgba(11,14,20,.98) 100%);
    display: none; flex-direction: column; align-items: center; justify-content: center;
    gap: 16px; padding: 20px; text-align: center;
}
#gpsSosOverlay.show { display: flex; }
.gps-sos-icon  { font-size: 60px; animation: rcSosPulse 1s infinite; }
.gps-sos-title { font-size: 20px; font-weight: 900; letter-spacing: .5px; }
.gps-sos-sub   { font-size: 12px; color: rgba(255,255,255,.75); max-width: 280px; line-height: 1.6; }
.gps-sos-contatos { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.gps-sos-cancel {
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
    color: #fff; border-radius: 30px; padding: 10px 24px; font-size: 13px; font-weight: 700;
    cursor: pointer; margin-top: 8px; font-family: inherit;
}

/* Modais GPS */
.gps-modal {
    position: fixed; inset: 0; z-index: 2150; background: rgba(0,0,0,.75);
    display: none; align-items: center; justify-content: center; backdrop-filter: blur(4px);
}
.gps-modal.show { display: flex; }
.gps-sheet {
    background: #131829; border: 1px solid #1f2940; border-radius: 20px;
    max-width: 480px; width: 100%;
    padding: 20px 18px calc(20px + var(--safe-bottom)); max-height: 92vh; overflow-y: auto;
}
.gps-sheet h3 { font-size: 15px; font-weight: 800; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.gps-sheet-desc { font-size: 12px; color: #8b98ac; margin-bottom: 14px; line-height: 1.5; }
.gps-sheet-close {
    float: right; background: rgba(255,255,255,.06); border: none; color: #8b98ac;
    width: 28px; height: 28px; border-radius: 7px; cursor: pointer; font-size: 14px;
    display: flex; align-items: center; justify-content: center;
}
.gps-form-group { margin-bottom: 12px; }
.gps-form-label { display: block; font-size: 10px; font-weight: 700; color: #8b98ac;
    margin-bottom: 4px; text-transform: uppercase; letter-spacing: .4px; }
.gps-form-input {
    width: 100%; padding: 9px 12px; background: #0f1525; color: #fff;
    border: 1px solid #1f2940; border-radius: 8px; font-size: 13px;
    font-family: inherit; outline: none; transition: border-color .15s; -webkit-appearance: none;
}
.gps-form-input:focus { border-color: var(--cor-accent); }
.gps-modal-actions { display: flex; gap: 8px; margin-top: 14px; }
.gps-btn-primary {
    flex: 1; padding: 10px 14px; background: var(--cor-accent); border: none;
    border-radius: 9px; color: #fff; font-size: 13px; font-weight: 700; cursor: pointer;
    font-family: inherit; display: flex; align-items: center; justify-content: center;
    gap: 6px; transition: opacity .15s;
}
.gps-btn-primary:active { opacity: .85; }
.gps-btn-sec {
    padding: 10px 14px; background: #1f2940; border: none; border-radius: 9px;
    color: #8b98ac; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.gps-btn-danger {
    padding: 10px 14px; background: rgba(231,76,60,.15);
    border: 1px solid rgba(231,76,60,.3); border-radius: 9px;
    color: #e74c3c; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.gps-link-box {
    background: #0f1525; border: 1px solid #1f2940; border-radius: 8px;
    padding: 10px 12px; font-size: 11px; word-break: break-all; margin-bottom: 10px;
    display: flex; align-items: center; gap: 8px; color: #fff;
}
.gps-link-box span { flex: 1; }
.gps-copy-btn {
    background: rgba(108,92,231,.15); border: 1px solid rgba(108,92,231,.3);
    color: #6c5ce7; border-radius: 6px; padding: 5px 9px;
    font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap; font-family: inherit;
}

/* ════════════════════════════════════════════════════════════════════
   5. ANIMAÇÕES GLOBAIS
   ════════════════════════════════════════════════════════════════════ */
@keyframes rcSpin     { to { transform: rotate(360deg); } }
@keyframes rcSosPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.7;transform:scale(1.05)} }
@keyframes rcPulse    { 0%,100%{box-shadow:0 0 0 5px rgba(108,92,231,.25)} 50%{box-shadow:0 0 0 12px rgba(108,92,231,.08)} }

/* ════════════════════════════════════════════════════════════════════
   6. RESPONSIVIDADE MOBILE
   ════════════════════════════════════════════════════════════════════ */
/* Linha de config compacta: no celular, veículo/combustível/ida-volta
   viram apenas ícones (sem rótulo/texto) para caber tudo em uma linha só,
   junto com km/L, R$/L e o botão Calcular. No desktop tudo aparece normal
   (ícone + texto), pois há espaço sobrando. */
@media (max-width: 640px) {
    .rota-row-config           { flex-wrap: nowrap; gap: 4px; }
    .rota-isel-static-lbl      { font-size: 6px;justify-content: space-evenly; }
    .rota-isel-trigger         { width: 30px; padding: 0; justify-content: center; gap: 0; }
    .rota-isel-trigger-txt     { display: none; }
    .rota-cfg-kml, .rota-cfg-preco { flex: 1 1 0; min-width: 0; }
    .rota-cfg-kml .rota-cfg-input, .rota-cfg-preco .rota-cfg-input {
        padding: 6px 3px; font-size: 10px; text-align: center;
    }
    .rota-calc-btn   { flex: auto;
        width: 30px;
        padding: 0;
        height: 30px !important;
        justify-content: center;
        gap: 0; }
}

@media (max-width: 480px) {
    .rota-row-locais { grid-template-columns: 1fr 26px 1fr; }
    #gpsFooter .gps-stat .nv { font-size: 12px; }
    .gps-ball { width: 38px; height: 38px; font-size: 13px; }
    #gpsConfigPanel { width: calc(100vw - 20px); }

    /* Painel Duplo — coluna mais estreita no celular (layout independente da perspectiva) */
    body.gps-painel-duplo-ativo { --gps-painel-offset: 104px; }
    #gpsPainelLateral { width: 104px; padding-left: 6px; padding-right: 6px; gap: 6px; }
    #gpsMap.gps-map--duplo { right: 104px; }
    body.gps-painel-duplo-ativo #gpsNavBanner { right: 104px; }
    body.gps-painel-duplo-ativo #gpsFooter    { right: 104px; }
    body.gps-painel-duplo-ativo #gpsSideStack { right: 114px; }
    .gpl-card { padding: 7px 4px; }
    .gpl-val  { font-size: 11px; }

    /* Perspectiva 7 · Motorista — cockpit um pouco mais baixo no celular */
    #gpsCockpit { height: 34vh; }
    #gpsMap.gps-map--motorista { bottom: 34vh; }
    .gps-cockpit-seta { width: 46px; height: 46px; font-size: 20px; }
}

@media (max-width: 360px) {
    .rdash-cnt-grid { grid-template-columns: repeat(2, 1fr); }
    .rdash-quick-grid { grid-template-columns: repeat(2, 1fr); }
    .gps-nav-instrucao-txt { font-size: 13px; }
}

/* Modo paisagem (celular deitado): a coluna de botões-bolinha (#gpsSideStack) é mais
   alta que a tela nesse modo. Sem issSo ela fica centralizada e "trava" com os botões
   de cima/baixo cortados fora da viewport, sem jeito de alcançá-los. Aqui ela vira uma
   lista rolável entre o header e o rodapé, mantendo todos os botões acessíveis. */
@media (orientation: landscape) and (max-height: 500px) {
    #gpsSideStack {
        top: var(--gps-top-off, 0px);
        bottom: var(--gps-bottom-off, 0px);
        transform: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 6px 0;
    }
    #gpsSideStack::-webkit-scrollbar { display: none; }
    .gps-ball { width: 36px; height: 36px; font-size: 13px; }
}

/* ══════════════════════════════════════════════════════
   ROAD INFO — Barra de informações da estrada em tempo real
   Posicionada acima do #gpsFooter, abaixo da área do mapa.
   ══════════════════════════════════════════════════════ */
#gpsRoadInfo {
    position: fixed;
    left: 0; right: 0;
    bottom: calc(var(--gps-footer-h, 52px) + var(--bnav-h, 62px));
    z-index: 2045;
    display: flex; align-items: stretch;
    background: rgba(8, 13, 26, .96);
    border-top: 1px solid rgba(255,255,255,.07);
    border-bottom: 1px solid rgba(255,255,255,.05);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    height: 46px;
    overflow: hidden;
    cursor: pointer;
    transition: bottom .3s ease;
}
body.gps-chrome-hidden #gpsRoadInfo {
    bottom: var(--gps-footer-h, 52px);
}
@media (max-width: 768px) {
    #gpsRoadInfo { bottom: calc(var(--gps-footer-h, 52px) + var(--bnav-h, 62px)); }
    body.gps-chrome-hidden #gpsRoadInfo { bottom: var(--gps-footer-h, 52px); }
}

/* Ajuste do #gpsFooter quando o road info está visível */
body.gri-visible #gpsFooter {
    bottom: calc(46px + var(--bnav-h, 62px));
}
body.gps-chrome-hidden.gri-visible #gpsFooter {
    bottom: 46px;
}
@media (max-width: 768px) {
    body.gri-visible #gpsFooter {
        bottom: calc(46px + var(--bnav-h, 62px));
    }
    body.gps-chrome-hidden.gri-visible #gpsFooter { bottom: 46px; }
}

.gri-bloco {
    flex: 1; display: flex; align-items: center; justify-content: center;
    gap: 5px; padding: 0 4px;
    border-right: 1px solid rgba(255,255,255,.06);
    min-width: 0;
    transition: background .15s;
}
.gri-bloco:last-child { border-right: none; }
.gri-bloco:hover { background: rgba(255,255,255,.04); }

.gri-ico {
    font-size: 12px;
    color: #6c5ce7;
    flex-shrink: 0;
}
.gri-body {
    display: flex; flex-direction: column; align-items: flex-start;
    min-width: 0;
}
.gri-val {
    font-size: 12px; font-weight: 800; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.1;
}
.gri-lbl {
    font-size: 8px; color: #5b667e; text-transform: uppercase;
    letter-spacing: .3px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.gri-sep {
    width: 1px; background: rgba(255,255,255,.06); flex-shrink: 0;
    display: none; /* separadores via border-right nos .gri-bloco */
}

/* ── Alerta de Road Info ── */
#gpsRoadAlert {
    position: fixed;
    left: 10px; right: 60px;
    z-index: 2070;
    display: none; align-items: center; gap: 8px;
    background: rgba(243,156,18,.15);
    border: 1px solid rgba(243,156,18,.5);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 11px; font-weight: 700; color: #f39c12;
    cursor: pointer;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 16px rgba(0,0,0,.4);
    transition: opacity .3s;
}
#gpsRoadAlert.show { display: flex; }
#gpsRoadAlert.severo {
    background: rgba(231,76,60,.15);
    border-color: rgba(231,76,60,.5);
    color: #e74c3c;
}
body.gri-visible #gpsRoadAlert {
    bottom: calc(46px + var(--gps-footer-h, 52px) + var(--bnav-h, 62px) + 8px);
}
body.gps-chrome-hidden.gri-visible #gpsRoadAlert {
    bottom: calc(46px + var(--gps-footer-h, 52px) + 8px);
}
@media (max-width: 768px) {
    body.gri-visible #gpsRoadAlert {
        bottom: calc(46px + var(--gps-footer-h, 52px) + var(--bnav-h, 62px) + 8px);
    }
}

/* ── Ícones de veículo no marker ── */
.gps-veiculo-marker {
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 0 4px rgba(0,0,0,.3);
    transition: transform .2s;
}
.gps-veiculo-marker i { color: #fff; }

/* Cores de fluxo de tráfego no road info */
.gri-val.trafego-leve    { color: #27ae60; }
.gri-val.trafego-moderado { color: #f39c12; }
.gri-val.trafego-intenso  { color: #e74c3c; }

/* Ícone de clima animado */
.gri-ico.chuva { color: #3498db; animation: griPiscaChuva 2s infinite; }
.gri-ico.tempestade { color: #e74c3c; animation: griPiscaChuva .8s infinite; }
@keyframes griPiscaChuva { 0%,100%{opacity:1} 50%{opacity:.5} }

/* ── Painel expandido de road info ── */
#gpsRoadPanel .gps-sheet { max-height: 85vh; overflow-y: auto; }
.gri-panel-secao {
    margin-bottom: 14px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px; padding: 12px 14px;
}
.gri-panel-secao-titulo {
    font-size: 10px; font-weight: 800; color: #5b667e;
    text-transform: uppercase; letter-spacing: .5px;
    margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
}
.gri-panel-secao-titulo i { color: #6c5ce7; }
.gri-panel-linha {
    display: flex; align-items: center; justify-content: space-between;
    padding: 5px 0; font-size: 12px; color: #c0c8d8;
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.gri-panel-linha:last-child { border-bottom: none; }
.gri-panel-linha strong { color: #fff; font-weight: 700; }
.gri-panel-radar-item {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 0; font-size: 11px; color: #c0c8d8;
    border-bottom: 1px solid rgba(255,255,255,.04);
}
.gri-panel-radar-item:last-child { border-bottom: none; }
.gri-panel-radar-ico {
    width: 28px; height: 28px; border-radius: 8px;
    background: rgba(231,76,60,.12); color: #e74c3c;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; flex-shrink: 0;
}
.gri-alerta-item {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 7px 0; font-size: 11px; color: #f39c12;
    border-bottom: 1px solid rgba(255,255,255,.04);
}
.gri-alerta-item:last-child { border-bottom: none; }
.gri-alerta-item i { margin-top: 1px; flex-shrink: 0; }

/* Responsivo do road info */
@media (max-width: 420px) {
    #gpsRoadInfo { height: 42px; }
    .gri-val { font-size: 11px; }
    .gri-lbl { font-size: 7px; }
    .gri-ico  { font-size: 11px; }
}
@media (max-width: 320px) {
    #gpsRoadInfo { height: 38px; }
    .gri-val { font-size: 10px; }
}