/* ─────────────────────────────────────────────────────────
   Mapa do dia: escala de z-index (documentada aqui pra próxima
   vez que alguém adicionar um elemento flutuante não escolher um
   valor que já colide com outro):
     997  #btn-vaga-proxima
     998  #busca-wrap, #btn-painel
     999  #painel
    1000  .navbar
    1001  #instalar-banner
    2000  #modal-grid
   ───────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────
   Paleta e elevações.
   A ideia é a mesma linguagem visual de mapas profissionais:
   superfície branca, um único azul de acento, cinzas para
   texto e sombra difusa no lugar de borda pesada. Sem
   gradientes escuros — eles competiam com o mapa.
   ───────────────────────────────────────────────────────── */
:root{
    --azul:#1a73e8;
    --azul-escuro:#1765cc;
    --azul-suave:#e8f0fe;

    --verde:#188038;
    --verde-vivo:#34a853;
    --verde-suave:#e6f4ea;

    --vermelho:#c5221f;
    --vermelho-vivo:#ea4335;
    --vermelho-suave:#fce8e6;

    --ambar:#b06000;
    --ambar-vivo:#f9ab00;
    --ambar-suave:#fef7e0;

    --texto:#202124;
    --texto-fraco:#5f6368;
    --texto-leve:#80868b;

    --linha:#e8eaed;
    --linha-forte:#dadce0;
    --fundo:#f8f9fa;

    --elev-1:0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
    --elev-2:0 1px 3px rgba(60,64,67,.3), 0 4px 8px 3px rgba(60,64,67,.15);
    --elev-3:0 4px 8px rgba(60,64,67,.3), 0 12px 28px 6px rgba(60,64,67,.15);
}

html, body { height:100%; margin:0; padding:0; }
body{
    font-family:'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    color:var(--texto);
    background:var(--fundo);
}

/* ── Navbar — flutua sobre o mapa, sem faixa sólida por trás ──
   pointer-events:none pra área transparente não bloquear cliques em
   coisas por baixo/ao redor (ex: a busca) — só os chips (filhos
   diretos, com pointer-events:auto) voltam a ser clicáveis. */
.navbar{
    height:64px;
    background:transparent;
    padding:0 16px;
    position:fixed; top:0; left:0; right:0; z-index:1000;
    pointer-events:none;
}
/* Marca + "ao vivo" moram no mesmo chip flutuante, lado a lado —
   mesma altura da caixa de busca (48px) pra ficarem alinhados */
.nav-esquerda{
    display:flex; align-items:center; gap:12px; height:48px; box-sizing:border-box;
    background:#fff; border-radius:8px; padding:0 16px;
    box-shadow:var(--elev-2);
    pointer-events:auto;
}
.navbar-brand{
    display:flex; align-items:center; gap:10px;
    font-size:19px; font-weight:500; letter-spacing:-.2px;
    color:var(--texto) !important; margin:0;
}
.marca-icone{
    width:28px; height:28px; border-radius:8px; flex-shrink:0;
    background:var(--azul); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:17px; font-weight:700;
    box-shadow:0 2px 6px rgba(26,115,232,.45), var(--elev-1);
}
.marca-destaque{ color:var(--azul); }

/* Fica de fora da navbar (que herda display:flex do Bootstrap) pra não
   disputar layout com a caixa de busca — flutua com posição própria,
   igual #busca-wrap/#painel/#btn-vaga-proxima. No desktop fica logo
   abaixo da busca; no mobile fica abaixo da marca ParkFácil. */
#btn-painel{
    position:fixed; top:64px; right:16px; z-index:998;
    display:inline-flex; align-items:center; gap:6px;
    font-size:14px; font-weight:500; padding:8px 16px; border-radius:8px;
    border:1px solid var(--linha-forte); color:var(--azul);
    background:#fff; text-decoration:none; box-shadow:var(--elev-2);
    transition:background .15s ease, border-color .15s ease, width .15s ease, padding .15s ease, opacity .15s ease;
}
#btn-painel:hover{ background:var(--azul-suave); border-color:transparent; color:var(--azul-escuro); }
.btn-painel-icone{ font-size:15px; line-height:1; flex-shrink:0; }

/* No desktop, tanto o painel de detalhes (#painel, abre a 80px do topo)
   quanto a lista de resultados da busca (#busca-resultados, cresce pra
   baixo a partir da caixa) podem invadir o espaço onde o botão fica —
   e ambos ficam por cima dele (mesmo z-index, mas vêm depois no HTML).
   Mais simples esconder o botão enquanto qualquer um dos dois estiver
   aberto do que tentar espremer tudo naquela faixa de 24px. */
@media (min-width: 641px){
    body:has(#painel.aberto, #busca-resultados.aberto) #btn-painel{ opacity:0; pointer-events:none; }
}

#status-live{
    display:flex; align-items:center; gap:6px;
    font-size:11px; font-weight:500; color:var(--texto-fraco);
    padding-left:10px; border-left:1px solid var(--linha);
}
.bolinha-live{
    width:8px; height:8px; border-radius:50%; flex-shrink:0;
    background:var(--verde-vivo); animation:pulsar 2s infinite;
}
@keyframes pulsar{
    0%   { box-shadow:0 0 0 0 rgba(52,168,83,.55); }
    70%  { box-shadow:0 0 0 7px rgba(52,168,83,0); }
    100% { box-shadow:0 0 0 0 rgba(52,168,83,0); }
}

/* ── Mapa ── */
/* A navbar agora é flutuante (position:fixed) e não reserva espaço
   no fluxo normal — o mapa ocupa a tela inteira, por trás dela. */
#mapa{ height:100vh; width:100%; background:var(--fundo); }

/* ── Botão "vaga livre mais próxima" ── */
#btn-vaga-proxima{
    position:fixed; left:16px; bottom:24px; z-index:997;
    width:52px; height:52px; border-radius:50%;
    background:var(--azul); color:#fff; border:none;
    box-shadow:var(--elev-3); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background .15s ease, transform .15s ease, bottom .2s ease;
}
/* O banner de instalação (bottom:16px, full-width) cobriria esse botão
   por cima — sobe ele enquanto o banner estiver visível. */
body.tem-banner-instalar #btn-vaga-proxima{ bottom:96px; }
#btn-vaga-proxima .material-symbols-outlined{ font-size:24px; }
#btn-vaga-proxima:hover{ background:var(--azul-escuro); }
#btn-vaga-proxima:disabled{ opacity:.6; cursor:wait; transform:none; }
#btn-vaga-proxima.buscando .material-symbols-outlined{ animation:girar 1s linear infinite; }
@keyframes girar{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }

/* ── Busca — flutua sobre o mapa, estilo Google Maps ── */
#busca-wrap{
    position:fixed; top:8px; right:16px; z-index:998;
    width:320px; max-width:calc(100vw - 32px);
}
#busca-caixa{
    display:flex; align-items:center; gap:10px;
    background:#fff; border-radius:8px; box-shadow:var(--elev-2);
    padding:0 14px; height:48px;
}
#busca-caixa .material-symbols-outlined{ color:var(--texto-fraco); font-size:21px; flex-shrink:0; }
#busca-input{
    flex:1; border:none; outline:none; height:100%;
    font-family:'Roboto', Arial, sans-serif; font-size:14.5px; color:var(--texto);
    background:transparent;
}
#busca-input::placeholder{ color:var(--texto-leve); }
/* type="search" traz um "x" nativo em alguns navegadores — já temos o nosso (#busca-limpar) */
#busca-input::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; }
#busca-limpar{
    border:none; background:none; cursor:pointer; color:var(--texto-fraco);
    display:flex; align-items:center; justify-content:center;
    width:26px; height:26px; border-radius:50%; flex-shrink:0;
}
#busca-limpar:hover{ background:var(--fundo); }
#busca-resultados{
    margin-top:6px; background:#fff; border-radius:8px; box-shadow:var(--elev-2);
    overflow:hidden; display:none; max-height:60vh; overflow-y:auto;
}
#busca-resultados.aberto{ display:block; }
.busca-item{
    display:flex; align-items:center; gap:12px;
    padding:11px 14px; cursor:pointer; border-bottom:1px solid var(--linha);
    transition:background .12s ease;
}
.busca-item:last-child{ border-bottom:none; }
.busca-item:hover{ background:var(--fundo); }
.busca-item .material-symbols-outlined{ color:var(--texto-leve); font-size:19px; flex-shrink:0; }
.busca-item-textos{ min-width:0; flex:1; }
.busca-item-nome{ font-size:13.5px; font-weight:500; color:var(--texto); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.busca-item-endereco{ font-size:12px; color:var(--texto-fraco); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.busca-item-remover{
    border:none; background:none; cursor:pointer; color:var(--texto-leve);
    display:flex; align-items:center; justify-content:center;
    width:26px; height:26px; border-radius:50%; flex-shrink:0;
}
.busca-item-remover:hover{ background:var(--vermelho-suave); color:var(--vermelho); }
.busca-item-remover .material-symbols-outlined{ font-size:17px; color:inherit; }
.busca-vazio{ padding:14px; font-size:13px; color:var(--texto-fraco); text-align:center; }
.busca-historico-titulo{
    padding:10px 14px 4px; font-size:11.5px; font-weight:600;
    text-transform:uppercase; letter-spacing:.3px; color:var(--texto-leve);
}

@media (max-width: 640px){
    #busca-wrap{ top:8px; right:12px; transition:width .18s ease, left .18s ease; }

    /* Enquanto a busca está expandida, a marca encolhe pra só o "P" —
       e a busca ganha "left" fixo (em vez de largura fixa), reservando
       esse espaço pra ela em vez de simplesmente invadir por cima. */
    #busca-wrap:not(.colapsada){ left:70px; width:auto; max-width:none; }

    .nav-esquerda{ transition:padding .18s ease, gap .18s ease; }
    .nav-esquerda.compacta{ padding:0 8px; gap:0; }
    .nav-esquerda.compacta .navbar-brand > span:not(.marca-icone),
    .nav-esquerda.compacta #status-live{ display:none; }

    /* Colapsada: só a lupa, pra não tomar espaço da tela */
    #busca-wrap.colapsada{ width:48px; }
    #busca-wrap.colapsada #busca-caixa{
        width:48px; height:48px; padding:0;
        justify-content:center; border-radius:50%; cursor:pointer;
    }
    #busca-wrap.colapsada #busca-input,
    #busca-wrap.colapsada #busca-limpar{ display:none; }

    /* No mobile o botão fica abaixo da marca ParkFácil (não da busca,
       que mora do outro lado). Quando a busca abre, ele encolhe pra só
       o ícone — igual a marca encolhe pra só o "P" — em vez de pular
       pra cima da busca. */
    #btn-painel{ left:14px; right:auto; }
    #btn-painel.compacta{
        width:36px; height:36px; padding:0; gap:0;
        justify-content:center; border-radius:50%;
    }
    #btn-painel.compacta .btn-painel-texto{ display:none; }
}

/* ── Painel lateral: cartão flutuante sobre o mapa ── */
#painel{
    /* 80px = 16px (folga) + 48px (altura da caixa de busca) + 16px (folga) —
       a busca também mora à direita agora, então o painel abre embaixo dela. */
    position:fixed; top:80px; right:16px;
    width:380px; max-height:calc(100vh - 96px);
    background:#fff; border-radius:16px;
    box-shadow:var(--elev-2);
    z-index:999; display:none; flex-direction:column;
    overflow:hidden;
}
#painel.aberto{ display:flex; }

#painel-header{
    background:#fff;
    padding:20px 20px 16px;
    border-bottom:1px solid var(--linha);
    flex-shrink:0; position:relative;
}
#painel-fechar{
    position:absolute; top:12px; right:12px;
    background:transparent; border:none;
    border-radius:50%; width:32px; height:32px;
    font-size:15px; cursor:pointer; color:var(--texto-fraco);
    display:flex; align-items:center; justify-content:center;
    transition:background .15s ease, color .15s ease;
}
#painel-fechar:hover{ background:var(--fundo); color:var(--texto); }

#painel-nome{
    font-size:20px; font-weight:500; color:var(--texto);
    margin:0 36px 6px 0; line-height:1.3; letter-spacing:-.2px;
}
/* Linhas de info com ícone à esquerda — mesmo padrão do painel de
   lugar do Google Maps (ícone cinza, texto ao lado, alinhado). */
.painel-info-row{
    display:flex; align-items:flex-start; gap:12px;
    font-size:13px; color:var(--texto-fraco); margin:0 0 8px 0; line-height:1.4;
}
.painel-info-row .material-symbols-outlined{
    font-size:19px; color:var(--texto-leve); flex-shrink:0;
}
#painel-endereco{ margin-top:2px; }

/* Fechado no momento / horário / valores */
.painel-fechado-banner{
    display:inline-flex; align-items:center; gap:6px;
    font-size:12px; font-weight:500; color:var(--ambar);
    background:var(--ambar-suave); border:1px solid #feefc3;
    border-radius:8px; padding:5px 10px; margin:0 0 10px 0;
}
.painel-fechado-banner .material-symbols-outlined{ font-size:16px; }
.painel-info-linha{
    display:flex; align-items:center; gap:12px;
    font-size:13px; color:var(--texto-fraco); margin:0 0 8px 0;
}
.painel-info-linha .material-symbols-outlined{ font-size:19px; color:var(--texto-leve); flex-shrink:0; }

/* Como chegar: seletor de modo + resultado da rota */
.material-symbols-outlined{
    font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
    font-size:20px; line-height:1; vertical-align:middle;
}
#painel-rota{
    margin:16px 0 4px; padding-top:16px;
    border-top:1px solid var(--linha);
}
.rota-titulo{
    display:flex; align-items:center; gap:5px;
    font-size:12.5px; font-weight:500; color:var(--texto-fraco);
    margin:0 0 8px;
}
.rota-titulo .material-symbols-outlined{ font-size:16px; color:var(--azul); }
/* Botões de modo no estilo do Google Maps: círculo com ícone +
   legenda embaixo, sem contorno — só o círculo muda de cor. */
.rota-modos{ display:flex; gap:4px; justify-content:space-between; }
.rota-modo-btn{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:6px;
    padding:2px 4px; font-size:11.5px; font-weight:500;
    font-family:inherit; color:var(--texto-fraco); background:none; border:none;
    cursor:pointer; transition:color .15s ease;
}
.rota-icone{
    width:40px; height:40px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--azul-suave); color:var(--azul);
    transition:background .15s ease, color .15s ease;
}
.rota-modo-btn .material-symbols-outlined{ font-size:21px; }
.rota-modo-btn:hover .rota-icone{ background:#d2e3fc; }
.rota-modo-btn.ativo{ color:var(--azul); }
.rota-modo-btn.ativo .rota-icone{ background:var(--azul); color:#fff; }
.rota-modo-btn:disabled{ opacity:.45; cursor:default; pointer-events:none; }
#rota-resultado:empty{ display:none; }
#rota-resultado{
    font-size:12.5px; color:var(--texto-fraco); margin:10px 0 0;
    background:var(--fundo); border-radius:8px; padding:9px 12px;
}
#rota-resultado.rota-erro{ color:var(--ambar); background:var(--ambar-suave); }

/* "Abrir no Google Maps" é a ação principal — vem primeiro, largura
   cheia, bem destacada. */
#rota-iniciar{
    display:flex; align-items:center; justify-content:center; gap:4px;
    width:100%; font-size:13px; font-weight:600; color:#fff; background:var(--azul);
    border:none; border-radius:999px; padding:9px 16px; cursor:pointer;
    white-space:nowrap;
}
#rota-iniciar:hover{ background:var(--azul-escuro); }
#rota-iniciar .material-symbols-outlined{ font-size:15px; }

/* Resumo (distância · tempo) e "Limpar rota" dividem a linha de baixo,
   cada um no seu canto — informação de um lado, ação secundária do outro. */
.rota-resumo-linha{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    margin-top:10px;
}
.rota-resumo{ font-size:14px; font-weight:600; color:var(--texto); }
.rota-resumo-sep{ color:var(--texto-leve); font-weight:400; }
#rota-limpar{
    font-size:12px; font-weight:500; color:var(--azul); background:none; border:none;
    cursor:pointer; padding:0; flex-shrink:0; white-space:nowrap;
}
#rota-limpar:hover{ text-decoration:underline; }

/* "Ver passo a passo" — de propósito discreto, é um extra opcional,
   não uma ação no mesmo nível de "Abrir no Google Maps"/"Limpar rota". */
#rota-passos-toggle{
    display:flex; align-items:center; gap:2px; margin-top:12px;
    font-size:11.5px; font-weight:500;
    color:var(--texto-leve); background:none; border:none; cursor:pointer; padding:0;
}
#rota-passos-toggle:hover{ color:var(--azul); }
#rota-passos-toggle .material-symbols-outlined{
    font-size:16px; transition:transform .15s ease;
}
#rota-passos-toggle.aberto .material-symbols-outlined{ transform:rotate(180deg); }
#rota-passos{
    display:none; margin:10px 0 0; padding:8px 0 0 18px;
    border-top:1px solid var(--linha-forte);
}
#rota-passos.aberto{ display:block; }
#rota-passos li{ margin-bottom:7px; line-height:1.4; }
#rota-passos li:last-child{ margin-bottom:0; }
.rota-passo-distancia{ color:var(--texto-leve); font-size:11.5px; }

/* Badges no cabeçalho */
.painel-badges{ display:flex; gap:6px; flex-wrap:wrap; margin:12px 0; }
.painel-badge{
    font-size:12px; font-weight:500;
    padding:5px 11px; border-radius:8px;
    display:inline-flex; align-items:center; gap:5px;
}
.painel-badge-livre   { background:var(--verde-suave);    color:var(--verde); }
.painel-badge-ocupada { background:var(--vermelho-suave); color:var(--vermelho); }
.painel-badge-total   { background:var(--fundo);          color:var(--texto-fraco); }

/* Barra de ocupação */
.barra-wrap{
    background:var(--linha);
    border-radius:999px; height:6px; overflow:hidden;
    margin-bottom:6px;
}
.barra-livre{
    height:100%; border-radius:999px;
    background:var(--verde-vivo);
    transition:width .45s cubic-bezier(.4,0,.2,1);
}
.barra-label{ font-size:12px; color:var(--texto-fraco); text-align:right; margin:0; }

/* Corpo do painel (abaixo do cabeçalho) */
#painel-corpo{
    padding:16px 20px 20px;
    flex:1 1 auto; overflow-y:auto;
}

/* Legenda do grid */
.painel-legenda{ display:flex; gap:14px; margin-bottom:12px; flex-wrap:wrap; }
.painel-legenda span{
    display:flex; align-items:center; gap:6px;
    font-size:12.5px; font-weight:500; color:var(--texto-fraco);
}
.painel-leg-cor{ width:10px; height:10px; border-radius:3px; display:inline-block; }

/* Caixa de observação fixa no rodapé do painel */
#painel-obs{
    margin-top:14px;
    padding:12px 14px;
    background:var(--ambar-suave);
    border-radius:12px;
    font-size:12px;
    color:#7c4a00;
    line-height:1.6;
}
#painel-obs strong{ color:#5c3600; font-weight:500; }

/* Caixa de dica no rodapé do painel */
#painel-dica{
    margin-top:16px;
    background:var(--fundo);
    border-radius:12px;
    padding:14px 16px;
}
#painel-dica p{ font-size:12.5px; color:var(--texto-fraco); margin:0; line-height:1.65; }
#painel-dica strong{ color:var(--texto); font-weight:500; }

/* ── Células do grid (painel compacto) ── */
.vaga-cel-pub{
    border-radius:6px; display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    font-weight:500; color:#fff; box-sizing:border-box;
    flex-shrink:0; line-height:1.2;
}
.pub-livre   { background:var(--verde-vivo); }
.pub-ocupada { background:var(--vermelho-vivo); }
.pub-vazia   { background:var(--fundo); border:1px solid var(--linha); }

/* ── Botão para ampliar o grid ── */
.btn-ampliar{
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:100%; margin-top:14px; padding:10px 16px;
    background:#fff; border:1px solid var(--linha-forte);
    border-radius:8px; font-size:13.5px; font-weight:500;
    color:var(--azul); cursor:pointer;
    transition:background .15s ease, border-color .15s ease;
}
.btn-ampliar:hover{ background:var(--azul-suave); border-color:transparent; }

/* ── Modal do grid ampliado ── */
#modal-grid{
    display:none; position:fixed; inset:0; z-index:2000;
    background:rgba(32,33,36,.6);
    align-items:center; justify-content:center; padding:24px;
}
#modal-grid.aberto{ display:flex; }
#modal-box{
    background:#fff; border-radius:16px;
    padding:28px 30px; max-width:92vw; max-height:88vh;
    box-shadow:var(--elev-3);
    position:relative; width:auto;
    display:flex; flex-direction:column; overflow:hidden;
}
#modal-fechar{
    position:absolute; top:14px; right:16px;
    background:transparent; border:none; font-size:18px; cursor:pointer;
    color:var(--texto-fraco); width:32px; height:32px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    transition:background .15s ease, color .15s ease;
    z-index:1;
}
#modal-fechar:hover{ background:var(--fundo); color:var(--texto); }
/* Só a grade rola de lado — o resto do modal (título, X) fica sempre parado */
#modal-grade-wrap{ overflow:auto; flex:1 1 auto; min-height:0; }
#modal-titulo{
    font-size:20px; font-weight:500; color:var(--texto);
    margin:0 40px 4px 0; letter-spacing:-.2px;
}
#modal-subtitulo{
    display:flex; align-items:center; gap:8px;
    font-size:13px; color:var(--texto-fraco); margin:0 0 14px 0;
}
#modal-subtitulo .material-symbols-outlined{ font-size:17px; color:var(--texto-leve); }

/* Fechado no momento / horário / valores, dentro do modal */
.modal-fechado-banner{
    display:inline-flex; align-items:center; gap:6px;
    font-size:12px; font-weight:500; color:var(--ambar);
    background:var(--ambar-suave); border:1px solid #feefc3;
    border-radius:8px; padding:5px 10px; margin:0 0 10px 0;
}
.modal-fechado-banner .material-symbols-outlined{ font-size:16px; }
.modal-info-linha{
    display:flex; align-items:center; gap:12px;
    font-size:13px; color:var(--texto-fraco); margin:0 0 8px 0;
}
.modal-info-linha .material-symbols-outlined{ font-size:19px; color:var(--texto-leve); flex-shrink:0; }

/* Células do modal (maiores, sempre legíveis) */
.vaga-cel-modal{
    width:64px; height:64px; border-radius:10px;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    font-size:12px; font-weight:500; color:#fff;
    box-shadow:var(--elev-1);
    transition:transform .15s ease, box-shadow .15s ease;
}
.vaga-cel-modal:hover{ transform:translateY(-2px); box-shadow:var(--elev-2); }
.vaga-cel-vazia-modal{ background:var(--fundo); border:1px solid var(--linha); box-shadow:none; }
.modal-legenda{
    display:flex; gap:16px; font-size:13px; font-weight:500;
    color:var(--texto-fraco); margin-bottom:16px;
}
.modal-legenda span{ display:flex; align-items:center; gap:7px; }
.modal-leg-cor{ width:12px; height:12px; border-radius:3px; display:inline-block; }
.modal-badges{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }

/* ── Banner de instalação do PWA ── */
#instalar-banner{
    display:none; align-items:center; gap:12px;
    position:fixed; left:16px; right:16px; bottom:16px; z-index:1001;
    max-width:420px; margin:0 auto;
    background:#fff; border-radius:12px; box-shadow:var(--elev-3);
    padding:12px 14px;
}
#instalar-banner.mostrar{ display:flex; }
#instalar-banner .marca-icone{ width:36px; height:36px; font-size:19px; }
#instalar-banner-texto{ flex:1; font-size:12.5px; color:var(--texto-fraco); min-width:0; }
#instalar-banner-texto strong{ display:block; font-size:14px; color:var(--texto); font-weight:500; margin-bottom:1px; }
#instalar-banner-btn{
    background:var(--azul); color:#fff; border:none; border-radius:8px;
    padding:8px 14px; font-size:13px; font-weight:500; cursor:pointer;
    white-space:nowrap; flex-shrink:0;
}
#instalar-banner-btn:hover{ background:var(--azul-escuro); }
#instalar-banner-fechar{
    background:none; border:none; color:var(--texto-leve); font-size:16px;
    cursor:pointer; padding:4px; line-height:1; flex-shrink:0;
}

/* ── RESPONSIVO MOBILE ── */

/* No celular o painel vira uma "bottom sheet", igual app de mapa */
@media (max-width: 640px){
    .navbar{ padding:0 14px; }
    .nav-esquerda{ height:48px; padding:0 12px; gap:8px; }
    .navbar-brand{ font-size:16px; }
    .marca-icone{ width:24px; height:24px; font-size:14px; }
    #status-live{ font-size:10px; padding-left:8px; }
    #status-live .bolinha-live{ width:6px; height:6px; }
    /* Esconde o "— atualizado às HH:MM:SS" no celular — só o essencial cabe do lado da marca */
    #status-live-detalhe{ display:none; }

    #painel{
        top:auto; bottom:0; left:0; right:0;
        width:auto; max-height:72vh;
        border-radius:16px 16px 0 0;
        box-shadow:0 -4px 20px rgba(60,64,67,.25);
        transition:transform .25s ease;
        transform:translateY(0);
    }
    /* Arrastando com o dedo — sem transição, segue o dedo direto */
    #painel.arrastando{ transition:none; }
    /* "Espiando" — arrastou pra baixo, sobra só uma tira do cabeçalho */
    #painel.peek{ transform:translateY(calc(100% - 64px)); }

    /* Puxador visual da bottom sheet — agora arrastável de verdade */
    #painel-header{ padding:20px 16px 14px; cursor:grab; touch-action:none; }
    #painel-header::before{
        content:""; position:absolute; top:7px; left:50%;
        transform:translateX(-50%);
        width:36px; height:4px; border-radius:999px;
        background:var(--linha-forte);
    }
    #painel-nome{ font-size:17px; }
    #painel-corpo{ padding:14px 16px 20px; }

    /* Modal ocupa tela toda no mobile */
    #modal-grid{ padding:0; align-items:flex-end; }
    #modal-box{
        border-radius:16px 16px 0 0;
        padding:22px 18px 26px;
        max-width:100%;
        max-height:88vh;
        width:100%;
    }
    #modal-titulo{ font-size:17px; }
}