/* Rota de entregas, visual "Faixa de rua": faixa amarela de sinalização com tinta sobre papel claro, asfalto no escuro.
   Tipografia: Rubik 400/500/700/800 (auto-hospedada). Escala: título de tela 24/800, placa da próxima 64 (número), corpo 16, apoio 14 (mínimo).
   Espaçamentos em múltiplos de 4 e 8. Botões: principal 56/48, secundário 48, mínimo 44. Raios: botões 14, cartões 20, folhas 24.
   Profundidade: bordas de 2 px; só o botão amarelo/verde tem a "base" de 4 px (adesivo) e desce 2 px ao toque.
   Uso com uma mão: o que se toca fica embaixo. Rota: faixa tracejada de progresso no topo, demais paradas em coluna ao fundo,
   placa da próxima parada fixa acima das abas. Endereços: barra fixa embaixo só com o avanço; Adicionar e Ler prints no fim da lista.
   Movimento só como resposta (folha, faixa que enche, placa que entra); desligado em prefers-reduced-motion. */

@font-face { font-family: 'Rubik'; font-weight: 400; font-style: normal; font-display: swap; src: url(fonts/rubik-400.woff2) format('woff2'); }
@font-face { font-family: 'Rubik'; font-weight: 500; font-style: normal; font-display: swap; src: url(fonts/rubik-500.woff2) format('woff2'); }
@font-face { font-family: 'Rubik'; font-weight: 700; font-style: normal; font-display: swap; src: url(fonts/rubik-700.woff2) format('woff2'); }
@font-face { font-family: 'Rubik'; font-weight: 800; font-style: normal; font-display: swap; src: url(fonts/rubik-800.woff2) format('woff2'); }

:root {
  --papel: #F3F2ED; --cartao: #FFFFFF; --tinta: #16181B; --mudo: #50555C; --linha: #D6D4CB; --chip: #E8E6DE;
  --faixa: #FFC800; --sobre-faixa: #16181B; --adesivo: #16181B;
  --entregue: #0E7A43; --entregue-bg: #DCF1E3; --entregue-btn: #0E7A43; --sobre-entregue: #FFFFFF;
  --atencao: #8F4300; --atencao-bg: #FFE6CC;
  --erro: #BC241A; --erro-bg: #FDE3E0;
  --link: #0B57C9;
  --fundo-folha: rgba(22,24,27,.55);
  --aba-h: 72px;
  --fonte: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light dark;
}
/* escuro: automático (config. do celular) ou escolhido em Configurações (data-tema no <html>) */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema=claro]) {
    --papel: #121417; --cartao: #1C2025; --tinta: #F2F3F4; --mudo: #A6ADB5; --linha: #2F353C; --chip: #272C33;
    --faixa: #FFD21F; --sobre-faixa: #16181B; --adesivo: #000000;
    --entregue: #5DDB8E; --entregue-bg: #12301F; --entregue-btn: #5DDB8E; --sobre-entregue: #0B2415;
    --atencao: #FFB066; --atencao-bg: #3A2410;
    --erro: #FF8A80; --erro-bg: #3B1816;
    --link: #8DB8FF;
    --fundo-folha: rgba(0,0,0,.65);
  }
}
:root[data-tema=escuro] {
  --papel: #121417; --cartao: #1C2025; --tinta: #F2F3F4; --mudo: #A6ADB5; --linha: #2F353C; --chip: #272C33;
  --faixa: #FFD21F; --sobre-faixa: #16181B; --adesivo: #000000;
  --entregue: #5DDB8E; --entregue-bg: #12301F; --entregue-btn: #5DDB8E; --sobre-entregue: #0B2415;
  --atencao: #FFB066; --atencao-bg: #3A2410;
  --erro: #FF8A80; --erro-bg: #3B1816;
  --link: #8DB8FF;
  --fundo-folha: rgba(0,0,0,.65);
  color-scheme: dark;
}
:root[data-tema=claro] { color-scheme: light; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 16px/1.45 var(--fonte); }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
[hidden] { display: none !important; }

/* estrutura */
.so-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#status { position: sticky; top: 0; z-index: 45; max-width: 640px; margin: 0 auto; padding: 8px 16px; background: var(--papel); color: var(--mudo); font-size: 14px; font-weight: 500; }
#status:empty { display: none; }
#status button { margin-left: 4px; }
main { max-width: 640px; margin: 0 auto; padding: 8px 16px calc(var(--aba-h) + 24px); }
main:has(#rota:not([hidden])) { padding-bottom: calc(var(--aba-h) + env(safe-area-inset-bottom)); }
h2 { font: 800 24px/1.2 var(--fonte); margin: 24px 0 4px; letter-spacing: -.01em; }
h3 { font: 700 16px/1.25 var(--fonte); margin: 0; color: var(--tinta); }
.aviso { color: var(--mudo); font-size: 14px; margin: 4px 0 8px; }
.ajuda { color: var(--mudo); font-size: 14px; margin: 4px 0 8px; }
.dica { display: block; color: var(--mudo); font-size: 14px; margin-top: 4px; }

/* ícones */
svg.ic, button > svg, .btn > svg { flex: none; width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* botões: padrão = ação principal (faixa amarela, contorno e base de tinta, como adesivo); .sec = secundário (cartão com contorno de tinta);
   .entregue = verde; .perigo = texto e contorno vermelhos; .link = texto azul sublinhado; .icone = só ícone (44). */
button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 16px; border-radius: 14px; border: 2px solid var(--adesivo);
  background: var(--faixa); color: var(--sobre-faixa); box-shadow: 0 4px 0 var(--adesivo);
  font: 700 16px/1.1 var(--fonte); text-decoration: none; cursor: pointer;
  transition: transform .1s var(--ease), box-shadow .1s var(--ease), opacity .15s;
}
button:active:not(:disabled), .btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--adesivo); }
button.sec, .btn.alt, .btn.nav { background: var(--cartao); color: var(--tinta); border-color: var(--tinta); box-shadow: none; }
button.sec:active:not(:disabled), .btn.alt:active, .btn.nav:active { transform: none; background: var(--chip); box-shadow: none; }
button.small, .btn.small { min-height: 44px; padding: 0 12px; font-size: 15px; }
button.icone { flex: none; width: 44px; padding: 0; border-color: var(--linha); }
button.icone-g { width: 100%; padding: 0; }
button.grande, .btn.grande { min-height: 56px; font-size: 17px; }
button.entregue { background: var(--entregue-btn); border-color: var(--adesivo); color: var(--sobre-entregue); }
button.perigo { color: var(--erro); border-color: var(--erro); }
button.link { min-height: 44px; min-width: 44px; padding: 0 4px; border: 0; background: transparent; box-shadow: none; color: var(--link); text-decoration: underline; text-underline-offset: 3px; font-size: 14px; font-weight: 500; }
button.link:active:not(:disabled) { transform: none; box-shadow: none; }
button.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--mudo); }
button:disabled { opacity: .4; cursor: default; }
button.x { background: transparent; border-color: transparent; box-shadow: none; color: var(--mudo); font-size: 28px; font-weight: 500; padding: 0 8px; min-width: 44px; min-height: 44px; }
button.x:active:not(:disabled) { transform: none; box-shadow: none; }
button.travado { opacity: .8; border-style: dashed; }

/* campos */
label { display: block; color: var(--mudo); font-size: 14px; font-weight: 500; margin: 12px 0 4px; }
input[type=text], input[type=number], input[type=time], input[type=email], input[type=password], select {
  width: 100%; min-width: 0; min-height: 52px; padding: 8px 12px; border-radius: 14px; border: 2px solid var(--linha);
  background: var(--papel); color: var(--tinta); font: 500 17px/1.25 var(--fonte);
}
input[type=text]:focus, input[type=number]:focus, input[type=time]:focus, input[type=email]:focus, input[type=password]:focus, select:focus { border-color: var(--tinta); }
input[type=time] { appearance: none; -webkit-appearance: none; text-align: left; }
select { font-size: 16px; min-height: 48px; margin-top: 8px; }
input::placeholder { color: var(--mudo); opacity: .85; }
/* caixa de seleção: quadrado de tinta; marcada, vira faixa com o visto */
input[type=checkbox] {
  appearance: none; -webkit-appearance: none; flex: none; width: 26px; height: 26px; margin: 0;
  border: 2px solid var(--tinta); border-radius: 8px; background: var(--cartao); cursor: pointer;
}
input[type=checkbox]:checked {
  background: var(--faixa) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316181B' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / 20px no-repeat;
  border-color: var(--adesivo);
}

/* barra de abas (embaixo, ao alcance do polegar): pílula amarela no ativo, rótulo sempre visível */
.abas {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: repeat(3, 1fr);
  height: calc(var(--aba-h) + env(safe-area-inset-bottom)); padding: 6px 8px calc(8px + env(safe-area-inset-bottom));
  background: var(--cartao); border-top: 2px solid var(--linha);
}
.abas button {
  min-height: 56px; flex-direction: column; gap: 2px; border: 0; border-radius: 12px; padding: 0;
  background: transparent; box-shadow: none; color: var(--mudo); font: 500 14px/1.1 var(--fonte);
}
.abas button:active:not(:disabled) { transform: none; box-shadow: none; background: transparent; }
.abas button[aria-current=page] { color: var(--tinta); font-weight: 700; }
.abas svg { box-sizing: border-box; width: 56px; height: 32px; padding: 4px 16px; border-radius: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: background-color .15s; }
.abas button[aria-current=page] svg { background: var(--faixa); color: var(--sobre-faixa); }

/* tela Endereços */
.travado-sec { opacity: .6; cursor: pointer; }
.titulo-linha { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 4px; min-height: 52px; }
.busca-info { color: var(--mudo); font-size: 14px; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#linhas { display: flex; flex-direction: column; gap: 10px; }
.linha { padding: 12px; background: var(--cartao); border: 2px solid var(--linha); border-radius: 20px; }
.linha.est-ok { border-color: var(--entregue); }
.linha.est-warn { border-color: var(--atencao); }
.linha.est-bad { border-color: var(--erro); }
.l1 { display: flex; align-items: center; gap: 6px; }
.l1 input { flex: 1; min-width: 0; min-height: 52px; }
.num { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--chip); color: var(--tinta); font: 700 15px/1 var(--fonte); font-variant-numeric: tabular-nums; }
.l2 { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; flex-wrap: wrap; }
.qtd { display: inline-flex; align-items: center; border: 2px solid var(--linha); border-radius: 14px; overflow: hidden; background: var(--cartao); }
.qtd button, button.qb { min-height: 44px; width: 44px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--tinta); }
.qtd button:active:not(:disabled), button.qb:active:not(:disabled) { transform: none; background: var(--chip); box-shadow: none; }
.qtd span { min-width: 64px; text-align: center; font-size: 14px; font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; }
.nota, .etq, .obs, .res { margin-left: 0; }
.nota { color: var(--atencao); font-weight: 700; font-size: 14px; margin-top: 8px; }
.etq { color: var(--mudo); font-size: 14px; margin-top: 4px; }
.obs { color: var(--link); font-weight: 500; font-size: 14px; margin-top: 4px; }
.res { margin-top: 8px; font-size: 14px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; border-radius: 999px; padding: 0 12px 0 10px; font-weight: 700; font-size: 14px; }
.chip svg { width: 18px; height: 18px; }
.chip.ok { background: var(--entregue-bg); color: var(--entregue); }
.chip.warn { background: var(--atencao-bg); color: var(--atencao); }
.chip.bad { background: var(--erro-bg); color: var(--erro); }
.res .nome { color: var(--mudo); margin-top: 4px; font-size: 14px; }
.res .acoes { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.res .acoes.grandes button { flex: 1 1 auto; min-height: 48px; }
.desfazer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding: 4px 4px 4px 16px; border-radius: 14px; background: var(--cartao); border: 2px solid var(--linha); font-size: 14px; font-weight: 500; }
.limpar-lista { width: 100%; margin-top: 12px; }
.titulo-linha .busca-info { margin-right: auto; }
.titulo-linha button.icone { flex: none; }
button.icone svg { width: 22px; height: 22px; }
button.perigo.icone { color: var(--erro); border-color: var(--erro); }
.horario { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.horario > div { min-width: 0; }
.horario label { margin-top: 4px; }

/* seleção de uma opção entre várias: segmentos (um bloco com contorno); a escolhida vira faixa com texto em negrito */
.inicio, .seg { display: grid; grid-template-columns: 1fr 1fr; margin: 12px 0 4px; border: 2px solid var(--tinta); border-radius: 14px; overflow: hidden; background: var(--cartao); }
.seg.tres-op { grid-template-columns: repeat(3, 1fr); }
.inicio label, .seg label { display: flex; align-items: center; justify-content: center; margin: 0; min-height: 48px; padding: 4px 8px; text-align: center; color: var(--tinta); font-size: 14px; font-weight: 500; cursor: pointer; }
.seg.quatro label:nth-child(n+3) { border-top: 2px solid var(--linha); }
.seg.quatro label:nth-child(even), .seg.tres-op label + label { border-left: 2px solid var(--linha); }
.inicio input, .seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.inicio label:has(input:checked), .seg label:has(input:checked) { background: var(--faixa); color: var(--sobre-faixa); font-weight: 700; }
.inicio label:has(input:focus-visible), .seg label:has(input:focus-visible) { outline: 3px solid var(--tinta); outline-offset: -5px; }
/* resumo das opções da rota: linha tocável no topo da lista */
.resumo-opcoes {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px; margin: 8px 0 12px; padding: 6px 12px 6px 16px;
  background: var(--cartao); border: 2px solid var(--linha); border-radius: 14px; color: var(--tinta); box-shadow: none; font: 500 14px/1.4 var(--fonte); text-align: left;
}
.resumo-opcoes:active:not(:disabled) { transform: none; background: var(--chip); box-shadow: none; }
/* o JS separa os trechos com " · " em texto solto: some (corpo 0) e entram traços verticais */
.resumo-opcoes .ro-texto { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 0 12px; font-size: 0; }
.resumo-opcoes .ro-texto > span { font-size: 14px; }
.resumo-opcoes .ro-texto > span + span { padding-left: 12px; border-left: 2px solid var(--linha); }
.resumo-opcoes svg { color: var(--mudo); }
.sem-horario, .rota-horario.sem { display: inline-block; padding: 1px 8px; border-radius: 8px; background: var(--atencao-bg); color: var(--atencao); font-weight: 700; }
.rota-horario { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--mudo); }
.rota-horario.sem { margin: 0 0 4px; padding: 2px 8px; }
#rota > .rota-horario { align-self: flex-start; }

/* fim da lista: adicionar endereço e ler prints, lado a lado */
.acoes-lista { margin: 16px 0 24px; }
.acoes-lista-bt { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.acoes-lista-bt button { min-width: 0; min-height: 52px; padding: 0 8px; font-size: 15px; line-height: 1.1; }
.acoes-lista-bt svg { width: 22px; height: 22px; }
.acoes-lista-bt #rotas-btn { grid-column: 1 / -1; }
.acoes-lista.vazia .acoes-lista-bt { grid-template-columns: 1fr; }
.acoes-lista.vazia .acoes-lista-bt button { min-height: 56px; font-size: 17px; }
.vazio-lista { margin: 0 0 12px; padding: 20px 16px; text-align: center; color: var(--mudo); border: 2px dashed var(--linha); border-radius: 20px; font-size: 15px; font-weight: 500; }
.acoes-lista small { display: block; margin-top: 8px; color: var(--mudo); font-size: 14px; }

/* barra fixa: só o avanço (Conferir endereços / Iniciar), com "Conferir de novo" ao lado quando tudo está verde */
.barra-acoes {
  position: sticky; bottom: calc(var(--aba-h) + env(safe-area-inset-bottom)); z-index: 40;
  display: grid; grid-template-columns: 1fr; gap: 10px; margin: 8px -16px 0; padding: 12px 16px 14px; background: var(--papel); border-top: 2px solid var(--linha);
}
.barra-acoes:has(#reconferir:not([hidden])) { grid-template-columns: 1fr 2fr; }
.barra-acoes button { width: 100%; min-width: 0; min-height: 56px; padding: 0 8px; font-size: 16px; line-height: 1.15; }
.barra-acoes svg { width: 24px; height: 24px; }
/* carregando: o Conferir fica desligado durante a conferência, com um indicador */
#conferir:disabled::after { content: ''; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 3px solid currentColor; border-right-color: transparent; animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
/* 341–380 px: "Conferir de novo" não cabe em uma linha; mostra "De novo" ao lado do ícone (aria-label/title seguem "Conferir de novo") */
@media (max-width: 380px) { .barra-acoes #reconferir .rot { font-size: 0; white-space: nowrap; } .barra-acoes #reconferir .rot::after { content: 'De novo'; font-size: 16px; } }
/* abaixo de 340 px: só o ícone */
@media (max-width: 340px) { .barra-acoes:has(#reconferir:not([hidden])) { grid-template-columns: 56px 1fr; } .barra-acoes #reconferir .rot { display: none; } }

/* folha: molde único (grabber, cabeçalho, grupos) */
.folha { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; justify-content: flex-end; }
.folha-fundo { position: absolute; inset: 0; background: var(--fundo-folha); animation: aparecer .2s ease-out; }
.folha-corpo {
  position: relative; width: 100%; max-width: 640px; margin: 0 auto; max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 12px; padding: 8px 16px calc(20px + env(safe-area-inset-bottom));
  background: var(--cartao); border: 3px solid var(--tinta); border-bottom: 0; border-radius: 24px 24px 0 0; animation: subir .22s var(--ease);
}
.folha-corpo:focus { outline: none; }
.grabber { flex: none; align-self: center; width: 44px; height: 5px; margin-top: 2px; border-radius: 3px; background: var(--linha); }
.folha-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.folha-cab h2 { margin: 4px 0; font-size: 22px; }
.folha .ajuda { margin: 0; }
.folha .trechos { flex-direction: column; flex-wrap: nowrap; }
.folha .trechos:empty { display: none; }
.folha .trechos .btn, .folha > .folha-corpo > button { width: 100%; }
.folha-opcoes .folha-corpo { gap: 20px; }
.folha-opcoes .folha-cab { margin-bottom: -8px; }
.grupo-op { display: flex; flex-direction: column; gap: 8px; }
.grupo-op h3 { font: 800 18px/1.15 var(--fonte); color: var(--tinta); }
.grupo-op .inicio { margin: 0; grid-template-columns: 1fr; border-color: var(--linha); }
.grupo-op .inicio label { justify-content: flex-start; gap: 12px; text-align: left; font-size: 16px; padding: 4px 16px; }
.grupo-op .inicio label + label { border-top: 2px solid var(--linha); }
.grupo-op .inicio label::before { content: ''; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--tinta); background: var(--cartao); }
.grupo-op .inicio label:has(input:checked) { background: var(--chip); color: var(--tinta); }
.grupo-op .inicio label:has(input:checked)::before { background: var(--faixa); border-color: var(--adesivo); box-shadow: inset 0 0 0 4px var(--faixa), inset 0 0 0 11px var(--adesivo); }
.grupo-op .horario { margin-top: 0; }
.grupo-op .horario label { margin-top: 0; }
.grupo-op .ajuda { margin: 0; }
.grupo-op .seguir { margin: 0; color: var(--tinta); font-size: 16px; font-weight: 500; }
.grupo-op > button.small { align-self: flex-start; }

/* tela Rota: faixa tracejada no topo, paradas que faltam alinhadas ao fundo, placa fixa embaixo */
#rota { display: flex; flex-direction: column; min-height: calc(100dvh - var(--aba-h) - env(safe-area-inset-bottom) - 16px); }
.topo-rota { display: flex; align-items: center; gap: 12px; min-height: 56px; }
.topo-rota > button { flex: none; width: 44px; min-height: 44px; }
.resumo { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; }
.resumo-n { flex: none; display: inline-block; transform-origin: left center; font: 800 26px/1 var(--fonte); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* a faixa do meio da rua: traços de 14 px; os feitos enchem em verde (largura vinda do JS, só estilo aqui) */
.barra { flex: 1; height: 12px; background: repeating-linear-gradient(90deg, var(--linha) 0 14px, transparent 14px 20px); transform-origin: left center; }
.barra i { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--entregue) 0 14px, transparent 14px 20px); animation: enche .4s var(--ease); }
@keyframes enche { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.resumo.pop .resumo-n { animation: pop .3s ease-out; }
.resumo.pop .barra { animation: pop-barra .3s ease-out; }
@keyframes pop { 40% { transform: scale(1.15); } }
@keyframes pop-barra { 40% { transform: scaleY(1.6); } }
.vazio { margin: 24px 0; padding: 24px 16px; text-align: center; color: var(--mudo); border: 2px dashed var(--linha); border-radius: 20px; font-weight: 500; }

/* a placa da próxima parada: fixa acima das abas (zona do polegar); a lista rola por cima, sem ser coberta */
#proxima {
  position: sticky; bottom: calc(var(--aba-h) + env(safe-area-inset-bottom)); z-index: 40;
  margin: 0 -16px; padding: 10px 16px 12px; background: var(--papel); border-top: 2px solid var(--linha);
}
#proxima:empty { display: none; }
.placa { position: relative; background: var(--cartao); border: 3px solid var(--tinta); border-radius: 20px; padding: 6px 16px 14px; transition: transform .26s var(--ease), opacity .26s var(--ease); }
.placa::before { content: ''; position: absolute; inset: 5px; border: 1.5px solid var(--linha); border-radius: 14px; pointer-events: none; }
.placa > * { position: relative; }
.placa-caixa.entrando { animation: entrar .22s var(--ease); }
@keyframes entrar { from { transform: translateX(32px); opacity: 0; } }
.placa-cab { display: flex; align-items: center; gap: 8px; min-height: 48px; font-size: 14px; color: var(--mudo); }
.placa-cab .leg { order: -1; flex: 0 1 auto; min-width: 0; padding: 3px 12px; border-radius: 999px; background: var(--faixa); color: var(--sobre-faixa); border: 2px solid var(--adesivo); font-weight: 700; font-size: 14px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.placa-cab .chip-pac { margin-right: auto; }
.chip-pac { flex: none; display: inline-block; padding: 3px 12px; border-radius: 999px; background: var(--chip); color: var(--tinta); font-size: 14px; font-weight: 700; white-space: nowrap; }
.placa-nota { color: var(--mudo); font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.placa-etq { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; min-width: 0; }
.placa-etq-r { flex: none; color: var(--mudo); font-size: 14px; font-weight: 700; }
.placa-etq-v { min-width: 0; color: var(--tinta); font-size: 18px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.placa-end { margin: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; font: 800 20px/1.2 var(--fonte); letter-spacing: 0; }
.placa-rua { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.placa-num { flex: none; max-width: 60%; font: 800 64px/1 var(--fonte); letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.apoio { margin-top: 4px; color: var(--mudo); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-rua { min-width: 0; }
.t-num { flex: none; white-space: nowrap; }
.placa .etq, .placa .obs { margin-left: 0; margin-top: 4px; }
.acoes-placa { display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px; margin: 12px 0 4px; }
.acoes-placa > * { min-width: 0; }
.placa.concluida { padding-bottom: 16px; }

/* Entregue por arrastar a placa para a direita (fundo verde por trás) */
.placa-caixa { position: relative; margin: 12px 0 8px; border-radius: 20px; }
.fundo-entregue { position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; padding-left: 24px; border-radius: 20px; background: var(--entregue-btn); color: var(--sobre-entregue); font-size: 20px; font-weight: 800; opacity: min(1, calc(var(--p, 0) * 10)); }
.fundo-entregue svg { width: 28px; height: 28px; stroke-width: 3; }
.placa-caixa .placa { z-index: 1; margin: 0; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.placa.arrasta { transition: none; }
.dica-arrasto { margin-top: 8px; text-align: center; font-size: 14px; color: var(--mudo); }

/* atalhos de rota em várias paradas (no menu) */
.trechos { display: flex; flex-wrap: wrap; gap: 8px; }

details#novaParada summary, details#feitasBox summary, details.bloco summary { cursor: pointer; color: var(--tinta); font-weight: 700; min-height: 48px; display: flex; align-items: center; }
details.folha-bloco > summary { min-height: 56px; padding: 0 16px; color: var(--tinta); font-size: 17px; border: 2px solid var(--tinta); border-radius: 14px; justify-content: space-between; list-style: none; }
details.folha-bloco > summary::-webkit-details-marker { display: none; }
details.folha-bloco[open] > summary { margin-bottom: 8px; }
details#novaParada summary::after, details#feitasBox summary::after, details.bloco summary::after, .parada summary::after {
  content: ''; flex: none; width: 9px; height: 9px; margin: -3px 4px 0 10px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
}
details#novaParada[open] > summary::after, details#feitasBox[open] > summary::after, details.bloco[open] > summary::after, .parada details[open] > summary::after { transform: rotate(225deg); margin-top: 3px; }

/* demais paradas: coluna com a linha tracejada do meio da rua */
.linha-rota { list-style: none; margin: auto 0 8px; padding: 8px 0 0; position: relative; display: flex; flex-direction: column-reverse; }
.linha-rota:empty { display: none; }
.linha-rota::before { content: ''; position: absolute; left: 15px; top: 36px; bottom: 28px; width: 0; border-left: 3px dashed var(--linha); }
.parada { position: relative; padding-left: 48px; padding-right: 48px; border-bottom: 2px solid var(--linha); }
.alca-p { position: absolute; right: 0; top: 10px; z-index: 1; }
button.alca { touch-action: none; cursor: grab; min-width: 44px; min-height: 44px; }
button.mover-b { min-width: 44px; }
.movendo { position: relative; z-index: 6; background: var(--cartao); outline: 2px solid var(--tinta); }
.alvo { outline: 3px solid var(--tinta); outline-offset: -3px; }
.aviso-tempos { margin: 8px 0; padding: 8px 12px; border-radius: 14px; background: var(--atencao-bg); color: var(--atencao); border: 2px solid var(--atencao); font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.seguir { display: flex; align-items: center; gap: 12px; min-height: 48px; }
.pn { position: absolute; left: 0; top: 16px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--cartao); border: 2px solid var(--tinta); font: 700 15px/1 var(--fonte); font-variant-numeric: tabular-nums; }
.parada summary { display: flex; align-items: center; gap: 8px; min-height: 64px; list-style: none; cursor: pointer; }
.parada summary::-webkit-details-marker { display: none; }
.pt { flex: 1; min-width: 0; }
.pr { display: flex; gap: .3em; font-weight: 700; font-size: 17px; white-space: nowrap; min-width: 0; }
.pr .t-rua { overflow: hidden; text-overflow: ellipsis; }
.ap { color: var(--mudo); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd { padding: 0 0 12px; }
.pd .etq, .pd .obs { margin-left: 0; margin-top: 4px; }
.pd .botoes { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; align-items: center; }

/* entregues, histórico, listas simples */
ul.simples, ol.simples { list-style: none; padding: 0; margin: 0; font-size: 14px; color: var(--mudo); }
ul.simples li, ol.simples li { padding: 10px 0; border-bottom: 2px solid var(--linha); display: flex; align-items: center; gap: 8px; }
ul.simples li > span, ol.simples li > span { flex: 1; min-width: 0; }
ul.simples li button { margin-left: auto; flex: none; }
ul.simples li.feito, ol.simples li.feito { color: var(--entregue); font-weight: 500; }
.novaParadaBox { display: grid; grid-template-columns: 1fr 80px; gap: 8px; margin-top: 4px; }
.novaParadaBox button { grid-column: 1 / -1; }

/* tutorial da primeira abertura */
.tut-passo { margin: 0; color: var(--mudo); font-size: 14px; font-weight: 700; }
#tutorial h2 { margin: 4px 0 0; font-size: 26px; }
.tut-texto { margin: 0; font-size: 17px; line-height: 1.45; }
.tut-pontos { display: flex; gap: 8px; }
.tut-pontos span { width: 10px; height: 10px; border-radius: 50%; background: var(--linha); }
.tut-pontos span.on { background: var(--faixa); outline: 2px solid var(--adesivo); }
.tut-nav { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.tut-nav button { min-height: 56px; }
/* escolha do app de mapas: fica acima do mapa de ajuste (z-index 1000) */
.folha-mapas { z-index: 1100; }
.opcoes-mapa { display: grid; gap: 8px; }
.opcoes-mapa button { width: 100%; min-height: 56px; justify-content: flex-start; padding: 0 16px; font-size: 17px; }
.lembrar { display: flex; align-items: center; gap: 12px; min-height: 48px; margin: 0; color: var(--tinta); font-size: 16px; font-weight: 500; cursor: pointer; }
@keyframes aparecer { from { opacity: 0; } }
@keyframes subir { from { transform: translateY(100%); } }

/* aviso Entregue / Desfazer */
.snack {
  position: fixed; left: 16px; right: 16px; bottom: calc(var(--aba-h) + env(safe-area-inset-bottom) + 12px); z-index: 60;
  max-width: 608px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 4px 4px 4px 16px; border-radius: 14px; background: var(--tinta); color: var(--papel); border: 2px solid var(--papel); font-weight: 700; animation: subir-snack .22s var(--ease);
}
.snack button { background: transparent; color: var(--papel); border-color: currentColor; }
@keyframes subir-snack { from { transform: translateY(16px); opacity: 0; } }

/* tela Configurações */
.cfg { margin-bottom: 8px; }
.cfg h2 { margin-top: 24px; }
.acoesRota { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.acoesRota button { font-size: 15px; }

/* mapa da rota e rotas anteriores */
#mapaRota { position: fixed; inset: 0; z-index: 1000; background: var(--papel); display: flex; flex-direction: column; }
#mapaRota-div { flex: 1; min-height: 0; }
.mapa-barra .mapa-info { flex: 1 1 100%; font-size: 14px; font-weight: 500; color: var(--mudo); }
.mapa-barra .mapa-info:empty { display: none; }
.mapa-rodape-rota { flex-wrap: wrap; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
.mapa-rodape-rota span { flex: 1 1 100%; font-size: 14px; }
.mapa-rodape-rota span:empty { display: none; }
.mapa-rodape-rota .grande { flex: 1 1 100%; }
/* pinos: pendente = tinta; feito = cinza; próxima = faixa com borda de tinta; partida = azul (cores fixas: o mapa não muda com o tema) */
.pino-rota span { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; box-sizing: border-box; border-radius: 50%; border: 3px solid #fff; font: 800 15px/1 'Rubik', system-ui, sans-serif; background: #16181B; color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.5); }
.pino-rota.feito span { background: #6F757C; opacity: .9; }
.pino-rota.prox span { background: #FFC800; color: #16181B; border-color: #16181B; font-size: 19px; }
.pino-rota.partida span { background: #0B57C9; border-width: 2px; }
.lista-rotas { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.item-rota { width: 100%; min-height: 64px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; padding: 8px 16px; text-align: left; }
.item-rota span { font-weight: 500; font-size: 14px; color: var(--mudo); }
.acoes-rp { display: grid; gap: 8px; margin: 12px 0; }
#rotasPassadas > div > button.grande { width: 100%; }

/* mapa para ajustar a posição */
#mapa { position: fixed; inset: 0; z-index: 1000; background: var(--papel); display: flex; flex-direction: column; }
#mapa-div { flex: 1; min-height: 0; }
.mapa-barra, .mapa-rodape { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--cartao); }
.mapa-barra { flex-wrap: wrap; border-bottom: 2px solid var(--linha); }
.mapa-rodape { border-top: 2px solid var(--linha); }
.mapa-barra span { flex: 1 1 100%; font-size: 16px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mapa-rodape span { flex: 1; font-size: 14px; color: var(--mudo); }

@media (max-width: 359px) { .placa-num { font-size: 48px; } .horario { grid-template-columns: 1fr; } .acoesRota { grid-template-columns: 1fr; } .acoes-placa { grid-template-columns: 1fr 1.3fr; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* parada de carro: um número por linha, com pacotes, Entregue e Desfazer */
.casas { list-style: none; margin: 8px 0 0; padding: 0; }
.casa { padding: 8px 0; border-top: 2px solid var(--linha); }
.casa-l { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.casa-t { display: flex; align-items: center; gap: 8px; min-width: 0; }
.casa-num { font: 800 26px/1 var(--fonte); font-variant-numeric: tabular-nums; white-space: nowrap; }
.casa-b { display: flex; align-items: center; gap: 8px; }
.casa.feita .casa-num { color: var(--mudo); text-decoration: line-through; }
.casa .etq, .casa .obs { margin-left: 0; margin-top: 4px; }
.botoes-carro { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.etq.carro { color: var(--entregue); font-weight: 700; }

/* entrada (login), aceite dos termos e Conta */
.entrada { position: fixed; inset: 0; z-index: 2000; overflow-y: auto; overscroll-behavior: contain; background: var(--papel); padding: env(safe-area-inset-top) 16px calc(24px + env(safe-area-inset-bottom)); }
.entrada:focus { outline: none; }
.entrada-corpo { max-width: 420px; margin: 0 auto; padding-top: 24px; display: flex; flex-direction: column; gap: 8px; }
.entrada-corpo > div, .entrada form { display: flex; flex-direction: column; gap: 8px; }
.entrada form label { margin: 4px 0 0; }
.entrada-marca { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--tinta); font: 700 16px/1.2 var(--fonte); }
.marca-ic { flex: none; width: 40px; height: 40px; }
.marca-ic rect { fill: var(--faixa); stroke: var(--adesivo); stroke-width: 2.5; }
.marca-ic path { stroke: var(--sobre-faixa); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 4 5; fill: none; }
.entrada h2 { margin: 12px 0 8px; font-size: 32px; }
.entrada .ajuda, .entrada p { margin: 0; }
.entrada .ou { text-align: center; }
.entrada button.grande { width: 100%; }
.entrada button.link { align-self: flex-start; }
.entrada-msg { padding: 12px; border-radius: 14px; font-size: 15px; font-weight: 500; background: var(--erro-bg); color: var(--erro); border: 2px solid var(--erro); }
.entrada-msg[data-tipo=info] { background: var(--entregue-bg); color: var(--entregue); border-color: var(--entregue); }
.abas-login { display: grid; grid-template-columns: 1fr 1fr; border: 2px solid var(--tinta); border-radius: 14px; overflow: hidden; }
.abas-login button { min-height: 48px; border: 0; border-radius: 0; box-shadow: none; font-size: 15px; padding: 0 8px; }
.abas-login button:active:not(:disabled) { transform: none; box-shadow: none; }
.abas-login button + button { border-left: 2px solid var(--tinta); }
.abas-login button[aria-selected=true] { background: var(--faixa); color: var(--sobre-faixa); }
.abas-login button:focus-visible { outline-offset: -5px; }
.aceite-item { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 8px 12px; border: 2px solid var(--linha); border-radius: 14px; background: var(--cartao); }
.aceite-item .lembrar { width: 100%; }
.folha-legal { z-index: 2100; }
.legal-texto h3 { margin: 16px 0 4px; color: var(--tinta); font-size: 17px; }
.legal-texto p { margin: 4px 0; }
.legal-texto ul { margin: 4px 0; padding-left: 20px; }
.legal-texto li { margin: 4px 0; }
.legal-tabela { overflow-x: auto; margin: 8px 0; }
.legal-texto table { border-collapse: collapse; min-width: 480px; font-size: 14px; }
.legal-texto th, .legal-texto td { border: 2px solid var(--linha); padding: 8px; text-align: left; vertical-align: top; }
.legal-aviso { padding: 8px 12px; border-radius: 14px; background: var(--atencao-bg); color: var(--atencao); font-size: 14px; font-weight: 500; }
button.cheio { width: 100%; }
button.perigo-cheio { background: var(--erro); border-color: var(--adesivo); color: #fff; }
:root[data-tema=escuro] button.perigo-cheio { color: #1A0B0A; }
@media (prefers-color-scheme: dark) { :root:not([data-tema=claro]) button.perigo-cheio { color: #1A0B0A; } }

/* ---- versão de teste: faixa do plano, Perfil, Assinatura, folha, cadastro, tutorial ---- */
.faixa { display: flex; align-items: center; gap: 8px; border-radius: 14px; padding: 8px 8px 8px 12px; margin: 4px 0 8px; font-size: 14px; font-weight: 700; border: 2px solid transparent; }
.faixa span { flex: 1; min-width: 0; }
.faixa button { flex: none; min-height: 44px; }
.f-teste { background: var(--chip); color: var(--tinta); border-color: var(--linha); }
.f-ultimo { background: var(--atencao-bg); color: var(--atencao); border-color: var(--atencao); }
.f-vencida { background: var(--erro-bg); color: var(--erro); border-color: var(--erro); }
.menu-perfil { display: grid; gap: 10px; margin-top: 12px; }
.menu-perfil button { justify-content: space-between; text-align: left; }
.menu-perfil button.perigo { justify-content: center; }
.menu-perfil .pf-sit { margin-left: auto; margin-right: 4px; color: var(--mudo); font-size: 14px; font-weight: 500; }
.voltar-perfil { margin-top: 4px; }
#painelTeste { margin-top: 24px; }
.cartao-plano { background: var(--cartao); border: 2px solid var(--linha); border-radius: 20px; padding: 12px 16px; margin: 8px 0 12px; }
.cartao-plano .situacao { font: 800 24px/1.15 var(--fonte); color: var(--tinta); margin: 2px 0; }
.cartao-plano .preco { margin: 0; font: 800 44px/1 var(--fonte); letter-spacing: -.02em; }
.cartao-plano .preco small { font: 500 16px var(--fonte); letter-spacing: 0; color: var(--mudo); }
.sub-lista { font-weight: 700; margin-top: 12px; }
.lista-plano { list-style: none; margin: 0; padding: 0; }
.lista-plano li { padding: 8px 0 8px 32px; border-bottom: 2px solid var(--linha); font-size: 15px; position: relative; }
.lista-plano li::before { content: ""; position: absolute; left: 6px; top: 11px; width: 7px; height: 14px; border: solid var(--entregue); border-width: 0 3px 3px 0; transform: rotate(45deg) scale(.8); }
#assinatura > button.grande { margin-top: 8px; }
.folha-plano { z-index: 1200; }
.fp-botoes { display: grid; gap: 10px; margin-top: 8px; }
.opcao-plano { background: var(--cartao); border: 2px solid var(--linha); border-radius: 20px; padding: 12px 16px; }
.opcao-plano.dest { border: 3px solid var(--tinta); box-shadow: 0 4px 0 var(--adesivo); }
.opcao-plano h3 { font: 800 20px/1.2 var(--fonte); color: var(--tinta); }
.opcao-plano p { margin: 4px 0 0; }
.destaque-plano { color: var(--tinta); font-weight: 700; font-size: 15px; }
.entrada .lembrar { display: flex; align-items: flex-start; gap: 12px; color: var(--tinta); }

/* tutorial: recorte (spotlight), seta animada e balão perto da seta */
.tut { position: fixed; inset: 0; z-index: 3000; }
.tut.sem-alvo { background: rgba(0,0,0,.7); }
.tut-furo { position: fixed; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(0,0,0,.7); outline: 3px solid #FFC800; pointer-events: none; transition: top .25s, left .25s, width .25s, height .25s; }
.tut-seta { position: fixed; width: 44px; height: 44px; color: #FFC800; pointer-events: none; animation: tut-bate 1s ease-in-out infinite; }
.tut-seta svg { width: 44px; height: 44px; stroke-width: 3; }
.tut-seta.para-cima { rotate: 180deg; --dy: -6px; }
@keyframes tut-bate { 50% { translate: 0 var(--dy, 6px); } }
.tut-balao { position: fixed; left: 12px; right: 12px; max-width: 616px; margin: 0 auto; background: var(--cartao); color: var(--tinta); border: 3px solid var(--tinta); border-radius: 20px; padding: 14px; }
.tut-balao h2 { margin: 0 0 4px; font-size: 22px; }
.tut-balao p { margin: 0 0 10px; font-size: 15px; }
.tut-rod { display: flex; align-items: center; gap: 8px; }
.tut-n { flex: 1; color: var(--mudo); font-size: 14px; font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .tut-seta { animation: none; } .tut-furo { transition: none; } }

/* folha Rotas anteriores: escolher rota e marcar os endereços a reusar */
.folha-rotas .folha-corpo { gap: 12px; }
.folha-rotas .lista-rotas, .folha-rotas .lista-sel { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.fr-barra { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lista-sel label { display: flex; align-items: center; gap: 12px; margin: 0; min-height: 52px; padding: 8px 12px; border: 2px solid var(--linha); border-radius: 14px; color: var(--tinta); font-size: 15px; font-weight: 500; line-height: 1.3; cursor: pointer; background: var(--cartao); }
.lista-sel label span { min-width: 0; overflow-wrap: anywhere; }
.lista-sel label:has(input:checked) { border-color: var(--tinta); }
.lista-sel input[type=checkbox]:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }
#fr-sel-box { display: flex; flex-direction: column; gap: 12px; }
#fr-sel-box[hidden] { display: none; }
#fr-sel-box > button.grande { width: 100%; }
.fr-barra button { min-width: 0; padding: 0 8px; line-height: 1.15; }