/* Identidade Ledu Rotas - brand book v1.0 (ago/2026): Outfit nos titulos,
   Manrope no corpo/UI; verde #22c55e como cor de acao sobre navy #0f172a.
   Cores da marca centralizadas em :root - usar var(...) em regra nova. */
:root {
  --petroleo: #0f172a;
  --superficie: #132039;
  --card-escuro: #1e293b;
  --borda: #334155;
  --verde: #22c55e;
  --verde-txt: #052e16;
  --verde-safe: #15803d;
  --sec: #94a3b8;
  --ambar: #f59e0b;
  --roxo: #a78bfa;
  --azul: #38bdf8;
  --erro: #f87171;
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: 'Manrope', -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--petroleo); color: #f1f5f9; min-height: 100vh;
}
.tela { display: none; padding: 16px; max-width: 480px; margin: 0 auto; min-height: 100vh; }
.tela.ativa { display: block; }

h1 { font-family: 'Outfit', sans-serif; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 8px 0 4px; }
.sub { color: var(--sec); font-size: 13px; margin-bottom: 20px; }

/* splash / login com a marca */
.tela-splash { display: none; flex-direction: column; justify-content: center; }
.tela-splash.ativa { display: flex; }
.splash-marca { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 28px; }
.wordmark { font-family: 'Outfit', sans-serif; font-size: 44px; font-weight: 700; letter-spacing: -0.02em; color: #f8fafc; line-height: 1; }
.wordmark span { color: var(--verde); }
.wordmark-sub { font-size: 12px; color: var(--sec); letter-spacing: 0.34em; text-transform: uppercase; }
.splash-tagline { text-align: center; color: #64748b; font-size: 13px; margin-top: 28px; }

input[type=text] {
  width: 100%; padding: 14px; font-size: 16px; border-radius: 10px; border: 1px solid var(--borda);
  background: var(--card-escuro); color: #f1f5f9; margin-bottom: 12px;
}
button {
  width: 100%; padding: 14px; font-size: 16px; border-radius: 10px; border: none;
  background: var(--verde); color: var(--verde-txt); font-family: 'Manrope', sans-serif;
  font-weight: 700; margin-bottom: 10px; cursor: pointer;
}
button.secundario { background: var(--card-escuro); color: #f1f5f9; border: 1px solid var(--borda); }
button:disabled { opacity: 0.5; }

.topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.topo .sair { width: auto; padding: 8px 12px; font-size: 13px; }

.resumo { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.chip { background: var(--card-escuro); padding: 6px 10px; border-radius: 999px; font-size: 12px; color: var(--sec); }
.chip.alerta { background: #7c2d12; color: #fed7aa; }
/* roxo (nao laranja/verde/azul ja usados) pra "possivel duplicata" ficar
   visualmente diferente de "revisar" - sinal e acao diferentes (pedido real
   27/08/2026: motorista confundia os dois, "revisar" parece endereco errado,
   duplicata e sugestao de juntar). */
.chip.duplicata { background: #4c1d95; color: #ddd6fe; }
/* banner "rota mudou, reotimizar?" (01/09/2026, proposta 2 do plano de
   roteirizacao): aparece na lista depois de juntar/excluir/corrigir pino -
   a sequencia calculada no upload deixa de ser a melhor e o motorista
   recupera ~4km/12min por rota com 1 toque (medido na rota real de 01/09). */
#banner-reotimizar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #1e3a5f; border: 1px solid #2b5c8a; border-radius: 10px;
  padding: 10px 12px; margin-bottom: 12px; font-size: 13px; color: #bfdbfe;
}
#banner-reotimizar button { width: auto; margin: 0; padding: 8px 14px; font-size: 13px; flex-shrink: 0; }
body.tema-claro #banner-reotimizar { background: #dbeafe; border-color: #93c5fd; color: #1e40af; }
/* botao "Recentralizar" da navegacao (02/09/2026): aparece quando o
   motorista arrasta o mapa (pausa o seguir, igual Google Maps) - um toque
   volta a seguir no zoom que ELE escolheu. */
#btn-nav-recentrar {
  position: absolute; bottom: 130px; left: 50%; transform: translateX(-50%);
  width: auto; margin: 0; padding: 10px 18px; font-size: 14px; font-weight: 700;
  background: rgba(15,23,42,.92); color: #f8fafc; border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0,0,0,.35); z-index: 40;
}

.acoes-rota { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.acoes-rota button { margin-bottom: 0; flex: 1; min-width: 120px; }

/* Pedido do motorista Vitor Henrique (07/08/2026, audio): fundo escuro do
   card dificultava ver rapido o que precisa de atencao - fundo BRANCO no
   card, com "ok" em azul clarinho e "revisar" em laranja bem visivel,
   pra bater o olho e saber na hora o que ta certo e o que precisa corrigir. */
.parada {
  background: #ffffff; border-radius: 12px; padding: 12px; margin-bottom: 10px;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  border-left: 4px solid #64748b; box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
/* cores funcionais por tipo - pagina 10 do brand book */
.parada.tipo-comercial { border-left-color: var(--ambar); }
.parada.tipo-condominio { border-left-color: var(--roxo); }
.parada.tipo-residencial { border-left-color: var(--verde); }
.parada.tipo-coleta { border-left-color: var(--azul); }
.parada .info { flex: 1; }
.parada .ordem { color: #64748b; font-size: 12px; }
/* fixo (nao var(--petroleo)) de proposito - o card do .parada e SEMPRE
   branco (#ffffff acima), em qualquer tema. --petroleo muda pro tema claro
   (vira quase branco, pag. de fundo clara) - se o endereco seguisse essa
   variavel, ficava texto quase branco sobre card branco (bug real, motorista
   Victor reportou 27/08/2026: endereco ilegivel no tema claro). */
.parada .endereco { font-size: 14px; margin: 2px 0; color: #0f172a; font-weight: 500; }
.parada .pacotes { font-size: 11px; color: #475569; margin-bottom: 4px; word-break: break-all; }
.parada .tag { font-size: 11px; padding: 3px 8px; border-radius: 999px; display: inline-block; font-weight: 700; }
.parada .navegar {
  width: auto; margin: 0 0 0 8px; padding: 8px 10px; font-size: 18px;
  background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 8px; flex-shrink: 0;
}
.parada .opcoes {
  width: auto; margin: 0 0 0 6px; padding: 8px 10px; font-size: 18px;
  background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 8px; flex-shrink: 0;
}
.parada.modo-selecao { cursor: pointer; }
.parada.selecionada { outline: 2px solid var(--verde); outline-offset: 1px; }
.parada-checkbox {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%;
  border: 2px solid #94a3b8; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #fff; background: #fff;
}
.parada.selecionada .parada-checkbox { background: var(--verde); border-color: var(--verde); color: var(--verde-txt); }

.btn-selecionar-paradas {
  width: 44px; height: 44px; flex-shrink: 0; margin: 0 0 0 auto; padding: 0;
  background: var(--superficie); border: 1px solid #22304d; border-radius: 12px;
  color: #f8fafc; font-size: 18px; cursor: pointer;
}

.barra-selecao-flut {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: #0b1220; border-top: 1px solid #22304d;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  box-shadow: 0 -4px 16px rgba(0,0,0,.35);
}
.barra-selecao-flut span { font-weight: 700; color: #f8fafc; font-size: 14px; }
.barra-selecao-botoes { display: flex; gap: 8px; }
.barra-selecao-botoes button { margin: 0; width: auto; padding: 10px 16px; }
.barra-selecao-botoes button:disabled { opacity: .5; }

.fjp-busca { margin-bottom: 10px; }
.tag.ok { background: #dbeafe; color: #1d4ed8; }
.tag.revisar { background: #fed7aa; color: #9a3412; }
.tag.duplicata { background: #ede9fe; color: #6d28d9; }
/* Botao de juntar direto no card (10/09/2026) - mesmo roxo da tag de
   duplicata, grande o bastante pro dedo (>= 40px de altura). */
.parada .juntar-sugerido {
  display: flex; align-items: center; gap: 6px; width: auto;
  margin: 8px 0 0; padding: 10px 14px; min-height: 40px;
  background: #6d28d9; color: #ffffff; border: 0; border-radius: 10px;
  font-size: 14px; font-weight: 700; cursor: pointer;
}
.parada .juntar-sugerido:active { background: #5b21b6; }
/* Endereco da parada gemea, pro motorista CONFERIR antes de juntar
   (13/09/2026): sem isso a sugestao dava so o numero e ele tinha que rolar a
   lista atras dela - "juntei porque voce falou, mas nao tenho certeza se e". */
.parada .dup-alvo {
  margin: 8px 0 0; padding: 8px 10px;
  background: #f5f3ff; border-left: 3px solid #6d28d9; border-radius: 8px;
  font-size: 13px; line-height: 1.35; color: #3c366b;
}
.parada .dup-alvo b { color: #4c1d95; }
/* "confirmado" (motorista confirmou no mapa manualmente) precisa se destacar
   de "ok" (so geocodificado automatico) - verde seguro da marca, nunca o
   var(--verde) puro sobre fundo claro (regra do brand book). */
/* Login com Google (03/09/2026) */
#bloco-google { display: flex; flex-direction: column; align-items: center; gap: 4px; }
#botao-google { min-height: 44px; display: flex; justify-content: center; }
.login-ou { display: flex; align-items: center; gap: 10px; width: 100%; margin: 6px 0 2px; opacity: .7; }
.login-ou::before, .login-ou::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: .3; }

.tag.confirmado { background: #dcfce7; color: var(--verde-safe); }
.tag.entregue { background: #dcfce7; color: var(--verde-safe); font-weight: 700; }
.tag.pulada { background: #fef3c7; color: #92400e; font-weight: 700; }
.parada.parada-entregue { opacity: 0.55; }
.parada.parada-entregue .endereco { text-decoration: line-through; }
.parada.parada-pulada { opacity: 0.75; }

.lista-vazia {
  text-align: center; padding: 36px 16px; color: var(--sec); background: var(--card-escuro);
  border-radius: 12px; font-size: 14px; line-height: 1.5;
}

.modo-rota { margin-bottom: 16px; }
.modo-opcao {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px;
  background: var(--card-escuro); border: 1px solid var(--borda); border-radius: 10px;
  margin-bottom: 8px; cursor: pointer; font-size: 13px;
}
/* Radio nativo escondido (rendia diferente entre Android/iOS) - o card ja
   muda borda/fundo com :has(input:checked); o indicador vira um circulinho
   proprio desenhado via ::before, consistente em qualquer aparelho. */
.modo-opcao input { appearance: none; -webkit-appearance: none; margin: 0; width: 0; height: 0; }
.modo-opcao::before {
  content: ""; flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px;
  border-radius: 50%; border: 2px solid var(--borda);
}
.modo-opcao:has(input:checked) { border-color: var(--verde); background: #14532d33; }
.modo-opcao:has(input:checked)::before {
  border-color: var(--verde);
  background: radial-gradient(circle, var(--verde) 42%, transparent 48%);
}

#mapa { width: 100%; height: 70vh; border-radius: 12px; margin-bottom: 12px; }
.status-gps { background: var(--card-escuro); padding: 8px 12px; border-radius: 8px; font-size: 13px; margin-bottom: 8px; }
.info-poligono { background: var(--card-escuro); padding: 10px; border-radius: 10px; font-size: 13px; margin-bottom: 10px; }
/* busca manual de lote na tela "Confirmar local" (pedido real Victor,
   27/08/2026) - linha compacta ao lado do botao, nao o input full-width
   padrao (que ocuparia a tela toda sozinho). */
.busca-local-linha { display: flex; gap: 8px; margin-bottom: 4px; }
.busca-local-linha input[type=text] { margin-bottom: 0; }
.busca-local-linha button { width: auto; margin: 0; padding: 0 16px; flex-shrink: 0; }
.busca-local-status { margin: 4px 0 0; font-size: 12px; }

.pino-numero {
  background: var(--verde); color: var(--verde-txt); font-weight: 700; font-size: 12px;
  width: 24px; height: 24px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; border: 2px solid var(--petroleo);
}
.pino-numero.pino-comercial { background: var(--ambar); color: #451a03; }
.pino-numero.pino-condominio { background: #8b5cf6; color: #2e1065; }
.pino-numero.pino-residencial { background: var(--verde); color: var(--verde-txt); }
.pino-numero.pino-coleta { background: var(--azul); color: #0c4a6e; }

.pino-eu-mesmo {
  width: 18px; height: 18px; border-radius: 50%; background: #2563eb;
  border: 3px solid #fff; box-shadow: 0 0 0 2px #2563eb;
  position: relative;
}
.pino-eu-pulso {
  position: absolute; top: -9px; left: -9px; width: 36px; height: 36px;
  border-radius: 50%; background: #2563eb44; animation: pulso-gps 1.6s infinite;
}
/* Seta de direcao (bearing) sobre o pino do motorista na navegacao - gira
   via transform:rotate(...) calculado em JS a partir de 2 fixes de GPS
   consecutivos (rotacionar o mapa Leaflet inteiro nao e estavel sem plugin
   extra; girar so o icone tem o mesmo efeito pratico do Waze). */
.pino-eu-seta {
  position: absolute; top: -20px; left: 50%; width: 16px; height: 16px;
  margin-left: -8px; color: #2563eb; font-size: 16px; line-height: 1;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 1px 2px rgba(0,0,0,.4);
  transform-origin: 50% 18px; transition: transform .25s linear; z-index: 2;
}
@keyframes pulso-gps {
  0% { transform: scale(0.4); opacity: 1; }
  100% { transform: scale(1.3); opacity: 0; }
}
#btn-iniciar-navegacao { background: #2563eb; color: #fff; }

.entrega-atual { display: block; padding: 16px; }
.entrega-endereco { font-size: 18px; font-weight: 600; margin: 6px 0; }
.entrega-pacotes { font-size: 14px; }
#btn-entrega-navegar { background: #2563eb; color: #fff; }
.entrega-acoes-sec { display: flex; gap: 8px; }
.entrega-acoes-sec button { flex: 1; }
.entrega-fim {
  text-align: center; padding: 40px 16px; font-size: 20px;
  background: var(--card-escuro); border-radius: 12px; margin-bottom: 12px;
}

/* Tela de navegacao turn-by-turn - full screen, faixa de instrucao grande
   (legivel com o celular no suporte da moto, sol forte), mapa escuro,
   rodape fixo com ETA/distancia/pacote/Cheguei. Redesenho 12/08/2026,
   modelo aprovado por Rodrigo (referencia: Circuit/Route Planner). */
.tela-nav-full {
  padding: 0; max-width: 480px; display: none; flex-direction: column;
  position: fixed; inset: 0; margin: 0 auto; background: #0b1220;
}
.tela-nav-full.ativa { display: flex; }
.fechar-nav {
  position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 12px; z-index: 30;
  width: 40px; height: 40px; padding: 0; margin: 0; border-radius: 12px;
  background: rgba(15,23,42,.85); color: #f8fafc; font-size: 18px; border: none;
}
/* Faixa de instrucao (topo) - correcao 12/08/2026: o botao "Trocar parada"
   e o X de fechar sao position:absolute (nao ocupam espaco no fluxo), entao
   ficavam LITERALMENTE por cima do texto de distancia/instrucao, que
   comecava no mesmo canto superior esquerdo (bug reportado: "31 km"
   ilegivel atras do botao). Agora a faixa reserva um respiro no topo do
   tamanho da linha de botoes antes do conteudo comecar, como
   Google Maps/Waze (barra de acoes flutuante SEPARADA da faixa de texto). */
.instrucao-nav {
  background: var(--verde); color: var(--verde-txt); display: flex; align-items: center; gap: 16px;
  padding: calc(56px + env(safe-area-inset-top)) 18px 16px;
  box-shadow: 0 8px 30px rgba(34,197,94,.35); flex-shrink: 0; position: relative;
}
.seta-nav { font-size: 44px; line-height: 1; font-weight: 800; flex-shrink: 0; }
.instrucao-nav-texto { min-width: 0; }
.dist-nav { font-family: 'Outfit', sans-serif; font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.txt-nav { font-size: 17px; font-weight: 700; line-height: 1.3; margin-top: 4px; }
.depois-nav {
  background: #0e5c2f; color: #bbf7d0; padding: 8px 18px; font-size: 13px;
  font-weight: 600; flex-shrink: 0;
}
/* Recorte do mapa de navegacao: o div do mapa e MAIOR que a janela e gira
   dentro dela, pro motorista ver o mapa acompanhando o carro sem canto vazio
   aparecendo (14/09/2026). Maior de verdade, nao com scale() - com scale o
   Google renderiza no tamanho pequeno e o mapa fica borrado. */
#mapa-nav-wrap { flex: 1; min-height: 0; width: 100%; position: relative; overflow: hidden;
  background: #e8ecf1; }
#mapa-navegacao { position: absolute; inset: 0; background: #e8ecf1;
  transition: transform .35s ease-out; }
#mapa-nav-wrap.gira #mapa-navegacao {
  top: -30%; left: -30%; width: 160%; height: 160%;
  transform: rotate(var(--giro-mapa, 0deg));
}
#btn-nav-girar {
  position: absolute; bottom: 186px; right: 14px; width: 46px; height: 46px; margin: 0;
  padding: 0; font-size: 20px; line-height: 1; border-radius: 999px;
  background: rgba(15,23,42,.92); color: #f8fafc;
  box-shadow: 0 4px 16px rgba(0,0,0,.35); z-index: 40;
}
#btn-nav-girar.ligado { background: #16a34a; }
.rodape-nav {
  background: var(--petroleo); padding: 12px 18px calc(14px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 14px; border-top: 1px solid #22304d; flex-shrink: 0;
}
/* Rodape em telas estreitas (<=360px) - o chip de pacote (flexivel) ja tem
   ellipsis, mas reduz gap/padding pra sobrar espaco de verdade pros dois
   botoes de acao sem apertar tudo. */
@media (max-width: 360px) {
  .rodape-nav { padding-left: 12px; padding-right: 12px; gap: 8px; }
  .rn-col b { font-size: 16px; }
  #btn-nav-cheguei { padding: 0 14px; font-size: 13px; }
}
.rn-col b { font-family: 'Outfit', sans-serif; font-size: 19px; font-weight: 800; display: block; line-height: 1.1; }
.rn-col span { font-size: 11px; font-weight: 600; color: var(--sec); }
.rn-col.verde, .rn-col b.verde { color: var(--verde); }
.nav-pacote-col { flex: 1; min-width: 0; }
.nav-pacote-col b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#btn-nav-cheguei {
  width: auto; flex-shrink: 0; margin: 0; padding: 0 20px; min-height: 52px;
  background: var(--verde); border-radius: 14px; font-weight: 800; font-size: 14px;
}
.btn-nav-pular {
  width: 52px; flex-shrink: 0; margin: 0; padding: 0; min-height: 52px;
  background: var(--superficie); color: var(--sec); border: 1px solid #22304d;
  border-radius: 14px; font-size: 20px;
}
.pino-destino-nav {
  width: 30px; height: 30px; border-radius: 50%; background: #fff;
  border: 4px solid var(--verde); display: flex; align-items: center; justify-content: center;
  font-size: 14px; box-shadow: 0 2px 10px rgba(0,0,0,.4);
}

/* ---------- Modo mapa (visao geral da rota) - redesenho 12/08/2026,
   mesmo padrao aprovado no GPS: mapa em tela cheia, chips flutuantes de
   progresso, folha inferior com a parada atual. A cor do pino continua
   sendo o TIPO da parada (residencial/comercial/condominio/coleta - regra
   da marca: cor funcional nunca decorativa) - progresso vira um selo de
   check por cima, nao troca a cor. ---------- */
.tela-mapa-full {
  padding: 0; max-width: 480px; display: none; flex-direction: column;
  position: fixed; inset: 0; margin: 0 auto; background: #0b1220;
}
.tela-mapa-full.ativa { display: flex; }
/* O mapa da rota gira com o dedo (14/09/2026). O quadro recorta e o div do
   mapa, 160%, roda dentro dele - assim nao aparece canto vazio em nenhum
   angulo. touch-action:none porque os gestos sao nossos (ver
   _ligarGestosMapaGeral): sem isso o navegador rouba o arrastar. */
.tela-mapa-full #mapa-geral-wrap { flex: 1; min-height: 0; width: 100%; position: relative;
  overflow: hidden; background: #e8ecf1; touch-action: none; }
.tela-mapa-full #mapa-geral { position: absolute; top: -30%; left: -30%; width: 160%; height: 160%;
  transform: rotate(var(--giro-geral, 0deg)); transform-origin: 50% 50%; }
/* Barra fixa de andamento no topo (21/08/2026) - pedido real do Victor
   comparando com o padrao da SPX ("Em Rota / Encerrado" sempre visivel,
   fixo, nao flutuando por cima do mapa). Antes o chip-topo era
   position:absolute sobre o mapa (transparente, sumia visualmente contra
   fundo claro do mapa as vezes) - agora ocupa espaco de verdade no topo
   da tela, o mapa (#mapa-geral, flex:1) preenche o resto abaixo dela. */
.chip-topo {
  position: relative; z-index: 25; flex-shrink: 0;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: calc(10px + env(safe-area-inset-top)) 60px 8px 16px;
  background: #0b1220; border-bottom: 1px solid #1e293b;
}
.chip-flut-num.verde { color: var(--verde); }
.chip-flut-label { white-space: nowrap; }
.chip-flut {
  display: flex; align-items: baseline; gap: 6px;
}
.chip-flut-num { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 16px; color: var(--verde); }
.chip-flut-label { font-size: 11px; font-weight: 600; color: var(--sec); }
.progresso-geral {
  position: relative; z-index: 25; flex-shrink: 0;
  padding: 0 16px 10px; background: #0b1220; border-bottom: 1px solid #1e293b;
}
.progresso-geral-barra { height: 6px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.progresso-geral-fill { height: 100%; background: var(--verde); border-radius: 99px; transition: width .6s cubic-bezier(.16,1,.3,1); }
#status-gps.status-gps { position: relative; flex-shrink: 0; z-index: 25; margin: 0 16px 8px; }

.pino-numero-wrap { position: relative; }
.pino-numero.feito { opacity: .55; }
.pino-check {
  position: absolute; top: -4px; right: -4px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--verde); color: var(--verde-txt); font-size: 9px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; border: 2px solid #0b1220;
}
.pino-atual-anel {
  position: absolute; inset: -6px; border-radius: 50%; border: 3px solid var(--verde);
  animation: anelPulso 1.8s infinite;
}
@keyframes anelPulso { 0% { transform: scale(.85); opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }

.folha-parada {
  background: var(--petroleo); border-radius: 22px 22px 0 0; padding: 8px 18px calc(14px + env(safe-area-inset-bottom));
  box-shadow: 0 -12px 40px rgba(0,0,0,.5); z-index: 30; flex-shrink: 0;
}
.folha-parada .alca { width: 44px; height: 5px; border-radius: 99px; background: var(--borda); margin: 4px auto 12px; }
.folha-linha1 { display: flex; align-items: center; gap: 10px; }
.folha-badge-num { background: var(--verde); color: var(--verde-txt); font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 15px; border-radius: 10px; padding: 5px 10px; }
.folha-de { font-size: 13px; font-weight: 600; color: var(--sec); }
.folha-tag-tipo { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
.folha-tag-tipo::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: currentColor; }
.folha-tag-tipo.tipo-residencial { color: var(--verde); }
.folha-tag-tipo.tipo-comercial { color: var(--ambar); }
.folha-tag-tipo.tipo-condominio { color: var(--roxo); }
.folha-tag-tipo.tipo-coleta { color: var(--azul); }
.folha-endereco { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 21px; line-height: 1.25; margin: 10px 0 2px; letter-spacing: -0.01em; }
.folha-bairro { font-size: 13px; font-weight: 500; color: var(--sec); }
.folha-pacotes { display: flex; gap: 8px; overflow-x: auto; margin: 12px 0 4px; padding-bottom: 4px; }
.folha-pacotes .pac { flex-shrink: 0; display: flex; align-items: center; background: var(--superficie); border: 1px solid #22304d; border-radius: 12px; padding: 8px 12px; }
.folha-pacotes .pac b { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 15px; color: var(--verde); display: block; }
.folha-pacotes .pac span { font-size: 11px; font-weight: 500; color: var(--sec); display: block; margin-top: 2px; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* O detalhe pacote->apartamento vem FECHADO (14/09/2026). Com 14 pacotes num
   condominio a caixa tomava meia tela e tapava o mapa (Victor, em rota:
   "essa informacao ela tampa o mapa, se puder tirar"). Fica a um toque, que
   e onde ele precisa dela - na porta do predio, nao dirigindo. */
.folha-pacotes-abrir {
  width: auto; margin: 0 0 8px; padding: 4px 0; background: none; border: none;
  color: var(--sec); font-size: 12px; font-weight: 600; text-align: left;
  min-height: unset; cursor: pointer;
}
.folha-pacotes-detalhe { display: none; margin: 0 0 8px; padding: 8px 12px; background: var(--superficie); border: 1px solid #22304d; border-radius: 12px; }
.folha-pacotes-detalhe .pac-detalhe-item { display: flex; align-items: center; font-size: 12px; color: var(--sec); padding: 2px 0; }
.folha-pacotes-detalhe .pac-detalhe-item b { color: var(--verde); font-weight: 700; }
.chip-flut-sep { color: var(--sec); font-size: 11px; }
.folha-telefone { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0 4px; }
.folha-telefone span { font-size: 12px; color: var(--sec); font-weight: 600; }
.btn-avisar-whatsapp, .btn-avisar-whatsapp-nav {
  background: #22c55e; color: #fff; border: none; border-radius: 12px;
  padding: 8px 12px; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.btn-avisar-whatsapp-flut-wrap {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 118px;
  z-index: 5; display: flex; align-items: center; gap: 8px;
}
.btn-avisar-whatsapp-flut-wrap button { box-shadow: 0 4px 14px rgba(0,0,0,.3); }
#nav-telefone-info { font-size: 11px; font-weight: 600; color: #fff; background: rgba(0,0,0,.55); border-radius: 8px; padding: 4px 8px; }
.folha-acoes { display: flex; gap: 10px; margin-top: 14px; }
.folha-acoes button { width: auto; margin: 0; border: none; border-radius: 16px; min-height: 58px; font-weight: 800; font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }
.folha-btn-nav { flex: 1.6; background: var(--verde); color: var(--verde-txt); box-shadow: 0 8px 24px rgba(34,197,94,.35); }
.folha-btn-sec { flex: 1; background: var(--superficie); color: #f8fafc; border: 1px solid #22304d !important; flex-direction: column !important; gap: 2px !important; font-size: 19px !important; }
.folha-btn-sec span { font-size: 11px; font-weight: 700; }
.folha-btn-sec.falha { color: var(--erro); }
.folha-btn-sec.ok { color: var(--verde); }

/* ---------- Feedback de campo do Vitor Xerox por video (16/09/2026) ----------
   1) "Puxar a tela pra baixo atualiza em vez de mover o mapa": e o
      puxar-pra-atualizar do Chrome no Android. Desligado no app inteiro -
      aqui nao existe tela em que recarregar por gesto seja desejado, e no
      mapa ele e desastre (o motorista perde a rota na mao).
   2) "O cartao de baixo toma boa parte da tela, e o importante e o mapa":
      tudo do cartao encolhe - letra, botoes, folgas. Mesmos seletores de
      cima, redefinidos aqui de proposito pra ficar registrado o antes e o
      depois lado a lado. */
html, body { overscroll-behavior-y: none; overscroll-behavior-x: none; }
#mapa-nav-wrap, #mapa-geral-wrap, #mapa { overscroll-behavior: none; }

.folha-parada { padding: 6px 14px calc(8px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; }
.folha-parada .alca { margin: 2px auto 6px; }
.folha-badge-num { font-size: 13px; padding: 3px 8px; border-radius: 8px; }
.folha-de { font-size: 12px; }
.folha-tag-tipo { font-size: 11px; }
.folha-endereco { font-size: 17px; line-height: 1.2; margin: 6px 0 1px; }
.folha-bairro { font-size: 12px; }
.folha-pacotes { margin: 6px 0 2px; padding-bottom: 2px; gap: 6px; }
.folha-pacotes .pac { padding: 5px 9px; border-radius: 9px; }
.folha-pacotes .pac b { font-size: 13px; }
.folha-pacotes .pac span { font-size: 10px; }
.folha-pacotes-abrir { margin: 0 0 4px; padding: 2px 0; font-size: 11px; }
.folha-acoes { gap: 8px; margin-top: 8px; }
.folha-acoes button { min-height: 42px; font-size: 14px; border-radius: 12px; }
.folha-btn-nav { box-shadow: 0 4px 14px rgba(34,197,94,.3); }
.folha-btn-sec { font-size: 15px !important; gap: 0 !important; }
.folha-btn-sec span { font-size: 10px; }

.upload-box {
  border: 2px dashed var(--borda); border-radius: 12px; padding: 24px; text-align: center;
  margin-bottom: 16px; color: var(--sec); font-size: 14px;
}
#arquivo-input { display: none; }
.spinner { text-align: center; padding: 24px; color: var(--sec); }

.rotulo-lote {
  background: rgba(15,23,42,0.85) !important; border: none !important;
  color: #f1f5f9 !important; font-size: 10px !important; font-weight: 600;
  padding: 1px 4px !important; box-shadow: none !important; white-space: nowrap;
}
.rotulo-lote::before { display: none !important; }
/* Numero do lote dentro do lote, estilo HERE (11/09/2026): sem caixa, texto
   escuro com contorno branco; tamanho vem do zoom (RotuloLoteOverlay). */
.rotulo-lote-mini {
  color: #1f2937; font-family: system-ui, -apple-system, sans-serif; font-weight: 700;
  line-height: 1.1; text-align: center; white-space: nowrap;
  text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff;
}
.rotulo-lote-mini .rl-principal { display: block; }
.rotulo-lote-mini .rl-sub { display: block; font-size: 0.78em; font-weight: 600; color: #374151; }

.btn-marcar-grande {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-right: 6px; flex-shrink: 0;
  border-radius: 6px; border: 1px solid var(--borda); background: transparent;
  color: var(--sec); font-size: 12px; font-weight: 800; line-height: 1; cursor: pointer;
}
.btn-marcar-grande.ativo {
  background: #f97316; border-color: #f97316; color: #1e1b16;
}
/* Um botao por pacote quando a celula traz varios ("86.87.88.89.90") -
   linha propria em cima do texto, e do tamanho do dedo (10/09/2026). */
.grupo-marcar-grande { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; }
.grupo-marcar-grande .btn-marcar-grande {
  width: auto; min-width: 44px; height: 36px; margin: 0; padding: 0 10px; font-size: 14px;
}

.carimbo-endereco {
  background: rgba(15,23,42,0.92) !important; border: 1px solid #22c55e !important;
  color: #f1f5f9 !important; font-size: 12px !important; font-weight: 700;
  padding: 3px 8px !important; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,0.4) !important;
  white-space: normal; max-width: 220px; text-align: center; line-height: 1.3;
}
.carimbo-endereco::before { display: none !important; }

/* ---------- Menu lateral (hamburguer) - redesenho 12/08/2026: pedido real
   do Rodrigo comparando com o Spoke - um menu fixo pra separar "nova
   planilha / exportar / reotimizar / sair", em vez de 4 botoes empilhados
   competindo com o botao principal 'Iniciar entregas'. ---------- */
.topo-com-menu { display: flex; align-items: center; gap: 12px; }
.topo-com-menu h1 { margin: 0; }
.btn-hamburguer {
  width: 44px; height: 44px; flex-shrink: 0; margin: 0; padding: 0;
  background: var(--superficie); border: 1px solid #22304d; border-radius: 12px;
  color: #f8fafc; font-size: 20px; cursor: pointer;
}
/* Aviso de limite de planilhas + compra da avulsa (14/09/2026) */
.limite-fundo {
  position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 120;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.limite-caixa {
  background: #132039; border-radius: 16px; padding: 20px; width: 100%; max-width: 380px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.limite-caixa b { font-family: 'Outfit', sans-serif; font-size: 17px; }
#limite-pix-codigo { width: 100%; font-family: ui-monospace, monospace; font-size: 12px;
  border-radius: 12px; padding: 10px; resize: none; word-break: break-all; }

.menu-lateral-fundo {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 90;
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.menu-lateral-fundo.visivel { opacity: 1; pointer-events: auto; }
.menu-lateral {
  position: fixed; top: 0; bottom: 0; left: 0; width: 78%; max-width: 300px;
  background: var(--petroleo); border-right: 1px solid #22304d; z-index: 91;
  transform: translateX(-105%); transition: transform .28s cubic-bezier(.16,1,.3,1);
  display: flex; flex-direction: column; padding: calc(20px + env(safe-area-inset-top)) 16px 20px;
  box-shadow: 12px 0 40px rgba(0,0,0,.4);
}
.menu-lateral.aberto { transform: translateX(0); }
.menu-lateral-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; padding: 0 6px; }
.menu-lateral-topo span { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 19px; }
.menu-lateral-topo b { color: var(--verde); }
.menu-item {
  width: 100%; text-align: left; background: none; border: none; color: #f8fafc;
  font-family: 'Manrope', sans-serif; font-size: 16px; font-weight: 600;
  padding: 14px 10px; border-radius: 10px; margin-bottom: 4px; cursor: pointer;
  min-height: 48px;
}
.menu-item:active { background: var(--superficie); }
.menu-espaco { flex: 1; }
.menu-item-sair { color: var(--erro); border-top: 1px solid #22304d; padding-top: 18px; margin-top: 8px; border-radius: 0; }

/* ---------- Banner de atualizacao (12/08/2026) - app instalado nao
   recarrega sozinho quando so troca de app e volta; isso avisa o motorista
   que tem versao nova esperando, sem ele precisar adivinhar. ---------- */
.banner-atualizar {
  /* fica no TOPO, nao embaixo - preso no fundo da tela (posicao antiga)
     tapava o botao de acao de qualquer tela (Iniciar navegacao, Cheguei,
     etc), sempre que uma versao nova era detectada (bug real 12/08/2026:
     motorista com rota de 63 paradas via o aviso em cima do botao). */
  position: fixed; left: 12px; right: 12px; top: calc(14px + env(safe-area-inset-top));
  z-index: 200; background: var(--verde); color: var(--verde-txt); border-radius: 14px;
  padding: 12px 14px; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.4); font-weight: 700; font-size: 14px;
  max-width: 480px; margin: 0 auto;
}
.banner-atualizar button {
  width: auto; margin: 0; padding: 8px 16px; min-height: 40px;
  background: var(--verde-txt); color: #fff; border-radius: 10px; font-size: 13px;
}
/* enquanto o aviso de atualizacao esta visivel (topo, z-index 200), empurra
   pra baixo o conteudo de topo das telas cheias que ficaria escondido atras
   dele - as demais telas rolam normalmente, nao precisam disso. */
body.banner-ativo .tela-mapa-full,
body.banner-ativo .tela-nav-full { padding-top: 64px; }

/* ---------- Seletor de parada dentro da navegacao (12/08/2026) - pedido
   real: motorista pula 2-3 entregas e quer voltar, ou ja sabe que quer ir
   na 15 antes da 6 - o fluxo so-pra-frente (Cheguei/Pular) nao da conta
   disso. Botao no topo da tela de GPS abre uma folha com TODAS as paradas
   pendentes, destaca a atual, toca em qualquer uma pra navegar ate ela -
   nao mexe em entregue/pulada, so troca o destino de agora. ---------- */
.btn-lista-nav {
  position: absolute; top: calc(10px + env(safe-area-inset-top)); left: 12px; z-index: 30;
  width: 44px; height: 44px; padding: 0; margin: 0; border-radius: 12px;
  background: rgba(15,23,42,.85); color: #f8fafc; font-size: 18px; border: none;
  max-width: calc(100% - 66px); overflow: hidden;
}
.badge-lista-nav {
  position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px;
  border-radius: 9px; background: var(--verde); color: var(--verde-txt); font-size: 10px;
  font-weight: 800; display: flex; align-items: center; justify-content: center;
  padding: 0 4px; font-family: 'Manrope', sans-serif;
}
.folha-lista-nav {
  position: fixed; left: 0; right: 0; bottom: 0; max-width: 480px; margin: 0 auto;
  background: var(--petroleo); border-radius: 20px 20px 0 0; z-index: 92;
  transform: translateY(105%); transition: transform .28s cubic-bezier(.16,1,.3,1);
  max-height: 78vh; display: flex; flex-direction: column;
  padding: 10px 16px calc(16px + env(safe-area-inset-bottom));
  box-shadow: 0 -12px 40px rgba(0,0,0,.5);
}
.folha-lista-nav.aberta { transform: translateY(0); }
.folha-lista-nav .alca { width: 44px; height: 5px; border-radius: 99px; background: var(--borda); margin: 4px auto 10px; flex-shrink: 0; }
.folha-lista-nav-titulo { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 19px; margin-bottom: 4px; }
.folha-lista-nav-itens { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.item-editar-pacote {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--superficie); border: 1px solid #22304d; border-radius: 12px; padding: 8px 10px;
}
.input-editar-pacote {
  flex: 1; min-width: 0; background: transparent; border: none; color: #f8fafc;
  font-size: 14px; font-family: inherit; padding: 4px 0;
}
.input-editar-pacote:focus { outline: none; }
.item-lista-nav {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--superficie); border: 1px solid #22304d; border-left: 4px solid var(--verde);
  border-radius: 12px; padding: 12px; margin: 0; cursor: pointer; min-height: 48px;
}
.item-lista-nav.tipo-comercial { border-left-color: var(--ambar); }
.item-lista-nav.tipo-condominio { border-left-color: var(--roxo); }
.item-lista-nav.tipo-coleta { border-left-color: var(--azul); }
.item-lista-nav.atual { background: #14532d; border-color: var(--verde); }
.ilv-num {
  background: var(--petroleo); color: var(--verde); font-family: 'Outfit', sans-serif; font-weight: 800;
  font-size: 13px; border-radius: 8px; padding: 4px 8px; flex-shrink: 0;
}
.ilv-info { min-width: 0; flex: 1; }
.ilv-info b { display: block; font-size: 14px; color: #f8fafc; font-weight: 600; }
.ilv-info small { display: block; font-size: 12px; color: var(--sec); margin-top: 2px; }

/* ---------- Escolha de app de navegacao (padrao Circuit, 12/08/2026) ---------- */
.menu-item-valor { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--verde); }
.opcao-app-nav {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--superficie); border: 1px solid #22304d; border-radius: 12px;
  padding: 14px 12px; margin: 0; cursor: pointer; min-height: 52px;
}
.opcao-app-nav .oan-icone { font-size: 22px; flex-shrink: 0; }
.oan-radio {
  width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--borda);
  flex-shrink: 0; margin-left: auto;
}
.opcao-app-nav.escolhida { border-color: var(--verde); background: #14532d33; }
.opcao-app-nav.escolhida .oan-radio { border-color: var(--verde); background: radial-gradient(circle, var(--verde) 45%, transparent 50%); }

/* Modo externo da tela de navegacao: esconde faixa de instrucao e mapa,
   mostra um cartao centrado com endereco/pacote - o rodape (Cheguei/Pular/
   Trocar parada) fica igual, e por ele o motorista segue a rota continua. */
#tela-navegacao.nav-externa .instrucao-nav,
#tela-navegacao.nav-externa .depois-nav,
#tela-navegacao.nav-externa #mapa-navegacao { display: none !important; }
#tela-navegacao.nav-externa #nav-externa-wrap {
  display: flex !important; flex: 1; align-items: center; justify-content: center;
  padding: calc(70px + env(safe-area-inset-top)) 20px 20px;
}
.nav-externa-card {
  background: var(--superficie); border: 1px solid #22304d; border-radius: 18px;
  padding: 26px 20px; width: 100%; max-width: 380px; text-align: center;
}
.nav-externa-titulo { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 20px; color: var(--verde); }
.nav-externa-endereco { font-size: 16px; font-weight: 700; margin-top: 14px; line-height: 1.35; }
.nav-externa-pacote { font-size: 13px; font-weight: 600; color: var(--sec); margin-top: 6px; }
#btn-nav-externa-reabrir { margin-top: 18px; width: 100%; }

/* ---------- Icones SVG inline (12/08/2026) - trocam os emojis nativos, que
   rendem diferente (e amador) entre Android/iOS. Line-icons simples,
   stroke em currentColor pra herdar a cor do texto em qualquer fundo. ---------- */
.icon-svg { display: inline-block; vertical-align: -4px; width: 18px; height: 18px; flex-shrink: 0; }
.icon-svg.icon-sm { width: 15px; height: 15px; vertical-align: -3px; }
.icon-svg.icon-lg { width: 22px; height: 22px; vertical-align: -5px; }
.icon-spin { animation: icon-girar 1s linear infinite; }
@keyframes icon-girar { to { transform: rotate(360deg); } }

/* ---------- Toast de erro (12/08/2026) - substitui alert() nativo, que
   trava a UI e nao segue a identidade visual. Card escuro, borda vermelha
   sutil, some sozinho ou fecha no X. ---------- */
.toast-erro-wrap {
  position: fixed; left: 12px; right: 12px; top: calc(14px + env(safe-area-inset-top));
  z-index: 500; max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.toast-erro {
  background: #1e1116; border: 1px solid #7f1d1d; color: #fecaca;
  border-radius: 12px; padding: 12px 12px 12px 14px; display: flex; align-items: flex-start;
  gap: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.5); font-size: 13px; line-height: 1.4;
  pointer-events: auto; animation: toast-entra .25s cubic-bezier(.16,1,.3,1);
}
@keyframes toast-entra { from { transform: translateY(-10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.toast-erro .icon-svg { color: var(--erro); margin-top: 1px; }
.toast-erro span { flex: 1; }
.toast-erro button {
  width: auto; margin: 0; padding: 2px 6px; min-height: unset; background: none; border: none;
  color: #fca5a5; font-size: 18px; line-height: 1; cursor: pointer;
}

/* ---------- Telas "premium" (cards flutuantes com blur) - padrao novo
   aplicado a reotimizar/confirmar-local, telas mais antigas que ainda
   usavam o layout quadrado .topo+padding simples. ---------- */
.tela-premium { background: linear-gradient(180deg, #16233f 0%, var(--petroleo) 45%); min-height: 100vh; }
.card-premium {
  background: rgba(30,41,59,.72); backdrop-filter: blur(10px); border: 1px solid #2b3a57;
  border-radius: 18px; padding: 18px; margin-bottom: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.3);
}
.card-premium .topo { margin-bottom: 10px; }
.card-premium h1 { margin-top: 0; }

/* ---------- Trocar parada: botao mais visivel na navegacao (12/08/2026) -
   motorista relatou nao perceber essa opcao. Antes era so icone+badge
   pequenos no canto; agora tem label de texto e tamanho maior. ---------- */
.btn-lista-nav {
  width: auto; height: auto; padding: 10px 14px 10px 12px; border-radius: 14px;
  display: flex; align-items: center; gap: 8px; font-family: 'Manrope', sans-serif;
  font-weight: 700; font-size: 13px;
}
.btn-lista-nav .icon-svg { width: 20px; height: 20px; vertical-align: middle; }
.badge-lista-nav { position: static; margin-left: 2px; }

/* ---------- Visao geral da rota antes de iniciar o GPS (Tarefa 2) -
   reaproveita a base visual do tela-mapa-full, com um botao fixo no rodape
   pra seguir direto pra navegacao da primeira parada. ---------- */
.rodape-visao-geral {
  /* nao flutua mais por cima do mapa (position:absolute bottom:0) - em
     aparelhos com barra de navegacao fisica do Android isso ficava cortado
     pela barra do sistema (relatado 12/08/2026). Agora e um item de flex
     normal, no fim da coluna: ocupa espaco garantido e empurra o mapa
     (flex:1) pra cima, visivel em qualquer aparelho. */
  position: relative; z-index: 30; flex-shrink: 0;
  background: #0b1220;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 10px;
}
.chip-tempo-total {
  align-self: center; background: rgba(15,23,42,.92); backdrop-filter: blur(8px);
  border-radius: 14px; padding: 10px 18px; box-shadow: 0 4px 16px rgba(0,0,0,.3);
  font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 15px; color: #f8fafc;
}
.chip-tempo-total .verde { color: var(--verde); }
#btn-ir-navegacao {
  background: var(--verde); color: var(--verde-txt); font-weight: 800; font-size: 16px;
  box-shadow: 0 8px 24px rgba(34,197,94,.35); display: flex; align-items: center;
  justify-content: center; gap: 8px;
}
.pino-destaque-anel {
  position: absolute; inset: -10px; border-radius: 50%; border: 3px solid var(--verde);
  animation: anelPulso 1.6s infinite;
}

/* ---------- Resumo de fim de rota (Tarefa 4) ---------- */
.resumo-rota-topo { text-align: center; padding: 12px 0 18px; }
.resumo-rota-topo .icon-svg { width: 40px; height: 40px; color: var(--verde); }
.resumo-rota-contagens { display: flex; gap: 10px; margin-bottom: 18px; }
.resumo-rota-contagens .rrc {
  flex: 1; background: var(--card-escuro); border-radius: 14px; padding: 14px 10px; text-align: center;
}
.resumo-rota-contagens .rrc b { display: block; font-family: 'Outfit', sans-serif; font-size: 26px; font-weight: 800; }
.resumo-rota-contagens .rrc span { font-size: 11px; color: var(--sec); font-weight: 600; }
.resumo-rota-contagens .rrc.entregues b { color: var(--verde); }
.resumo-rota-contagens .rrc.pendentes b { color: var(--ambar); }
.resumo-rota-secao-titulo {
  font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 15px; margin: 18px 0 8px;
  display: flex; align-items: center; gap: 8px;
}
.resumo-rota-item {
  background: var(--card-escuro); border-left: 4px solid #64748b; border-radius: 10px;
  padding: 10px 12px; margin-bottom: 8px; font-size: 13px;
}
.resumo-rota-item.nao-entregue { border-left-color: var(--ambar); background: #2a1e0f; }
.resumo-rota-item .rri-nome { font-weight: 700; color: #f8fafc; margin-bottom: 2px; }
.resumo-rota-item .rri-motivo { color: #fbbf24; font-size: 12px; margin-top: 3px; }
.resumo-rota-entregues-lista { opacity: .75; }
.resumo-rota-entregues-lista .resumo-rota-item { border-left-color: var(--verde); padding: 8px 12px; font-size: 12px; }

/* ---------- Paradas por leva (Google Maps, 12/08/2026) - o Google aceita
   ate 10 paradas num link (9 waypoints + destino); os chips escolhem
   quantas mandar por vez. So aparece com Google selecionado. ---------- */
.grupo-paradas-leva { margin-top: 16px; border-top: 1px solid #22304d; padding-top: 12px; }
.grupo-leva-titulo { font-size: 16px; }
.chips-leva { display: flex; gap: 10px; }
.chip-leva {
  flex: 1; margin: 0; padding: 12px 0; background: var(--superficie);
  border: 1px solid #22304d; border-radius: 12px; color: #f8fafc;
  font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 17px;
}
.chip-leva.escolhida { border-color: var(--verde); background: #14532d33; color: var(--verde); }

/* Lista das paradas da leva no card do modo externo - riscadas conforme o
   motorista marca ✓ Cheguei, a atual em destaque. */
.nav-externa-leva { margin-top: 14px; text-align: left; display: flex; flex-direction: column; gap: 6px; }
.nav-leva-item {
  display: flex; align-items: center; gap: 8px; background: var(--petroleo);
  border: 1px solid #22304d; border-radius: 10px; padding: 8px 10px; font-size: 12.5px;
}
.nav-leva-item.atual { border-color: var(--verde); }
.nav-leva-item.feita { opacity: .55; }
.nav-leva-item.feita .nav-leva-end { text-decoration: line-through; }
.nav-leva-num {
  flex-shrink: 0; background: var(--superficie); color: var(--verde);
  font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 12px;
  border-radius: 7px; padding: 3px 7px;
}
.nav-leva-end { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-leva-check { flex-shrink: 0; color: var(--verde); font-weight: 800; }

/* ---------- Tela de Configuracoes (padrao Circuit, 12/08/2026) - secoes
   tituladas com grupos de linhas; cada linha e uma preferencia (valor a
   direita, seta quando abre folha/tela propria). ---------- */
.config-secao-titulo {
  font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--sec);
  margin: 22px 4px 8px;
}
.config-grupo {
  background: var(--card-escuro); border: 1px solid var(--borda);
  border-radius: 14px; overflow: hidden;
}
.config-linha {
  width: 100%; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: none; border: none; border-bottom: 1px solid var(--borda);
  color: #f1f5f9; font-family: 'Manrope', sans-serif; font-size: 15px;
  padding: 14px; margin: 0; border-radius: 0; text-align: left; min-height: 52px;
  text-decoration: none; cursor: default;
}
.config-grupo > .config-linha:last-child { border-bottom: none; }
button.config-linha, a.config-linha { cursor: pointer; }
button.config-linha:active, a.config-linha:active { background: var(--superficie); }
.cfg-label { font-weight: 600; flex: 1; }
.cfg-valor { color: var(--verde); font-weight: 700; font-size: 13px; }
.cfg-seta { color: var(--sec); font-size: 20px; line-height: 1; font-weight: 400; }
.cfg-nota { flex-basis: 100%; font-size: 11.5px; color: var(--sec); margin-top: 2px; }
.config-linha-opcoes { flex-wrap: wrap; }
.cfg-chips { display: flex; gap: 8px; }
.cfg-chip {
  width: auto; margin: 0; padding: 8px 12px; min-height: 38px; font-size: 13px;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px;
  color: #f1f5f9; font-weight: 700;
}
.cfg-chip.escolhida { border-color: var(--verde); background: #14532d33; color: var(--verde); }
.cfg-toggle {
  width: 50px; min-height: 28px; height: 28px; padding: 2px; margin: 0;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 99px;
  display: flex; align-items: center; justify-content: flex-start; flex-shrink: 0;
  transition: background .2s ease;
}
.cfg-toggle-bola {
  width: 22px; height: 22px; border-radius: 50%; background: var(--sec);
  transition: transform .2s ease, background .2s ease;
}
.cfg-toggle.ligado { background: #14532d; border-color: var(--verde); }
.cfg-toggle.ligado .cfg-toggle-bola { transform: translateX(22px); background: var(--verde); }
.config-conta { align-items: center; }
.cfg-conta-nome { font-weight: 800; font-size: 16px; font-family: 'Outfit', sans-serif; }
.cfg-conta-cod { font-size: 12px; color: var(--sec); margin-top: 2px; }
.cfg-conta-plano {
  margin-left: auto; background: #14532d33; border: 1px solid var(--verde);
  color: var(--verde); font-size: 12px; font-weight: 700; border-radius: 99px; padding: 5px 10px;
}
.cfg-sair .cfg-label { color: var(--erro); }

/* ---------- Historico de rotas (padrao Circuit, 12/08/2026) ---------- */
.tela-historico { display: none; flex-direction: column; }
.tela-historico.ativa { display: flex; }
#lista-historico { flex: 1; }
.historico-item {
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
  background: var(--card-escuro); border: 1px solid var(--borda); border-radius: 12px;
  padding: 14px; margin: 0 0 8px; color: #f1f5f9; cursor: pointer; min-height: 60px;
}
.historico-item:active { background: var(--superficie); }
.hist-info { flex: 1; min-width: 0; }
.hist-data { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 15px; }
.hist-detalhe {
  font-size: 12.5px; color: var(--sec); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.historico-rodape {
  position: sticky; bottom: 0; padding: 10px 0 calc(4px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, var(--petroleo) 30%);
}
.historico-rodape button { margin-bottom: 0; }

/* ---------- Tema claro (12/08/2026) - sobrescreve as vars da marca via
   body.tema-claro; cobre login, lista, config, historico e folhas. As telas
   de mapa/GPS ficam como estao (mapa claro + chips escuros funcionam sobre
   qualquer tema). Funcional e legivel, sem perfeccionismo. ---------- */
body.tema-claro {
  --petroleo: #f8fafc;
  --superficie: #e2e8f0;
  --card-escuro: #ffffff;
  --borda: #cbd5e1;
  --sec: #64748b;
  background: var(--petroleo); color: #0f172a;
}
body.tema-claro .tela,
body.tema-claro .menu-lateral,
body.tema-claro .folha-lista-nav { color: #0f172a; }
body.tema-claro input[type=text] { color: #0f172a; }
body.tema-claro button.secundario { color: #0f172a; }
body.tema-claro .wordmark { color: #0f172a; }
body.tema-claro .splash-tagline { color: #64748b; }
body.tema-claro .menu-item,
body.tema-claro .config-linha,
body.tema-claro .cfg-chip,
body.tema-claro .historico-item,
body.tema-claro .ilv-info b,
body.tema-claro .chip-leva,
body.tema-claro .btn-hamburguer { color: #0f172a; }
body.tema-claro .menu-item-sair,
body.tema-claro .cfg-sair .cfg-label { color: #dc2626; }
body.tema-claro .lista-vazia,
body.tema-claro .modo-opcao,
body.tema-claro .status-gps,
body.tema-claro .info-poligono,
body.tema-claro .entrega-fim { color: #0f172a; }
body.tema-claro .parada { box-shadow: 0 1px 3px rgba(15,23,42,0.12); border: 1px solid #e2e8f0; }
body.tema-claro .menu-lateral { border-right-color: var(--borda); box-shadow: 12px 0 40px rgba(15,23,42,.15); }
body.tema-claro .menu-item-sair { border-top-color: var(--borda); }
body.tema-claro .resumo-rota-item .rri-nome { color: #0f172a; }
body.tema-claro .resumo-rota-item.nao-entregue { background: #fef3c7; }
body.tema-claro .resumo-rota-item.nao-entregue .rri-motivo { color: #b45309; }
body.tema-claro .folha-lista-nav-titulo { color: #0f172a; }
body.tema-claro .item-lista-nav { border-color: var(--borda); }
body.tema-claro .item-lista-nav.atual { background: #dcfce7; }
body.tema-claro .item-lista-nav.atual .ilv-info b { color: #14532d; }
body.tema-claro .opcao-app-nav { border-color: var(--borda); color: #0f172a; }
body.tema-claro .opcao-app-nav .ilv-info b { color: #0f172a; }
body.tema-claro .cfg-toggle.ligado { background: #dcfce7; }
body.tema-claro .cfg-chip.escolhida,
body.tema-claro .chip-leva.escolhida { background: #dcfce7; color: #15803d; border-color: #15803d; }
body.tema-claro .cfg-valor { color: #15803d; }
body.tema-claro .cfg-conta-plano { background: #dcfce7; color: #15803d; border-color: #15803d; }
body.tema-claro .historico-rodape { background: linear-gradient(180deg, transparent, #f8fafc 30%); }
body.tema-claro .modo-opcao:has(input:checked) { background: #dcfce7; }

/* Tela de pagamento (Pix) - 03/09/2026 */
.pag-topo { text-align: center; }
.pag-card { background: rgba(255,255,255,.06); border-radius: 14px; padding: 14px 16px; margin: 12px 0; }
.pag-linha { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; }
.pag-linha + .pag-linha { border-top: 1px solid rgba(255,255,255,.08); }
/* Preco cheio riscado ao lado do promocional (14/09/2026) - o motorista tem
   que ver o desconto que esta levando, nao so o valor final. */
.preco-cheio { font-weight: 400; opacity: .55; margin-right: 5px; }
#pag-avulsa-codigo { width: 100%; font-family: ui-monospace, monospace; font-size: 12px;
  border-radius: 12px; padding: 10px; resize: none; word-break: break-all; }
#pag-pix-codigo { width: 100%; font-family: ui-monospace, monospace; font-size: 12px;
  border-radius: 12px; padding: 10px; resize: none; word-break: break-all; }
#pag-aviso { min-height: 20px; color: var(--verde-safe); }

/* Waze/Google E nosso mapa juntos (05/09/2026): escolher app externo escondia
   o mapa do Ledu por completo - o motorista perdia os lotes/pinos e a lista
   da leva. Agora da pra ir e voltar entre os dois sem trocar a preferencia. */
#btn-nav-abrir-externo {
  /* A ESQUERDA do X de fechar (que ocupa 40px + 12px da borda): no primeiro
     desenho os dois ficavam no mesmo canto e o Waze cobria o X - o motorista
     nao conseguia sair da navegacao (print do Victor, 05/09/2026). */
  position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 62px;
  width: auto; margin: 0;
  padding: 8px 14px; font-size: 13px; font-weight: 700;
  background: rgba(15,23,42,.92); color: #f8fafc; border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0,0,0,.35); z-index: 40;
}
#btn-nav-ver-mapa-ledu { margin-top: 8px; }

/* Endereco do destino SEMPRE a vista na navegacao (05/09/2026, comparacao
   com o Circuit feita pelo Victor): antes so aparecia a manobra ("siga na
   direcao oeste"), e o motorista nao via pra onde estava indo. */
.destino-nav {
  display: flex; align-items: baseline; gap: 8px; flex-shrink: 0;
  background: var(--superficie); border-bottom: 1px solid #22304d;
  padding: 8px 14px; font-size: 14px; color: #f8fafc;
}
.destino-nav-rotulo { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--sec); flex-shrink: 0; }
.destino-nav-endereco { font-weight: 700; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#tela-navegacao.nav-externa .destino-nav { display: none !important; }
body.tema-claro .destino-nav { background: #e2e8f0; color: #0f172a; border-bottom-color: #cbd5e1; }

/* Cadastro: cidade atendida + aceite dos termos (05/09/2026) */
#input-cidade {
  width: 100%; padding: 14px; font-size: 16px; border-radius: 10px;
  border: 1px solid var(--borda); background: var(--card-escuro); color: #f1f5f9;
  margin-bottom: 12px;
}
.aceite-termos { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 16px; font-size: 13px; color: var(--sec); }
.aceite-termos input { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.aceite-termos a { color: var(--verde); }

/* Ajuda de como exportar a planilha (05/09/2026): motorista novo trava aqui
   no primeiro dia - o Victor ja sabe de cor, um desconhecido nao. */
.ajuda-planilha { background: var(--superficie); border: 1px solid #22304d; border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; }
.ajuda-planilha summary { cursor: pointer; font-weight: 700; font-size: 14px; color: #f8fafc; }
.ajuda-planilha ol { padding-left: 18px; margin: 10px 0 6px; }
.ajuda-planilha li, .ajuda-planilha p { font-size: 13px; color: var(--sec); line-height: 1.5; }

/* Pix Automatico (08/09/2026): debito mensal autorizado uma vez, sem cartao */
.pag-auto-card { background: rgba(34,197,94,.10); border: 1px solid rgba(34,197,94,.35);
  border-radius: 14px; padding: 14px 16px; margin-top: 14px; }
.pag-auto-card b { color: var(--verde); }
.pag-auto-card button { margin-bottom: 0; }

/* Aviso da tolerancia do debito automatico (08/09/2026): a mensalidade
   venceu, o banco ainda esta tentando debitar e o motorista SEGUE rodando -
   amarelo (atencao), nao vermelho (bloqueio). */
.aviso-assinatura {
  background: #3b2a09; border: 1px solid #78550f; border-radius: 10px;
  padding: 10px 12px; margin-bottom: 12px; font-size: 13px; color: #fde68a;
  line-height: 1.45;
}
body.tema-claro .aviso-assinatura { background: #fef3c7; border-color: #fcd34d; color: #92400e; }

/* Aviso neutro do "voltar" (09/09/2026): "toque de novo pra sair" - nao e erro */
.toast-erro.toast-aviso { background: #1e293b; border-color: #334155; color: #e2e8f0; justify-content: center; }

/* Faixa "sem conexao, mostrando a rota salva" (10/09/2026) - no topo, fina,
   sem bloquear toque em nada; some sozinha quando o servidor volta. */
.aviso-reconectando {
  position: fixed; left: 0; right: 0; top: 0; z-index: 9999;
  padding: calc(4px + env(safe-area-inset-top)) 10px 4px;
  background: #f59e0b; color: #1f1300; font-size: 12px; font-weight: 700;
  text-align: center; pointer-events: none; box-shadow: 0 2px 8px rgba(0,0,0,.25);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Cartao recolhido (19/09/2026, Victor): sobra so alca + numero + endereco
   numa linha, o resto do espaco vira mapa. Ver _ligarFolhaSobeDesce. */
.folha-parada .alca { cursor: pointer; padding: 6px 0; background-clip: content-box; height: 17px; }
.folha-parada.recolhida > :not(.alca):not(.folha-linha1):not(.folha-endereco) { display: none !important; }
.folha-parada.recolhida .folha-endereco { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; margin: 4px 0 0; }
.folha-parada.recolhida .alca::after { content: ""; }