/* App do motoboy: celular na mão, muitas vezes de capacete e com pressa.
   Regras desta tela: alvo grande (mínimo 48px), uma coluna, o que decide
   aparece antes do que explica, e contraste alto para sol na rua. */
/* AS CORES MORAM NO :root, NÃO EM .motoboy.

   Elas eram declaradas dentro de ".motoboy", e todos os diálogos
   (confirmação, devolução, rota, prestação) nascem com
   document.body.append — fora dessa subárvore. Variável CSS herda pelo DOM:
   dentro do diálogo elas simplesmente não existiam.

   O efeito não foi um botão sem cor, foi um botão INVISÍVEL:
   "background: var(--mb-azul)" com a variável ausente é inválido no momento
   de computar o valor, então background-color cai para o inicial
   (transparent), enquanto "color: #fff" continua válido. Texto branco sobre
   o fundo branco do diálogo — CONFIRMAR ENTREGA e DEVOLVER sumiam.

   Os botões .secundario escapavam por usarem cor literal (#e2e8f0): era por
   isso que MAPA/WHATSAPP/LIGAR apareciam e a ação principal não. */
:root {
    --mb-verde: #15803d;
    --mb-vermelho: #b91c1c;
    --mb-azul: #1d4ed8;
}
.motoboy {
    min-height: 100dvh;
    background: #f5f7fb;
    color: #172238;
    display: flex;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom);
}
.mb-topo {
    display: flex; align-items: center; gap: 10px;
    padding: calc(12px + env(safe-area-inset-top)) 14px 12px;
    background: var(--mb-azul); color: #fff;
}
.mb-topo h1 { font-size: 19px; margin: 0; line-height: 1.2; }
.mb-eyebrow { margin: 0; font-size: 11px; letter-spacing: .12em; opacity: .8; }
.mb-topo > div:first-child { flex: 1; min-width: 0; }
.mb-estado {
    display: inline-flex; align-items: center; gap: 6px;
    background: #dcfce7; color: #14532d; border: 0; border-radius: 999px;
    padding: 7px 12px; font-size: 12px; font-weight: 700; min-height: 44px;
}
.mb-estado.offline { background: #fee2e2; color: #7f1d1d; }
.mb-estado.tem-fila b { background: #fde68a; color: #92400e; border-radius: 999px; padding: 1px 7px; }
.mb-estado .ico { width: 15px; height: 15px; }
.mb-sair { background: transparent; border: 0; color: #fff; padding: 8px; min-height: 44px; min-width: 44px; }
.mb-sair .ico { width: 22px; height: 22px; }

.mb-abas { display: flex; background: #fff; border-bottom: 1px solid #e2e8f0; position: sticky; top: 0; z-index: 2; }
.mb-abas button {
    flex: 1; background: none; border: 0; border-bottom: 3px solid transparent;
    padding: 14px 6px; font-size: 13px; font-weight: 800; color: #64748b; min-height: 52px;
}
.mb-abas button.ativa { color: var(--mb-azul); border-bottom-color: var(--mb-azul); }
.mb-abas b { background: #e2e8f0; color: #0f172a; border-radius: 999px; padding: 1px 7px; margin-left: 4px; font-size: 12px; }
.mb-abas button.ativa b { background: var(--mb-azul); color: #fff; }

.mb-lista { flex: 1; padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.mb-vazio { color: #566378; text-align: center; padding: 28px 16px; line-height: 1.5; }

.mb-card { background: #fff; border: 1px solid #dce3ee; border-radius: 10px; padding: 12px; box-shadow: 0 1px 3px rgba(15, 23, 42, .05); border-left: 4px solid var(--mb-azul); }
.mb-card.cobrar { border-left-color: #b45309; }
.mb-card.paga { border-left-color: var(--mb-verde); }
.mb-card-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; font-size: 12px; color: #475569; }
.mb-card h2 { margin: 4px 0 6px; font-size: 18px; line-height: 1.25; }
.mb-situacao { font-weight: 700; }
.mb-endereco { display: flex; gap: 6px; align-items: flex-start; margin: 0 0 8px; color: #334155; font-size: 14px; line-height: 1.4; }
.mb-endereco .ico { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; }
.mb-pagamento { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.mb-tag { border-radius: 6px; padding: 4px 8px; font-size: 12px; font-weight: 700; }
.mb-tag.pago { background: #dcfce7; color: #14532d; }
.mb-tag.cobrar { background: #fef3c7; color: #92400e; }
.mb-forma { color: #475569; font-size: 13px; }

.mb-botao {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; min-height: 52px; border: 1px solid transparent; border-radius: 9px;
    font-size: 15px; font-weight: 700; line-height: 1.35; text-decoration: none; padding: 10px 14px;
}
.mb-botao .ico { width: 19px; height: 19px; }
.mb-botao.principal { background: var(--mb-azul); color: #fff; }
.mb-botao.principal.verde { background: var(--mb-verde); }
.mb-botao.secundario { background: #f8fafc; border-color: #cbd5e1; color: #172238; }
.mb-botao.perigo { background: var(--mb-vermelho); color: #fff; }
.mb-botao.pequeno { min-height: 44px; font-size: 13px; width: auto; }
.mb-botao.grande { min-height: 58px; font-size: 17px; margin-top: 14px; }
/* DESABILITADO TEM DE PARECER DESABILITADO — E CONTINUAR LEGÍVEL.
   opacity .6 sobre um botão colorido ainda parecia clicável; sobre um botão
   sem cor (o defeito das variáveis) virava um retângulo branco. Aqui ele
   ganha cara própria: cinza sólido, texto escuro, cursor de recusa.

   ESPECIFICIDADE IMPORTA AQUI: `.mb-botao.principal.verde` são três classes,
   e `.mb-botao[disabled]` são duas — o verde vencia o fundo e sobrava fundo
   verde com texto cinza-escuro, contraste 1,5 medido no navegador. Por isso
   cada variante é citada junto com [disabled]. */
.mb-botao[disabled],
.mb-botao[disabled].principal,
.mb-botao[disabled].principal.verde,
.mb-botao[disabled].secundario,
.mb-botao[disabled].perigo {
    background: #cbd5e1; color: #334155; opacity: 1; cursor: not-allowed;
    box-shadow: none; filter: none;
}
.mb-botao[disabled] .ico { color: #334155; }
/* A frase que diz o que falta. Botão desabilitado sem explicação é a tela
   dizendo não sem dizer por quê. */
.mb-falta {
    margin: 6px 0 0; font-size: 13px; font-weight: 600; color: #b45309;
    display: flex; gap: 6px; align-items: center;
}
.mb-falta:empty { display: none; }

.mb-rodape { padding: 12px; background: #fff; border-top: 1px solid #e2e8f0; }

.mb-dialogo {
    width: min(520px, 100%); max-width: 100%; border: 1px solid #dce3ee; border-radius: 12px 12px 0 0;
    padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); margin: auto auto 0; max-height: 92dvh; overflow: auto;
    background: #fff; color: #172238; box-shadow: 0 12px 36px rgba(15, 23, 42, .18);
}
.mb-dialogo::backdrop { background: rgba(15, 23, 42, .55); }
.mb-dialogo header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #e5eaf1; }
.mb-dialogo h2 { font-size: 18px; margin: 0; flex: 1; line-height: 1.25; }
.mb-x { background: #f8fafc; color: #475569; border: 1px solid #dce3ee; border-radius: 8px; min-width: 44px; min-height: 44px; flex-shrink: 0; }
.mb-x .ico { width: 18px; height: 18px; }
.mb-itens { list-style: none; padding: 0; margin: 10px 0; }
.mb-itens li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid #f1f5f9; font-size: 14px; }
.mb-atalhos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.mb-atalhos .mb-botao { font-size: 13px; min-height: 48px; }
.mb-acoes-pe { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.mb-bloco { min-width: 0; border: 1px solid #dce3ee; border-radius: 9px; padding: 12px; margin: 0 0 12px; }
.mb-bloco legend { font-size: 12px; font-weight: 800; color: #475569; padding: 0 6px; }
.mb-opcao { display: flex; align-items: center; gap: 10px; padding: 12px 4px; font-size: 15px; min-height: 48px; }
.mb-opcao input { width: 22px; height: 22px; min-height: 22px; margin: 0; flex-shrink: 0; accent-color: var(--mb-azul); }
.mb-campo { display: block; font-size: 13px; color: #475569; margin-top: 8px; }
.mb-campo input, .mb-campo select, .mb-campo textarea, .mb-forma-linha select, .mb-forma-linha input {
    width: 100%; min-width: 0; box-sizing: border-box; min-height: 48px; border: 1px solid #cbd5e1;
    border-radius: 8px; padding: 10px 12px; font-size: 16px; margin-top: 4px; background: #fff; color: #172238;
}
.mb-campo textarea { min-height: 84px; }
.mb-forma-linha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 48px; gap: 6px; align-items: center; margin-bottom: 8px; }
.mb-forma-linha .mb-x { min-width: 44px; }
.mb-soma { font-size: 13px; font-weight: 700; margin: 4px 0 0; }
.mb-soma.ok { color: var(--mb-verde); }
.mb-soma.alerta { color: #b45309; }
.mb-aviso-ok { background: #dcfce7; color: #14532d; border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.mb-erro { color: var(--mb-vermelho); font-size: 14px; min-height: 18px; margin: 6px 0 0; }
.mb-conta { margin: 0; }
.mb-conta > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f1f5f9; }
.mb-conta dt { color: #475569; font-size: 14px; }
.mb-conta dd { margin: 0; font-weight: 700; }
.mb-conta-destaque { background: #f8fafc; border-radius: 10px; padding: 12px !important; font-size: 17px; }
.mb-nota { color: #64748b; font-size: 13px; line-height: 1.5; }

@media (min-width: 720px) {
    .mb-lista { max-width: 720px; width: 100%; margin: 0 auto; }
    .mb-dialogo { border-radius: 12px; margin: auto; }
}

/* Prazo da entrega no cartão: URGENTE chama atenção; PROGRAMADA traz a hora. */
.mb-tag.urgente { background: #fee2e2; color: #991b1b; letter-spacing: .02em; }
.mb-tag.programada { background: #e0ecff; color: #1d4ed8; }
.mb-card-topo .mb-tag { margin-left: auto; margin-right: 8px; }
.mb-itens li a, .mb-endereco a { color: inherit; font-weight: 700; }

/* --- ROTA E PRESTAÇÃO (23/09/2026) --------------------------------
   Um botão por vez no rodapé: na rua, com a moto na mão, escolher
   entre quatro ações é perder tempo e errar. */
.mb-situacao-topo{margin:2px 0 0;font-size:12px;font-weight:700;opacity:.9}
.mb-situacao-topo.em_rota{color:#ffd68a}
.mb-situacao-topo.prestacao_pendente{color:#ffb4b4}
.mb-situacao-topo.aguardando_conferencia{color:#cfe3ff}
.mb-dica{margin:6px 0 0;font-size:12px;opacity:.75}
.mb-km input{font-size:26px;text-align:center;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.mb-aguardando{display:flex;flex-direction:column;align-items:center;gap:2px;margin:0;padding:12px;
 border-radius:12px;background:#1e293b;color:#cfe3ff;text-align:center}
.mb-conta-destaque dt,.mb-conta-destaque dd{font-weight:700}
.mb-conta-destaque.forte{margin-top:6px;padding-top:8px;border-top:2px solid rgba(255,255,255,.25);font-size:17px}
.mb-divergencia{margin:8px 0;padding:10px;border-radius:10px;font-weight:700;text-align:center}
.mb-divergencia:empty{display:none}
.mb-divergencia.ok{background:#14532d;color:#d7ffe6}
.mb-divergencia.alerta{background:#7f1d1d;color:#ffe0e0}
.mb-devolucoes{margin:10px 0;padding:10px;border:1px solid #f3d39c;border-radius:9px;background:#fffbeb;color:#92400e}
.mb-devolucoes h3{margin:0 0 6px;font-size:14px}
.mb-devolucoes p{display:flex;gap:6px;align-items:center;margin:4px 0;font-size:13px}

/* --- HODÔMETRO (24/09/2026) ---------------------------------------
   O motoboy lê um número no painel da moto; o servidor calcula o
   trecho. A última marcação fica à vista para ele conferir antes de
   digitar — sem isso, digitar hodômetro é digitar às cegas. */
.mb-hodometro { border-color: #93c5fd; background: #eff6ff; }
.mb-marcacao { margin: 0 0 8px; font-size: 14px; color: #1e3a8a; }
.mb-marcacao b { font-size: 17px; }
.mb-marcacao small { color: #475569; font-weight: 600; }
.mb-trecho { margin: 8px 0 0; padding: 9px 11px; border-radius: 10px; font-weight: 800; font-size: 14px; }
.mb-trecho:empty { display: none; }
.mb-trecho.ok { background: #dcfce7; color: #14532d; }
.mb-trecho.alerta { background: #fee2e2; color: #7f1d1d; }
/* A ação principal e a frase do que falta andam juntas: o motivo fica
   ao lado do botão, não perdido no meio do formulário. */
.mb-acao-final { position: sticky; bottom: 0; background: #fff; padding: 8px 0; margin-top: 4px; border-top: 1px solid #e5eaf1; }
.mb-trechos { margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: #0f172a; }
.mb-trechos h3 { margin: 0 0 6px; font-size: 13px; letter-spacing: .06em; color: #cbd5e1; }
.mb-trechos p { display: flex; justify-content: space-between; gap: 10px; margin: 4px 0; font-size: 14px; color: #e2e8f0; }
.mb-trechos-total { border-top: 1px solid #334155; padding-top: 6px; margin-top: 6px !important; font-weight: 800; }

/* --- PRESTAÇÃO POR GAVETA (24/09/2026) ---------------------------
   O dinheiro da rota pode ser de mais de um caixa, e o motoboy entrega
   a duas pessoas diferentes. Um campo só esconderia de quem é a falta,
   quando falta — por isso cada gaveta tem o seu bloco, com o seu
   esperado, a sua divergência e a sua justificativa. */
.mb-caixas { margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: #0f172a; }
.mb-caixas h3 { margin: 0 0 6px; font-size: 13px; letter-spacing: .06em; color: #cbd5e1; }
.mb-caixas p { display: flex; justify-content: space-between; gap: 10px; margin: 4px 0; font-size: 14px; color: #e2e8f0; }

.mb-caixa-campo {
    margin: 12px 0; padding: 10px 12px; border: 2px solid #cbd5e1;
    border-radius: 10px; background: #f8fafc;
}
.mb-caixa-campo legend {
    padding: 0 6px; font-size: 14px; font-weight: 800;
    letter-spacing: .04em; color: #0f172a;
}
.mb-caixa-esperado { margin: 0 0 8px; font-size: 14px; color: #334155; }
.mb-caixa-esperado b { font-size: 16px; color: #0f172a; }
.mb-caixa-esperado small { color: #64748b; }

/* O AVISO NÃO PODE COBRIR A AÇÃO PRINCIPAL.
   `#notice` é fixo no rodapé da janela e não se apaga sozinho
   (`notice()` só adiciona a classe). Enquanto o rodapé do motoboy era
   informativo isso não incomodava; agora ele carrega INICIAR ROTA /
   RETORNEI À LOJA / PRESTAR CONTAS, e o aviso ficava por cima da única
   coisa que o motoboy precisa tocar. Aqui ele sobe acima do rodapé. */
body.modo-motoboy #notice { bottom: calc(96px + env(safe-area-inset-bottom)); }

/* --- QR DO ROMANEIO (24/09/2026) ----------------------------------
   Primeiro passo da confirmação: enquanto não for lido, o resto do
   formulário não adianta. Validado, o bloco fica verde e o botão
   some — não há o que reler. */
.mb-qr-bloco { border-color: #93c5fd; background: #eff6ff; }
.mb-qr-bloco.validado { border-color: #16a34a; background: #dcfce7; }
.mb-qr-bloco.validado [data-qr-estado] { display: flex; align-items: center; gap: 6px; color: #14532d; }
.mb-nota.alerta { color: #7f1d1d; font-weight: 700; }
/* O visor da câmera: quadrado, com a mira no meio. Uma mão, na calçada. */
.mb-qr-visor { position: relative; width: 100%; aspect-ratio: 1; background: #0f172a; border-radius: 12px; overflow: hidden; }
.mb-qr-visor video { width: 100%; height: 100%; object-fit: cover; }
.mb-qr-mira { position: absolute; inset: 18%; border: 3px solid rgba(255,255,255,.9); border-radius: 12px; }
.mb-qr-manual { margin-top: 10px; }

/* --- ÓLEO ---------------------------------------------------------
   O aviso aparece ao escolher a moto: é quando ainda dá para resolver,
   antes de sair. Ele não some sozinho — só com troca registrada. */
.mb-oleo { margin: 8px 0 0; padding: 9px 11px; border-radius: 10px; font-size: 14px; font-weight: 600; }
.mb-oleo:empty { display: none; }
.mb-oleo.proxima { background: #fef3c7; color: #92400e; }
.mb-oleo.vencida { background: #fee2e2; color: #7f1d1d; font-weight: 800; }
.mb-oleo-atual { margin: 8px 0; }

/* Acabamento operacional: foco visível e textos íntegros nas telas pequenas. */
.mb-botao:focus-visible, .mb-x:focus-visible, .mb-sair:focus-visible,
.mb-estado:focus-visible, .mb-abas button:focus-visible {
    outline: 3px solid #60a5fa; outline-offset: 2px;
}
.mb-campo input:focus, .mb-campo select:focus, .mb-campo textarea:focus,
.mb-forma-linha input:focus, .mb-forma-linha select:focus {
    border-color: var(--mb-azul); outline: 2px solid #bfdbfe; outline-offset: 1px;
}
.mb-card h2, .mb-endereco, .mb-dialogo h2, .mb-conta dd { overflow-wrap: anywhere; }
.mb-conta dd, .mb-pagamento strong { font-variant-numeric: tabular-nums; }