/* ══════════════════════════════════════════════════════════════════════
   App do entregador — estilo

   Folha propria, e nao a da loja: esta tela nao compartilha nada com a
   vitrine. A COR, porem, vem toda de comum/tema.css — a mesma marca, a
   mesma sinalizacao. Um hex escrito aqui seria um pedaco do produto que o
   lojista nunca conseguiria repintar.

   A base e a escura, declarada no <html>: esta tela e olhada de noite, na
   rua, com a mao segurando um capacete. Fundo claro no escuro cega, e a
   pessoa perde dois segundos por pedido so esperando o olho voltar.

   As medidas: alvo de toque nunca menor que 44px, porque quem usa esta tela
   esta com luva ou com a mao molhada; o valor grande, porque ele e lido de
   relance na porta do cliente; e nada que dependa de passar o mouse em
   cima, que num celular nao existe.
   ══════════════════════════════════════════════════════════════════════ */

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}

body{
  background:var(--fundo);color:var(--texto);
  font:16px/1.5 var(--ui);
  /* O recorte do celular: sem isto o ultimo botao fica embaixo da barra de
     gestos do iPhone e nao da para tocar. */
  padding:16px 16px calc(16px + env(safe-area-inset-bottom));
  max-width:520px;margin:0 auto;
  -webkit-text-size-adjust:100%;
  color-scheme:var(--esquema);
}

.carregando{color:var(--texto-3);text-align:center;padding:60px 0}

/* ── cabecalho ─────────────────────────────────────────────────────── */
.topo{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:14px}
.topo .quem{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-3);font-weight:700}
.topo .sair{background:none;border:0;color:var(--texto-3);font:600 13px var(--ui);cursor:pointer;padding:6px 0}
h1{font-size:21px;font-weight:700;letter-spacing:-.01em;margin-bottom:14px}

/* ── lista da rota ─────────────────────────────────────────────────── */
.lista{display:flex;flex-direction:column;gap:9px}
.cartao{
  display:block;width:100%;text-align:left;
  background:var(--superficie-alta);border:1px solid var(--linha);border-radius:var(--raio-g);
  padding:13px 14px;color:var(--texto);font:inherit;cursor:pointer;
}
.cartao:active{border-color:var(--marca)}
.cartao .l1{display:flex;justify-content:space-between;gap:10px;font-size:15px;font-weight:600}
.cartao .l2{font-size:13px;color:var(--texto-3);margin-top:3px}
.cartao .pendente{color:var(--marca-realce)}
.cartao .feito{color:var(--ok)}
.cartao.entregue{opacity:.62}

.vazio{color:var(--texto-3);font-size:14px;padding:22px 2px;text-align:center}

/* ── caixas de informacao ──────────────────────────────────────────── */
.caixa{background:var(--superficie-alta);border:1px solid var(--linha);border-radius:var(--raio-g);
 padding:13px 14px;display:flex;flex-direction:column;gap:7px;margin-top:12px}
.caixa.destaque{border-color:var(--marca);background:var(--marca-sombra)}
.caixa .titulo{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-3);font-weight:700}
.caixa .linha{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.caixa .linha span{color:var(--texto-2)}
.caixa .linha.forte{font-size:17px;font-weight:700}

/* O que vem DENTRO de um item — os sabores escolhidos no combo.
   Recuado e menor: e detalhe do item de cima, e nao um item novo. Sem o
   recuo, "3 Gelo de morango" pareceria mais uma coisa a levar. */
.item-a-levar + .item-a-levar{margin-top:10px}
.dentro-do-item{list-style:none;margin:4px 0 0;padding:0 0 0 12px;
  border-left:2px solid var(--linha)}
.dentro-do-item li{font-size:13px;color:var(--texto-2);line-height:1.6}
.caixa p{font-size:13px;color:var(--texto-3);line-height:1.5}

.valorao{font-size:32px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.endereco{font-size:18px;font-weight:600;line-height:1.35}
.sob{font-size:13.5px;color:var(--texto-2);margin-top:3px}
.telefone{color:var(--marca-realce);font-weight:600;text-decoration:none}

/* ── botoes ────────────────────────────────────────────────────────── */
.principal{
  display:block;width:100%;margin-top:18px;padding:15px;
  border:0;border-radius:var(--raio-g);background:var(--marca);color:var(--sobre-marca);
  font:700 16px var(--ui);cursor:pointer;
}
.principal:disabled{opacity:.4}
.secundario{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:14px;margin-top:9px;
  border:1px solid var(--linha-forte);border-radius:var(--raio-g);
  background:var(--superficie);color:var(--texto);
  font:600 15px var(--ui);cursor:pointer;text-decoration:none;
}
.dupla{display:flex;gap:9px}
.dupla>*{flex:1;margin-top:9px}
.voltar{background:none;border:0;color:var(--texto-3);font:inherit;font-size:14px;
 cursor:pointer;padding:8px 0;margin-bottom:2px}

/* ── escolha da forma recebida ─────────────────────────────────────── */
.formas{display:flex;flex-direction:column;gap:9px;margin-top:12px}
.forma{
  display:block;width:100%;text-align:left;padding:14px;
  border:1px solid var(--linha-forte);border-radius:var(--raio-g);
  background:var(--superficie);color:var(--texto);font:600 15px var(--ui);cursor:pointer;
}
.forma small{display:block;font-weight:400;font-size:13px;color:var(--texto-3);margin-top:2px}
.forma.marcada{border-color:var(--marca);background:var(--marca-sombra)}

/* O cartao, quando a loja cadastrou a tabela da maquininha: os botoes dizem
   QUAL cartao. Ate 5 vao direto numa caixa (2 colunas); acima disso o botao
   "Cartao ›" abre "Qual cartao?" (3 colunas). A regra e `desenhoDoCartao`. */
.grupo-cartao{
  border:1px solid var(--linha-forte);border-radius:var(--raio-g);
  background:var(--superficie);padding:12px;
}
.grupo-cartao .tit{font-size:15px;font-weight:600}
.grupo-cartao .tit small{display:block;font-weight:400;font-size:13px;color:var(--texto-3);margin-top:2px}
.grade-cartao{display:grid;gap:8px;margin-top:10px}
.grade-cartao.c2{grid-template-columns:repeat(2,1fr)}
.grade-cartao.c3{grid-template-columns:repeat(3,1fr)}
.grade-cartao .forma{text-align:center;padding:14px 4px;min-height:52px}
.grupo-cartao .qual{
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--texto-3);font-weight:700;margin-top:12px;
}
/* Duas maquininhas ou mais (1.307.0): a mao diz qual aparelho passou o cartao,
   e so depois o cartao dele. A ultima usada vem primeiro, sem vir marcada. */
.grade-cartao .forma small{display:block;margin-top:2px;font-size:11px;opacity:.75}

/* ── entrada ───────────────────────────────────────────────────────── */
label{display:block;font-size:12px;letter-spacing:.05em;text-transform:uppercase;
 color:var(--texto-3);font-weight:700;margin:16px 0 6px}
input{
  width:100%;padding:14px;border:1px solid var(--linha-forte);border-radius:var(--raio-g);
  background:var(--superficie);color:var(--texto);font:16px var(--ui);
}
input:focus{outline:0;border-color:var(--marca)}
.dica{font-size:13px;color:var(--texto-3);line-height:1.5;margin-top:8px}
.erro{color:var(--erro-clara);font-size:14px;margin-top:12px;min-height:20px}

/* ── a chamada para ligar os avisos ────────────────────────────────── */
/* Fica no topo da rota porque e o que decide se o entregador vai saber de um
   pedido novo hoje. Some sozinha quando os avisos ja estao ligados: aviso
   permanente sobre coisa resolvida vira ruido que se aprende a nao ver. */
.chamada{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  margin:0 0 12px;padding:12px 13px;
  border:1px solid var(--marca);border-radius:var(--raio-g);
  background:var(--marca-sombra);color:var(--texto);
  font:600 14px var(--ui);cursor:pointer;
}
.chamada .sino{font-size:17px;flex:none}
.chamada span:nth-child(2){flex:1;min-width:0}
.chamada .seta{color:var(--marca-realce);font-size:19px;flex:none}

/* ── o passo a passo do iPhone ─────────────────────────────────────── */
.passos{display:flex;flex-direction:column;gap:11px;margin-top:16px}
.passo{display:flex;gap:11px;align-items:flex-start;font-size:14px;
 color:var(--texto-2);line-height:1.45}
.passo i{
  flex:none;width:22px;height:22px;border-radius:50%;margin-top:1px;
  border:1px solid var(--linha-forte);background:var(--superficie);
  color:var(--marca-realce);font:700 12px/22px var(--ui);font-style:normal;text-align:center;
}
.passo b{color:var(--texto)}

/* ── o código que o cliente diz na porta ───────────────────────────── */
/* Teclado desenhado, e nao um `<input>`: o teclado do sistema sobe por cima
   da tela e cobre justamente os quadradinhos que a pessoa precisa conferir
   enquanto o cliente dita. E as teclas aqui cabem num polegar com luva. */
.digitos{display:flex;gap:10px;justify-content:center;margin:20px 0 6px}
.digitos i{
  flex:1;max-width:66px;aspect-ratio:3/4;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--linha-forte);border-radius:var(--raio-g);
  background:var(--superficie);
  font:700 30px/1 var(--ui);font-style:normal;font-variant-numeric:tabular-nums;
}
/* Onde o proximo digito vai cair. Sem esta marca, quem esta com o cliente
   falando rapido perde o lugar e recomeca.
   Uma BARRA piscando, e nao o quadradinho pintado: pintado, ele fica mais
   escuro que os vizinhos e o olho le como campo com defeito — exatamente o
   contrario de "digite aqui". */
.digitos i.cursor{border-color:var(--marca);position:relative}
.digitos i.cursor::after{
  content:'';position:absolute;width:2px;height:38%;
  background:var(--marca-realce);border-radius:1px;
  animation:piscar 1.1s step-end infinite;
}
@keyframes piscar{50%{opacity:0}}
.digitos i.cheio{border-color:var(--marca)}

/* Quem prefere menos movimento na tela nao ganha um cursor piscando. */
@media (prefers-reduced-motion:reduce){
  .digitos i.cursor::after{animation:none}
}

/* "apagar" escrito, e nao o simbolo de apagar (U+232B): a fonte do sistema
   no Android nao tem esse caractere, e o botao aparecia como um quadrado
   riscado — o desenho universal de glifo que faltou. */
.tecla.apagar{font-size:14px;letter-spacing:.02em}

.teclado{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:14px}
.tecla{
  padding:16px 0;
  border:1px solid var(--linha-forte);border-radius:var(--raio-g);
  background:var(--superficie);color:var(--texto);
  font:600 22px var(--ui);font-variant-numeric:tabular-nums;cursor:pointer;
}
.tecla:active{border-color:var(--marca);background:var(--marca-sombra)}

/* A saida — e ela nao e uma saida, e um reenvio. Separada do resto por uma
   linha e empurrada para baixo: e o ultimo recurso, e nao a proxima opcao. */
.escape{margin-top:26px;padding-top:16px;border-top:1px solid var(--linha)}

/* A confirmacao de que o cliente foi avisado. Verde do tema, e nao um hex:
   e a mesma sinalizacao de "deu certo" do resto do sistema. */
.caixa.avisado{border-color:var(--ok);background:var(--ok-fundo)}
.caixa.avisado .linha.forte b{color:var(--ok)}

/* ── A oferta ───────────────────────────────────────────────────────────
   Ela toma a tela inteira porque tem PRAZO. Um cartão a mais na lista seria
   mais uma linha entre outras, e o tempo acabaria enquanto ele rola a tela
   procurando o que mudou. */
.rotulo-oferta{
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--marca-realce);margin-bottom:8px;
}
/* A contagem é grande e tabular: ele lê de relance, com o capacete na mão, e
   o número não pode dançar de largura a cada segundo. */
.contagem{
  margin-top:16px;text-align:center;
  font:700 34px/1 var(--ui);font-variant-numeric:tabular-nums;
  color:var(--alerta);letter-spacing:.02em;
}
.dica.meio{text-align:center}
/* Os dois botões grudam no pé: o polegar chega neles sem a mão sair do lugar. */
/* Os dois botões grudam no pé: o polegar chega neles sem a mão sair do lugar. */
.tela-cheia{display:flex;flex-direction:column;
 min-height:calc(100dvh - 32px - env(safe-area-inset-bottom))}
.pe-da-oferta{margin-top:auto;padding-top:14px}

/* Os números da oferta: borda da marca, e não o bloco pintado.
   `.caixa.destaque` usa `--marca-sombra` de fundo — que numa caixa de quatro
   linhas vira um retângulo marrom do tamanho de meia tela, e o olho lê como
   erro. Com quatro valores, o que destaca é a BORDA. */
.caixa.da-oferta{border-color:var(--marca)}
.caixa.da-oferta .linha.forte b{color:var(--marca-realce)}

/* ── A retirada na loja ─────────────────────────────────────────────────
   O pedido está reservado para ele e ainda na prateleira. Borda da marca, e
   não o bloco pintado: `--marca-sombra` de fundo numa caixa com quatro
   dígitos grandes vira um retângulo marrom que o olho lê como erro — foi o
   que aconteceu na tela da oferta. */
.caixa.na-loja{border-color:var(--marca)}
/* Os dígitos que ele mostra no balcão. Grandes e separados de propósito: são
   ditados em voz alta com o capacete na mão, e um número corrido de quatro
   casas vira "oito mil duzentos e quarenta e um" na boca de quem lê. */
.numerao{display:flex;gap:9px;justify-content:center;margin:12px 0 4px}
.numerao span{
  width:54px;height:66px;border-radius:var(--raio-g);
  background:var(--marca-relevo);color:var(--sobre-marca);
  display:grid;place-items:center;
  font:800 30px/1 var(--ui);font-variant-numeric:tabular-nums;
}
/* Na lista, o que espera no balcão vem com a borda da marca: ele bate o olho
   e sabe que aquele não é um endereço, é uma parada na loja. */
.cartao.na-loja{border-color:var(--marca)}
.cartao.na-loja .pendente{color:var(--marca-realce)}

/* ── O acerto do turno ──────────────────────────────────────────────────
   A linha que fecha a conta: destaque de valor, e não de alerta. É a
   informação que ele procura quando abre o app no fim da noite. */
.caixa .linha.forte b{color:var(--marca-realce)}

/* Fechado, esperando o caixa contar. Âmbar e não verde: não acabou — tem
   alguém do outro lado que ainda precisa fazer alguma coisa. */
.caixa.esperando{border-color:var(--alerta)}
.caixa.esperando .linha.forte b{color:var(--alerta)}

/* O motivo de o botão estar travado, logo abaixo dele. Sem esta linha o
   botão apagado seria um app quebrado; com ela, é uma instrução. */
.travado{font-size:13px;color:var(--alerta);margin:9px 0 0;text-align:center}

/* "Contei diferente": desvio, e não porta de entrada. Discreto de propósito —
   o caminho normal é confirmar o valor que já está na tela. */
.ajustar{display:block;margin:2px auto 10px;padding:4px;background:transparent;border:0;
 color:var(--marca-realce);font:inherit;font-size:13px;text-decoration:underline;cursor:pointer}

/* O campo do valor, quando ele resolve contar por conta própria. Grande como
   o número que substitui: trocar um valor de 32px por um campo de 15px faria
   a tela parecer que perdeu a informação. */
.valor-digitado{
  width:100%;margin:6px 0 10px;padding:10px 12px;
  background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio-g);
  color:var(--texto);font:700 28px/1.2 var(--ui);font-variant-numeric:tabular-nums;
  text-align:center;
}
.valor-digitado:focus{outline:2px solid var(--marca);outline-offset:-1px}

/* ══════════════════════════════════════════════════════════════════════
   O que ele deve à loja nesta viagem

   Separada da caixa do turno de propósito: aquela é do DIA, esta é do que
   ele deve desde a última prestação de contas. São dois períodos, e somar
   faria "R$ 96 comigo" e "entregue R$ 54" aparecerem sem nada explicando
   a diferença.
   ══════════════════════════════════════════════════════════════════════ */
.caixa.da-viagem .valor-da-viagem{
  display:block;font-family:var(--ui);font-weight:500;font-size:32px;margin:2px 0 10px;
}
/* Âmbar, e não vermelho: nada está errado — ele só precisa passar no balcão
   antes de sair de novo. */
.caixa.da-viagem.travado{
  border-color:color-mix(in srgb,var(--alerta) 50%,transparent);
  background:color-mix(in srgb,var(--alerta) 7%,var(--superficie-alta));
}
.caixa.da-viagem .principal{margin-top:12px}

/* ── A divisão na porta ─────────────────────────────────────────────────
   "Metade em dinheiro e metade no cartão" acontece na porta como acontece
   no balcão. Até a 1.271 o entregador marcava uma forma só: marcando
   dinheiro, o acerto do turno cobrava dele o que entrou na maquininha;
   marcando cartão, a loja não cobrava o dinheiro que ficou com ele.

   Uma linha embaixo das três formas, e não uma quarta forma: é outra
   pergunta. Tracejada porque não é caminho de todo dia. */
.dividir-na-porta{
  width:100%;margin-top:10px;min-height:44px;
  border:1px dashed var(--linha-forte);border-radius:var(--raio-g);
  background:transparent;color:var(--texto-2);font:600 13.5px var(--ui);cursor:pointer;
}
.dividir-na-porta:active{border-color:var(--marca);color:var(--marca)}

/* O que falta, na moeda da porta: é o número que ele lê com o cliente na
   frente, e por isso é o maior da tela. */
.falta-na-porta{margin-top:14px;text-align:center}
.falta-na-porta .rot{
  display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--texto-3);font-weight:700;
}
.falta-na-porta b{
  display:block;font-size:30px;font-weight:700;letter-spacing:-.02em;
  color:var(--marca-realce);font-variant-numeric:tabular-nums;margin-top:3px;
}
.falta-na-porta b.quitado{color:var(--ok)}
.falta-na-porta .sub{display:block;font-size:13px;color:var(--texto-2);margin-top:2px}

/* O valor no teclado, centrado: ali ele é a tela inteira. */
.valorao.centrado{text-align:center;margin-top:10px}

/* Uma parte já recebida, dentro da caixa que já existe. */
.parte{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:14px;padding:7px 0;border-bottom:1px solid var(--linha);
}
.parte:last-child{border-bottom:0}
.parte span{color:var(--texto-2);flex:1;min-width:0}
.parte b{font-variant-numeric:tabular-nums}
.parte button{
  border:0;background:transparent;color:var(--erro);font:400 17px var(--ui);
  line-height:1;padding:0 2px;cursor:pointer;
}

/* ── O pedido ja pago (1.322.0) ─────────────────────────────────────── */
/* PAGO ou COBRAR na frente do endereco, na lista da rota: e la que ele
   decide se sai com a maquininha. Verde e o pago, a cor da marca e o que
   ainda tem dinheiro a pegar — os dois do tema, para a loja repintar. */
.selo-pago,.selo-cobrar{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.06em;
  padding:2px 7px;border-radius:6px;margin-right:6px;vertical-align:1px}
.selo-pago{background:var(--ok-fundo);color:var(--ok-texto)}
.selo-cobrar{background:var(--marca-sombra);color:var(--marca-realce)}

/* A caixa que toma o lugar do "A receber". A palavra grande e o que se le
   com o celular no suporte da moto. */
.caixa.pago{border-color:var(--ok);background:var(--ok-fundo);align-items:center;text-align:center;gap:4px;padding:16px 14px}
.caixa.pago .pago-grande{font-size:34px;font-weight:800;letter-spacing:.04em;color:var(--ok-texto);line-height:1.1}
.caixa.pago p{font-size:14px;color:var(--texto);font-weight:600}
.caixa.pago small{font-size:12.5px;color:var(--texto-2)}

/* A faixa "a loja marcou como pago", no topo. A mesma chamada dos avisos,
   no verde do pago. */
.chamada.pago{border-color:var(--ok);background:var(--ok-fundo)}
.chamada.pago .seta{color:var(--ok-texto)}