/* ===========================================================
   CLICK ENTREGAS — Design System
   Laranja var(--orange) · Branco · Grafite · Verde só p/ sucesso/online
   Mobile-first, PWA.
   =========================================================== */
/* Tokens, fontes e base ficam em tokens.css — carregado antes deste arquivo.
   Aqui só componentes. */
/* Ícones inline: tamanho padrão (componentes específicos sobrescrevem). */
.ico-svg{width:1.15em;height:1.15em;flex:none;vertical-align:-.16em}
.lead .ico-svg{width:15px;height:15px}
.status-live .ico-svg{width:18px;height:18px}
/* Hierarquia: título > seção > valor > corpo > descrição > legenda.
   O peso 700 é reservado a títulos e valores — nada de negrito difuso. */
h1,h2,h3,h4{margin:0 0 .35em;line-height:1.25;letter-spacing:-.015em;font-weight:var(--fw-destaque)}
h1{font-size:var(--fs-titulo)}
h2{font-size:1.125rem}
h3{font-size:var(--fs-secao)}
p{margin:.25em 0}
a{color:var(--laranja-700);text-decoration:none}
small{font-size:var(--fs-legenda)}
.muted{color:var(--cinza);font-size:var(--fs-desc);font-weight:var(--fw-normal)}
.tiny{font-size:var(--fs-legenda)}
.valor{font-size:var(--fs-valor);font-weight:var(--fw-destaque);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.legenda{font-size:var(--fs-legenda);color:var(--cinza);font-weight:var(--fw-medio)}
.center{text-align:center}
.laranja{color:var(--laranja)}
.verde{color:var(--ok)}
.mono{font-variant-numeric:tabular-nums}

/* ---------- Layout ---------- */
.app{max-width:680px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column}
/* Tela de mapa: sem gutter, ocupa o que sobra da viewport. */
#view{flex:1;min-height:0;display:flex;flex-direction:column}
#view.com-gutter{padding:var(--sp-4) var(--sp-4) calc(var(--nav-h) + var(--safe-b) + var(--sp-6));
  display:block}
#view.rolagem{overflow-y:auto;padding-bottom:calc(var(--nav-h) + var(--safe-b) + var(--sp-4))}
.wrap{flex:1;padding:var(--sp-4) var(--sp-4) calc(var(--nav-h) + var(--safe-b) + var(--sp-6))}
.wrap.no-nav{padding-bottom:var(--sp-6)}
.section{margin-bottom:var(--sp-4)}
.row{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center}
.row.tight{gap:6px}
.spread{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2)}
.hide{display:none!important}
.stack>*+*{margin-top:var(--sp-2)}
/* Cabeçalho de tela: título + ação opcional, sempre na mesma linha. */
.tela-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  margin-bottom:var(--sp-4)}
.tela-head h1{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tela-head .btn{flex:none}

/* ---------- Topbar (compacta) ---------- */
.topbar{position:sticky;top:0;z-index:var(--camada-header);display:flex;align-items:center;
  justify-content:space-between;gap:var(--sp-2);padding:10px var(--sp-4);
  background:var(--branco);border-bottom:var(--borda);
  padding-top:calc(10px + env(safe-area-inset-top,0px))}
.brand{display:flex;align-items:center;gap:var(--sp-2);font-weight:var(--fw-destaque);
  letter-spacing:-.02em;font-size:1rem}
/* O logo substitui o "C" tipográfico: nada de caixa laranja em volta. */
.brand .dot-logo{height:24px;width:auto;display:block;flex:none}
.logo-login{height:56px;width:auto;display:block;margin:0 auto}
.marca-logo{height:24px;width:auto;display:block;flex:none}
.brand b{color:var(--laranja);font-weight:var(--fw-destaque)}
.topbar .sub{font-weight:var(--fw-medio);color:var(--cinza);font-size:var(--fs-desc)}
/* Alvo de toque de 44px sem ocupar 44px de caixa visível. */
.iconbtn{width:var(--alvo);height:var(--alvo);border-radius:var(--r);border:0;
  background:transparent;display:grid;place-items:center;cursor:pointer;
  color:var(--grafite-500)}
.iconbtn:active{background:var(--cinza-50)}
.iconbtn svg{width:21px;height:21px}
.top-actions{display:flex;align-items:center;gap:2px}

/* ---------- Cards ---------- */
.card{background:var(--branco);border:var(--borda);border-radius:var(--r-lg);
  padding:var(--card-pad);box-shadow:var(--sh-sm)}
.card+.card{margin-top:var(--sp-3)}
.card.flat{box-shadow:none}
/* Card aninhado: sem sombra e sem borda dupla — só um fundo mais claro. */
.card .card,.card-sub{background:var(--cinza-50);border:0;border-radius:var(--r);
  box-shadow:none;padding:var(--sp-3)}
.card.hero{background:linear-gradient(135deg,var(--surface) 0%,var(--laranja-soft) 130%);
  border-color:var(--laranja-soft)}
.card.pad-lg{padding:var(--sp-5)}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);
  margin-bottom:var(--sp-3)}
.card-head h2,.card-head h3{margin:0}

/* ---------- Buttons ---------- */
/* Uma altura, um raio. Primária = laranja; secundária = contorno; destrutiva = vermelha. */
.btn{--bg:var(--laranja);--fg:var(--surface);display:inline-flex;align-items:center;justify-content:center;
  gap:var(--sp-2);width:100%;min-height:var(--btn-h);padding:0 var(--sp-5);border:none;
  border-radius:var(--btn-r);font-family:var(--ff);font-size:var(--fs-corpo);
  font-weight:var(--fw-forte);line-height:1.2;cursor:pointer;background:var(--bg);color:var(--fg);
  transition:transform .06s ease,filter .15s ease;text-align:center;position:relative}
.btn:active{transform:translateY(1px);filter:brightness(.95)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--laranja-ring)}
.btn svg{width:19px;height:19px;flex:none}
.btn-primary{--bg:var(--laranja)}
.btn-dark{--bg:var(--grafite)}
.btn-ok{--bg:var(--ok)}
.btn-erro{--bg:var(--erro)}
.btn-ghost{--bg:transparent;--fg:var(--grafite);border:1px solid var(--cinza-200)}
.btn-ghost:active{background:var(--cinza-50)}
.btn-soft{--bg:var(--laranja-soft);--fg:var(--laranja-700)}
/* Ação destrutiva discreta: só texto, sem peso visual de botão cheio. */
.btn-texto{--bg:transparent;--fg:var(--cinza);min-height:var(--alvo);font-weight:var(--fw-medio)}
.btn-texto.perigo{--fg:var(--erro)}
.btn.lg{min-height:56px;font-size:1rem}
.btn.sm{width:auto;min-height:var(--btn-h-sm);padding:0 var(--sp-4);font-size:var(--fs-desc);
  border-radius:var(--r)}
.btn.block{width:100%}
/* Estado de carregando: o rótulo some e entra um spinner — nunca fica mudo. */
.btn.carregando{color:transparent!important;pointer-events:none}
.btn.carregando::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;
  border:2px solid rgba(255,255,255,.4);border-top-color:var(--surface);animation:spin .7s linear infinite}
.btn-ghost.carregando::after,.btn-texto.carregando::after{border-color:var(--cinza-200);
  border-top-color:var(--grafite)}
.btn-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}
.btn-row .btn{width:100%}
.chip-actions{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:var(--alvo);padding:0 var(--sp-4);border-radius:var(--r);
  border:1px solid var(--cinza-200);background:var(--surface);color:var(--grafite);
  font-weight:var(--fw-forte);font-size:var(--fs-desc);cursor:pointer}
.chip svg{width:16px;height:16px}
.chip.wa{border-color:var(--wa-line);color:var(--wa);background:var(--wa-soft)}
.chip.call{border-color:var(--call-line);color:var(--call);background:var(--call-soft)}
.chip.nav{border-color:var(--laranja-soft);color:var(--laranja-700);background:var(--laranja-soft)}

/* ---------- Forms ---------- */
label{display:block;font-weight:var(--fw-medio);font-size:var(--fs-desc);color:var(--grafite-500);
  margin:var(--sp-4) 0 6px}
.field{position:relative}
input,select,textarea{width:100%;min-height:var(--campo-h);padding:13px var(--sp-3);
  border:1px solid var(--cinza-200);border-radius:var(--r);font-size:1rem;font-family:var(--ff);
  background:var(--surface);color:var(--grafite);transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--laranja);
  box-shadow:0 0 0 3px var(--laranja-ring)}
input::placeholder{color:var(--faint)}
textarea{resize:vertical;min-height:48px}
.hint{font-size:var(--fs-legenda);color:var(--cinza);margin-top:5px}

/* ---------- Value / quote box ---------- */
.quote{margin-top:var(--sp-4);border:1px solid var(--orange-line);background:var(--laranja-soft);
  border-radius:var(--r-lg);padding:var(--sp-4)}
.quote .lin{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);
  padding:5px 0;font-size:var(--fs-desc)}
.quote .lin b{font-weight:var(--fw-forte)}
.quote .price{font-size:1.75rem;font-weight:var(--fw-destaque);color:var(--laranja-700);
  letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.quote .badge-q{background:var(--surface);border:1px solid var(--orange-line);color:var(--laranja-700);
  font-weight:var(--fw-forte);padding:3px 10px;border-radius:var(--r-full);
  font-size:var(--fs-legenda)}
/* Linha de total: separada por régua, não por peso extra. */
.quote .lin.total{border-top:1px solid var(--orange-line);margin-top:6px;padding-top:10px}

/* ---------- Pills / status ----------
   Uma linguagem só: âmbar = esperando, azul = em andamento, verde = concluído/ativo,
   vermelho = problema, cinza = inativo. O ponto colorido carrega o significado; o
   rótulo nunca quebra linha. */
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:var(--r-full);
  font-size:var(--fs-legenda);font-weight:var(--fw-forte);line-height:1.35;white-space:nowrap;
  max-width:100%;overflow:hidden;text-overflow:ellipsis}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.pill.aguard,.pill.pend,.pill.atras{background:var(--alerta-soft);color:var(--alerta)}
.pill.andamento{background:var(--info-soft);color:var(--info)}
.pill.final,.pill.pago,.pill.online{background:var(--ok-soft);color:var(--ok)}
.pill.cancel,.pill.contest{background:var(--erro-soft);color:var(--erro)}
.pill.plain,.pill.offline{background:var(--cinza-100);color:var(--cinza)}
/* Esperando e online pulsam de leve; o resto é estático. */
.pill.aguard::before,.pill.online::before{animation:pulsaPonto 1.8s ease-in-out infinite}
@keyframes pulsaPonto{0%,100%{opacity:1}50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.pill::before{animation:none!important}}

/* ---------- Delivery list item ---------- */
.d-item{display:block;width:100%;text-align:left;background:var(--surface);border:var(--borda);
  border-radius:var(--r-lg);padding:var(--sp-3) var(--sp-4);box-shadow:var(--sh-sm);
  cursor:pointer;margin-bottom:var(--sp-2);font-family:var(--ff);font-size:var(--fs-corpo);
  color:var(--grafite)}
.d-item:active{background:var(--cinza-50)}
.d-item .top{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2);
  margin-bottom:var(--sp-1)}
.d-item .route{font-weight:var(--fw-forte);min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.d-item .val{font-weight:var(--fw-destaque);color:var(--grafite);font-size:1rem;
  font-variant-numeric:tabular-nums}
.d-item .code{font-size:var(--fs-legenda);color:var(--cinza);font-weight:var(--fw-medio)}

/* ---------- Online toggle (motoboy) ---------- */
.toggle-online{display:flex;border-radius:16px;overflow:hidden;border:2px solid var(--cinza-100);background:var(--cinza-50)}
.toggle-online button{flex:1;padding:16px;border:none;background:transparent;font-weight:800;
  font-size:1.02rem;color:var(--cinza);cursor:pointer;transition:.15s}
.toggle-online button.on{background:var(--grafite);color:var(--surface)}
.toggle-online button.on.green{background:var(--ok)}
.status-live{display:flex;align-items:center;gap:8px;margin-top:12px;font-weight:600;font-size:.92rem}
.beacon{width:10px;height:10px;border-radius:50%;background:var(--ok);position:relative}
.beacon::after{content:"";position:absolute;inset:-5px;border-radius:50%;
  border:2px solid var(--ok);animation:ping 1.6s ease-out infinite;opacity:.6}
@keyframes ping{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.8);opacity:0}}
.beacon.off{background:var(--cinza-300)}.beacon.off::after{display:none}

/* ---------- Passo da corrida ativa (motoboy) ----------
   Uma etapa por vez: onde está no fluxo, o que fazer agora, e a ação. */
.passo{background:var(--surface);border:var(--borda);border-radius:var(--r-lg);padding:var(--card-pad);
  box-shadow:var(--sh-sm)}
.passo .progress{display:flex;gap:4px;margin-bottom:var(--sp-4)}
.passo .progress i{height:4px;flex:1;border-radius:var(--r-full);background:var(--cinza-100)}
.passo .progress i.done{background:var(--laranja-soft)}
.passo .progress i.now{background:var(--laranja)}
.passo-titulo{font-size:1.25rem;font-weight:var(--fw-destaque);letter-spacing:-.02em;
  line-height:1.2}
.passo-sub{color:var(--cinza);font-size:var(--fs-desc);margin-top:2px}
.passo-prazo{margin-top:var(--sp-4)}
.passo .btn{margin-top:var(--sp-4)}
.chip-actions.grade{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2)}
.chip-actions.grade .chip{padding:0 var(--sp-2);font-size:var(--fs-legenda)}
.chip-actions.grade .chip svg{width:15px;height:15px}

/* ---------- Timeline ---------- */
.timeline{position:relative;padding-left:6px}
.tl-step{position:relative;padding:0 0 16px 30px}
.tl-step:last-child{padding-bottom:0}
.tl-step::before{content:"";position:absolute;left:9px;top:20px;bottom:-2px;width:2px;background:var(--cinza-100)}
.tl-step:last-child::before{display:none}
.tl-dot{position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;
  background:var(--surface);border:2px solid var(--cinza-300);display:grid;place-items:center}
.tl-step.done .tl-dot{background:var(--ok);border-color:var(--ok);color:var(--surface)}
.tl-step.now .tl-dot{background:var(--laranja);border-color:var(--laranja);color:var(--surface);
  box-shadow:0 0 0 5px var(--laranja-ring)}
.tl-dot svg{width:12px;height:12px}
.tl-step .t{font-weight:700;font-size:.95rem}
.tl-step.pending .t{color:var(--cinza)}
.tl-step .when{font-size:.76rem;color:var(--cinza)}

/* ---------- Map ---------- */
/* O Leaflet usa z-index até 1000 nos próprios panes/controles. `isolation`
   cria um contexto de empilhamento no container: tudo do mapa passa a ser
   resolvido AQUI DENTRO e nunca sobe acima de header, nav, modal ou toast. */
.map{width:100%;height:230px;border-radius:16px;overflow:hidden;border:1px solid var(--cinza-100);
  box-shadow:var(--sh-sm);background:var(--cinza-100);
  position:relative;z-index:var(--camada-mapa);isolation:isolate}
.map.tall{height:300px}
.leaflet-container{font-family:var(--ff)}
.mk{display:grid;place-items:center;width:34px;height:34px;border-radius:50% 50% 50% 4px;
  transform:rotate(45deg);box-shadow:var(--sh);border:2px solid var(--surface)}
.mk>svg{transform:rotate(-45deg);width:17px;height:17px;color:var(--surface)}
.mk.moto>svg{transform:none}
.mk.loja{background:var(--grafite)}
.mk.cli{background:var(--laranja)}
.mk.moto{background:var(--ok);border-radius:50%;transform:none}
.mk.moto>span{transform:none}

/* ---------- Stat tiles ---------- */
.stat{background:var(--surface);border:var(--borda);border-radius:var(--r-lg);padding:var(--sp-3) var(--sp-4);
  box-shadow:var(--sh-sm)}
.stat .n{font-size:var(--fs-valor);font-weight:var(--fw-destaque);letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;line-height:1.2}
.stat .n.orange{color:var(--laranja-700)}
.stat .l{font-size:var(--fs-legenda);color:var(--cinza);margin-top:2px;font-weight:var(--fw-medio)}
/* Dentro de card, o tile perde a moldura: vira só número + rótulo. */
.card .stat{background:transparent;border:0;box-shadow:none;padding:var(--sp-2) 0}

/* ---------- Empty state ---------- */
.empty{text-align:center;padding:var(--sp-10) var(--sp-4);color:var(--cinza)}
.empty .ico{width:56px;height:56px;border-radius:var(--r-lg);background:var(--cinza-100);
  display:grid;place-items:center;margin:0 auto var(--sp-3);color:var(--cinza)}
.empty .ico svg{width:26px;height:26px}
.empty h3{color:var(--grafite);margin-bottom:4px}
.empty p{max-width:290px;margin:0 auto;font-size:var(--fs-desc)}
.empty .btn{max-width:280px;margin:var(--sp-5) auto 0}

/* ---------- Loading ---------- */
.spinner{width:24px;height:24px;border:2.5px solid var(--cinza-100);border-top-color:var(--laranja);
  border-radius:50%;animation:spin .7s linear infinite;margin:var(--sp-8) auto;display:block}
@keyframes spin{to{transform:rotate(360deg)}}
.skeleton{background:linear-gradient(90deg,var(--sk-base) 25%,var(--sk-brilho) 37%,var(--sk-base) 63%);
  background-size:400% 100%;animation:sk 1.3s ease infinite;border-radius:var(--r)}
@keyframes sk{0%{background-position:100% 0}100%{background-position:-100% 0}}
.sk-card{height:84px;margin-bottom:var(--sp-2)}
.sk-linha{height:12px;margin-bottom:var(--sp-2)}
.sk-linha.curta{width:45%}
@media(prefers-reduced-motion:reduce){.skeleton{animation:none}}

/* ---------- Toast ---------- */
.toast-wrap{position:fixed;left:0;right:0;bottom:calc(var(--nav-h) + var(--safe-b) + 14px);
  display:flex;flex-direction:column;align-items:center;gap:8px;z-index:var(--camada-toast);pointer-events:none;padding:0 14px}
/* O toast é aviso, não alvo: nada nele é clicável. Com pointer-events:auto ele
   ficava sobre o botão principal por ~3 s e engolia o toque da ação. */
.toast{max-width:520px;width:100%;pointer-events:none;background:var(--grafite);color:var(--surface);
  padding:13px 16px;border-radius:14px;box-shadow:var(--sh-lg);display:flex;align-items:center;gap:10px;
  font-weight:600;font-size:.93rem;animation:toastin .25s ease}
.toast .i{width:22px;height:22px;flex:none;display:grid;place-items:center;border-radius:7px}
.toast.ok .i{background:var(--ok)}.toast.err .i{background:var(--erro)}.toast.info .i{background:var(--laranja)}
@keyframes toastin{from{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}}

/* ---------- Modal / bottom sheet ---------- */
.sheet-bg{position:fixed;inset:0;background:rgba(16,24,40,.5);z-index:var(--camada-modal);display:none;
  align-items:flex-end;justify-content:center;backdrop-filter:blur(2px)}
.sheet-bg.show{display:flex}
.sheet{width:100%;max-width:680px;max-height:92dvh;overflow:auto;background:var(--surface);
  border-radius:24px 24px 0 0;padding:8px 18px calc(20px + var(--safe-b));animation:sheetup .28s cubic-bezier(.2,.9,.3,1)}
.sheet .grip{width:42px;height:5px;border-radius:3px;background:var(--cinza-300);margin:8px auto 12px}
@keyframes sheetup{from{transform:translateY(100%)}to{transform:translateY(0)}}
@media(min-width:560px){.sheet-bg{align-items:center}.sheet{border-radius:24px;max-height:88dvh}}

/* ---------- Bottom navigation ---------- */
.bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:var(--camada-nav);display:flex;
  background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-top:var(--borda);
  padding-bottom:var(--safe-b);height:calc(var(--nav-h) + var(--safe-b))}
.bottomnav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;color:var(--cinza);font-size:.6875rem;font-weight:var(--fw-medio);text-decoration:none;
  position:relative;min-width:0}
.bottomnav a svg{width:22px;height:22px}
/* Estado ativo: cor + peso + marca superior. Não depende só de cor. */
.bottomnav a.active{color:var(--laranja-700);font-weight:var(--fw-forte)}
.bottomnav a.active svg{stroke:var(--laranja)}
.bottomnav a.active::before{content:"";position:absolute;top:-1px;width:24px;height:3px;
  border-radius:0 0 3px 3px;background:var(--laranja)}
.navwrap{max-width:680px;margin:0 auto;width:100%;display:flex}

/* ---------- Tutorial / onboarding ---------- */
.tut-bg{position:fixed;inset:0;background:rgba(16,24,40,.62);z-index:var(--camada-tutorial);display:none;
  align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(3px)}
.tut-bg.show{display:flex}
.tut{width:100%;max-width:420px;background:var(--surface);border-radius:24px;overflow:hidden;box-shadow:var(--sh-lg);animation:sheetup .3s cubic-bezier(.2,.9,.3,1)}
.tut .art svg{width:60px;height:60px}
.tut .art{height:170px;display:grid;place-items:center;font-size:70px;
  background:linear-gradient(135deg,var(--laranja) 0%,var(--orange-2) 100%);color:var(--surface)}
.tut .body{padding:22px}
.tut .body h3{font-size:1.28rem}
.tut .body p{color:var(--grafite-500);font-size:.98rem}
.tut .dots{display:flex;gap:6px;justify-content:center;margin:16px 0}
.tut .dots i{width:7px;height:7px;border-radius:50%;background:var(--cinza-300)}
.tut .dots i.on{background:var(--laranja);width:20px;border-radius:4px}
.tut .nav{display:flex;gap:10px;align-items:center;margin-top:6px}
.tut .nav .btn{flex:1}
.tut .skip{text-align:center;margin-top:12px}
.tut .skip a{color:var(--cinza);font-weight:600;font-size:.86rem;cursor:pointer}
.tut .dnms{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:12px;color:var(--cinza);font-size:.82rem}
.tut .dnms input{width:auto}

/* ---------- Divider ---------- */
.hr{height:1px;background:var(--cinza-100);margin:var(--sp-4) 0;border:0}
/* Rótulo de seção: pequeno, discreto, sem quebrar linha. */
.lead{display:flex;align-items:center;gap:6px;font-weight:var(--fw-forte);color:var(--cinza);
  font-size:var(--fs-legenda);text-transform:uppercase;letter-spacing:.04em;
  margin:0 0 var(--sp-3);white-space:nowrap}
.lead .ico-svg{flex:none}

/* ---------- Acompanhamento público ---------- */
.tracking-page{background:var(--tracking-bg);overscroll-behavior-y:auto}
.tracking-public{width:100%;max-width:560px;min-height:100dvh;margin:0 auto;background:var(--cinza-50);
  box-shadow:0 0 48px rgba(25,28,31,.08)}
.tracking-brand{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;
  padding-top:calc(14px + env(safe-area-inset-top,0px));background:var(--surface);border-bottom:1px solid var(--cinza-100)}
.tracking-safe{color:var(--cinza);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
#trackingView{padding:16px 16px 28px}
.tracking-loading{min-height:65dvh;display:grid;place-content:center;text-align:center;color:var(--cinza)}
.tracking-loading .spinner{margin-bottom:2px}
.tracking-hero{background:var(--grafite);color:var(--surface);border-radius:24px;padding:20px;
  box-shadow:0 16px 34px rgba(25,28,31,.18);overflow:hidden;position:relative}
.tracking-hero::after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;
  right:-96px;top:-108px;border:34px solid rgba(225,100,7,.18);pointer-events:none}
.tracking-status-row{display:flex;align-items:center;justify-content:space-between;gap:8px;position:relative;z-index:1}
.tracking-live{display:inline-flex;align-items:center;gap:8px;font-size:.74rem;font-weight:750;
  text-transform:uppercase;letter-spacing:.05em;color:var(--green-soft)}
.tracking-live i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(18,161,80,.5);
  animation:trackingPulse 1.8s ease-out infinite}
.tracking-live.off{color:rgba(255,255,255,.62)}.tracking-live.off i{background:var(--cinza);animation:none}
.tracking-hero .pill{background:rgba(255,255,255,.12);color:var(--surface);position:relative;z-index:1}
.tracking-eyebrow{margin:22px 0 4px;color:var(--orange-2);font-size:.72rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.09em}
.tracking-hero h1{max-width:380px;margin:0;font-size:clamp(1.7rem,7vw,2.2rem);letter-spacing:-.035em}
.tracking-route-strip{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);align-items:center;
  gap:8px;margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12)}
.tracking-route-point{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:8px;align-items:center;min-width:0}
.tracking-route-point>span{grid-row:1/3;width:28px;height:28px;border-radius:9px;background:rgba(255,255,255,.12);
  display:grid;place-items:center;color:var(--surface)}
.tracking-route-point>span svg{width:15px;height:15px}
.tracking-route-point small{color:rgba(255,255,255,.55);font-size:.64rem;text-transform:uppercase;letter-spacing:.06em}
.tracking-route-point b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.8rem}
.tracking-route-point.end{text-align:right;grid-template-columns:minmax(0,1fr) 28px}
.tracking-route-point.end>span{grid-column:2;grid-row:1/3;background:var(--laranja)}
.tracking-route-line{height:2px;background:rgba(255,255,255,.18);position:relative;overflow:visible}
.tracking-route-line i{position:absolute;width:7px;height:7px;border-radius:50%;top:-3px;left:0;background:var(--surface);
  box-shadow:0 0 0 4px rgba(255,255,255,.14);animation:trackingTravel 2.8s ease-in-out infinite}
.tracking-map-card{background:var(--surface);border-radius:22px;padding:8px;margin-top:14px;border:1px solid var(--cinza-100);
  box-shadow:var(--sh)}
.tracking-map-card .map{border:0;box-shadow:none;border-radius:16px;height:320px}
.tracking-map-meta{display:flex;align-items:center;gap:12px;padding:13px 9px 8px}
.tracking-map-meta .beacon{margin-left:5px;flex:none}
.tracking-map-meta b{display:block;font-size:.86rem}.tracking-map-meta small{display:block;color:var(--cinza);font-size:.72rem}
.tracking-progress{margin-top:14px;padding:18px}
.tracking-timeline{display:grid;gap:0}
.tracking-tl{display:grid;grid-template-columns:26px 1fr;gap:10px;min-height:52px;position:relative}
.tracking-tl:not(:last-child)::after{content:"";position:absolute;left:12px;top:25px;bottom:0;width:2px;background:var(--cinza-100)}
.tracking-tl>span{width:26px;height:26px;border:2px solid var(--cinza-300);border-radius:50%;display:grid;
  place-items:center;background:var(--surface);color:var(--surface);z-index:1}
.tracking-tl>span svg{width:13px;height:13px}
.tracking-tl.done>span{background:var(--ok);border-color:var(--ok)}
.tracking-tl b{display:block;font-size:.91rem;margin-top:2px}.tracking-tl small{display:block;color:var(--cinza);font-size:.72rem}
.tracking-privacy{display:flex;align-items:flex-start;justify-content:center;gap:7px;margin:16px auto 0;
  max-width:390px;color:var(--cinza);font-size:.72rem;text-align:center}
.tracking-privacy svg{width:14px;height:14px;margin-top:1px}
.tracking-state-card{min-height:68dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:38px 24px}
.tracking-state-card .tracking-state-icon{width:70px;height:70px;border-radius:22px;background:var(--cinza-100);
  display:grid;place-items:center;color:var(--grafite-500);margin-bottom:4px}
.tracking-state-card .tracking-state-icon svg{width:31px;height:31px}
.tracking-state-card .tracking-eyebrow{color:var(--laranja-700);margin-top:16px}
.tracking-state-card h1{font-size:1.65rem}.tracking-state-card p:last-child{max-width:320px;color:var(--cinza)}
.tracking-state-card.success .tracking-state-icon{background:var(--ok-soft);color:var(--ok)}
.tracking-footer{text-align:center;color:var(--cinza);font-size:.74rem;font-weight:650;padding:0 16px;
  padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
.share-track{margin:14px 0;padding:14px;background:linear-gradient(135deg,var(--laranja-soft),var(--surface));
  border:1px solid var(--orange-line);border-radius:16px}
.share-track .lead{color:var(--laranja-700)}
.share-track p{font-size:.83rem;color:var(--grafite-500);margin:0 0 10px}
.share-track .btn-row{grid-template-columns:1fr auto}
.share-track .btn-row .chip{justify-content:center}
@keyframes trackingPulse{0%{box-shadow:0 0 0 0 rgba(18,161,80,.55)}70%{box-shadow:0 0 0 8px rgba(18,161,80,0)}100%{box-shadow:0 0 0 0 rgba(18,161,80,0)}}
@keyframes trackingTravel{0%,100%{left:0}50%{left:calc(100% - 7px)}}
@media(max-width:380px){
  .tracking-safe{display:none}.tracking-route-strip{grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr)}
  .tracking-route-point b{font-size:.72rem}.tracking-map-card .map{height:280px}
}

/* Admin: suporte operacional e atualizacao em tempo real. */
.topbar-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.admin-realtime{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:6px 10px;border:1px solid var(--border);border-radius:999px;background:var(--surface);font-size:.72rem;font-weight:700;color:var(--muted)}
.admin-realtime-dot,.support-signal-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#8b949e;box-shadow:0 0 0 3px rgba(139,148,158,.12);flex:0 0 auto}
.admin-realtime.rt-ok{color:#2ea043;border-color:rgba(46,160,67,.35)}
.admin-realtime.rt-ok .admin-realtime-dot,.signal-ok{background:#2ea043;box-shadow:0 0 0 3px rgba(46,160,67,.14)}
.admin-realtime.rt-warn{color:#d29922;border-color:rgba(210,153,34,.35)}
.admin-realtime.rt-warn .admin-realtime-dot,.signal-warn{background:#d29922;box-shadow:0 0 0 3px rgba(210,153,34,.14)}
.admin-realtime.rt-off{color:var(--muted)}
.signal-error{background:#f85149;box-shadow:0 0 0 3px rgba(248,81,73,.14)}
.signal-neutral{background:#8b949e;box-shadow:0 0 0 3px rgba(139,148,158,.12)}

.support-page{max-width:1280px;margin:0 auto;width:100%}
.support-back{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.support-back h1,.occurrence-head h1{margin:3px 0 0}
.support-profile{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:18px;border:1px solid var(--border);border-radius:8px;background:var(--surface);margin-bottom:16px}
.support-avatar{width:72px;height:72px;border-radius:50%;overflow:hidden;background:var(--cinza-50);display:grid;place-items:center;color:var(--brand);border:2px solid rgba(225,100,7,.35)}
.support-avatar img{width:100%;height:100%;object-fit:cover}
.support-avatar .ico-svg{width:34px;height:34px}
.support-profile-copy h1{font-size:1.45rem;margin:3px 0}
.support-profile-copy p{margin:0;color:var(--muted)}
.support-profile-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.support-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
.support-column{display:grid;gap:14px}
.support-card{border:1px solid var(--border);background:var(--surface);border-radius:8px;padding:16px;min-width:0}
.support-card-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px}
.support-card-title h2{font-size:.96rem;margin:0}
.support-card-title>span{font-size:.75rem;color:var(--muted)}
.support-signal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.support-signal{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:9px;padding:11px;border:1px solid var(--border);border-radius:7px;background:var(--cinza-50)}
.support-signal small,.support-signal b,.support-signal span{display:block;min-width:0;overflow-wrap:anywhere}
.support-signal small{font-size:.66rem;text-transform:uppercase;color:var(--muted);font-weight:800;letter-spacing:.04em}
.support-signal b{font-size:.83rem;margin-top:2px}
.support-signal div>span{font-size:.68rem;color:var(--muted);margin-top:2px}
.support-location{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:10px;padding:10px;border-radius:7px;background:var(--cinza-50);font-size:.76rem}
.support-location span{color:var(--muted)}
.support-diagnosis{margin-top:10px;padding:12px;border-left:3px solid #2ea043;border-radius:5px;background:rgba(46,160,67,.08);font-size:.78rem}
.support-diagnosis.has-block{border-color:#f85149;background:rgba(248,81,73,.08)}
.support-diagnosis p{margin:5px 0 0;color:var(--muted)}
.support-diagnosis ul{margin:7px 0 0;padding-left:18px;color:var(--muted)}
.support-device-main{display:grid;gap:3px;padding:12px;background:var(--cinza-50);border-radius:7px;margin-bottom:9px}
.support-device-main span{color:var(--muted);font-size:.75rem}
.support-device-list{display:grid;gap:7px;margin-top:10px}
.support-device-list>div{display:grid;grid-template-columns:auto 1fr;gap:2px 9px;align-items:center;padding:8px 0;border-bottom:1px solid var(--border)}
.support-device-list small{grid-column:2;color:var(--muted);font-size:.7rem}
.support-race,.support-offer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px;border-radius:7px;background:var(--cinza-50)}
.support-race>div,.support-offer{display:grid;gap:3px}
.support-race span,.support-offer span{font-size:.72rem;color:var(--muted)}
.support-offer{margin-top:9px;border-left:3px solid #d29922}
.support-table-list{display:grid}
.support-table-list>div,.support-table-list>button{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 0;border:0;border-bottom:1px solid var(--border);background:transparent;text-align:left;color:inherit;width:100%}
.support-table-list>div:last-child,.support-table-list>button:last-child{border-bottom:0}
.support-table-list b,.support-table-list small{display:block}
.support-table-list small{color:var(--muted);font-size:.7rem;margin-top:2px}
.support-table-list>div>span:last-child{font-size:.75rem;font-weight:700}
.support-priority{width:4px;height:34px;border-radius:3px;background:#8b949e;display:block}
.priority-baixa{background:#8b949e}.priority-media{background:#d29922}.priority-alta{background:#f0883e}.priority-urgente{background:#f85149}
.support-timeline{display:grid;gap:0}
.support-timeline>div{display:grid;grid-template-columns:12px 1fr;gap:9px;padding:8px 0}
.support-timeline>div>span{width:8px;height:8px;border-radius:50%;background:var(--brand);margin-top:5px;position:relative}
.support-timeline>div>span:after{content:"";position:absolute;top:10px;left:3px;width:1px;height:30px;background:var(--border)}
.support-timeline>div:last-child>span:after{display:none}
.support-timeline b,.support-timeline small{display:block}
.support-timeline b{font-size:.77rem}.support-timeline small{font-size:.68rem;color:var(--muted);margin-top:2px}
.support-action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.support-updated{text-align:right;color:var(--muted);font-size:.7rem;margin:10px 0}
.occurrence-head{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:14px}
.support-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:9px}
.support-filters select,.support-filters input{margin:0;min-width:0}
.occurrence-row{grid-template-columns:auto minmax(0,1fr) auto!important}
.support-attachments{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:10px}
.support-attachments>a{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:7px;padding:10px;border:1px solid var(--border);border-radius:7px;text-decoration:none;color:inherit;background:var(--cinza-50)}
.support-attachments .ico-svg{width:20px}.support-attachments small{grid-column:2;color:var(--muted);font-size:.66rem}

@media(max-width:760px){
  .admin-realtime span:last-child{display:none}.admin-realtime{padding:7px}
  .support-profile{grid-template-columns:auto 1fr}.support-profile-actions{grid-column:1/-1;justify-content:stretch}.support-profile-actions .btn{flex:1}
  .support-layout{grid-template-columns:1fr}.support-signal-grid{grid-template-columns:1fr 1fr}
  .support-action-grid{grid-template-columns:1fr}.support-filters{grid-template-columns:1fr 1fr}
  .support-race{align-items:flex-start;flex-direction:column}.support-race .btn{width:100%}
}
@media(max-width:430px){
  .support-signal-grid,.support-filters,.support-attachments{grid-template-columns:1fr}
  .support-avatar{width:58px;height:58px}.support-profile-copy h1{font-size:1.15rem}
  .occurrence-head{align-items:flex-start;flex-direction:column}.occurrence-head .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .tracking-live i,.tracking-route-line i,.beacon::after{animation:none!important}
}

/* ---------- Pagamento (loja) ---------- */
.bloco-pagamento{margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:var(--borda)}
.pix-chave{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  background:var(--cinza-50);border-radius:var(--r);padding:var(--sp-3)}
.pix-chave>div{min-width:0}
.pix-chave b{display:block;font-weight:var(--fw-forte);overflow-wrap:anywhere;margin:1px 0}
.pix-chave .legenda{display:block}
.pix-chave .chip{flex:none;width:var(--alvo);padding:0}

/* ---------- Perfil ---------- */
.profile-hero{display:flex;align-items:center;gap:var(--sp-3);background:var(--grafite);
  color:var(--surface);border-radius:var(--r-lg);padding:var(--sp-4);margin-bottom:var(--sp-4)}
.profile-avatar{width:48px;height:48px;border-radius:var(--r);background:var(--laranja);
  display:grid;place-items:center;font-size:1.25rem;font-weight:var(--fw-destaque);flex:none}
.profile-ident{min-width:0}
.profile-hero h1{font-size:1.125rem;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-hero p{color:rgba(255,255,255,.6);font-size:var(--fs-legenda);margin:1px 0 0}
.profile-grid{display:grid;gap:0}
.profile-field{padding:10px 0;border-bottom:var(--borda)}
.profile-field:last-child{border-bottom:0}
.profile-field small{display:block;color:var(--cinza);font-size:var(--fs-legenda);
  font-weight:var(--fw-medio);margin-bottom:1px}
.profile-field b,.profile-field span{display:block;overflow-wrap:anywhere}
.profile-lock{display:flex;align-items:flex-start;gap:var(--sp-2);background:var(--cinza-50);
  color:var(--grafite-500);border-radius:var(--r);padding:var(--sp-3);
  font-size:var(--fs-legenda);margin-top:var(--sp-3)}
.profile-lock svg{width:16px;height:16px;color:var(--cinza);margin-top:1px;flex:none}
.photo-preview{display:block;width:100%;max-height:52dvh;object-fit:contain;background:var(--cinza-50);
  border:1px solid var(--cinza-100);border-radius:16px;margin:12px 0}
.support-in-run{width:100%}

/* ---------- Corrida ativa (loja) ---------- */
.corrida-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3);
  margin-bottom:var(--sp-3)}
.corrida-titulo{min-width:0}
.corrida-titulo h2{margin:2px 0 0;font-size:var(--fs-secao);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.corrida-head .pill{flex:none;margin-top:2px}
.motoboy-linha{margin-top:var(--sp-3)}
.motoboy-nome b{display:block;font-weight:var(--fw-forte)}
.motoboy-nome .legenda{display:block;margin-top:1px}
/* Acompanhamento recolhível: some do caminho quando não interessa. */
.detalhe-acompanhamento{margin-top:var(--sp-4);border-top:var(--borda);padding-top:var(--sp-3)}
.detalhe-acompanhamento summary{list-style:none;display:flex;align-items:center;
  justify-content:space-between;gap:var(--sp-2);cursor:pointer;min-height:var(--alvo);
  margin:calc(var(--sp-2) * -1) 0}
.detalhe-acompanhamento summary::-webkit-details-marker{display:none}
.detalhe-acompanhamento summary .lead{margin:0}
.detalhe-acompanhamento summary .ico-svg{width:18px;height:18px;color:var(--cinza);
  transition:transform .15s}
.detalhe-acompanhamento[open] summary .ico-svg{transform:rotate(90deg)}
.detalhe-acompanhamento .timeline{margin-top:var(--sp-3)}
/* Ações secundárias: discretas, agrupadas no fim do card. */
.acoes-secundarias{display:flex;flex-direction:column;gap:2px;margin-top:var(--sp-3);
  padding-top:var(--sp-2);border-top:var(--borda)}
.acoes-secundarias:empty{display:none}
/* Valor: rótulo discreto à esquerda, número forte à direita. */
.valor-linha{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);
  margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:var(--borda)}
.valor-linha .valor{color:var(--grafite)}
/* Linha rótulo→valor: substitui grades de mini-cards dentro de card. */
.linha-dado{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:11px 0;border-bottom:var(--borda);font-size:var(--fs-corpo)}
.linha-dado:last-child{border-bottom:0;padding-bottom:0}
.linha-dado b{font-weight:var(--fw-forte);font-variant-numeric:tabular-nums}
.linha-dado.destaque{border-top:var(--borda);border-bottom:0;margin-top:var(--sp-1);
  padding-top:var(--sp-3);padding-bottom:0}
.linha-dado.destaque b{font-size:var(--fs-secao)}
.texto-erro{color:var(--erro)}

/* ---------- Suporte / chat ---------- */
.support-filter{display:grid;grid-template-columns:auto minmax(0,220px);align-items:end;gap:10px}
.support-filter label{margin:0 0 10px}
.support-item .support-preview{font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  margin:7px 0 3px;color:var(--grafite-500)}
.unread{min-width:22px;height:22px;border-radius:999px;background:var(--laranja);color:var(--surface);
  display:inline-grid;place-items:center;padding:0 6px;font-size:.72rem;font-weight:800}
.support-active{display:flex;align-items:flex-start;gap:6px;margin-top:9px;color:var(--info)}
.sheet-title p{margin-top:2px}
.chat-page{display:flex;flex-direction:column;min-height:calc(100dvh - 165px)}
.chat-heading{flex:1;min-width:0}.chat-heading h1{font-size:1.08rem;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.linked-race{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;
  background:var(--laranja-soft);border:1px solid var(--orange-line);border-radius:16px}
.linked-race .chip{flex:none}
.support-resolved{display:flex;align-items:flex-start;gap:8px;background:var(--ok-soft);color:var(--wa);
  border-radius:14px;padding:11px 13px;margin-bottom:12px;font-size:.82rem;font-weight:600}
.support-resolved svg{width:18px;height:18px;flex:none}
.chat-messages{display:flex;flex-direction:column;gap:9px;min-height:280px;max-height:55dvh;
  overflow-y:auto;padding:8px 2px 14px}
.chat-message{max-width:86%;padding:10px 12px;border-radius:16px;background:var(--surface);
  border:1px solid var(--cinza-100);box-shadow:var(--sh-sm);align-self:flex-start}
.chat-message.mine{align-self:flex-end;background:var(--laranja-soft);border-color:var(--orange-line);border-bottom-right-radius:5px}
.chat-message.theirs{border-bottom-left-radius:5px}
.chat-who{font-size:.68rem;font-weight:750;color:var(--cinza);margin-bottom:3px}
.chat-text{font-size:.92rem;overflow-wrap:anywhere}
.chat-time{text-align:right;color:var(--cinza);font-size:.66rem;margin-top:4px}
.chat-image{display:block;margin-top:6px}.chat-image img{display:block;width:100%;max-width:280px;
  max-height:280px;object-fit:cover;border-radius:11px}
.chat-compose{display:grid;grid-template-columns:42px 1fr 42px;gap:8px;align-items:end;position:sticky;
  bottom:calc(var(--nav-h) + var(--safe-b) + 5px);padding:9px;background:rgba(255,255,255,.96);
  border:1px solid var(--cinza-100);border-radius:17px;box-shadow:var(--sh)}
.chat-compose textarea{min-height:42px;max-height:120px;padding:10px 12px;resize:none}
.chat-compose .iconbtn{width:42px;height:42px}.chat-compose .send{background:var(--laranja);color:var(--surface);border-color:var(--laranja)}
.chat-file-name{font-size:.72rem;color:var(--cinza);padding:5px 10px;min-height:20px}

/* ---------- Central de Ajuda ---------- */
.help-search{display:flex;align-items:center;gap:8px;background:var(--surface);border:1.5px solid var(--cinza-300);
  border-radius:14px;padding:0 12px}
.help-search:focus-within{border-color:var(--laranja);box-shadow:0 0 0 4px var(--laranja-ring)}
.help-search svg{width:20px;height:20px;color:var(--cinza)}
.help-search input{border:0;padding:13px 2px;box-shadow:none!important}
.help-items{display:grid;gap:9px;margin-bottom:14px}
.help-item{background:var(--surface);border:1px solid var(--cinza-100);border-radius:15px;box-shadow:var(--sh-sm);overflow:hidden}
.help-item summary{list-style:none;cursor:pointer;padding:14px;display:flex;justify-content:space-between;align-items:center;gap:10px;
  font-weight:700}
.help-item summary::-webkit-details-marker{display:none}
.help-item summary small{display:block;color:var(--laranja-700);font-size:.65rem;text-transform:uppercase;
  letter-spacing:.05em;margin-bottom:2px}
.help-item summary svg{width:18px;height:18px;color:var(--cinza);transition:.15s}
.help-item[open] summary svg{transform:rotate(90deg)}
.help-answer{padding:0 14px 14px;color:var(--grafite-500);font-size:.9rem}
.help-actions{display:grid;gap:10px}

/* ---------- Alertas de novas corridas ---------- */
.notification-card .lead{margin-bottom:8px}
.notification-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0}
.notification-row+.notification-row{border-top:1px solid var(--cinza-100)}
.notification-copy{min-width:0}.notification-copy b{display:block}.notification-copy small{display:block;margin-top:3px}
.switch{position:relative;display:inline-flex;flex:0 0 auto;width:52px;height:30px}
.switch input{position:absolute;opacity:0;pointer-events:none}
.switch span{width:100%;height:100%;border-radius:999px;background:var(--cinza-300);transition:.2s;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.switch span::after{content:"";display:block;width:24px;height:24px;margin:3px;border-radius:50%;background:white;box-shadow:0 2px 5px rgba(0,0,0,.22);transition:.2s}
.switch input:checked+span{background:var(--ok)}
.switch input:checked+span::after{transform:translateX(22px)}
.notification-status{display:flex;align-items:center;gap:7px;margin:9px 0 12px}
.notification-status i{width:9px;height:9px;border-radius:50%;background:var(--cinza-300)}
.notification-status.on i{background:var(--ok);box-shadow:0 0 0 4px var(--ok-soft)}
.notification-status.off i{background:var(--laranja);box-shadow:0 0 0 4px var(--laranja-soft)}
.notification-warning{margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--laranja-soft);color:var(--laranja-700);font-size:.82rem}
.push-diagnostic{margin:12px 0;max-height:52dvh;overflow:auto;white-space:pre-wrap;word-break:break-word;
  padding:12px;border:1px solid var(--cinza-300);border-radius:12px;background:var(--cinza-50);
  color:var(--grafite-500);font:12px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace;user-select:text}

/* Telas estreitas (360px): aperta o gutter, nunca o alvo de toque. */
@media(max-width:380px){
  :root{--card-pad:14px}
  .wrap{padding-left:var(--sp-3);padding-right:var(--sp-3)}
  .topbar{padding-left:var(--sp-3);padding-right:var(--sp-3)}
  .brand{font-size:.9375rem}.brand .dot{width:26px;height:26px}
  h1{font-size:1.25rem}
  .linked-race{align-items:flex-start;flex-direction:column}.chat-message{max-width:91%}
  .bottomnav a{font-size:.65rem}
}

/* ---------- Painel de estado do motoboy ----------
   Um bloco só responde "estou trabalhando?". Grafite = offline, verde = online
   e disponivel, laranja = em entrega. */
.painel-estado{border-radius:var(--r-lg);padding:var(--sp-4);color:var(--surface);background:var(--grafite)}
.painel-estado.disponivel{background:var(--ok)}
.painel-estado.ocupado{background:var(--laranja)}
.painel-topo{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4)}
.painel-info{min-width:0}
.painel-rotulo{display:block;font-size:var(--fs-secao);font-weight:var(--fw-destaque);
  letter-spacing:-.01em}
.painel-sub{display:block;margin-top:2px;font-size:var(--fs-desc);color:rgba(255,255,255,.78)}
.painel-aviso{margin:var(--sp-3) 0 0;padding-top:var(--sp-3);font-size:var(--fs-desc);
  color:rgba(255,255,255,.85);border-top:1px solid rgba(255,255,255,.2)}
/* Interruptor de trabalho: alvo grande, estado obvio pela posicao e pela cor. */
.switch-trabalho{flex:none;width:76px;height:44px;border-radius:var(--r-full);border:0;
  background:rgba(255,255,255,.25);cursor:pointer;padding:0;position:relative;
  transition:background .2s}
.switch-trabalho i{position:absolute;top:4px;left:4px;width:36px;height:36px;border-radius:50%;
  background:var(--surface);transition:transform .2s cubic-bezier(.2,.9,.3,1);
  box-shadow:0 2px 6px rgba(0,0,0,.25)}
.switch-trabalho[aria-checked="true"] i{transform:translateX(32px)}
.switch-trabalho:disabled{opacity:.45;cursor:not-allowed}
.switch-trabalho:focus-visible{outline:2px solid var(--surface);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.switch-trabalho i{transition:none}}

/* Requisitos do ONLINE: checklist de trabalho, nao diagnostico tecnico. */
.req-line{display:flex;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-3) 0;
  border-bottom:var(--borda)}
.req-line:last-of-type{border-bottom:0}
.req-marca{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center}
.req-marca svg{width:15px;height:15px}
.req-marca.ok{background:var(--ok-soft);color:var(--ok)}
.req-marca.falta{background:var(--alerta-soft);color:var(--alerta)}
.req-texto{min-width:0}
.req-texto b{display:block;font-weight:var(--fw-forte)}
.req-texto small{display:block;margin-top:1px;font-size:var(--fs-legenda);line-height:1.4}
#req-actions:not(:empty){margin-top:var(--sp-3);display:grid;gap:var(--sp-2)}
/* Requisito que barrou a última tentativa de ficar online. */
.req-cartao.destacado{border-color:var(--laranja);box-shadow:0 0 0 3px var(--laranja-ring)}

/* Espera por corridas: sinal de vida sem virar mais um card. */
.aguardando-corrida{text-align:center;padding:var(--sp-8) var(--sp-4)}
.aguardando-corrida .radar{width:64px;height:64px;border-radius:50%;background:var(--ok-soft);
  color:var(--ok);display:grid;place-items:center;margin:0 auto var(--sp-4);position:relative}
.aguardando-corrida .radar svg{width:28px;height:28px}
.aguardando-corrida .radar::after{content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--ok);animation:ping 2s ease-out infinite;opacity:.5}
.aguardando-corrida h3{margin-bottom:2px}
.aguardando-corrida p{max-width:280px;margin:0 auto;font-size:var(--fs-desc)}
@media(prefers-reduced-motion:reduce){.aguardando-corrida .radar::after{animation:none}}

/* Estado "Procurando motoboy" (loja / AGUARDANDO_MOTOBOY).
   É a informação principal da tela enquanto dura: ocupa o topo do card, com o
   contador em destaque e a mensagem progressiva embaixo. */
.busca-card{padding:var(--sp-4);border:1px solid var(--orange-line);background:var(--laranja-soft);
  border-radius:var(--r-lg)}
.busca-top{display:flex;align-items:center;gap:var(--sp-3)}
.busca-dot{width:10px;height:10px;border-radius:50%;background:var(--laranja);flex:none;
  position:relative}
.busca-dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;
  border:2px solid var(--laranja);animation:ping 1.8s ease-out infinite;opacity:.55}
.busca-titulo{font-weight:var(--fw-destaque);font-size:var(--fs-secao);line-height:1.25;
  color:var(--grafite)}
.busca-tempo{margin-top:1px;color:var(--laranja-700);font-size:var(--fs-legenda)}
.busca-tempo b{font-variant-numeric:tabular-nums;font-weight:var(--fw-forte)}
.busca-msg{margin-top:var(--sp-3);color:var(--grafite-500);font-size:var(--fs-desc);
  line-height:1.5;transition:opacity .18s ease}
.busca-msg.fade-out{opacity:0}
@media (prefers-reduced-motion: reduce){
  .busca-msg{transition:none}.busca-msg.fade-out{opacity:1}.busca-dot::after{animation:none}
}

/* Cadastro público */
.cadastro-tipo{display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;
  text-align:center;border:2px solid transparent;transition:border-color .18s,transform .18s}
.cadastro-tipo:hover,.cadastro-tipo.selecionado{border-color:var(--laranja);transform:translateY(-1px)}
.cadastro-tipo small{color:var(--cinza)}.cadastro-icone{font-size:2rem}
.cadastro-sucesso{width:56px;height:56px;margin:0 auto 12px;border-radius:50%;display:grid;
  place-items:center;background:var(--ok-soft);color:var(--ok)}
.cadastro-sucesso svg{width:30px;height:30px}
.install-pwa{text-align:center}.install-pwa-icon{display:flex;justify-content:center;margin-bottom:12px}
.install-pwa-icon .dot{width:58px;height:58px;font-size:1.5rem;border-radius:18px}
.install-pwa-highlight{outline:2px solid var(--laranja);outline-offset:2px}
.campaign-list{display:grid;gap:10px}.campaign-card{padding:15px 16px;border-radius:16px;
  background:var(--grafite);color:var(--surface);box-shadow:var(--sh-sm)}
.campaign-card.dynamic{background:linear-gradient(135deg,var(--grafite),var(--orange-ink))}
.campaign-card h3{margin:3px 0 5px}.campaign-card p{margin:0;color:rgba(255,255,255,.88)}
.campaign-card small{display:block;margin-top:7px;color:rgba(255,255,255,.65)}
.campaign-type{font-size:.66rem;font-weight:850;letter-spacing:.08em;color:var(--orange-2)}
.check-option{display:flex;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-3) 0;margin:0;
  min-height:var(--alvo);cursor:pointer;font-size:var(--fs-corpo);color:var(--grafite)}
.check-option input{width:22px;height:22px;flex:none;margin-top:1px;accent-color:var(--laranja)}
.check-option b{display:block;font-weight:var(--fw-forte)}
.check-option small{display:block;margin-top:1px;font-size:var(--fs-legenda)}

/* ---------- Segmented control ---------- */
.segmented{display:flex;gap:4px;padding:4px;background:var(--cinza-100);border-radius:var(--r);
  margin-bottom:var(--sp-2)}
.segmented .seg{flex:1;min-height:var(--btn-h-sm);border:0;border-radius:var(--r-xs);
  background:transparent;color:var(--cinza);font-family:var(--ff);font-size:var(--fs-desc);
  font-weight:var(--fw-medio);cursor:pointer;transition:background .15s,color .15s}
.segmented .seg.on{background:var(--surface);color:var(--grafite);font-weight:var(--fw-forte);
  box-shadow:var(--sh-sm)}
.return-title{font-size:.72rem;font-weight:900;letter-spacing:.06em;color:var(--laranja-700);
  margin-bottom:7px}.operational-closed{border-left:4px solid var(--laranja)}
/* Tarifa de localidade: a loja precisa ver, antes de confirmar, que o preço
   não veio da tabela por km. */
.tarifa-especial{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  margin-bottom:var(--sp-3);padding:8px 11px;border-radius:var(--r-xs);
  background:var(--amber-soft);color:var(--amber);border:1px solid rgba(178,94,0,.28);
  font-size:var(--fs-sec);font-weight:var(--fw-destaque)}

/* ---------- Oferta de corrida (motoboy) ----------
   Ordem de leitura de quem está na moto: valor, tempo, rota, tipo. */
.oferta{display:grid;gap:var(--sp-4);padding-bottom:var(--sp-2)}
.oferta-valor{text-align:center}
.oferta-valor strong{display:block;font-size:2.25rem;font-weight:var(--fw-destaque);
  letter-spacing:-.03em;color:var(--grafite);line-height:1.1;font-variant-numeric:tabular-nums}
.oferta-etiquetas{display:flex;justify-content:center;gap:6px;margin-top:var(--sp-2);flex-wrap:wrap}
.etiqueta{display:inline-block;padding:4px 10px;border-radius:var(--r-full);
  font-size:var(--fs-legenda);font-weight:var(--fw-forte)}
.etiqueta.ifood{background:var(--erro-soft);color:var(--erro)}
.etiqueta.retorno{background:var(--laranja-soft);color:var(--laranja-700)}
/* Tempo: número grande + barra que esvazia. Vira vermelho no fim. */
.oferta-tempo-topo{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--sp-3);margin-bottom:6px;font-size:var(--fs-desc);color:var(--cinza)}
.oferta-tempo-topo b{font-size:var(--fs-secao);color:var(--grafite);
  font-variant-numeric:tabular-nums}
.oferta-barra{height:6px;border-radius:var(--r-full);background:var(--cinza-100);overflow:hidden}
.oferta-barra i{display:block;height:100%;width:100%;border-radius:var(--r-full);
  background:var(--laranja);transition:width .25s linear}
.oferta-barra i.urgente{background:var(--erro)}
@media(prefers-reduced-motion:reduce){.oferta-barra i{transition:none}}
/* Rota: dois pontos, ligados por uma linha. */
.oferta-rota{display:grid;gap:var(--sp-3);background:var(--cinza-50);border-radius:var(--r);
  padding:var(--sp-3);position:relative}
.oferta-ponto{display:flex;align-items:flex-start;gap:var(--sp-3);min-width:0}
.oferta-ponto>div{min-width:0}
.oferta-ponto b{display:block;font-weight:var(--fw-forte);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.oferta-ponto small{display:block}
.ponto-marca{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
  position:relative;z-index:1}
.ponto-marca svg{width:15px;height:15px}
.ponto-marca.retirada{background:var(--grafite);color:var(--surface)}
.ponto-marca.entrega{background:var(--laranja);color:var(--surface)}
.oferta-ponto:first-child .ponto-marca::after{content:"";position:absolute;top:30px;left:50%;
  width:2px;height:var(--sp-3);background:var(--cinza-200);transform:translateX(-50%)}

/* ---------- Ganhos e pagamento (motoboy) ---------- */
.ganho-hoje{background:var(--grafite);color:var(--surface);border-radius:var(--r-lg);
  padding:var(--sp-5) var(--sp-4);text-align:center}
.ganho-hoje .legenda{color:rgba(255,255,255,.65)}
.ganho-hoje strong{display:block;margin:2px 0;font-size:2.25rem;font-weight:var(--fw-destaque);
  letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}
.ganho-hoje .muted{color:rgba(255,255,255,.65)}
.tela-head .pill{flex:none}
.pergunta-pagamento{text-align:center;padding-bottom:var(--sp-4);margin-bottom:var(--sp-1);
  border-bottom:var(--borda)}
.pergunta-pagamento strong{display:block;margin:2px 0;font-size:2rem;
  font-weight:var(--fw-destaque);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.texto-ok{color:var(--ok)}
/* Avisos de uma linha, no lugar de caixas de cotação reaproveitadas. */
.aviso-ok,.aviso-neutro{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);
  padding:var(--sp-3);border-radius:var(--r);font-size:var(--fs-desc);
  font-weight:var(--fw-medio);margin-top:var(--sp-3)}
.aviso-ok{background:var(--ok-soft);color:var(--ok)}
.aviso-ok svg{width:17px;height:17px}
.aviso-neutro{background:var(--cinza-50);color:var(--cinza)}
/* Fim da entrega: confirmação sóbria, sem emoji gigante. */
.entrega-concluida{text-align:center;padding:var(--sp-6) var(--sp-4);background:var(--surface);
  border:var(--borda);border-radius:var(--r-lg);box-shadow:var(--sh-sm)}
.entrega-concluida .marca-ok{width:52px;height:52px;border-radius:50%;background:var(--ok-soft);
  color:var(--ok);display:grid;place-items:center;margin:0 auto var(--sp-3)}
.entrega-concluida .marca-ok svg{width:26px;height:26px}
.entrega-concluida h3{margin-bottom:2px}
.entrega-concluida b{color:var(--grafite);font-weight:var(--fw-destaque)}

/* ===========================================================
   MOTOBOY — padrão visual de app (mockup de referência)
   Etapas: laranja = oferta/marca · azul = deslocamento ·
   verde = entrega/sucesso · roxo = retorno
   =========================================================== */

/* ---------- Saudação ---------- */
.saudacao{margin-bottom:var(--sp-4)}
.saudacao h1{margin:0}
.saudacao p{margin:2px 0 0;color:var(--cinza);font-size:var(--fs-desc)}

/* ---------- Cartão de trabalho (ONLINE/OFFLINE) ---------- */
.cartao-trabalho{background:var(--surface);border:var(--borda);border-radius:var(--r-lg);
  padding:var(--sp-2);box-shadow:var(--sh-sm)}
.trilho-trabalho{display:flex;align-items:center;gap:var(--sp-2);background:var(--cinza-50);
  border-radius:var(--r);padding:6px;position:relative}
.trilho-trabalho span{flex:1;text-align:center;font-size:var(--fs-desc);
  font-weight:var(--fw-forte);color:var(--cinza);z-index:1;line-height:38px}
.trilho-trabalho span.on{color:var(--grafite)}
.trilho-trabalho .pino{position:absolute;top:6px;left:6px;width:calc(50% - 6px);height:38px;
  border-radius:var(--r-xs);background:var(--surface);box-shadow:var(--sh);transition:transform .22s
  cubic-bezier(.2,.9,.3,1),background .22s}
.cartao-trabalho.ligado .pino{transform:translateX(calc(100% + 4px));background:var(--ok)}
.cartao-trabalho.ligado .trilho-trabalho span.online{color:var(--surface)}
.botao-trabalho{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;
  border:0;background:transparent;z-index:2}
.botao-trabalho:disabled{cursor:not-allowed}
.cartao-trabalho .rodape{display:flex;align-items:center;justify-content:center;gap:6px;
  padding:var(--sp-3) var(--sp-2) var(--sp-2);font-size:var(--fs-desc);color:var(--cinza)}
.cartao-trabalho.ligado .rodape{color:var(--ok);font-weight:var(--fw-forte)}
.cartao-trabalho .rodape i{width:8px;height:8px;border-radius:50%;background:var(--cinza-300)}
.cartao-trabalho.ligado .rodape i{background:var(--ok);animation:pulsaPonto 1.8s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){
  .trilho-trabalho .pino{transition:none}.cartao-trabalho .rodape i{animation:none}
}

/* ---------- Cartão de ganhos ---------- */
.cartao-ganhos{background:var(--surface);border:var(--borda);border-radius:var(--r-lg);
  padding:var(--card-pad);box-shadow:var(--sh-sm)}
.cartao-ganhos .topo{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-3);margin-bottom:var(--sp-2)}
.cartao-ganhos .topo b{font-weight:var(--fw-forte)}
.cartao-ganhos .cifra{display:block;font-size:1.875rem;font-weight:var(--fw-destaque);
  letter-spacing:-.03em;color:var(--ok);line-height:1.15;font-variant-numeric:tabular-nums}
.cartao-ganhos .sub{color:var(--cinza);font-size:var(--fs-desc)}
.link-linha{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  width:100%;min-height:var(--alvo);margin-top:var(--sp-2);padding-top:var(--sp-3);
  border:0;border-top:var(--borda);background:transparent;cursor:pointer;
  font-family:var(--ff);font-size:var(--fs-corpo);font-weight:var(--fw-medio);
  color:var(--grafite);text-align:left}
.link-linha svg{width:18px;height:18px;color:var(--cinza);flex:none}
.periodo{border:0;background:var(--cinza-50);border-radius:var(--r-xs);min-height:36px;
  padding:0 var(--sp-3);font-family:var(--ff);font-size:var(--fs-legenda);
  font-weight:var(--fw-forte);color:var(--grafite-500);cursor:pointer;width:auto;min-width:96px}

/* ---------- Requisitos como onboarding ---------- */
.req-cartao{display:flex;align-items:flex-start;gap:var(--sp-3);width:100%;text-align:left;
  background:var(--surface);border:var(--borda);border-radius:var(--r-lg);padding:var(--card-pad);
  box-shadow:var(--sh-sm);margin-bottom:var(--sp-2);cursor:pointer;font-family:var(--ff);
  color:var(--grafite)}
.req-cartao .icone{width:44px;height:44px;border-radius:var(--r);flex:none;display:grid;
  place-items:center}
.req-cartao .icone svg{width:21px;height:21px}
.req-cartao.ok .icone{background:var(--ok-soft);color:var(--ok)}
.req-cartao.falta .icone{background:var(--laranja-soft);color:var(--laranja)}
.req-cartao .corpo{flex:1;min-width:0}
.req-cartao .corpo b{display:block;font-weight:var(--fw-forte)}
.req-cartao .situacao{display:block;font-size:var(--fs-desc);font-weight:var(--fw-forte);
  margin:1px 0 3px}
.req-cartao.ok .situacao{color:var(--ok)}
.req-cartao.falta .situacao{color:var(--laranja-700)}
.req-cartao .corpo small{display:block;color:var(--cinza);font-size:var(--fs-legenda);
  line-height:1.45}
.req-cartao>svg{width:18px;height:18px;color:var(--cinza-300);flex:none;margin-top:var(--sp-3)}
.nota-apoio{background:var(--surface);border:var(--borda);border-radius:var(--r-lg);
  padding:var(--card-pad);margin-top:var(--sp-4);box-shadow:var(--sh-sm)}
.nota-apoio b{display:block;margin-bottom:2px;font-weight:var(--fw-forte)}
.nota-apoio p{margin:0;color:var(--cinza);font-size:var(--fs-desc)}

/* ---------- Próxima oferta (online, sem corrida) ---------- */
.proxima-oferta{display:flex;align-items:center;gap:var(--sp-3);background:var(--surface);
  border:1px dashed var(--cinza-200);border-radius:var(--r-lg);padding:var(--card-pad)}
.proxima-oferta .corpo{flex:1;min-width:0}
.proxima-oferta b{display:block;font-weight:var(--fw-forte)}
.proxima-oferta p{margin:1px 0 0;color:var(--cinza);font-size:var(--fs-desc)}
.proxima-oferta .marca{width:44px;height:44px;border-radius:50%;flex:none;display:grid;
  place-items:center;background:var(--cinza-50);color:var(--cinza-300);position:relative}
.proxima-oferta .marca svg{width:22px;height:22px}
.proxima-oferta .marca::after{content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--ok);opacity:.45;animation:ping 2.2s ease-out infinite}
@media(prefers-reduced-motion:reduce){.proxima-oferta .marca::after{animation:none}}

/* ---------- Campanha ---------- */
.campanha{display:flex;align-items:flex-start;gap:var(--sp-3);background:var(--surface);
  border:var(--borda);border-radius:var(--r-lg);padding:var(--card-pad);box-shadow:var(--sh-sm)}
.campanha .corpo{flex:1;min-width:0}
.campanha .eyebrow{display:block;font-size:var(--fs-legenda);font-weight:var(--fw-destaque);
  color:var(--laranja-700);letter-spacing:.02em}
.campanha b{display:block;margin:2px 0 1px;font-weight:var(--fw-forte)}
.campanha p{margin:0;color:var(--cinza);font-size:var(--fs-desc)}
.campanha .selo{width:40px;height:40px;border-radius:var(--r);flex:none;display:grid;
  place-items:center;background:var(--laranja-soft);color:var(--laranja)}
.campanha .selo svg{width:20px;height:20px}

/* ---------- Oferta: countdown circular ---------- */
.oferta-topo{background:linear-gradient(160deg,var(--laranja) 0%,var(--orange-2) 100%);color:var(--surface);
  margin:-8px -18px 0;padding:var(--sp-4) var(--sp-4) var(--sp-6);text-align:center;
  border-radius:var(--r-xl) var(--r-xl) 0 0}
/* Na folha da oferta o grip fica sobre o laranja. */
.sheet:has(.oferta-topo) .grip{background:rgba(255,255,255,.5);position:relative;z-index:1;
  margin-bottom:-14px}
.oferta-topo h2{margin:0;font-size:1.375rem}
.oferta-topo p{margin:2px 0 var(--sp-4);color:rgba(255,255,255,.85);font-size:var(--fs-desc)}
.anel{width:132px;height:132px;margin:0 auto;position:relative;display:grid;place-items:center}
.anel svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.anel circle{fill:none;stroke-width:7}
.anel .trilha{stroke:rgba(255,255,255,.28)}
.anel .progresso{stroke:var(--surface);stroke-linecap:round;transition:stroke-dashoffset .25s linear}
.anel .progresso.urgente{stroke:var(--orange-soft)}
.anel .numero{font-size:2.75rem;font-weight:var(--fw-destaque);line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.anel .unidade{font-size:var(--fs-legenda);color:rgba(255,255,255,.85);margin-top:2px}
@media(prefers-reduced-motion:reduce){.anel .progresso{transition:none}}
.oferta-corpo{padding-top:var(--sp-4)}
.oferta-loja{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.oferta-loja b{font-size:var(--fs-secao);font-weight:var(--fw-destaque);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oferta-medidas{color:var(--cinza);font-size:var(--fs-desc);margin-top:2px}
.oferta-destino{margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:var(--borda)}
.oferta-destino small{display:block;color:var(--cinza);font-size:var(--fs-legenda)}
.oferta-destino b{display:block;font-size:var(--fs-secao);font-weight:var(--fw-destaque);
  margin-top:1px}
.oferta-preco{margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:var(--borda)}
.oferta-preco strong{display:block;font-size:1.875rem;font-weight:var(--fw-destaque);
  letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}
.oferta-preco small{display:block;color:var(--cinza);font-size:var(--fs-legenda)}
.oferta-acoes{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);margin-top:var(--sp-4)}

/* ---------- Etiqueta de tipo ---------- */
.tipo{display:inline-block;padding:4px 10px;border-radius:var(--r-xs);flex:none;
  font-size:.6875rem;font-weight:var(--fw-destaque);letter-spacing:.03em;
  background:var(--cinza-100);color:var(--grafite-500)}
.tipo.ifood{background:var(--erro-soft);color:var(--erro)}
.tipo.retorno{background:var(--etapa-retorno-soft);color:var(--etapa-retorno)}

/* ---------- Corrida ativa: mapa protagonista ---------- */
.corrida-mapa{position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:var(--borda);background:var(--cinza-100)}
.corrida-mapa .map{height:300px;border:0;border-radius:0;box-shadow:none}
.selo-etapa{position:absolute;top:var(--sp-3);left:50%;transform:translateX(-50%);z-index:var(--camada-sobreposto);
  padding:7px 14px;border-radius:var(--r-full);font-size:var(--fs-legenda);
  font-weight:var(--fw-destaque);letter-spacing:.02em;color:var(--surface);box-shadow:var(--sh);
  white-space:nowrap}
.selo-etapa.rota{background:var(--etapa-rota)}
.selo-etapa.entrega{background:var(--etapa-entrega)}
.selo-etapa.retorno{background:var(--etapa-retorno)}
.selo-etapa.loja{background:var(--grafite)}

/* ---------- Etapa em tela cheia (prazo dominante) ---------- */
.etapa-foco{border-radius:var(--r-lg);padding:var(--sp-6) var(--sp-4);text-align:center;
  color:var(--surface);background:var(--etapa-rota)}
.etapa-foco.entrega{background:var(--etapa-entrega)}
.etapa-foco.retorno{background:var(--etapa-retorno)}
.etapa-foco h2{margin:0;font-size:1.375rem}
.etapa-foco p{margin:2px 0 var(--sp-5);color:rgba(255,255,255,.85);font-size:var(--fs-desc)}
.disco{width:170px;height:170px;margin:0 auto;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.16);border:5px solid rgba(255,255,255,.35)}
.disco b{font-size:2.5rem;font-weight:var(--fw-destaque);line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.disco>span svg{width:56px;height:56px;color:var(--surface)}
.disco small{display:block;margin-top:4px;font-size:var(--fs-legenda);color:rgba(255,255,255,.85)}

/* ---------- Bloco de destino/instrução ---------- */
.destino-bloco{margin-top:var(--sp-3)}
.destino-bloco .titulo{font-size:var(--fs-secao);font-weight:var(--fw-destaque)}
.destino-bloco .endereco{color:var(--cinza);font-size:var(--fs-desc);margin-top:2px}
.instrucao{background:var(--cinza-50);border-radius:var(--r);padding:var(--sp-3);
  margin-top:var(--sp-3);color:var(--grafite-500);font-size:var(--fs-desc)}
.prazo-linha{display:flex;align-items:center;gap:var(--sp-3);background:var(--cinza-50);
  border-radius:var(--r);padding:var(--sp-3);margin-top:var(--sp-3)}
.prazo-linha .relogio{width:38px;height:38px;border-radius:50%;flex:none;display:grid;
  place-items:center;background:var(--surface);color:var(--etapa-rota)}
.prazo-linha .relogio svg{width:19px;height:19px}
.prazo-linha small{display:block;color:var(--cinza);font-size:var(--fs-legenda)}
.prazo-linha b{display:block;font-size:var(--fs-secao);font-variant-numeric:tabular-nums}

/* Botões por etapa */
.btn-rota{--bg:var(--etapa-rota)}
.btn-entrega{--bg:var(--etapa-entrega)}
.btn-retorno{--bg:var(--etapa-retorno)}

/* ---------- Retirada confirmada ---------- */
.retirada-ok{text-align:center;padding:var(--sp-6) var(--sp-4)}
.retirada-ok .selo{width:104px;height:104px;margin:0 auto var(--sp-4);border-radius:50%;
  background:var(--ok-soft);color:var(--ok);display:grid;place-items:center;position:relative}
.retirada-ok .selo svg{width:46px;height:46px}
.retirada-ok h2{margin:0;color:var(--ok);font-size:1.25rem}
.retirada-ok p{margin:2px 0 0;color:var(--cinza);font-size:var(--fs-desc)}

/* ---------- Perfil do motoboy ---------- */
.perfil-capa{background:linear-gradient(160deg,var(--laranja) 0%,var(--orange-2) 100%);color:var(--surface);
  border-radius:var(--r-lg);padding:var(--sp-6) var(--sp-4);text-align:center;
  margin-bottom:var(--sp-4)}
.perfil-capa .avatar{width:82px;height:82px;border-radius:50%;margin:0 auto var(--sp-3);
  background:rgba(255,255,255,.2);border:3px solid rgba(255,255,255,.5);display:grid;
  place-items:center;font-size:1.875rem;font-weight:var(--fw-destaque)}
.perfil-capa h1{margin:0;font-size:1.25rem}
.perfil-capa p{margin:2px 0 0;color:rgba(255,255,255,.85);font-size:var(--fs-desc)}
.lista-perfil{background:var(--surface);border:var(--borda);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-sm)}
.item-perfil{display:flex;align-items:center;gap:var(--sp-3);width:100%;min-height:56px;
  padding:0 var(--card-pad);border:0;border-bottom:var(--borda);background:transparent;
  cursor:pointer;font-family:var(--ff);font-size:var(--fs-corpo);color:var(--grafite);
  text-align:left}
.item-perfil:last-child{border-bottom:0}
.item-perfil:active{background:var(--cinza-50)}
.item-perfil>svg:first-child{width:19px;height:19px;color:var(--cinza);flex:none}
.item-perfil .rotulo{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item-perfil .valor-item{color:var(--cinza);font-size:var(--fs-desc);flex:none}
.item-perfil .valor-item.ok{color:var(--ok);font-weight:var(--fw-forte)}
.item-perfil .valor-item.pendente{color:var(--laranja-700);font-weight:var(--fw-forte)}
.item-perfil .seta{width:17px;height:17px;color:var(--cinza-300);flex:none}
.item-perfil.saida{color:var(--erro)}
.item-perfil.saida>svg:first-child{color:var(--erro)}

/* ---------- Aparelho aguardando autorização ---------- */
.aguardando-aparelho{text-align:center;padding:var(--sp-6) var(--sp-4)}
.aguardando-aparelho .selo{width:88px;height:88px;margin:0 auto var(--sp-4);border-radius:50%;
  background:var(--laranja-soft);color:var(--laranja);display:grid;place-items:center}
.aguardando-aparelho .selo svg{width:38px;height:38px}
.aguardando-aparelho h1{font-size:1.25rem;margin-bottom:var(--sp-2)}
.aguardando-aparelho p{max-width:320px;margin:0 auto;color:var(--cinza);font-size:var(--fs-desc)}
.passos-aguardo{text-align:left;background:var(--surface);border:var(--borda);border-radius:var(--r-lg);
  padding:var(--card-pad);margin:var(--sp-5) 0 var(--sp-4)}
.passo-aguardo{display:flex;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-2) 0}
.passo-aguardo .n{width:24px;height:24px;border-radius:50%;flex:none;display:grid;
  place-items:center;font-size:var(--fs-legenda);font-weight:var(--fw-destaque);
  background:var(--cinza-100);color:var(--cinza)}
.passo-aguardo.feito .n{background:var(--ok-soft);color:var(--ok)}
.passo-aguardo.agora .n{background:var(--laranja);color:var(--surface)}
.passo-aguardo b{display:block;font-weight:var(--fw-forte);font-size:var(--fs-desc)}
.passo-aguardo small{display:block;color:var(--cinza);font-size:var(--fs-legenda);margin-top:1px}

/* ---------- Aceite de documentos legais ---------- */
.aceite-legal{background:var(--cinza-50);border-radius:var(--r-lg);padding:var(--sp-3) var(--sp-4);
  margin:var(--sp-3) 0}
.aceite-legal .check-option{padding-top:var(--sp-2)}
.aceite-legal .btn{margin-top:var(--sp-2)}
/* Documento na folha: leitura confortável e rolagem própria. */
.doc-legal{max-height:62dvh;overflow-y:auto;padding:var(--sp-2) var(--sp-1) var(--sp-4);
  margin-bottom:var(--sp-3);border-top:var(--borda);border-bottom:var(--borda);
  font-size:var(--fs-desc);line-height:1.6;color:var(--grafite-500);-webkit-overflow-scrolling:touch}
.doc-legal h2{font-size:var(--fs-secao);color:var(--grafite);margin:var(--sp-5) 0 var(--sp-2)}
.doc-legal h3{font-size:var(--fs-corpo);color:var(--grafite);margin:var(--sp-4) 0 var(--sp-2)}
.doc-legal h4{font-size:var(--fs-desc);color:var(--grafite);margin:var(--sp-3) 0 var(--sp-1)}
.doc-legal p{margin:0 0 var(--sp-2)}
.doc-legal .doc-item{padding-left:var(--sp-3);position:relative}
.doc-legal .doc-item::before{content:"·";position:absolute;left:var(--sp-1);color:var(--cinza)}
.doc-legal .hr{margin:var(--sp-3) 0}
.doc-legal b{color:var(--grafite);font-weight:var(--fw-forte)}

/* ===========================================================
   MOTOBOY — estrutura do briefing (tema claro)
   Uma coluna, ação principal na metade de baixo, configuração só quando
   quebrada, hierarquia por tipo e não por caixinha.
   =========================================================== */

/* ---------- Topo: só marca e avisos ---------- */
.topbar-moto{display:flex;align-items:center;gap:var(--sp-3);
  padding:calc(var(--safe-t) + 14px) var(--sp-4) var(--sp-3);
  background:var(--surface);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20}
/* Topo do motoboy: o logo é a marca, sem quadrado atrás. */
.marca-logo{height:26px;width:auto;flex:none}
.wordmark{font-family:var(--ff-num);font-weight:var(--fw-destaque);font-size:16px;
  letter-spacing:.02em}
.wordmark span{color:var(--muted);font-weight:var(--fw-medio);margin-left:5px;
  font-size:var(--fs-sec);letter-spacing:.06em;text-transform:uppercase}
.topbar-moto .espaco{flex:1}
.sino{width:var(--alvo);height:var(--alvo);border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--surface);color:var(--txt);display:grid;place-items:center;
  position:relative;cursor:pointer}
.sino .ponto{position:absolute;top:11px;right:12px;width:7px;height:7px;border-radius:50%;
  background:var(--orange);border:2px solid var(--surface)}

/* ---------- Início: mapa + folha ---------- */
.tela-inicio{display:flex;flex-direction:column;flex:1;min-height:0}
.mapa-area{position:relative;flex:1;min-height:220px;background:var(--surface-2);
  z-index:var(--camada-mapa);isolation:isolate}
.mapa-area .map{position:absolute;inset:0;height:100%;width:100%;border:0;border-radius:0;
  box-shadow:none}
/* Radar só quando online. */
.radar{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;z-index:var(--camada-sobreposto)}
.radar i{position:absolute;left:0;top:0;border-radius:50%;border:1.5px solid var(--orange);
  transform:translate(-50%,-50%);opacity:0}
.online .radar i{animation:radarPing 2.8s ease-out infinite}
.radar i:nth-child(2){animation-delay:.9s}
.radar i:nth-child(3){animation-delay:1.8s}
@keyframes radarPing{0%{width:26px;height:26px;opacity:.85}100%{width:250px;height:250px;opacity:0}}
.chip-zona{position:absolute;left:var(--sp-4);top:var(--sp-3);z-index:var(--camada-sobreposto);
  display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:var(--r-full);
  padding:7px 13px 7px 10px;font-size:12.5px;font-weight:var(--fw-forte);
  box-shadow:var(--sh-sm);max-width:calc(100% - var(--sp-8));overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.chip-zona b{color:var(--muted);font-weight:var(--fw-medio)}
.chip-zona .pin{width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none}
.online .chip-zona .pin{background:var(--green)}

/* Folha sobre o mapa: um status, um botão. */
.folha{background:var(--surface);border-top:1px solid var(--line);
  border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:var(--sh-up);
  padding:var(--sp-5) var(--sp-4) calc(var(--nav-h) + var(--safe-b) + var(--sp-4));
  position:relative;z-index:3;margin-top:calc(var(--r-lg) * -1)}
.folha .pega{width:38px;height:4px;border-radius:var(--r-full);background:var(--line);
  margin:calc(var(--sp-2) * -1) auto var(--sp-4)}
.linha-status{display:flex;align-items:center;gap:9px;margin-bottom:3px}
.linha-status .bulbo{width:9px;height:9px;border-radius:50%;background:var(--faint);flex:none}
.online .linha-status .bulbo{background:var(--green);box-shadow:0 0 0 4px var(--green-soft)}
.linha-status h2{font-family:var(--ff-num);font-size:var(--fs-block);
  font-weight:var(--fw-destaque);margin:0;letter-spacing:-.01em}
.folha .apoio{color:var(--muted);font-size:13.5px;margin:0 0 var(--sp-4);line-height:1.45}
.folha .apoio.discreta{margin:var(--sp-3) 0 0;font-size:12.5px;text-align:center}

/* Corrida em andamento na Home: é o ponto de retomada, então vem antes de
   qualquer outra coisa e com o valor em destaque. */
.corrida-andamento{margin:0 0 var(--sp-4);padding:var(--sp-4);border-radius:var(--r-md);
  background:var(--surface-2);border:1px solid var(--line);
  box-shadow:inset 3px 0 0 var(--laranja)}
.corrida-andamento .rot{display:flex;align-items:center;gap:6px;margin-bottom:var(--sp-3);
  font-size:var(--fs-caps);font-weight:var(--fw-black);letter-spacing:.08em;
  text-transform:uppercase;color:var(--laranja-700)}
.corrida-andamento .rot svg{width:15px;height:15px}
.corrida-andamento .topo{display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--sp-3)}
.corrida-andamento .topo b{display:block;font-size:var(--fs-secao);font-weight:var(--fw-forte)}
.corrida-andamento .topo small{display:block;color:var(--muted);font-size:var(--fs-legenda);
  margin-top:2px}
.corrida-andamento .preco{flex:none;font-family:var(--ff-num);font-size:20px;
  font-weight:var(--fw-black);color:var(--laranja-700)}
.corrida-andamento .linhas{margin-top:var(--sp-3);display:grid;gap:4px}
.corrida-andamento .linhas div{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-3);font-size:var(--fs-sec)}
.corrida-andamento .linhas span{color:var(--muted)}
.corrida-andamento .prazo-linha{margin-top:var(--sp-3)}
.btn-grande{width:100%;height:var(--btn-h);border:0;border-radius:var(--r-md);cursor:pointer;
  font-family:var(--ff-num);font-size:16px;font-weight:var(--fw-destaque);letter-spacing:.04em;
  text-transform:uppercase;color:var(--surface);
  background:linear-gradient(160deg,var(--orange-2),var(--orange));
  box-shadow:0 8px 22px rgba(225,100,7,.28);
  transition:transform .12s ease,box-shadow .12s ease}
.btn-grande:active{transform:translateY(1px) scale(.995)}
.btn-grande:disabled{opacity:.5;box-shadow:none;cursor:not-allowed}
.btn-grande.contorno{background:none;border:1px solid var(--line);color:var(--muted);
  box-shadow:none;font-size:14px}
.btn-grande.carregando{color:transparent!important;position:relative;pointer-events:none}
.btn-grande.carregando::after{content:"";position:absolute;inset:50% 50%;width:20px;height:20px;
  margin:-10px 0 0 -10px;border-radius:50%;border:2px solid rgba(255,255,255,.45);
  border-top-color:var(--surface);animation:spin .7s linear infinite}

/* Faixa de ganhos clicável */
.faixa-ganhos{display:flex;align-items:center;gap:var(--sp-4);width:100%;text-align:left;
  margin-top:var(--sp-4);padding:var(--sp-4) 15px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-md);cursor:pointer;
  font-family:var(--ff);color:var(--txt);min-height:var(--alvo)}
.faixa-ganhos .val{font-family:var(--ff-num);font-size:24px;font-weight:var(--fw-black);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.faixa-ganhos .rot{font-size:var(--fs-caps);font-weight:var(--fw-forte);letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.faixa-ganhos .divisor{width:1px;align-self:stretch;background:var(--line)}
.faixa-ganhos .seta{margin-left:auto;color:var(--faint)}

/* Alerta fino: só quando algo está quebrado */
.alerta-fino{display:flex;gap:11px;align-items:flex-start;margin-top:var(--sp-4);
  padding:var(--sp-3) var(--sp-4);border-radius:var(--r-sm);
  background:var(--red-soft);border:1px solid rgba(217,45,32,.28)}
.alerta-fino svg{flex:none;margin-top:1px;color:var(--red);width:17px;height:17px}
.alerta-fino p{margin:0;font-size:var(--fs-sec);line-height:1.45;color:var(--txt)}
.alerta-fino button{background:none;border:0;padding:0;margin-top:4px;cursor:pointer;
  color:var(--red);font-family:var(--ff);font-size:var(--fs-sec);
  font-weight:var(--fw-forte);text-decoration:underline}
/* Modo de compatibilidade: é condição de trabalho, não erro — âmbar, não vermelho. */
.alerta-fino.compatibilidade{background:var(--amber-soft);border-color:rgba(178,94,0,.28)}
.alerta-fino.compatibilidade svg{color:var(--amber)}

/* ---------- Oferta ----------
   Ordem de leitura: quanto ganho, quanto tempo tenho, quanto vou rodar e se
   tem retorno. O relógio e as medidas são os protagonistas. */
.oferta-folha{padding-bottom:var(--sp-2)}
.oferta-cabeca{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-4);margin-bottom:var(--sp-4)}
.oferta-valor-bloco{min-width:0}
.oferta-valor-bloco .rot{display:block;font-size:var(--fs-caps);font-weight:var(--fw-forte);
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.oferta-cabeca .money{font-family:var(--ff-num);font-size:42px;font-weight:var(--fw-black);
  letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.oferta-cabeca .money small{font-size:var(--fs-block);font-weight:var(--fw-forte);
  color:var(--muted);margin-right:3px}

/* Relógio de 20s: anel que esvazia + número grande. */
.relogio{position:relative;width:96px;height:96px;flex:none;display:grid;place-items:center}
.relogio svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.relogio circle{fill:none;stroke-width:8}
.relogio .trilho{stroke:var(--line)}
.relogio .ponteiro{stroke:var(--orange);stroke-linecap:round;
  transition:stroke-dashoffset .25s linear,stroke .2s}
.relogio .ponteiro.urgente{stroke:var(--red)}
.relogio .marcador{text-align:center;line-height:1}
.relogio .marcador b{display:block;font-family:var(--ff-num);font-size:32px;
  font-weight:var(--fw-black);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.relogio .marcador span{display:block;margin-top:2px;font-size:var(--fs-caps);
  font-weight:var(--fw-forte);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.relogio:has(.ponteiro.urgente) .marcador b{color:var(--red)}

/* Distância e retorno lado a lado, com peso de número. */
.oferta-medidas{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);
  margin-bottom:var(--sp-3)}
.medida{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:var(--sp-3) var(--sp-4)}
.medida .rot{display:block;font-size:var(--fs-caps);font-weight:var(--fw-forte);
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.medida b{font-family:var(--ff-num);font-size:var(--fs-block);font-weight:var(--fw-destaque);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15;display:block}
/* Com retorno é informação que muda a decisão: ganha cor própria. */
.medida.retorno{background:var(--purple-soft);border-color:rgba(109,69,217,.28)}
.medida.retorno .rot{color:var(--purple)}
.medida.retorno b{color:var(--purple)}
.selo-pedido{display:inline-block;margin:0 var(--sp-2) var(--sp-3) 0;padding:6px 11px;
  border-radius:var(--r-xs);font-size:var(--fs-caps);font-weight:var(--fw-destaque);
  letter-spacing:.07em;text-transform:uppercase;
  background:var(--cinza-50);color:var(--muted);border:1px solid var(--line)}
.selo-pedido.ifood{background:var(--red-soft);color:var(--red);
  border:1px solid rgba(217,45,32,.28)}
/* Tarifa de localidade: o motoboy precisa ver, antes de aceitar, que o valor
   não veio da tabela por km. */
.selo-pedido.especial{background:var(--amber-soft);color:var(--amber);
  border:1px solid rgba(178,94,0,.28)}

/* Trilha coleta → entrega */
.trilha{margin:0 0 var(--sp-1);position:relative;padding-left:26px}
.trilha::before{content:'';position:absolute;left:6px;top:12px;bottom:14px;width:2px;
  background:repeating-linear-gradient(180deg,var(--line) 0 4px,transparent 4px 8px)}
.parada{position:relative;padding:0 0 18px}
.parada:last-child{padding-bottom:0}
.parada .mk{position:absolute;left:-26px;top:3px;width:14px;height:14px;border-radius:50%;
  border:2.5px solid var(--muted);background:var(--surface)}
.parada.destino .mk{border-color:var(--orange);background:var(--orange)}
.parada .quem{font-size:var(--fs-body);font-weight:var(--fw-forte);margin:0 0 2px}
.parada .end{font-size:var(--fs-sec);color:var(--muted);margin:0;line-height:1.4}
.parada .km{font-size:11.5px;font-weight:var(--fw-forte);color:var(--faint);letter-spacing:.04em;
  text-transform:uppercase;margin-top:4px}
.oferta-acoes{display:flex;gap:10px;margin-top:var(--sp-5)}
.oferta-acoes .btn-grande{flex:1}
.oferta-acoes .btn-grande.recusar{flex:0 0 108px}
/* 360px: o relógio encolhe antes de o valor quebrar. */
@media(max-width:380px){
  .relogio{width:84px;height:84px}
  .relogio .marcador b{font-size:28px}
  .oferta-cabeca .money{font-size:38px}
}

/* ---------- Corrida ativa ---------- */
.etapas{padding:0 var(--sp-4);margin:0 0 var(--sp-4);list-style:none;display:flex;gap:6px}
.etapas li{flex:1;font-size:var(--fs-caps);font-weight:var(--fw-forte);letter-spacing:.05em;
  text-transform:uppercase;color:var(--faint);padding-top:9px;border-top:3px solid var(--line)}
.etapas li.feito{color:var(--muted);border-color:var(--muted)}
.etapas li.agora{color:var(--orange);border-color:var(--orange)}
.cartao-corrida{margin:0 var(--sp-4) var(--sp-4);background:var(--surface);
  border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--sh-sm)}
.corrida-topo{display:flex;align-items:center;gap:var(--sp-3);padding:15px}
.corrida-topo .ava{width:42px;height:42px;border-radius:13px;background:var(--surface-2);
  border:1px solid var(--line);display:grid;place-items:center;font-family:var(--ff-num);
  font-weight:var(--fw-destaque);color:var(--orange);flex:none}
.corrida-topo .nome{font-size:15px;font-weight:var(--fw-forte);margin:0}
.corrida-topo .etapa-atual{font-size:12.5px;color:var(--muted);margin:2px 0 0}
.corrida-topo .preco{margin-left:auto;font-family:var(--ff-num);font-weight:var(--fw-black);
  font-size:18px;font-variant-numeric:tabular-nums}
.corrida-acoes{display:flex;border-top:1px solid var(--line)}
.corrida-acoes a,.corrida-acoes button{flex:1;background:none;border:0;
  border-right:1px solid var(--line);color:var(--txt);padding:0;min-height:var(--alvo);
  font-size:var(--fs-sec);font-weight:var(--fw-forte);font-family:var(--ff);
  display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;
  text-decoration:none}
.corrida-acoes>*:last-child{border-right:0}
.corrida-acoes svg{color:var(--muted);width:16px;height:16px}
/* Barra fixa: a ação que avança a etapa */
.barra-fixa{position:sticky;bottom:0;z-index:20;margin-top:auto;
  padding:var(--sp-3) var(--sp-4) calc(var(--safe-b) + var(--sp-3));
  background:linear-gradient(180deg,rgba(244,246,248,0),var(--bg) 42%)}

/* ---------- Ganhos ---------- */
.cabeca-tela{padding:6px var(--sp-4) var(--sp-4)}
.cabeca-tela h1{font-family:var(--ff-num);font-size:var(--fs-screen);font-weight:var(--fw-black);
  letter-spacing:-.02em;margin:0}
.segmento{display:flex;gap:4px;margin:0 var(--sp-4) var(--sp-4);padding:4px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:13px}
.segmento button{flex:1;border:0;border-radius:10px;background:none;color:var(--muted);
  font-family:var(--ff);font-size:var(--fs-sec);font-weight:var(--fw-forte);
  min-height:40px;cursor:pointer}
.segmento button.on{background:var(--surface);color:var(--txt);box-shadow:var(--sh-sm)}
.heroi-ganhos{margin:0 var(--sp-4) var(--sp-4);padding:var(--sp-5);background:var(--surface);
  border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh-sm)}
.heroi-ganhos .rot{font-size:var(--fs-caps);font-weight:var(--fw-forte);letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}
.heroi-ganhos .money{font-family:var(--ff-num);font-size:var(--fs-hero);
  font-weight:var(--fw-black);letter-spacing:-.03em;margin:6px 0 0;
  font-variant-numeric:tabular-nums;line-height:1.05}
.heroi-ganhos .money small{font-size:20px;color:var(--muted);font-weight:var(--fw-forte);
  margin-right:4px}
.heroi-ganhos .reparte{display:flex;gap:var(--sp-5);margin-top:var(--sp-4);
  padding-top:var(--sp-4);border-top:1px solid var(--line)}
.heroi-ganhos .reparte div span{display:block;font-size:var(--fs-caps);color:var(--muted);
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px}
.heroi-ganhos .reparte div b{font-family:var(--ff-num);font-size:17px;
  font-weight:var(--fw-destaque);font-variant-numeric:tabular-nums}
/* Gráfico de 7 dias em CSS puro */
.barras{display:flex;align-items:flex-end;gap:7px;height:74px;margin:0 var(--sp-4) 6px}
.barras div{flex:1;background:var(--surface-2);border-radius:5px 5px 3px 3px;position:relative}
.barras div i{position:absolute;left:0;right:0;bottom:0;border-radius:5px 5px 3px 3px;
  background:linear-gradient(180deg,var(--orange-2),var(--orange))}
.barras-x{display:flex;gap:7px;margin:0 var(--sp-4) 18px}
.barras-x span{flex:1;text-align:center;font-size:10.5px;color:var(--faint);
  font-weight:var(--fw-forte);letter-spacing:.04em;text-transform:uppercase}
.rotulo-secao{font-size:var(--fs-caps);font-weight:var(--fw-destaque);letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);margin:0 var(--sp-4) var(--sp-2)}
.aviso-placeholder{margin:calc(var(--sp-2) * -1) var(--sp-4) var(--sp-4);
  font-size:var(--fs-caps);color:var(--faint)}

/* ---------- Lista agrupada (ganhos e perfil) ---------- */
.lista{margin:0 var(--sp-4) var(--sp-4);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-sm)}
.lista .item{display:flex;align-items:center;gap:13px;padding:0 15px;min-height:var(--alvo);
  border-bottom:1px solid var(--line);width:100%;background:none;text-align:left;
  font-family:var(--ff);color:var(--txt);font-size:var(--fs-body);border-left:0;border-right:0;
  border-top:0;text-decoration:none}
.lista .item:last-child{border-bottom:0}
.lista button.item,.lista a.item{cursor:pointer}
.lista button.item:active,.lista a.item:active{background:var(--surface-2)}
.lista .item .ic{width:34px;height:34px;border-radius:11px;background:var(--surface-2);
  display:grid;place-items:center;color:var(--muted);flex:none}
.lista .item .ic svg{width:17px;height:17px}
.lista .item .conteudo{min-width:0;padding:12px 0}
.lista .item .t{font-size:var(--fs-body);font-weight:var(--fw-medio);margin:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lista .item .s{font-size:12px;color:var(--muted);margin:2px 0 0}
.lista .item .r{margin-left:auto;font-family:var(--ff-num);font-weight:var(--fw-destaque);
  font-size:15px;font-variant-numeric:tabular-nums;flex:none}
.lista .item .r.positivo{color:var(--green)}
.lista .item .valor-meta{margin-left:auto;font-size:var(--fs-sec);color:var(--muted);flex:none}
.lista .item .seta{color:var(--faint);flex:none;width:18px;height:18px}
.lista .item.perigo .t{color:var(--red)}
.lista .item.perigo .ic{color:var(--red)}

/* ---------- Perfil ---------- */
.cabeca-perfil{display:flex;align-items:center;gap:14px;padding:6px var(--sp-4) var(--sp-5)}
/* Selfie do cadastro como avatar: recorta sem distorcer. */
.cabeca-perfil .ava.selfie{object-fit:cover;background:var(--surface-2)}
.cabeca-perfil .ava{width:58px;height:58px;border-radius:18px;flex:none;display:grid;
  place-items:center;background:linear-gradient(150deg,var(--orange-2),var(--orange));
  font-family:var(--ff-num);font-weight:var(--fw-black);font-size:23px;color:var(--surface)}
.cabeca-perfil h1{font-family:var(--ff-num);font-size:20px;font-weight:var(--fw-destaque);
  margin:0;letter-spacing:-.01em}
.cabeca-perfil p{margin:3px 0 0;font-size:var(--fs-sec);color:var(--muted)}
.selo-ok{display:inline-flex;align-items:center;gap:5px;margin-top:7px;font-size:var(--fs-caps);
  font-weight:var(--fw-destaque);letter-spacing:.06em;text-transform:uppercase;color:var(--green);
  background:var(--green-soft);border:1px solid rgba(18,161,80,.28);padding:4px 8px;
  border-radius:7px}

/* ---------- Vazio com ação ---------- */
.vazio{padding:56px 32px;text-align:center}
.vazio .ic{width:56px;height:56px;border-radius:18px;background:var(--surface);
  border:1px solid var(--line);display:grid;place-items:center;margin:0 auto var(--sp-4);
  color:var(--faint)}
.vazio .ic svg{width:24px;height:24px}
.vazio h3{font-family:var(--ff-num);font-size:17px;font-weight:var(--fw-destaque);margin:0 0 6px}
.vazio p{font-size:13.5px;color:var(--muted);margin:0 0 var(--sp-5);line-height:1.5}
.vazio button{border:1px solid var(--line);background:var(--surface);color:var(--txt);
  font-family:var(--ff);font-size:13.5px;font-weight:var(--fw-forte);min-height:var(--alvo);
  padding:0 20px;border-radius:12px;cursor:pointer}

/* ===========================================================
   LOJA — etapa 3 do briefing
   O lojista usa no balcão: uma coluna no celular, duas no desktop a partir de
   900px. A ação principal ("Pedir entrega") fica sempre alcançável.
   =========================================================== */

/* Números e títulos curtos em Archivo, como nos demais painéis. */
.valor,.d-item .val,.stat .n,.quote .price,.linha-dado b,.cartao-ganhos .cifra{
  font-family:var(--ff-num);letter-spacing:-.02em}

/* Ação principal fixa no rodapé do celular. */
.acao-fixa{position:fixed;left:0;right:0;bottom:calc(var(--nav-h) + var(--safe-b));
  z-index:35;padding:var(--sp-3) var(--sp-4) var(--sp-3);
  background:linear-gradient(180deg,rgba(244,246,248,0),var(--bg) 40%)}
.acao-fixa .btn-grande{max-width:680px;margin:0 auto}

/* Bloco de custos: cada linha é um custo, com quem recebe explícito. */
.custos{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--card-pad);box-shadow:var(--sh-sm)}
.custo-linha{display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--sp-3);padding:var(--sp-3) 0;border-bottom:1px solid var(--line)}
.custo-linha:last-child{border-bottom:0;padding-bottom:0}
.custo-linha:first-child{padding-top:0}
.custo-linha .quem{min-width:0}
.custo-linha .quem b{display:block;font-weight:var(--fw-forte)}
.custo-linha .quem small{display:block;margin-top:2px;color:var(--muted);
  font-size:var(--fs-caps);line-height:1.45}
.custo-linha .vlr{font-family:var(--ff-num);font-weight:var(--fw-destaque);
  font-size:var(--fs-block);font-variant-numeric:tabular-nums;flex:none}

/* Desktop: duas colunas, pedido à esquerda e acompanhamento à direita. */
@media (min-width:900px){
  .app{max-width:1120px}
  .wrap,#view.com-gutter{padding-bottom:var(--sp-8)}
  .loja-colunas{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);
    gap:var(--sp-6);align-items:start}
  .loja-colunas>.coluna-acao{position:sticky;top:calc(var(--safe-t) + 76px)}
  /* No desktop a barra inferior sobe: vira navegação de topo, logo abaixo da
     marca. `order` funciona porque .app é uma coluna flex. */
  .bottomnav{position:static;order:-1;height:auto;border-top:0;
    border-bottom:1px solid var(--line);background:var(--surface);backdrop-filter:none}
  .topbar{order:-2}
  /* A coluna já traz "Pedir entrega": o botão do cabeçalho seria repetição. */
  .tela-head #btn-nova{display:none}
  /* Com 6 abas (admin) os rótulos colidiam: cada item ganha respiro e o
     conjunto para de esticar até a borda. */
  .navwrap{justify-content:center;gap:var(--sp-2)}
  .bottomnav a{flex:0 1 auto;flex-direction:row;gap:var(--sp-2);height:52px;
    padding:0 var(--sp-4);font-size:var(--fs-body);white-space:nowrap}
  .bottomnav a svg{width:19px;height:19px}
  .bottomnav a.active::before{top:auto;bottom:0;width:100%;height:2px;border-radius:0}
  .acao-fixa{position:static;padding:0;background:none;margin-top:var(--sp-4)}
  .acao-fixa .btn-grande{max-width:none}
}

/* ===========================================================
   ADMIN — etapa 4 do briefing
   Aqui a prioridade é densidade, não espaço em branco. Desktop primeiro, mas
   sem quebrar no celular: tabela vira lista de cards, nunca rolagem lateral.
   =========================================================== */

/* Faixa de KPIs: número grande em Archivo, rótulo pequeno em caps. */
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2);
  margin-bottom:var(--sp-4)}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:var(--sp-3) var(--sp-4);box-shadow:var(--sh-sm);min-width:0}
.kpi .n{font-family:var(--ff-num);font-size:26px;font-weight:var(--fw-black);
  letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}
.kpi .l{font-size:var(--fs-caps);font-weight:var(--fw-forte);letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kpi.alerta .n{color:var(--amber)}
.kpi.perigo .n{color:var(--red)}
.kpi.ok .n{color:var(--green)}
@media(min-width:700px){.kpis{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* Tabela densa: cabeçalho fixo, linha de 44px, número à direita. */
.tabela-wrap{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-sm)}
.tabela{width:100%;border-collapse:collapse;font-size:var(--fs-sec)}
.tabela thead th{position:sticky;top:0;z-index:1;background:var(--surface-2);
  text-align:left;padding:0 var(--sp-3);height:38px;font-size:var(--fs-caps);
  font-weight:var(--fw-destaque);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--line);white-space:nowrap}
.tabela tbody td{padding:0 var(--sp-3);height:44px;border-bottom:1px solid var(--line);
  vertical-align:middle}
.tabela tbody tr:last-child td{border-bottom:0}
.tabela .num{text-align:right;font-variant-numeric:tabular-nums;
  font-family:var(--ff-num);font-weight:var(--fw-forte)}
.tabela tbody tr.parada{background:var(--amber-soft)}
.tabela tbody tr.parada td:first-child{box-shadow:inset 3px 0 0 var(--amber)}
.tabela .truncar{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabela tbody tr[data-abrir]{cursor:pointer}
.tabela tbody tr[data-abrir]:hover{background:var(--surface-2)}

/* Celular: cada linha vira um card. Sem rolagem horizontal. */
@media(max-width:760px){
  .tabela,.tabela tbody,.tabela tr,.tabela td{display:block;width:100%}
  .tabela thead{display:none}
  .tabela tbody tr{border-bottom:1px solid var(--line);padding:var(--sp-3) var(--sp-4)}
  .tabela tbody tr:last-child{border-bottom:0}
  .tabela tbody td{height:auto;padding:2px 0;border:0;display:flex;
    align-items:center;justify-content:space-between;gap:var(--sp-3)}
  /* O rótulo da coluna reaparece à esquerda no modo card. */
  .tabela tbody td::before{content:attr(data-col);flex:none;font-size:var(--fs-caps);
    font-weight:var(--fw-forte);letter-spacing:.06em;text-transform:uppercase;
    color:var(--muted)}
  .tabela tbody td.principal{padding-bottom:var(--sp-2);font-size:var(--fs-body);
    font-weight:var(--fw-forte)}
  .tabela tbody td.principal::before{display:none}
  .tabela .truncar{max-width:none}
  .tabela tbody tr.parada{box-shadow:inset 3px 0 0 var(--amber)}
}

/* Chip de tempo em etapa: âmbar quando passa do esperado. */
.tempo-etapa{font-family:var(--ff-num);font-variant-numeric:tabular-nums;
  font-weight:var(--fw-forte)}
.tempo-etapa.atrasado{color:var(--amber)}

/* Admin em telas largas aproveita a largura. */
@media(min-width:900px){
  body.admin .app{max-width:1280px}
}

/* ===========================================================
   ADMIN — Navegação e Cabeçalho Superior
   Garante 9 abas limpas, legíveis, espaçadas e sem sobreposição
   tanto no desktop quanto no mobile/tablet.
   =========================================================== */
body.admin .bottomnav {
  position: static;
  order: -1;
  width: 100%;
  height: auto;
  border-top: 0;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  backdrop-filter: none;
  z-index: var(--camada-header);
}

body.admin .navwrap {
  max-width: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--sp-4);
  gap: 4px;
}
body.admin .navwrap::-webkit-scrollbar {
  display: none;
}

body.admin .bottomnav a {
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 46px;
  padding: 0 12px;
  font-size: 0.875rem;
  font-weight: var(--fw-medio);
  color: var(--cinza);
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--r-sm);
  position: relative;
  transition: color 0.15s ease, background-color 0.15s ease;
  margin: 3px 0;
}

body.admin .bottomnav a svg {
  width: 18px;
  height: 18px;
  flex: none;
  stroke-width: 2;
}

body.admin .bottomnav a span {
  white-space: nowrap;
  font-size: 0.875rem;
  line-height: 1;
}

body.admin .bottomnav a:hover {
  color: var(--txt);
  background: var(--cinza-100);
}

body.admin .bottomnav a.active {
  color: var(--laranja-700);
  font-weight: var(--fw-forte);
  background: rgba(235, 94, 40, 0.08);
}

body.admin .bottomnav a.active svg {
  stroke: var(--laranja);
}

body.admin .bottomnav a.active::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 8px;
  right: 8px;
  top: auto;
  width: auto;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--laranja);
}

/* Mobile/Tablet: sticky abaixo da topbar com rolagem horizontal livre */
@media (max-width: 899px) {
  body.admin .topbar {
    position: sticky;
    top: 0;
    z-index: var(--camada-header);
  }
  body.admin .bottomnav {
    position: sticky;
    top: 48px;
    z-index: calc(var(--camada-header) - 1);
  }
  body.admin .bottomnav a {
    height: 42px;
    padding: 0 10px;
    font-size: 0.8125rem;
    gap: 5px;
  }
  body.admin .bottomnav a svg {
    width: 16px;
    height: 16px;
  }
  body.admin .bottomnav a span {
    font-size: 0.8125rem;
  }
}

@media (min-width: 1240px) {
  body.admin .navwrap {
    justify-content: center;
  }
}


/* ===========================================================
   TELA DE ACESSO (login)
   Mobile-first, uma coluna. A marca abre a tela, o card de entrar é o centro
   de gravidade e o cadastro fica claramente secundário.
   =========================================================== */
.tela-acesso{background:var(--bg)}
.acesso{display:flex;flex-direction:column;justify-content:center;min-height:100dvh;
  padding:calc(var(--safe-t) + var(--sp-6)) var(--sp-4) calc(var(--safe-b) + var(--sp-6));
  max-width:420px;margin:0 auto;width:100%}

/* Marca compacta: logo, nome e uma linha de apoio. */
.acesso-marca{text-align:center;margin-bottom:var(--sp-6)}
.acesso-logo{display:block;margin:0 auto var(--sp-3);height:38px;width:auto}
.acesso-marca h1{font-family:var(--ff-num);font-size:22px;font-weight:var(--fw-destaque);
  letter-spacing:.06em;margin:0;color:var(--txt)}
.acesso-marca h1 b{color:var(--orange);font-weight:var(--fw-black)}
.acesso-marca p{margin:6px 0 0;font-size:var(--fs-sec);color:var(--muted);line-height:1.45}

/* Card de entrar */
.acesso-card{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--sp-5) var(--sp-4) var(--sp-5);
  box-shadow:0 4px 24px rgba(16,24,40,.06)}
.acesso-card h2{font-family:var(--ff-num);font-size:var(--fs-block);
  font-weight:var(--fw-destaque);margin:0;letter-spacing:-.01em}
.acesso-sub{margin:2px 0 var(--sp-5);font-size:var(--fs-sec);color:var(--muted)}
.campo{margin-bottom:var(--sp-4)}
.campo label{display:block;margin:0 0 6px;font-size:var(--fs-caps);
  font-weight:var(--fw-forte);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted)}
.campo input{width:100%;min-height:var(--alvo);padding:13px var(--sp-4);
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);
  font-family:var(--ff);font-size:1rem;color:var(--txt);
  transition:border-color .15s,box-shadow .15s,background .15s}
.campo input::placeholder{color:var(--faint)}
.campo input:focus{outline:none;background:var(--surface);border-color:var(--orange);
  box-shadow:0 0 0 3px var(--laranja-ring)}
/* Mostrar/ocultar senha sem sair do campo. */
.campo-senha{position:relative}
.campo-senha input{padding-right:52px}
.ver-senha{position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border:0;background:none;border-radius:var(--r-sm);
  display:grid;place-items:center;cursor:pointer;color:var(--muted)}
.ver-senha svg{width:19px;height:19px}
.ver-senha[aria-pressed="true"]{color:var(--orange)}
.acesso-card .btn-grande{margin-top:var(--sp-5);text-transform:none;
  font-size:var(--fs-block);letter-spacing:.02em}

/* Cadastro: ação secundária, separada por uma régua leve. */
.acesso-secundario{margin-top:var(--sp-6);padding-top:var(--sp-5);
  border-top:1px solid var(--line);text-align:center}
.acesso-secundario p{margin:0 0 var(--sp-3);font-size:var(--fs-sec);color:var(--muted)}
.acesso-secundario .btn-grande{display:flex;align-items:center;justify-content:center;
  text-decoration:none;text-transform:none;font-size:var(--fs-body);height:52px}

.acesso-perfis{margin:var(--sp-5) 0 0;text-align:center;font-size:var(--fs-caps);
  font-weight:var(--fw-forte);letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint)}

/* Telas curtas: aperta o respiro vertical antes de cortar conteúdo. */
@media (max-height:680px){
  .acesso{justify-content:flex-start}
  .acesso-marca{margin-bottom:var(--sp-5)}
  .acesso-logo{height:32px;margin-bottom:var(--sp-2)}
}
@media (max-width:380px){
  .acesso{padding-left:var(--sp-3);padding-right:var(--sp-3)}
}

/* ---------- Fotos e documentos do motoboy (Admin) ----------
   Miniatura clicável; o arquivo em si continua vindo por rota autenticada. */
.galeria-docs{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
  gap:var(--sp-3);margin:var(--sp-3) 0}
.doc-card{display:flex;flex-direction:column;gap:6px;padding:0;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;cursor:pointer;
  font-family:var(--ff);text-align:left}
.doc-card img{width:100%;height:96px;object-fit:cover;display:block;background:var(--cinza-50)}
.doc-card .doc-pdf{display:grid;place-items:center;height:96px;gap:4px;color:var(--muted);
  background:var(--cinza-50);font-size:var(--fs-legenda);font-weight:var(--fw-forte)}
.doc-card .doc-nome{padding:0 8px 8px;font-size:var(--fs-legenda);color:var(--txt)}
.doc-ampliado{width:100%;max-height:70vh;object-fit:contain;border-radius:var(--r-sm);
  background:var(--cinza-50)}

/* Card Patrocinado (Acompanhamento Público) */
.tracking-ad-card {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}
.tracking-ad-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.tracking-ad-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: var(--fw-black);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--orange-700);
}
.tracking-ad-tag svg {
  width: 13px;
  height: 13px;
}
.tracking-ad-seal {
  font-size: 11px;
  font-weight: var(--fw-forte);
  color: var(--muted);
  background: var(--surface-2);
  padding: 2px 8px;
  border-radius: var(--r-full);
}
.tracking-ad-partner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.tracking-ad-logo {
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  object-fit: cover;
  flex: none;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.tracking-ad-partner-info b {
  display: block;
  font-size: 15px;
  color: var(--txt);
}
.tracking-ad-beneficio {
  display: block;
  color: var(--orange);
  font-weight: var(--fw-forte);
  font-size: 13px;
}
.tracking-ad-banner-box {
  width: 100%;
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: var(--sp-3);
  max-height: 180px;
  background: var(--surface-2);
}
.tracking-ad-banner {
  width: 100%;
  height: 100%;
  max-height: 180px;
  object-fit: cover;
  display: block;
}
.tracking-ad-content h3 {
  margin: 0 0 var(--sp-1);
  font-size: 16px;
  font-weight: var(--fw-destaque);
}
.tracking-ad-content p {
  margin: 0 0 var(--sp-3);
  font-size: 13px;
  line-height: 1.45;
}
.tracking-ad-cupom-box {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--laranja-soft);
  border: 1px dashed var(--orange);
  border-radius: var(--r-sm);
  margin-bottom: var(--sp-3);
}
.tracking-ad-cupom-label {
  font-size: 12px;
  font-weight: var(--fw-forte);
  color: var(--orange-700);
}
.tracking-ad-cupom-code {
  font-family: var(--ff-num);
  font-weight: var(--fw-black);
  font-size: 14px;
  color: var(--txt);
  letter-spacing: 0.05em;
  background: var(--surface);
  padding: 2px 8px;
  border-radius: 4px;
}
.tracking-ad-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  text-decoration: none;
  font-weight: var(--fw-forte);
}

/* ---------- Parcerias & Métricas Layout (PAR-05B) ---------- */
.parcerias-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}
.parcerias-header-title {
  min-width: 240px;
}
.parcerias-header-actions {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}
@media (max-width: 480px) {
  .parcerias-header-actions {
    width: 100%;
  }
  .parcerias-header-actions .btn {
    width: 100% !important;
    justify-content: center;
  }
}

.parcerias-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
  border-bottom: 1px solid var(--borda, #e2e8f0);
  padding-bottom: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.parcerias-tabs .btn {
  white-space: nowrap;
  flex-shrink: 0;
}

.metricas-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
  width: 100%;
}
@media (max-width: 900px) {
  .metricas-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 540px) {
  .metricas-cards-grid {
    grid-template-columns: 1fr;
  }
}

.metric-card {
  background: var(--surface, #ffffff);
  padding: 14px 16px;
  border: 1px solid var(--borda, #e2e8f0);
  border-radius: var(--r-md, 10px);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 90px;
  width: 100%;
  box-sizing: border-box;
}
.metric-card-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--muted, #64748b);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.metric-card-val {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
}
.metric-card-sub {
  font-size: 11px;
  color: var(--muted, #64748b);
  margin-top: 2px;
}

.metricas-filtros-box {
  background: var(--bg-soft, #f8fafc);
  padding: 14px;
  border: 1px solid var(--borda, #e2e8f0);
  border-radius: var(--r-md, 10px);
  margin-bottom: 16px;
  width: 100%;
  box-sizing: border-box;
}
.metricas-filtros-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.metricas-filtros-bar .btn-limpar {
  margin-left: auto;
  color: var(--erro, #ef4444);
}
@media (max-width: 540px) {
  .metricas-filtros-bar .btn-limpar {
    margin-left: 0;
  }
}
.metricas-filtros-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  width: 100%;
}
@media (max-width: 600px) {
  .metricas-filtros-grid {
    grid-template-columns: 1fr;
  }
}
.metricas-filtro-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.metricas-filtro-field label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted, #64748b);
  margin: 0;
}
.metricas-filtro-field input,
.metricas-filtro-field select {
  width: 100%;
  padding: 6px 8px;
  font-size: 12px;
  border: 1px solid var(--borda, #cbd5e1);
  border-radius: var(--r-sm, 6px);
  background: #ffffff;
  color: var(--txt, #0f172a);
  box-sizing: border-box;
}

/* ---------- Wizard de Cadastro Progressivo (Motoboy 11 Etapas CAD-01V2) ---------- */
.app-viewport {
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.brand-header {
  text-align: center;
  margin-bottom: 16px;
}

.brand-header img {
  height: 48px;
  width: auto;
  display: inline-block;
}

.wizard-container {
  background: var(--surface, #ffffff);
  border: 1px solid var(--borda, #e2e8f0);
  border-radius: var(--r-lg, 16px);
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  position: relative;
}

.wizard-progress-header {
  margin-bottom: 20px;
}

.wizard-progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted, #68727E);
  margin-bottom: 6px;
}

.wizard-progress-track {
  height: 6px;
  width: 100%;
  background: var(--bg-soft, #F4F6F8);
  border-radius: 3px;
  overflow: hidden;
}

.wizard-progress-fill {
  height: 100%;
  background: var(--orange, #E16407);
  transition: width 0.3s ease;
}

.step-title {
  font-family: 'Archivo', 'Inter', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--txt, #14181D);
  margin-bottom: 6px;
  line-height: 1.3;
}

.step-subtitle {
  font-size: 13px;
  color: var(--muted, #68727E);
  margin-bottom: 20px;
}

.field-error-msg {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #DC2626;
  margin-top: 8px;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  padding: 10px 14px;
  border-radius: 6px;
}

.field-success-msg {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #16A34A;
  margin-top: 8px;
  background: #F0FDF4;
  border: 1px solid #DCFCE7;
  padding: 10px 14px;
  border-radius: 6px;
}

.actions-row {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.actions-row .btn-secondary { width: 110px; flex: none; }
.actions-row .btn-primary { flex: 1; }

.radio-group {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  margin-bottom: 16px;
}

.radio-card {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--borda, #E2E8F0);
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  background: var(--surface, #FFFFFF);
  transition: all 0.2s ease;
}

.radio-card.active {
  border-color: #E16407;
  background: #FDEBDD;
  color: #E16407;
}

.info-card-locked {
  background: var(--surface-2, #F8FAFC);
  border: 1px solid var(--borda, #E2E8F0);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.info-card-locked .icon-lock {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #FDEBDD;
  color: #E16407;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex: none;
}

.camera-view-container {
  width: 100%;
  height: 320px;
  background: #0F172A;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #FFF;
}

.camera-oval-guide {
  width: 160px;
  height: 210px;
  border: 2px dashed rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  position: absolute;
  pointer-events: none;
}

.camera-controls {
  margin-top: 16px;
  display: flex;
  gap: 12px;
  width: 100%;
}

.camera-preview-captured {
  width: 100%;
  height: 260px;
  border-radius: 10px;
  object-fit: cover;
  border: 2px solid #E16407;
}

.strength-box {
  margin-top: 8px;
  margin-bottom: 16px;
}

.strength-bar {
  height: 6px;
  width: 100%;
  background: var(--borda, #E2E8F0);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 6px;
}

.strength-fill {
  height: 100%;
  width: 0%;
  transition: all 0.3s ease;
}

.strength-fill.strong { width: 100%; background: #16A34A; }

.analysis-status-card {
  text-align: center;
  padding: 12px 0;
}

.analysis-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #FEF3C7;
  color: #D97706;
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.analysis-details-box {
  background: var(--surface-2, #F8FAFC);
  border: 1px solid var(--borda, #E2E8F0);
  border-radius: 10px;
  padding: 14px;
  text-align: left;
  margin: 16px 0;
  font-size: 13px;
}

.btn-link { background: none; border: none; padding: 0; color: var(--laranja, #E16407); cursor: pointer; text-decoration: underline; }

.camera-circle-guide {
  width: 190px;
  height: 190px;
  border: 3px dashed #E16407;
  border-radius: 50%;
  position: absolute;
  pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.4);
}

.avatar-preview-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #E16407;
  box-shadow: 0 4px 12px rgba(225, 100, 7, 0.2);
}
/* APP-11 — rastreamento público seguro, mobile first */
.app11-tracking {
  margin: 0;
  min-height: 100vh;
  background: #f4f1ed;
  color: #242321;
}
.app11-tracking-shell {
  width: min(100%, 760px);
  min-height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: 0 0 48px rgba(40, 31, 24, .08);
}
.app11-tracking-header {
  padding: max(18px, env(safe-area-inset-top)) 20px 18px;
  border-bottom: 1px solid #eee7e1;
}
.app11-tracking-header p {
  margin: 16px 0 0;
  color: #6d655f;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.app11-tracking #rastreamentoView {
  flex: 1;
  padding: 20px;
}
.app11-tracking-shell > footer {
  padding: 18px 20px max(18px, env(safe-area-inset-bottom));
  color: #746d67;
  font-size: .8rem;
  text-align: center;
  border-top: 1px solid #eee7e1;
}
.app11-tracking-state {
  min-height: 56vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  text-align: center;
}
.app11-tracking-state h1 {
  margin: 4px 0 0;
  font-size: clamp(1.7rem, 7vw, 2.3rem);
}
.app11-tracking-state p {
  max-width: 32rem;
  margin: 0;
  color: #6d655f;
  line-height: 1.55;
}
.app11-tracking-lock {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: #f8e9de;
  color: #E16407;
}
.app11-tracking-lock svg { width: 30px; height: 30px; }
.app11-tracking-card,
.app11-map-card,
.app11-no-location {
  border: 1px solid #eee4dc;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 35px rgba(67, 46, 30, .08);
  overflow: hidden;
}
.app11-driver {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
}
.app11-avatar {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: #f8e9de;
  color: #E16407;
}
.app11-avatar img { width: 100%; height: 100%; object-fit: cover; }
.app11-avatar svg { width: 27px; height: 27px; }
.app11-kicker {
  color: #7b716a;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.app11-driver h1 { margin: 3px 0 0; font-size: 1.45rem; }
.app11-public-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 18px;
  background: #2c2b29;
  color: #fff;
}
.app11-public-status i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff7a1a;
  box-shadow: 0 0 0 5px rgba(255, 122, 26, .18);
}
.app11-public-status p { margin: 0; font-weight: 750; }
.app11-map-card { margin-top: 16px; }
.app11-map {
  width: 100%;
  height: min(52vh, 430px);
  min-height: 320px;
}
.app11-map-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  color: #625b56;
  font-size: .82rem;
}
.app11-map-meta span { text-align: right; }
.app11-no-location {
  margin-top: 16px;
  padding: 42px 24px;
  text-align: center;
}
.app11-no-location svg { width: 36px; height: 36px; color: #E16407; }
.app11-no-location h2 { margin: 12px 0 7px; font-size: 1.15rem; }
.app11-no-location p { margin: 0; color: #746d67; }
.app11-privacy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 18px 0 0;
  color: #746d67;
  font-size: .78rem;
  text-align: center;
}
.app11-privacy svg { width: 15px; height: 15px; }
@media (min-width: 680px) {
  .app11-tracking #rastreamentoView { padding: 28px; }
  .app11-tracking-card { display: grid; grid-template-columns: 1fr 1fr; }
  .app11-public-status { min-height: 100%; }
}