*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.bottom-3{bottom:.75rem}.left-3{left:.75rem}.right-3{right:.75rem}.top-3{top:.75rem}.mx-3{margin-left:.75rem;margin-right:.75rem}.mx-4{margin-left:1rem;margin-right:1rem}.mb-1{margin-bottom:.25rem}.mb-1\.5{margin-bottom:.375rem}.mb-2{margin-bottom:.5rem}.mb-2\.5{margin-bottom:.625rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-2{margin-left:.5rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-1\.5{margin-top:.375rem}.mt-2{margin-top:.5rem}.mt-2\.5{margin-top:.625rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-7{margin-top:1.75rem}.mt-8{margin-top:2rem}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-11{height:2.75rem}.h-14{height:3.5rem}.h-5{height:1.25rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-\[120px\]{height:120px}.h-\[54px\]{height:54px}.h-\[5px\]{height:5px}.h-\[68px\]{height:68px}.h-\[78px\]{height:78px}.h-\[7px\]{height:7px}.h-full{height:100%}.min-h-0{min-height:0}.w-11{width:2.75rem}.w-14{width:3.5rem}.w-5{width:1.25rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-\[120px\]{width:120px}.w-\[54px\]{width:54px}.w-\[68px\]{width:68px}.w-\[78px\]{width:78px}.w-\[92px\]{width:92px}.w-full{width:100%}.min-w-0{min-width:0}.max-w-\[300px\]{max-width:300px}.max-w-\[340px\]{max-width:340px}.flex-1{flex:1 1 0%}.flex-none{flex:none}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-3\.5{gap:.875rem}.space-y-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.375rem*var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-2\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.625rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.625rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.overflow-hidden,.truncate{overflow:hidden}.truncate{text-overflow:ellipsis;white-space:nowrap}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.border-0{border-width:0}.bg-transparent{background-color:transparent}.p-2\.5{padding:.625rem}.p-3{padding:.75rem}.p-3\.5{padding:.875rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-3\.5{padding-left:.875rem;padding-right:.875rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-2{padding-bottom:.5rem}.pb-3{padding-bottom:.75rem}.pb-4{padding-bottom:1rem}.pb-7{padding-bottom:1.75rem}.pt-1{padding-top:.25rem}.pt-2\.5{padding-top:.625rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.pt-5{padding-top:1.25rem}.pt-6{padding-top:1.5rem}.text-left{text-align:left}.text-center{text-align:center}.text-\[10\.5px\]{font-size:10.5px}.text-\[11\.5px\]{font-size:11.5px}.text-\[11px\]{font-size:11px}.text-\[12\.5px\]{font-size:12.5px}.text-\[12px\]{font-size:12px}.text-\[13\.5px\]{font-size:13.5px}.text-\[13px\]{font-size:13px}.text-\[14px\]{font-size:14px}.text-\[15px\]{font-size:15px}.text-\[16px\]{font-size:16px}.text-\[17px\]{font-size:17px}.text-\[18px\]{font-size:18px}.text-\[24px\]{font-size:24px}.text-\[25px\]{font-size:25px}.text-\[26px\]{font-size:26px}.text-\[27px\]{font-size:27px}.text-\[30px\]{font-size:30px}.text-\[34px\]{font-size:34px}.text-\[9\.5px\]{font-size:9.5px}.font-black{font-weight:900}.font-bold{font-weight:700}.font-semibold{font-weight:600}.leading-\[1\.15\]{line-height:1.15}.leading-\[1\.1\]{line-height:1.1}.leading-none{line-height:1}.leading-snug{line-height:1.375}.leading-tight{line-height:1.25}.tracking-\[\.3em\]{letter-spacing:.3em}.tracking-tight{letter-spacing:-.025em}.tracking-wider{letter-spacing:.05em}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.line-through{text-decoration-line:line-through}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-75{opacity:.75}.opacity-80{opacity:.8}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-500{transition-duration:.5s}:root{--bg:#08090C;--surface:#111318;--surface2:#181B21;--line:#242832;--muted:#8A909D;
      --neon:#D6FF3D;--green:#22C55E;--red:#FF4D4D;--blue:#4DA6FF;--quest:#FF3DAE}
*{-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased}
html,body{height:100%;overscroll-behavior:none}
body{background:var(--bg);color:#F4F5F7;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;margin:0;overflow:hidden}
/* ═══ MARCA seQ ═══
   "se" em branco, "Q" em neon: o Q e a sequencia — a unica coisa que o app
   entrega e a ORDEM certa. Peso maximo e tracking apertado pra funcionar tanto
   a 26px no cabecalho quanto a 15px dentro do quadrado do icone. */
.marca{font-size:26px;font-weight:900;letter-spacing:-.05em;line-height:.95;color:#F4F5F7}
.marca span{color:var(--neon)}
.marca-sub{font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
           color:var(--muted);margin-top:3px}
.marca-caixa{width:38px;height:38px;border-radius:12px;background:var(--neon);
             display:flex;align-items:center;justify-content:center;flex:none}
.marca-caixa span{font-size:22px;font-weight:900;color:#0A0B0E;letter-spacing:-.06em;line-height:1}
.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
.scr{position:fixed;inset:0;display:none;flex-direction:column;padding-top:env(safe-area-inset-top)}
.scr.on{display:flex}
.scr.docked{padding-bottom:calc(var(--dockH,158px) + 6px + env(safe-area-inset-bottom))}
.btn{height:62px;border-radius:18px;font-weight:900;font-size:16px;display:flex;align-items:center;
     justify-content:center;gap:10px;border:0;width:100%;cursor:pointer;transition:transform .09s}
.btn:active{transform:scale(.97)}
.neon{background:var(--neon);color:#0A0B0E}
.ghost{background:var(--surface2);color:#C3C9D3;height:50px;border-radius:14px;font-size:13.5px;font-weight:700;
       border:0;width:100%;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
.ghost.lft{height:56px;justify-content:flex-start;padding:0 16px;text-align:left}
.ghost .sub{color:var(--muted);font-weight:600}
.card{background:var(--surface);border:1px solid var(--line);border-radius:20px}
/* Fileira de acoes do mapa: rola de lado em tela estreita em vez de
   empurrar botao pra fora. */
.barra-chips{overflow-x:auto;-webkit-overflow-scrolling:touch}
.barra-chips::-webkit-scrollbar{display:none}
.barra-chips>*{flex:none}
/* O ponto do motor. 9px: enxerga-se de relance e nao disputa espaco com os chips. */
.led-motor{width:9px;height:9px;border-radius:50%;align-self:center;margin:0 1px;background:#FF8A8A}
.chip{white-space:nowrap;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:999px}
.rot{font-size:10px;font-weight:800;letter-spacing:.14em;color:var(--muted)}
.inp{width:100%;height:44px;border-radius:12px;padding:0 12px;font-size:12px;
     background:var(--surface2);border:1px solid var(--line);color:#DDE1E8}
.spin{animation:sp 1s linear infinite}@keyframes sp{to{transform:rotate(360deg)}}
.pulse{animation:pl 1.1s ease-in-out infinite}@keyframes pl{0%,100%{opacity:1}50%{opacity:.55}}
.corner{position:absolute;width:34px;height:34px;border:4px solid var(--neon);border-radius:6px;z-index:6}
.laser{position:absolute;left:8%;right:8%;height:3px;border-radius:2px;z-index:6;
  background:linear-gradient(90deg,transparent,var(--neon),transparent);
  box-shadow:0 0 18px 3px rgba(214,255,61,.55);animation:scan 2.2s ease-in-out infinite}
@keyframes scan{0%,100%{top:26%}50%{top:70%}}
#flash{position:fixed;inset:0;z-index:120;display:none;flex-direction:column;align-items:center;justify-content:center;
  padding:22px;text-align:center;animation:pop .18s ease-out}
@keyframes pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
.giant{font-weight:900;letter-spacing:-.06em;line-height:.8;font-size:min(46vw,215px)}
#reader{width:100%;height:100%}
#reader video{width:100%!important;height:100%!important;object-fit:cover!important}
#reader__dashboard,#reader__scan_region img,#reader__header_message{display:none!important}
.list{overflow-y:auto;-webkit-overflow-scrolling:touch}
.list::-webkit-scrollbar{display:none}
input{outline:none}
#dock{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
      padding:0 12px calc(8px + env(safe-area-inset-bottom));background:linear-gradient(180deg,transparent,#08090C 22%)}
#dock.on{display:block}
.tabs{display:flex;gap:6px;margin-top:8px}
.tab{flex:1;height:50px;border-radius:14px;border:1px solid transparent;background:var(--surface2);color:#7C8391;
     display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:9.5px;font-weight:800;cursor:pointer}
.tab.act{background:var(--surface);color:var(--neon);border-color:var(--line)}
#sheetWrap{position:fixed;inset:0;z-index:110;display:none;background:rgba(4,5,7,.72);align-items:flex-end}
#sheetWrap.on{display:flex}
#sheet{width:100%;background:#0F1116;border:1px solid var(--line);border-bottom:0;
       border-radius:26px 26px 0 0;padding:18px 18px calc(20px + env(safe-area-inset-bottom));
       max-height:88vh;overflow-y:auto;animation:up .22s cubic-bezier(.2,.8,.3,1)}
@keyframes up{from{transform:translateY(60px);opacity:.4}to{transform:none;opacity:1}}
.grab{width:38px;height:4px;border-radius:99px;background:#31363F;margin:0 auto 14px}
/* Brilho na rota. drop-shadow no proprio <path> do SVG: um filtro por linha, nao
   por pixel de tela — segura bem no celular. So no trecho que FALTA; o que ja
   passou nao precisa chamar atencao. */
/* O brilho da rota era um drop-shadow de CSS aplicado na <path> que o Leaflet
   desenhava (.rota-brilho / .rota-brilho-azul). O maplibre desenha a linha na
   GPU, fora do DOM — nao ha elemento pra receber filtro. O mesmo halo virou uma
   camada de linha larga, borrada e translucida por baixo da neon; ver
   montarCamadas() em app.js ('rota-halo' e 'desvio-halo'). */
/* `rota-fraca` era o modo de emergencia pra quando a camada de nomes nao subia:
   rota translucida pra nao apagar o nome da rua. Nao existe mais — no maplibre a
   rota entra ABAIXO dos rotulos no proprio estilo, entao ela pode ser opaca
   sempre. */
#lmap{background:#0D1014}
.maplibregl-ctrl-attrib{display:none}
.pin{display:flex;align-items:center;justify-content:center;font-weight:900;border-radius:50%;
     border:2px solid #0A0B0E;font-size:11px;color:#0A0B0E}
/* Saiu daqui o contra-giro (`transform:rotate(var(--girar))`). Ele so existia
   porque o mapa inteiro girava por CSS e levava os numeros junto, de cabeca pra
   baixo. O maplibre segura o marcador na vertical da TELA sozinho
   (rotationAlignment:'viewport', ver seqMapa.pino), e as 83 paradas nem sao mais
   marcadores de DOM — viraram camada. A variavel --girar nao existe mais. */
/* ALVO — a proxima entrega. Marcador de quest: pulsa sozinho ate ele chegar.
   .pin.alvo vale pro pino avulso (destino digitado, pino de ajuste). Nas paradas
   da rota a bolha virou camada de GPU, entao o anel ficou sozinho num marcador
   proprio: o .anel logo abaixo. */
/* Anel do alvo, sem bolha. Animacao de CSS de PROPOSITO: ela roda no compositor
   e nao obriga o mapa a repintar. A versao anterior animava o raio de uma camada
   por setPaintProperty a cada quadro — desenho igual, mas o mapa nunca mais
   ficava 'idle' e a GPU nao dormia o turno inteiro. */
.anel{width:28px;height:28px;border-radius:50%;position:relative;pointer-events:none}
.anel::before{content:'';position:absolute;left:50%;top:50%;width:100%;height:100%;
  border-radius:50%;border:3px solid var(--quest);transform:translate(-50%,-50%);
  animation:quest 1.7s cubic-bezier(.2,.7,.3,1) infinite}
.pin.alvo{box-shadow:0 0 14px 2px rgba(255,61,174,.55)}
.pin.alvo::before{content:'';position:absolute;left:50%;top:50%;width:100%;height:100%;
  border-radius:50%;border:3px solid var(--quest);transform:translate(-50%,-50%);
  animation:quest 1.7s cubic-bezier(.2,.7,.3,1) infinite;pointer-events:none}
@keyframes quest{
  0%  {opacity:.95;width:100%;height:100%}
  70% {opacity:.25}
  100%{opacity:0;width:330%;height:330%}
}
/* Aqui viviam as duas linhas que travavam o modo navegacao:
     #lmap{transition:transform .35s linear;transform-origin:50% 50%}
     #lmap.girando{left:-21%;top:-21%;width:142%;height:142%}
   O div era inflado a 142% (raiz de 2) pra tapar o canto vazio de um quadrado
   girado, e girado por transform ANIMADO a cada leitura de GPS — uma por
   segundo. O navegador recompunha, animando, uma camada com o dobro da area da
   tela. Girar agora e mapa.setBearing(), na GPU: o div voltou a 100%, e a classe
   `.girando` nao e mais posta por ninguem. */


/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUTS ALTERNATIVOS — o mapa ocupando a tela toda, em tres graus.
   Tudo por classe no <body>; nenhum HTML muda. Trocar de layout nao mexe em
   nenhuma logica, so em quem cobre o mapa.
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- comum a todos: mapa sangrando ate a borda, sem moldura --------------- */
body.lay-a #scr-map, body.lay-b #scr-map, body.lay-c #scr-map{padding-bottom:0;padding-top:0}
body.lay-a .mapa-box, body.lay-b .mapa-box, body.lay-c .mapa-box{
  position:absolute;inset:0;margin:0;border-radius:0;border:0}
body.lay-a .mapa-topo, body.lay-b .mapa-topo, body.lay-c .mapa-topo{
  position:absolute;left:0;right:0;top:0;z-index:20;
  padding:calc(10px + env(safe-area-inset-top)) 14px 22px;
  background:linear-gradient(180deg,rgba(8,9,12,.94) 40%,transparent)}
body.lay-a #dock, body.lay-b #dock, body.lay-c #dock{background:none}
body.lay-a #paradaBar, body.lay-b #paradaBar, body.lay-c #paradaBar{
  background:rgba(15,17,22,.93);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
body.lay-a .tab, body.lay-b .tab, body.lay-c .tab{
  background:rgba(15,17,22,.93);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

/* --- B: gaveta. Sem abas; a parada vira uma linha so. -------------------- */
body.lay-b .tabs{display:none}
body.lay-b #paradaBar .linha-2{display:none}          /* some o par NAVEGAR/BAIXA */
body.lay-b #paradaBar{padding:10px 12px;border-radius:16px}
body.lay-b .fab{display:flex}

/* --- C: HUD de direcao. Enquanto navega, so o essencial. ----------------- */
/* Navegando, o topo inteiro sai. Antes só os chips sumiam e sobrava uma tarja
   de gradiente ocupando altura sem dizer nada — agora a faixa de manobra usa
   esse espaço. O ☰ volta assim que ele sai do modo navegação. */
body.lay-c.navegando .mapa-topo{display:none}
/* abas navegando: visiveis — o colapso agora é o puxador (dock-grab) */
body.lay-c.navegando #paradaBar .linha-2 .btn-nav{display:none}   /* ja esta navegando */
body.lay-c .fab{display:flex}

/* Botao redondo que devolve as abas nos layouts sem elas. */
/* Coluna de botoes redondos no canto direito, um empilhado sobre o outro.
   Antes o hamburger caia EM CIMA do "voltar pra mim" — dois botoes disputando o
   mesmo canto. Agora o de baixo e sempre o de voltar, e o menu sobe 62px. */
.btn-redondo{position:absolute;z-index:70;right:14px;
     bottom:calc(var(--dockMax,196px) + 14px + env(safe-area-inset-bottom));
     width:52px;height:52px;border-radius:26px;
     display:flex;align-items:center;justify-content:center}
.fab{display:none;position:fixed;z-index:70;right:14px;
     bottom:calc(var(--dockH,196px) + 20px + env(safe-area-inset-bottom));
     transition:bottom .15s ease;
     width:52px;height:52px;border-radius:26px;
     align-items:center;justify-content:center}
/* VIDRO. Os dois eram opacos e apagavam o nome da rua que estava embaixo.
   Sem blur de proposito: blur borraria justamente o texto que ele quer ler.
   Fica so um veu escuro + contorno; o icone ganha sombra propria pra continuar
   legivel mesmo passando por cima de letreiro branco. */
.btn-redondo,.fab{background:rgba(10,11,14,.30);border:1px solid rgba(255,255,255,.15);
     color:var(--neon);box-shadow:0 2px 10px rgba(0,0,0,.35)}
#btnVoltarNav{border-color:rgba(214,255,61,.45)}
.btn-redondo svg,.fab svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.95))}
.btn-redondo:active,.fab:active{background:rgba(10,11,14,.88)}
/* Escolha C: hambúrguer de vidro flutuando LOGO ACIMA do cartão, canto
   direito — fora dele, com um respiro. Mesmo lugar aberto ou fechado;
   colapsa SÓ as abas. */
#dockGrab{position:absolute;top:-44px;right:12px;width:38px;height:34px;border-radius:12px;z-index:2;
  display:flex;align-items:center;justify-content:center;color:#E8EBF0;
  background:rgba(10,11,14,.34);border:1px solid rgba(255,255,255,.20);
  box-shadow:0 2px 10px rgba(0,0,0,.35);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
#dockGrab svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.9))}
#dockGrab:active{background:rgba(10,11,14,.85)}
/* nunca nas telas em que as abas são a única navegação */
body.dock-fechado:not(.sem-parada) #dock .tabs{display:none!important}
body.sem-parada #dockGrab{display:none}
/* Centralizar empilhado ACIMA do slot do canto (hambúrguer ou X): 12px de vão. */
#dock #btnVoltarNav{position:absolute;top:-96px;right:12px}
/* GPS navegando: hambúrguer sai, X de vidro vermelho entra no MESMO slot. */
#btnEncerrarNav{display:none;position:absolute;top:-44px;right:12px;width:38px;height:34px;
  border-radius:12px;z-index:2;align-items:center;justify-content:center;color:#FF8A8A;
  background:rgba(30,10,12,.45);border:1px solid rgba(255,100,110,.45);
  box-shadow:0 2px 10px rgba(0,0,0,.35);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
body[data-modo="gps"].em-navegacao #dockGrab{display:none!important}
body[data-modo="gps"].em-navegacao #btnEncerrarNav{display:flex}
/* GPS + bolinha do motor: pílula de vidro alinhada à direita do HUD — o único
   sobrevivente do antigo topo de chips. */
.gps-pill-linha{display:flex;justify-content:flex-end;margin-top:7px;pointer-events:none}
.gps-pill{pointer-events:auto;display:flex;align-items:center;gap:7px;height:30px;padding:0 11px;
  border-radius:15px;background:rgba(10,11,14,.42);border:1px solid rgba(255,255,255,.16);
  color:#C7CDD8;font-size:11px;font-weight:800;box-shadow:0 2px 8px rgba(0,0,0,.35);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.gps-pill .led-motor{margin:0}

/* Mapa sangrando ate a borda: o aviso do canto e o botao de voltar ficavam ATRAS
   da barra de abas e vazavam letra por baixo dela. Sobem pra cima do dock. */
body.lay-a #mapNote, body.lay-b #mapNote, body.lay-c #mapNote{
  bottom:calc(var(--dockMax,196px) + 14px + env(safe-area-inset-bottom))}

/* Fila offline é estado operacional, não recado do mapa: ocupa um espaço fixo
   no mapa e no scanner para GPS/manobra nunca apagarem o aviso. */
.fila-pendente{z-index:15;padding:8px 10px;border-radius:11px;
  background:rgba(92,29,35,.94);border:1px solid rgba(255,137,145,.62);
  color:#FFE0E2;font-size:11px;font-weight:800;line-height:1.2;
  box-shadow:0 4px 14px rgba(0,0,0,.32)}
.fila-pendente-mapa{position:absolute;left:12px;right:12px;top:54px;text-align:center}
.fila-pendente-scan{margin:0 20px 8px;text-align:center}

/* Barra de desfazer. Fica ACIMA do dock e some sozinha em 6 s. E o unico
   conserto da memoria: nao existe tela pra corrigir um toque errado depois. */
#toast{position:fixed;z-index:130;left:12px;right:12px;display:none;
  bottom:calc(var(--dockMax,196px) + 14px + env(safe-area-inset-bottom));
  align-items:center;justify-content:space-between;gap:12px;
  padding:13px 15px;border-radius:16px;background:#0F1116;border:1px solid var(--line);
  box-shadow:0 10px 30px rgba(0,0,0,.5);font-size:13.5px;font-weight:700;color:#DDE1E8;
  animation:up .18s cubic-bezier(.2,.8,.3,1)}

/* HUD do navegador. Fica no topo do mapa, translucido igual aos botoes redondos:
   ele informa, nao pode apagar a rua embaixo. */
:root{--amar:#E3D08F}
/* AS DUAS CAIXAS DESCERAM PRA BARRA DE BAIXO.
   Ficavam sob a faixa de manobra, em 15px, disputando o alto da tela com a
   própria faixa. Aqui embaixo elas cabem maiores e ficam onde o polegar já
   está — no lugar do "BAIXA · LONGE", que era um botão que existia só pra
   avisar que não podia ser apertado. */
.barra-info{display:flex;gap:2px;height:50px;border-radius:14px;overflow:hidden;
  background:var(--line)}
.barra-info .bi{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--surface2);padding:0 6px;min-width:0}
.barra-info .k{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);line-height:1}
.barra-info .v{font-size:19px;font-weight:900;letter-spacing:-.02em;line-height:1.05;
  margin-top:3px;color:#fff;white-space:nowrap}
/* Navegando a barra cresce, e elas crescem junto — é o estado em que ele mais
   olha pra cá, porque o botão de baixa ainda não serve pra nada. */
body.lay-c.navegando #paradaBar .linha-2 .barra-info{height:62px}
body.lay-c.navegando #paradaBar .linha-2 .barra-info .v{font-size:23px}

/* Destino avulso (layout A): a HORA de chegada é a protagonista — ETA e
   "chegada" eram o mesmo número em duas células. Minutos e km viram apoio à
   direita; o atraso é uma pílula colada na hora. Encerrar continua sendo
   opção secundária, revelada só ao tocar o próprio cartão. */
.destino-resumo{width:100%;display:block;padding:0;background:transparent;color:inherit;text-align:left}
.destino-topo{display:flex;align-items:center;gap:10px}
.destino-nome{min-width:0;flex:1}
.destino-seta{width:26px;height:26px;border-radius:8px;background:var(--surface2);display:flex;align-items:center;justify-content:center;color:var(--muted);flex:none}
.destino-chega{display:flex;align-items:center;margin-top:9px}
.destino-chega-rot{font-size:9px;font-weight:900;letter-spacing:.14em;color:var(--muted);margin-bottom:2px}
.destino-chega-hora{font-size:30px;font-weight:900;line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums;display:flex;align-items:center;white-space:nowrap}
.pilula-atraso{display:inline-flex;align-items:center;height:17px;padding:0 6px;border-radius:6px;font-size:10.5px;font-weight:900;margin-left:7px;transform:translateY(-6px)}
.pilula-atraso.moderado{background:rgba(60,48,20,.96);border:1px solid rgba(255,212,59,.40);color:#FFD43B}
.pilula-atraso.intenso{background:rgba(81,29,24,.96);border:1px solid rgba(255,104,87,.48);color:#FF9A8D}
.destino-apoio{margin-left:auto;text-align:right;font-size:12.5px;line-height:1.6;white-space:nowrap}
.destino-apoio b{font-weight:900}
.destino-apoio small{color:var(--muted);font-weight:700;font-size:10px}
.destino-encerrar{background:#2A1416!important;color:#FF8A8A!important;border-color:rgba(255,100,110,.25)!important;font-size:10px!important}
body.lay-c.navegando #paradaBar .destino-acoes .btn-nav{display:none}

/* CARD DA PRÓXIMA PORTA ----------------------------------------------------
   Não é um segundo painel de rota: é a própria barra de baixo, só organizada
   por contexto. Longe da porta cabe num relance; ao aproximar abre a memória;
   parado na porta ganha as duas ações. */
#paradaBar.seq-excecao{border-color:rgba(255,77,77,.58)}
#paradaBar.seq-na-porta{border-color:rgba(34,197,94,.60)}
.seq-stop-head{display:flex;align-items:center;gap:10px;min-width:0}
.seq-stop-num{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  flex:none;color:#0A0B0E;font-size:22px;font-weight:900;letter-spacing:-.04em}
.seq-stop-dest{min-width:0;flex:1}
.seq-stop-address{font-size:14.5px;font-weight:900;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seq-stop-meta{margin-top:3px;font-size:11.5px;font-weight:600;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seq-stop-eta{min-width:74px;text-align:right;display:flex;flex-direction:column;align-items:flex-end}
.seq-stop-eta b{font-size:20px;line-height:1;color:#FFF;white-space:nowrap;font-variant-numeric:tabular-nums}
.seq-na-porta .seq-stop-eta b{color:#8FE3A6;font-size:14px;letter-spacing:.04em}
.seq-stop-eta span{margin-top:4px;max-width:128px;font-size:10.5px;font-weight:700;color:#A7AEBB;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seq-memoria{display:flex;gap:5px;flex-wrap:wrap;margin-top:9px}
.seq-mem{padding:4px 7px;border-radius:6px;background:#1B2030;color:#9CC6FF;font-size:10.5px;font-weight:900;letter-spacing:.025em;line-height:1}
.seq-mem.ok{background:#14251A;color:#8FE3A6;border:1px solid rgba(34,197,94,.35)}
.seq-mem.ruim{background:#2A1416;color:#FF9C9C;border:1px solid rgba(255,77,77,.40)}
.seq-sugestao{margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.10);font-size:10.5px;line-height:1.25;color:#E3D08F}
.seq-link{display:inline;padding:0;border:0;background:transparent;color:#E3D08F;font-size:10.5px;font-weight:900;text-decoration:underline}
.seq-route-status{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:9px;border-top:1px solid var(--line);color:#A7AEBB;font-size:11.5px;font-weight:700;white-space:nowrap}
.seq-route-status>span:last-child{margin-left:auto;color:#DDE1E8}
.seq-route-status b{color:#F4F5F7}
.seq-route-progress{display:flex;align-items:center;gap:7px;min-width:0;flex:1}
.seq-route-progress>span{color:#DDE1E8;font-size:11px}
.seq-track{height:5px;min-width:44px;max-width:140px;flex:1;overflow:hidden;border-radius:999px;background:#303642}
body.sem-parada #paradaBar{display:none}
.seq-fim{display:flex;align-items:center}
.seq-fim i{font-style:normal;color:#3A404C;margin:0 7px;font-weight:400}
.seq-flag{margin-right:6px;color:#8A909D;flex:none}
.seq-track i{display:block;height:100%;border-radius:999px;background:var(--neon);transition:width .2s}
.seq-actions{display:flex;gap:6px;margin-top:10px}
.seq-actions button{min-width:0;border:0;font-weight:900;letter-spacing:.02em}
.seq-navegar{height:42px;flex:1;display:flex;align-items:center;justify-content:center;gap:7px;border-radius:11px;background:#20251E;color:var(--neon);font-size:12px}
.seq-nav-escolher{width:42px;flex:none;border-radius:11px;background:#20251E;color:var(--neon);font-size:16px}
.seq-entregue{height:50px;flex:1.35;border-radius:12px;background:var(--green);color:#04140A;font-size:14px}
.seq-nao-entregue{height:50px;flex:1;border-radius:12px;background:transparent;border:1.5px solid #3A2226!important;color:var(--red);font-size:12px}
body.lay-c.navegando #paradaBar .seq-actions .btn-nav{display:none}
body.lay-c.navegando #paradaBar .seq-actions .seq-entregue{height:62px;font-size:16px}
/* NAVEGANDO o cartão é lido de relance, na moto: tudo sobe um degrau. A hora
   de chegada é a protagonista (mesma decisão do destino livre) e a linha de
   status deixa de ser letra de bula. */
/* Endereço pode dobrar em DUAS linhas navegando: cortar o número da casa
   ("R Basílio da Cunha, 10…") pra caber numa linha seria esconder exatamente
   o que ele precisa ler. */
body.lay-c.navegando #paradaBar .seq-stop-address{font-size:16px;white-space:normal;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.2}
body.lay-c.navegando #paradaBar .seq-stop-meta{font-size:12px;margin-top:4px}
body.lay-c.navegando #paradaBar .seq-stop-eta b{font-size:26px}
body.lay-c.navegando #paradaBar .seq-na-porta .seq-stop-eta b,
body.lay-c.navegando #paradaBar.seq-na-porta .seq-stop-eta b{font-size:16px}
body.lay-c.navegando #paradaBar .seq-stop-eta span{font-size:11.5px;max-width:140px}
body.lay-c.navegando #paradaBar .seq-route-status{font-size:12.5px;margin-top:12px;padding-top:11px}
body.lay-c.navegando #paradaBar .seq-route-progress>span{font-size:12.5px}
body.lay-c.navegando #paradaBar .seq-mem{font-size:11px;padding:5px 8px}
/* A barra de progresso cresce até METADE do cartão navegando: com "termina"
   aposentado sobrou exatamente essa largura, e 0/57 vira coisa que se enxerga. */
body.lay-c.navegando #paradaBar .seq-track{max-width:50%;height:6px}
/* O chip da rua atual acompanha o cockpit. */
body.lay-c.navegando .chip-rua{font-size:20px;padding:8px 17px}

.hud-cx{flex:1;background:rgba(10,11,14,.72);border:1px solid rgba(255,255,255,.10);
  border-radius:13px;padding:7px 10px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hud-cx .k{font-size:8.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.hud-cx .v{font-size:15px;font-weight:900;letter-spacing:-.02em;margin-top:2px}
/* O topo do mapa e do cabecalho (titulo + chips). Sem esta conta o topo nasce
   POR CIMA do "Rota de hoje" — o inline style:top que existia aqui ganhava da
   classe e era exatamente isso que acontecia.
   A conta mora no CONTAINER, nao no HUD: a faixa de manobra entra e sai o dia
   inteiro, e empurrar o HUD por pixel a cada entrada dava o mesmo bug de novo. */
#topoNav{top:12px;z-index:20;display:flex;flex-direction:column;gap:8px;pointer-events:none}
/* 96px era a altura do cabeçalho que existia acima (título + quatro números +
   os chips). Com o cabeçalho no ☰ sobrou só a fila de chips: 50px. */
body.lay-a #topoNav, body.lay-b #topoNav, body.lay-c #topoNav{top:calc(50px + env(safe-area-inset-top))}
/* Navegando, nem os chips ficam — a faixa encosta no topo. Era 62px. */
body.lay-c.navegando #topoNav{top:calc(12px + env(safe-area-inset-top))}

/* Faixa de manobra: a curva que vem. Mais opaca que o HUD de proposito — este e
   o unico numero que ele le em movimento, e nao pode competir com a rua. */
.manobra{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:15px;
  background:rgba(8,9,12,.94);border:1px solid rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.manobra .seta{width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;
  border-radius:12px;background:var(--neon);color:#0A0B0E}
.manobra .metros{font-size:21px;font-weight:900;letter-spacing:-.03em;line-height:1.05}
.manobra .viaNome{font-size:12.5px;font-weight:700;color:#A7AEBB;margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* A PLACA ESTAVA MENOR QUE A RUA DO MAPA.
   .viaNome era 12,5px, peso 700, cinza #A7AEBB e truncado com reticencias —
   enquanto o nome que o proprio mapa desenha por baixo vai de 12,5 a 19px, em
   branco e com halo. A placa oficial da manobra ficava menor e mais apagada que
   o nome pintado no asfalto atras dela. Placa ilegivel nao e placa.
   Duas linhas em vez de reticencias porque "Av. Pres. Juscelino Kubitschek" nao
   cabe em uma, e cortar o nome no meio e o mesmo que nao ter nome. */
/* Dirigindo, a faixa vira DUAS linhas empilhadas: a manobra em cima e a rua em
   que ele esta embaixo. Por isso o .manobra troca de eixo aqui — nos outros
   estados ("Chegando", "Voce chegou") ele continua sendo uma linha so.
   Os corpos cresceram de novo (seta 64→74, distancia 26→32, nome 19→22) porque
   o cabeçalho saiu e sobrou tela: esta faixa e a unica coisa que ele le a 60
   km/h, entao ela fica com o espaco que era de cinco numeros que ele nao usa. */
.manobra.curva{flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden}
.manobra.curva .mnb-topo{display:flex;align-items:center;gap:14px;padding:13px 14px}
.manobra.curva .seta{width:74px;height:74px;border-radius:17px}
/* A distancia e o unico numero que muda a cada segundo — por isso e ela que
   manda no card. O nome da rua fica logo abaixo, de apoio: ele responde "qual
   rua", nao "quando". */
.manobra.curva .metros{font-size:32px;font-weight:900;color:var(--neon);
  margin:0 0 2px;letter-spacing:-.035em;line-height:1}
/* TRÊS linhas, não duas. Com a seta em 74px e o nome em 22px sobra pouca
   largura, e "Av. Pres. Juscelino Kubitschek" voltava a sair cortado —
   justamente o defeito que esta faixa existe pra resolver. A altura pra terceira
   linha é a que o cabeçalho liberou ao virar ☰, e ela só é gasta quando o nome
   precisa: nome curto continua ocupando uma linha. */
.manobra.curva .viaNome{font-size:22px;font-weight:800;color:#FFFFFF;margin:0;
  letter-spacing:-.02em;line-height:1.1;white-space:normal;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* A RUA EM QUE ELE ESTA saiu da faixa e virou um chip no mapa, pendurado
   embaixo da seta (ver porRuaAtual no app.js). Nao precisa escrever "voce esta
   na": o chip esta colado nele, isso ja diz. 16px porque o proposito e ser lido
   de relance a 60 km/h — o que estava na faixa tinha 13,5 e ficava no alto da
   tela, onde o olho de quem dirige nao esta. */
.chip-rua{max-width:64vw;padding:7px 15px;border-radius:99px;
  background:rgba(8,9,12,.92);border:1px solid rgba(255,255,255,.16);
  color:#FFFFFF;font-size:17px;font-weight:800;letter-spacing:-.01em;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  box-shadow:0 3px 12px rgba(0,0,0,.55);pointer-events:none}
.manobra.ok{background:rgba(20,37,26,.95);border-color:rgba(34,197,94,.35)}
.manobra.ok .seta{background:var(--green);color:#04140A}
.manobra.ok .metros{color:#8FE3A6}
.manobra.ok .viaNome{color:#93AE9B}
/* Velocidade atual do aparelho e atraso de trânsito ficam abaixo da instrução,
   onde são vistos sem roubar espaço dela. */
.info-via{display:flex;align-items:center;gap:9px;pointer-events:none}
/* Placa da via: só existe quando o TomTom mandou limite legal PARA ESTE
   trecho E o app sabe em que trecho ele está. Nunca chutamos. */
.placa-vel{width:74px;height:74px;border-radius:50%;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;background:#FFF;color:#111;
  border:4px solid #E84242;box-shadow:0 2px 9px rgba(0,0,0,.45);
  font-size:30px;font-weight:900;letter-spacing:-.06em;line-height:1}
/* Mesmo corpo da placa (74px), legível num relance. */
.vel-atual{min-width:74px;height:74px;padding:0 9px;box-sizing:border-box;border-radius:17px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(8,9,12,.95);border:1px solid rgba(255,255,255,.22);color:#FFF;
  box-shadow:0 2px 9px rgba(0,0,0,.45);font-weight:900;line-height:1}
.vel-atual #velAtualNumero{font-size:32px;letter-spacing:-.06em}
.vel-atual .vel-unidade{margin-top:3px;font-size:10px;font-weight:800;letter-spacing:.05em;color:#B9BFCA}
/* A folga de 5 km/h evita piscar vermelho por arredondamento do GPS na borda. */
.vel-atual.acima-limite{background:#6B171B;border-color:#FF5C64;box-shadow:0 2px 12px rgba(255,70,77,.45)}
.vel-atual.acima-limite .vel-unidade{color:#FFD8DA}
.chip-trafego{padding:7px 11px;box-shadow:0 2px 9px rgba(0,0,0,.35);font-size:10px;font-weight:900}
.chip-trafego.livre{background:rgba(22,51,34,.96);border:1px solid rgba(123,238,151,.35);color:#9AF5B1}
.chip-trafego.moderado{background:rgba(60,48,20,.96);border:1px solid rgba(255,212,59,.40);color:#FFD43B}
.chip-trafego.intenso{background:rgba(81,29,24,.96);border:1px solid rgba(255,104,87,.48);color:#FF9A8D}