/* Tema fixo — não segue o claro/escuro do resto do app. Contraste alto
   mantido de propósito (SPEC.md §2.6: celular no carro, reflexo de sol, uma
   mão só, alvo de toque mínimo 48px) — só a paleta mudou: era preto/branco
   puro, agora navy+laranja pra combinar com o resto do Neo (pedido do
   usuário). Os nomes das variáveis (--preto, --branco...) ficaram os mesmos
   de propósito, pra não precisar tocar em cada regra do arquivo — só o
   valor por trás mudou. */

:root {
  --preto: #112d4a;
  --preto-card: #183e5d;
  --preto-borda: rgba(255, 255, 255, 0.14);
  --branco: #f7f7f8;
  --cinza: #a9bedd;
  --verde: #22c55e;
  --vermelho: #ef4444;
  --amarelo: #eab308;
  --laranja: #f26b3a;
  --laranja-hover: #e85c2b;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Ver style.css: [hidden] perde pra qualquer display:x de mesma origem — fixa global. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--preto);
  color: var(--branco);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input, textarea, select { font-family: inherit; }

.mot-app { display: flex; flex-direction: column; min-height: 100vh; }

/* ---------- Topo ---------- */

.mot-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--preto-borda);
  position: sticky;
  top: 0;
  background: var(--preto);
  z-index: 10;
}

.mot-topo-titulo { display: flex; flex-direction: column; }
.mot-topo-titulo strong { font-size: 15px; }
.mot-topo-titulo span { font-size: 12px; color: var(--cinza); }

.mot-btn-icone {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--preto-borda);
  background: var(--preto-card);
  color: var(--branco);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mot-btn-icone .ico { width: 20px; height: 20px; }

.mot-pendente-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--amarelo);
  color: #000;
  font-size: 10px;
  font-weight: 800;
  min-width: 17px;
  height: 17px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

.mot-conteudo { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 12px; }

/* CRIT-002 (docs/ROUTE-SYSTEM-AUDIT.md): mapa read-only da sequência do dia
   — fica fora de .mot-conteudo (ver comentário em motorista.html), altura
   fixa pra não competir com a lista de paradas por espaço numa tela de
   celular. Sem zoomControl (mesmo tratamento do mini-mapa da Visão geral do
   painel) — mapa pequeno, os botões de zoom tomam espaço que não sobra
   aqui; continua interativo via gesto (arrastar/pinça). */
.mot-mapa-wrap {
  height: 200px;
  border-bottom: 1px solid var(--preto-borda);
  flex-shrink: 0;
}
#mot-mapa { height: 100%; width: 100%; }

/* ---------- Login ---------- */

.mot-login {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px;
  gap: 22px;
}

.mot-login-marca {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 26px;
  font-weight: 800;
  justify-content: center;
}

.mot-login-marca .ico { width: 28px; height: 28px; }
.mot-login-sub { text-align: center; color: var(--cinza); font-size: 13px; margin-top: -10px; }

.mot-campo label {
  display: block;
  font-size: 13px;
  color: var(--cinza);
  margin-bottom: 6px;
}

.mot-campo input, .mot-campo textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--preto-borda);
  background: var(--preto-card);
  color: var(--branco);
  font-size: 16px;
}

.mot-campo textarea { min-height: 90px; resize: vertical; }
.mot-campo input:focus, .mot-campo textarea:focus { outline: 2px solid var(--laranja); }

/* MOB-002 (docs/DRIVER-MOBILE-UX.md): motivos previsíveis de não entrega
   como toque em vez de digitar um parágrafo no teclado — continua editável
   no <textarea> depois do toque, não é uma resposta fechada. Alvo de toque
   generoso (min-height), mesmo padrão de acessibilidade do resto do app. */
.mot-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.mot-chip {
  min-height: 44px;
  padding: 6px 14px;
  border: 1px solid var(--preto-borda);
  border-radius: 999px;
  background: var(--preto-card);
  color: var(--branco);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}
.mot-chip:active { background: var(--laranja); border-color: var(--laranja); color: #fffaf4; }

/* "E agora?" da não entrega (sessão 94) — empilhado e não em pílulas como
   os chips de motivo acima: aqui a escolha MUDA o que o sistema faz com a
   entrega (volta amanhã, volta hoje, ou é cancelada), então cada opção
   carrega uma linha de ajuda e precisa de área de toque cheia. Chip de
   motivo é texto que o motorista ainda pode editar depois; isto é uma
   decisão, e uma delas fica marcada de saída. */
.mot-opcoes-reagendar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mot-opcao {
  min-height: 52px;
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  text-align: left;
  border: 1px solid var(--preto-borda);
  border-radius: 12px;
  background: var(--preto-card);
  color: var(--branco);
  font-family: inherit;
  cursor: pointer;
}
.mot-opcao strong { font-size: 15px; font-weight: 700; }
.mot-opcao span { font-size: 12px; color: var(--cinza); }
.mot-opcao.ativo {
  background: var(--laranja);
  border-color: var(--laranja);
  color: #fffaf4;
}
.mot-opcao.ativo span { color: #fffaf4; }

.mot-erro { color: var(--vermelho); font-size: 13px; text-align: center; min-height: 18px; }

/* ---------- Botões ---------- */

.mot-btn {
  min-height: 52px;
  border-radius: 14px;
  border: none;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
}
.mot-btn:active { filter: brightness(0.88); }

.mot-btn-primario { background: var(--laranja); color: #fffaf4; }
.mot-btn-primario:active { background: var(--laranja-hover); }
.mot-btn-primario:disabled { background: #6b4b3a; color: #b89686; }

.mot-btn-sucesso { background: var(--verde); color: #06210f; }
.mot-btn-perigo { background: var(--preto-card); color: var(--vermelho); border: 1px solid var(--vermelho); }
.mot-btn-secundario { background: var(--preto-card); color: var(--branco); border: 1px solid var(--preto-borda); }

/* ---------- Cartão de status da rota ---------- */

.mot-status-card {
  background: var(--preto-card);
  border: 1px solid var(--preto-borda);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mot-status-linha { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.mot-status-linha span:first-child { color: var(--cinza); }

/* Resumo de fim de rota (pedido do usuário) — mesmo verde de "Entregue"
   no resto do app, pra ler como confirmação e não só mais um card neutro. */
.mot-resumo {
  background: var(--preto-card);
  border: 1px solid var(--verde);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mot-resumo-titulo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--verde);
}

.mot-resumo-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 12px;
}

.mot-resumo-item { display: flex; flex-direction: column; gap: 2px; text-align: center; }
.mot-resumo-item strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.mot-resumo-item span { font-size: 11.5px; color: var(--cinza); }

.mot-etiqueta {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
}

.mot-etiqueta.aguardando { background: #24425f; color: var(--branco); }
.mot-etiqueta.em_andamento { background: #1e3a8a; color: #bfdbfe; }
.mot-etiqueta.retornando { background: #4c1d95; color: #ddd6fe; }
.mot-etiqueta.finalizada { background: #14532d; color: #bbf7d0; }

/* ---------- Próximo destino (o card grande de navegar) ---------- */

/* Sessão 75: a pergunta única do motorista em movimento é "pra onde eu vou
   agora?". O link "Navegar" já existia, mas pequeno, dentro do card certo
   de uma lista de N paradas — este bloco é a mesma informação promovida a
   primeiro elemento da tela, com alvo de toque de botão inteiro.
   Laranja da marca na borda (não no fundo) porque o fundo laranja aqui
   competiria com o próprio botão primário logo abaixo dele. */
.mot-proximo {
  background: var(--preto-card);
  border: 1px solid var(--laranja);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mot-proximo-etiqueta {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--laranja);
}

.mot-proximo-titulo { font-size: 19px; line-height: 1.2; }

.mot-proximo-endereco { font-size: 14px; color: var(--cinza); }

/* QA-026: quando a próxima parada não tem coordenada NEM telefone, o card
   de destaque perde as duas ações possíveis — este aviso ocupa o lugar
   delas em vez de deixar o card acabar de repente logo após o endereço. */
.mot-proximo-aviso {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--amarelo);
  margin-top: 4px;
}
.mot-proximo-aviso .ico { flex-shrink: 0; }

.mot-proximo-hora {
  font-size: 13px;
  color: var(--amarelo);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Mesma estrutura de `.mot-proximo-hora`, verde em vez de amarelo (chegou
   é status positivo, não alerta) — aparece só quando o card de destaque já
   troca Maps/Waze pelos botões Entregue/Não entregue (ver montarCardProximo
   em main.js). */
.mot-proximo-chegou {
  font-size: 13px;
  color: var(--verde);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* `.mot-btn` é usado tanto em <button> quanto em <a> — o <a> não herda
   nada disso sozinho, daí width/text-decoration explícitos aqui. Google
   Maps/Waze/Ligar (pedido do usuário) dividem a mesma linha — 3 alvos
   grandes o bastante pro toque, sem ocupar 3 linhas cheias. */
.mot-proximo-acoes {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.mot-proximo-navegar {
  flex: 1;
  min-width: 0;
  text-decoration: none;
  padding-left: 4px;
  padding-right: 4px;
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Escolher por onde começar (sessão 81) ----------

   Tela cheia entre uma entrega e a próxima, então os alvos são grandes: o
   motorista toca com uma mão, muitas vezes ainda no veículo. Reaproveita
   `.mot-parada-num`/`.mot-parada-texto` da lista de paradas de propósito —
   é a mesma informação, e reconhecer o mesmo card em outro lugar custa
   menos que aprender um formato novo. */

.mot-escolha { display: flex; flex-direction: column; gap: 4px; }

.mot-escolha-ajuda { color: var(--cinza); font-size: 13px; margin: 0; }

.mot-escolha-lista { display: flex; flex-direction: column; gap: 10px; }

.mot-escolha-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: var(--preto-card);
  border: 1px solid var(--preto-borda);
  border-radius: 14px;
  padding: 16px 14px;
  text-align: left;
}
.mot-escolha-item:active { border-color: var(--laranja); filter: brightness(1.08); }

/* "Começar por outra parada" — atalho discreto dentro do card de próxima
   parada, secundário ao "Navegar no Waze" que é a ação principal ali. */
.mot-proximo-trocar {
  background: none;
  border: none;
  color: var(--laranja);
  font-size: 13px;
  font-weight: 700;
  padding: 8px 0 0;
  min-height: 36px;
  text-align: left;
}
.mot-proximo-trocar:active { opacity: 0.7; }

.mot-garagem-chegou {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--verde);
  font-size: 13px;
  font-weight: 700;
}

/* Pernoite fora da garagem (sessão 140) — as duas opções que aparecem
   depois do primeiro toque em "Não vou à garagem hoje". `display: grid` com
   `gap` porque os filhos são `.mot-btn`, que já traz a altura de alvo de
   toque de 52px; empilhados sem gap eles viram um bloco só na mão de quem
   está com o celular numa mão. O bloco herda o `hidden` do HTML — a regra
   global `[hidden] { display: none !important }` (topo deste arquivo) é o
   que garante que `display: grid` não vença o atributo. */
.mot-pernoite-opcoes {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}

.mot-pernoite-ajuda {
  margin: 0;
  color: var(--cinza);
  font-size: 13px;
}

/* ---------- Lista de paradas ---------- */

/* O título "Paradas do dia" divide a linha com "Otimizar daqui" — a ação
   pertence à lista inteira (a sequência), não a uma parada. */
.mot-lista-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mot-btn-otimizar {
  min-height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--preto-borda);
  background: var(--preto-card);
  color: var(--branco);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.mot-btn-otimizar:active { filter: brightness(0.88); }
.mot-btn-otimizar:disabled { color: var(--cinza); }
.mot-btn-otimizar .ico { width: 15px; height: 15px; }


.mot-lista-titulo {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cinza);
  margin: 4px 0 0;
}

/* Pedido do usuário (sessão 88): a ordem do gestor parecia fixa — "Próxima
   parada · 1 de 3" no card de cima nunca dizia que dava pra escolher outra.
   Esta linha existe só pra deixar isso explícito antes da lista onde a
   escolha de verdade acontece (o botão "Começar por aqui" de cada card). */
.mot-lista-ajuda {
  font-size: 12px;
  color: var(--cinza);
  margin: -4px 0 2px;
  line-height: 1.4;
}

/* MÉDIO-004 (docs/ROUTE-SYSTEM-AUDIT.md): estimativa de km/tempo da própria
   rota, já calculada no momento de "Iniciar trajeto" mas nunca exibida pro
   motorista — só o painel do gestor mostrava. */
.mot-estimativa {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--cinza);
  font-size: 13px;
  font-weight: 600;
  margin: -6px 0 6px;
}
.mot-estimativa .ico { width: 14px; height: 14px; color: var(--laranja); flex-shrink: 0; }

.mot-parada {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--preto-card);
  border: 1px solid var(--preto-borda);
  border-radius: 14px;
  padding: 14px;
  text-align: left;
  width: 100%;
}

.mot-parada-num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #24425f;
  color: var(--branco);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  flex-shrink: 0;
}

.mot-parada.concluida .mot-parada-num { background: var(--verde); color: #06210f; }
.mot-parada.nao_entregue .mot-parada-num { background: var(--vermelho); color: #fff; }

/* ALTO-004 (docs/ROUTE-SYSTEM-AUDIT.md): o gestor já vê no quadro qual
   parada está "em andamento" (fundo/borda de acento); o motorista, na
   própria tela, só tinha a numeração pra inferir qual é a próxima. Mesmo
   acento laranja usado no resto do produto pra "onde a ação está
   acontecendo agora" (ver design-system.md §5). */
.mot-parada.proxima {
  border-color: var(--laranja);
  border-left: 3px solid var(--laranja);
  box-shadow: 0 2px 10px rgba(242, 107, 58, 0.25);
}

.mot-parada-texto { flex: 1; min-width: 0; }
/* Cor explícita, não herdada: este card às vezes é um <button> (parada
   pendente), e o botão puxa a cor padrão escura do navegador em vez do
   branco do tema — sem isso o apelido fica ilegível. */
.mot-parada-texto strong { display: block; font-size: 15px; color: var(--branco); }
.mot-parada-texto span {
  display: block;
  font-size: 12.5px;
  color: var(--cinza);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mot-parada.concluida strong { text-decoration: line-through; color: var(--cinza); }
.mot-parada-seta { color: var(--cinza); flex-shrink: 0; }

.mot-vazio { text-align: center; color: var(--cinza); padding: 40px 20px; font-size: 14px; line-height: 1.6; }

.mot-parada-texto span.mot-parada-obs {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  color: var(--amarelo);
  font-weight: 600;
  margin-top: 3px;
}

/* MOB-005 (docs/DRIVER-MOBILE-UX.md): hora combinada e volumes já vinham no
   payload e nunca apareciam — metadado discreto, não é alerta (diferente
   de .mot-parada-obs acima, que é instrução ativa do gestor). TASK-095/
   UX-045: quando a parada está `atrasada`, a hora deixa de vir aqui — o JS
   (montarCardParada/renderEscolherParada) a tira do array `detalhe` e
   desenha ela como uma linha própria com `.mot-parada-obs` (mesma classe
   acima), não com esta. Este seletor continua sendo só metadado neutro;
   não é ele que precisa saber sobre atraso. */
/* `flex-direction: row` explícito: até a revisão da sessão 83 este seletor
   dividia a classe `.mot-parada-detalhe` com o formulário de concluir
   parada (hoje `.mot-form-concluir`), que é `column` — e o `column` vazava
   pra cá, fazendo o `align-items: center` centralizar a linha
   horizontalmente no meio do card. A colisão foi desfeita, mas o `row`
   fica declarado pra que reintroduzir o problema exija apagar uma linha
   com este comentário do lado. */
.mot-parada-texto span.mot-parada-detalhe {
  color: var(--cinza);
  font-weight: 600;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}
.mot-parada-texto span.mot-parada-detalhe .ico { width: 13px; height: 13px; flex-shrink: 0; }

/* CRIT-002 (docs/ROUTE-SYSTEM-AUDIT.md): link de navegação de um toque —
   funciona offline (não depende do servidor), zero fricção de copiar
   endereço. Contorno, não preenchido: é uma ação leve, não compete com o
   fluxo principal do card (abrir/concluir a parada). */
.mot-parada-texto a.mot-parada-navegar {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 5px 10px;
  /* Revisão sessão 83: altura real batia ~24-26px (só o padding definia a
     caixa) — bem abaixo do piso de 44px que o resto do app persegue
     (mesmo achado do comentário de `.mot-parada-cheguei` logo abaixo, que
     também mentia o próprio número). `min-height` não empurra largura —
     só deixa a pílula mais alta, cabe igual em 2-3 por linha. */
  min-height: 44px;
  border: 1px solid var(--laranja);
  border-radius: 999px;
  color: var(--laranja);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  width: fit-content;
}
.mot-parada-texto a.mot-parada-navegar:active { background: var(--laranja); color: #fffaf4; }

.mot-parada-acoes-leves {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.mot-parada-acoes-leves .mot-parada-navegar { margin-top: 0; }

/* Parada de rota ainda não iniciada: o card não abre, mas Maps/Waze/Ligar
   continuam valendo (ver `montarCardParada`). O texto esmaece pra indicar
   "ainda não é agora"; as AÇÕES ficam em opacidade cheia, senão pareceriam
   desligadas — que é exatamente o engano que esta classe existe pra
   desfazer. A seta de "abrir" some, porque aqui o card não abre. */
.mot-parada-inerte .mot-parada-num,
.mot-parada-inerte .mot-parada-texto > strong,
.mot-parada-inerte .mot-parada-texto > span { opacity: 0.5; }
.mot-parada-inerte .mot-parada-seta { visibility: hidden; }

/* MOB-006 (docs/DRIVER-MOBILE-UX.md): ação leve — sinal de progresso
   antes de concluir, sem competir visualmente com o fluxo principal
   (abrir o card inteiro = concluir). Contorno neutro, não laranja
   (laranja já é "Navegar"/estado "próxima parada" — reservar pra não
   confundir os dois botões lado a lado).

   Revisão da sessão 83: este comentário afirmava "alvo de toque ≥44px de
   altura" desde a criação (MOB-006), mas o `min-height` real sempre foi
   32px — nunca bateu o piso que o próprio comentário alegava. Corrigido
   pra 44px de verdade; se descer de novo, é porque este comentário some
   junto. */
.mot-parada-texto span.mot-parada-cheguei {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  min-height: 44px;
  border: 1px solid var(--preto-borda);
  border-radius: 999px;
  color: var(--cinza);
  font-size: 12px;
  font-weight: 700;
  width: fit-content;
  cursor: pointer;
}
.mot-parada-texto span.mot-parada-cheguei:active { background: var(--preto-borda); }
.mot-parada-texto span.mot-parada-cheguei.chegou {
  color: var(--verde);
  border-color: var(--verde);
  cursor: default;
}

/* Pedido do usuário (sessão 88): "bem explícito" que dá pra escolher outra
   parada pra começar — PREENCHIDO, não contorno, pra não repetir o laranja
   de "Navegar" (Maps/Waze) que já divide a mesma linha de ações
   (`.mot-parada-acoes-leves`); o comentário de `.mot-parada-cheguei` acima
   já registrava esse cuidado ao reservar laranja pra "Navegar"/"próxima
   parada" — preenchido em vez de contorno resolve os dois lados: continua
   claramente diferente do outline de Maps/Waze/Ligar, e ainda mais visível
   que o pill cinza do "Cheguei". */
.mot-parada-texto span.mot-parada-iniciar {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  min-height: 44px;
  border: 1px solid var(--laranja);
  border-radius: 999px;
  background: var(--laranja);
  color: #fffaf4;
  font-size: 12px;
  font-weight: 700;
  width: fit-content;
  cursor: pointer;
}
.mot-parada-texto span.mot-parada-iniciar .ico { width: 13px; height: 13px; }
.mot-parada-texto span.mot-parada-iniciar:active { background: var(--laranja-hover); border-color: var(--laranja-hover); }

/* "Devolver pra fila" (sessão 108) — conserto de toque errado no pedido que
   o próprio motorista puxou. Sem contorno e em cinza de propósito: dividindo
   a linha com "Cheguei" (pill cinza) e "Começar por aqui" (laranja cheio),
   mais uma pílula competiria com a ação que ele realmente precisa fazer
   agora. Mantém os 44px de alvo de toque — discreto não pode virar difícil
   de acertar, que é justamente como se erra de novo. */
.mot-parada-texto span.mot-parada-devolver {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 5px 4px;
  color: var(--cinza);
  font-size: 12px;
  font-weight: 600;
  text-decoration: underline;
  width: fit-content;
  cursor: pointer;
}
.mot-parada-texto span.mot-parada-devolver:active { color: var(--laranja); }
.mot-parada-texto span.mot-parada-devolver[aria-disabled="true"] { opacity: 0.5; }

.mot-obs-destaque {
  background: #3a2a06;
  color: var(--amarelo);
  border: 1px solid #5a4210;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

/* ---------- Tela de finalizar parada ---------- */

/* Era `.mot-parada-detalhe`, o MESMO nome da linha de detalhe do card da
   lista (§ acima) — dois componentes sem nenhuma relação dividindo uma
   classe. O `flex-direction: column` daqui vazava pra lá e, com o
   `align-items: center` de lá, centralizava horizontalmente a linha
   "3 vol. · Corte · Vans" no meio do card, enquanto título e endereço
   ficavam à esquerda. Renomeado na revisão da sessão 83. */
.mot-form-concluir { display: flex; flex-direction: column; gap: 16px; }

.mot-toggle-entrega { display: flex; gap: 10px; }
.mot-toggle-entrega .mot-btn { flex: 1; }
.mot-toggle-entrega .mot-btn.ativo.sucesso { background: var(--verde); color: #06210f; }
.mot-toggle-entrega .mot-btn.ativo.perigo { background: var(--vermelho); color: #fff; border-color: var(--vermelho); }

.mot-foto-area {
  border: 1.5px dashed var(--preto-borda);
  border-radius: 14px;
  padding: 18px;
  text-align: center;
  color: var(--cinza);
  font-size: 13px;
}

.mot-foto-preview {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 10px;
}

.mot-foto-hint {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--laranja);
}

.mot-geo-status {
  font-size: 12.5px;
  color: var(--cinza);
  display: flex;
  align-items: center;
  gap: 6px;
}

.mot-geo-status.ok { color: var(--verde); }

.ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.ico-sm { width: 14px; height: 14px; }

/* ---------- Banner offline / sincronização ---------- */

.mot-banner {
  padding: 10px 16px;
  font-size: 12.5px;
  text-align: center;
  font-weight: 600;
}

.mot-banner.offline { background: #3a2a06; color: var(--amarelo); }
.mot-banner.sincronizando { background: #1e3a2a; color: var(--verde); }

.mot-banner.erro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  background: #3a1414;
  color: var(--vermelho);
}
/* Mesmo elemento/markup do banner de erro (texto + botão fechar), só que pra
   avisos passivos que NÃO são erro (ex.: ação salva offline, vai sincronizar
   sozinha) — reusa o layout, troca só a cor pro tom âmbar de "pendente". */
.mot-banner.erro.aviso { background: #3a2a06; color: var(--amarelo); }

.mot-banner.instalar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  background: #14203a;
  color: var(--branco);
}

.mot-banner-instalar-btn {
  flex-shrink: 0;
  background: var(--laranja);
  color: #fffaf4;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}

.mot-banner-fechar {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--cinza);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 12px;
  margin: -12px;
}

/* Card "Ativar rastreamento" (sessão 118) — só aparece enquanto falta
   permissão de localização ou isenção de bateria; concedidas, some pra
   sempre. Não é `.mot-banner`: banner é aviso passivo que se fecha, isto
   pede uma AÇÃO que mantém o rastreamento vivo, então tem peso de card e
   nenhum botão de fechar. */
.mot-rastreio {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 16px 0;
  padding: 14px;
  border-radius: 12px;
  background: var(--preto-card);
  border: 1px solid var(--laranja);
}

.mot-rastreio-texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 180px; }
.mot-rastreio-texto strong { font-size: 14px; color: var(--branco); }
.mot-rastreio-texto span { font-size: 12.5px; color: var(--cinza); }

/* Alvo de toque cheio, de pé e com uma mão — mesma régua dos outros botões
   primários do app (`.mot-btn`, 52px). */
.mot-rastreio .mot-btn { flex: 1 1 100%; }

.mot-rastreio-secundario {
  flex: 1 1 100%;
  min-height: 44px;
  background: none;
  border: none;
  color: var(--cinza);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.mot-carregando { text-align: center; padding: 60px 20px; color: var(--cinza); }

/* "Aguardando liberação" (sessão 96) — motorista parado no cliente
   esperando nota/carga/conferência. O card inteiro muda de tom porque
   enquanto isso a ação certa não é navegar nem concluir, é avisar quando
   destravar: se ficasse com a mesma cara, o motorista seguiria olhando pro
   botão de sempre. Âmbar, não vermelho — esperar não é erro. */
.mot-proximo-aguardando { border-color: var(--amarelo); }

.mot-aguardando-liberacao {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border-radius: 10px;
  background: var(--amarelo-fundo);
}
.mot-aguardando-liberacao > span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--amarelo);
}
/* Largura inteira e alto o suficiente pro toque de pé, com uma mão — mesma
   régua dos outros botões primários do app (design-system.md §4). */
.mot-btn-aguardar { margin-top: 12px; width: 100%; }

/* Recarga na garagem (sessão 104). Azul, não âmbar: no app do motorista o
   âmbar já significa "você está travado esperando alguém" (aguardando
   liberação). Carregar não é travamento — é a próxima tarefa dele, e o
   carro volta pra rua depois. Duas coisas âmbar ensinariam a ignorar as
   duas. */
.mot-proximo-recarga { border-color: #2f6fdb; }

.mot-recarga {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border-radius: 10px;
  background: #eaf1fd;
}
.mot-recarga > span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: #1d4ed8;
}
.mot-btn-recarga { margin-top: 12px; width: 100%; }

/* Câmera dentro do app (sessão 96, ver js/motorista/camera.js) — tela cheia
   por cima de tudo: enquadrar uma nota fiscal com a mão livre já é difícil,
   e um preview pequeno dentro do formulário rolando junto seria pior.
   Fundo preto porque é o que some com a moldura e deixa só a imagem. */
.mot-camera {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  background: #000;
}
.mot-camera video {
  flex: 1;
  width: 100%;
  min-height: 0;
  /* `contain` e não `cover`: cortar o preview faria o motorista enquadrar a
     nota inteira na tela e receber a foto com as bordas faltando. */
  object-fit: contain;
}
.mot-camera-carregando,
.mot-camera-dica {
  margin: 0;
  padding: 8px 16px;
  text-align: center;
  color: #fff;
  font-size: 13px;
}
.mot-camera-carregando { position: absolute; top: 50%; left: 0; right: 0; }
/* A dica é a promessa do recurso escrita na tela — o motorista precisa saber
   que ESTA foto não fica no aparelho dele, senão ele vai procurar na galeria
   pra apagar e não vai achar. */
.mot-camera-dica { opacity: 0.75; }

.mot-camera-acoes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px 28px;
  background: #000;
}
/* Disparo redondo e grande (72px), no padrão de câmera que qualquer pessoa
   reconhece sem legenda — é o único controle que precisa ser acertado de
   primeira, de pé, com uma mão. */
.mot-camera-disparo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.35);
  background: #fff;
  cursor: pointer;
}
.mot-camera-disparo:active { transform: scale(0.94); }
.mot-camera-cancelar,
.mot-camera-espaco { flex: 1; text-align: left; }
.mot-camera-cancelar {
  padding: 12px 4px;
  border: 0;
  background: none;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}