/* =====================================================================
   CARGUIA — identidade visual
   Ideia: a estrada. Asfalto escuro, faixa amarela tracejada, laranja da
   carga (do logo) para agir e azul da estrada (do logo) para informar.
   Títulos em fonte de placa de trânsito (Bahnschrift/DIN, já instaladas
   no Windows e no iPhone; nos outros aparelhos cai numa fonte estreita).
   A marca forte da página é a ROTA: ponto A → faixa tracejada → ponto B.
   ===================================================================== */
:root{
  --asfalto:#1c2230;--asfalto2:#2a3244;
  --laranja:#f26a1b;--laranja2:#d9560c;--laranjaf:#fff1e8;
  --azul:#1d3f86;--azulf:#e9eef8;
  --faixa:#ffc629;--faixaf:#fff6d6;
  --verde:#1f8a4c;--verdef:#e6f4ec;
  --vermelho:#b8322a;--vermelhof:#fbeceb;
  --concreto:#eef1f4;--branco:#fff;--linha:#dde2e8;--mut:#5b6473;--txt:#1c2230;
  --placa:"Bahnschrift","DIN Alternate","DIN Next LT Pro","Roboto Condensed","Arial Narrow",system-ui,sans-serif;
  --texto:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--concreto);color:var(--txt);font:16px/1.5 var(--texto)}
#app{max-width:1080px;margin:0 auto;padding:12px 14px 100px}
a{color:var(--azul)}
h1,h2,h3,.placa{font-family:var(--placa);font-weight:700;letter-spacing:.2px;line-height:1.15}
h1{font-size:30px;margin:0 0 8px}h2{font-size:23px;margin:22px 0 12px}h3{font-size:18px;margin:0 0 8px}
:focus-visible{outline:3px solid var(--faixa);outline-offset:2px}
.carregando{padding:60px 0;text-align:center;color:var(--mut)}

/* topo */
.topo{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.topo .logo{height:46px;border-radius:10px;background:#fff;padding:2px 8px;display:block;cursor:pointer}
.topo .lado{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bandeiras{display:flex;gap:5px;align-items:center}
.bandeiras svg{width:24px;height:17px;border-radius:3px;box-shadow:0 0 0 1px rgba(28,34,48,.18);display:block}

/* blocos */
.card{background:var(--branco);border:1px solid var(--linha);border-radius:14px;padding:16px;margin:0 0 12px}
.grade{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:720px){.grade.g2{grid-template-columns:1fr 1fr}.grade.g3{grid-template-columns:repeat(3,1fr)}}
.linha{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--linha)}
.linha:first-child{border-top:0}
.sub{color:var(--mut);font-size:14px}
.vazio{text-align:center;color:var(--mut);padding:28px 12px}
.num{font-family:var(--placa);font-size:30px;font-weight:700;color:var(--asfalto)}

/* ESTRADA: abertura da página inicial */
.estrada{background:var(--asfalto);color:#fff;border-radius:18px 18px 0 0;padding:22px 18px 30px;position:relative;overflow:hidden}
.estrada::after{content:"";position:absolute;left:0;right:0;bottom:12px;height:4px;background:repeating-linear-gradient(90deg,var(--faixa) 0 34px,transparent 34px 60px)}
.estrada h1{font-size:32px;max-width:16ch}
.estrada p{margin:0;color:#c9cfdb;max-width:46ch}
.busca{border-radius:0 0 18px 18px;border-top:0;margin-bottom:16px}

/* a ROTA: A ── B */
.rota{position:relative;padding-left:34px}
.rota::before{content:"";position:absolute;left:11px;top:30px;bottom:64px;width:3px;background:repeating-linear-gradient(180deg,var(--faixa) 0 9px,transparent 9px 16px)}
.ponto{position:relative;margin-bottom:10px}
.ponto .marca{position:absolute;left:-34px;top:2px;width:25px;height:25px;border-radius:50%;color:#fff;font:700 13px/25px var(--placa);text-align:center}
.ponto.a .marca{background:var(--laranja)}.ponto.b .marca{background:var(--azul)}
.ponto .tit{font-family:var(--placa);font-weight:700;font-size:17px;margin:2px 0 6px}
.campos{display:grid;gap:8px;grid-template-columns:1fr}
.campos.rua{grid-template-columns:1fr 92px}
.campos.c4{grid-template-columns:1fr 92px}.campos.c4>:first-child{grid-column:1/-1}
@media(min-width:720px){.campos.c4>:first-child{grid-column:auto}.campos.c4{grid-template-columns:1.1fr 2fr 92px}.campos.c2{grid-template-columns:1fr 1fr}.campos.c3{grid-template-columns:1fr 1fr 1fr}}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:10px;background:var(--laranja);color:#fff;font-family:var(--texto);font-weight:700;font-size:15px;line-height:1.2;padding:11px 16px;cursor:pointer;text-decoration:none;text-align:center}
.btn:hover{background:var(--laranja2)}
.btn.sec{background:var(--azulf);color:var(--azul)}.btn.sec:hover{background:#dce4f3}
.btn.ok{background:var(--verde)}.btn.ok:hover{background:#18723e}
.btn.mal{background:var(--vermelho)}
.btn.wa{background:#1fa855}.btn.wa:hover{background:#178a45}
.btn.sm{padding:7px 12px;font-size:14px;border-radius:9px}
.btn.grande{width:100%;font-family:var(--placa);font-size:20px;padding:14px;flex-direction:column;gap:2px;border-radius:12px}
.btn.grande small{font-family:var(--texto);font-size:13px;font-weight:500;opacity:.95}
.btn[disabled]{opacity:.65;cursor:wait}
.btn.link{background:none;color:var(--azul);padding:6px 0;text-decoration:underline;font-weight:600}
.btn.link:hover{background:none}

/* formulários */
.lb{display:block;font-size:14px;font-weight:600;margin:12px 0 5px}
.in{width:100%;padding:12px;border:1px solid #c9d1dc;border-radius:10px;font:16px var(--texto);background:#fff;color:var(--txt)}
.in:focus{outline:3px solid var(--faixa);outline-offset:0;border-color:var(--asfalto)}
.marcar{display:flex;gap:10px;align-items:flex-start;padding:6px 0;cursor:pointer}
.marcar input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--laranja)}

/* etiquetas e filtros */
.tag{align-self:flex-start;display:inline-block;white-space:nowrap;font-size:12px;font-weight:700;padding:3px 9px;border-radius:6px;background:var(--azulf);color:var(--azul)}
.tag.ok{background:var(--verdef);color:var(--verde)}.tag.av{background:var(--faixaf);color:#7a5600}.tag.mal{background:var(--vermelhof);color:var(--vermelho)}
.selo{background:var(--faixa);color:var(--asfalto)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.chip{border:1.5px solid var(--linha);background:#fff;border-radius:999px;padding:7px 14px;font-family:var(--texto);font-weight:600;font-size:14px;cursor:pointer;color:var(--asfalto)}
.chip.on{background:var(--asfalto);border-color:var(--asfalto);color:#fff}

/* estrelas */
.est{color:#e2a400;letter-spacing:1px}.est i{color:#c9ced6;font-style:normal}

/* resultados */
.oferta{padding:0;overflow:hidden}
.oferta .corpo{padding:14px 16px 16px}
.oferta img.foto{width:100%;height:180px;object-fit:cover;display:block;background:var(--concreto)}
.pessoa{display:flex;gap:10px;align-items:center;margin:4px 0 10px}
.avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;background:var(--azulf);flex:none;display:inline-flex;align-items:center;justify-content:center;font:700 18px var(--placa);color:var(--azul)}
.valor{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin:12px 0}
.preco{font-family:var(--placa);font-size:30px;font-weight:700;color:var(--asfalto);white-space:nowrap}
.trajeto{background:var(--asfalto);color:#fff;border-radius:12px;padding:12px 14px;margin:0 0 12px;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.trajeto b{font-family:var(--placa);font-size:19px}
.trajeto .sub{color:#c9cfdb}

/* etapas do frete: uma estrada com 4 paradas */
.etapas{display:flex;margin:12px 0 4px;position:relative}
.etapas::before{content:"";position:absolute;left:12%;right:12%;top:12px;height:3px;background:var(--linha)}
.etapas .e{flex:1;text-align:center;font-size:12px;color:var(--mut);position:relative}
.etapas .e i{display:flex;margin:0 auto 4px;width:26px;height:26px;border-radius:50%;background:#fff;border:2px solid var(--linha);align-items:center;justify-content:center;font:700 12px var(--placa);color:var(--mut);position:relative}
.etapas .e.feito i{background:var(--verde);border-color:var(--verde);color:#fff}
.etapas .e.atual i{background:var(--laranja);border-color:var(--laranja);color:#fff}
.etapas .e.atual{color:var(--txt);font-weight:700}

/* próximo passo: o quadro que diz o que fazer */
.passo{border-left:6px solid var(--laranja);background:var(--laranjaf);border-radius:10px;padding:12px 14px;margin:12px 0}
.passo.ok{border-color:var(--verde);background:var(--verdef)}.passo.av{border-color:var(--faixa);background:var(--faixaf)}.passo.info{border-color:var(--azul);background:var(--azulf)}
.passo .rot{font-size:13px;font-weight:700;color:var(--mut)}
.passo .tit{font-family:var(--placa);font-size:19px;font-weight:700;margin:2px 0}
.contato{border:1.5px solid var(--linha);border-radius:12px;padding:12px;margin:12px 0}
.contato .rot{font-size:13px;font-weight:700;color:var(--mut)}

/* nota com estrelas */
.estrelas-escolha{display:flex;justify-content:center;gap:4px;margin:6px 0}
.estrelas-escolha button{background:none;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;font:600 13px var(--texto);color:var(--mut);padding:2px 5px;border-radius:8px}
.estrelas-escolha button span{font-size:44px;line-height:1;color:#c9ced6}
.estrelas-escolha button.on span{color:#e2a400}
.barra{display:flex;align-items:center;gap:8px;font-size:13px;margin:4px 0}
.barra .t{flex:1;height:10px;background:var(--linha);border-radius:5px;overflow:hidden}.barra .t div{height:100%;background:var(--faixa)}

/* navegação de baixo */
.nav{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--linha);display:flex;justify-content:center;z-index:20;padding-bottom:env(safe-area-inset-bottom)}
.nav a{flex:1;max-width:150px;text-align:center;padding:8px 2px 9px;font-size:12px;color:var(--mut);text-decoration:none;font-weight:600;border-top:3px solid transparent}
.nav a b{display:block;font-size:20px;line-height:1.1}
.nav a.on{color:var(--asfalto);border-top-color:var(--laranja)}
.abas{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px}

/* avisos */
.toast{position:fixed;left:50%;bottom:86px;transform:translateX(-50%);background:var(--asfalto);color:#fff;padding:12px 18px;border-radius:12px;max-width:92vw;z-index:60;opacity:0;pointer-events:none;transition:opacity .2s;box-shadow:0 6px 24px rgba(28,34,48,.25)}
.toast.vis{opacity:1}
.modal{position:fixed;inset:0;background:rgba(28,34,48,.6);z-index:50;display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:20px 10px}
.modal[hidden]{display:none}
.modal-caixa{background:#fff;border-radius:16px;max-width:520px;width:100%;padding:18px;margin:auto}
.aviso{background:var(--faixaf);border-left:4px solid var(--faixa);border-radius:8px;padding:10px 12px;font-size:14px;margin:10px 0}
.erro{background:var(--vermelhof);color:var(--vermelho);border-radius:8px;padding:10px 12px;font-size:14px;margin:10px 0;font-weight:600}
table.tab{width:100%;border-collapse:collapse;font-size:14px}table.tab td,table.tab th{border-top:1px solid var(--linha);padding:8px 6px;text-align:left;vertical-align:top}
table.tab th{font-size:13px;color:var(--mut)}
.rodape{text-align:center;color:var(--mut);font-size:13px;margin:28px 0 8px}
.rodape a{margin:0 8px}
details>summary{cursor:pointer}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.numeros{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:flex-end}.numeros>div{min-width:120px}