:root {
  --marca: #014665;
  --marca-clara: #0b5f86;
  --texto: #14202b;
  --fraco: #5b6b7a;
  --borda: #d3dde5;
  --fundo: #f4f7f9;
  --ok: #147a4b;
  --alerta: #9a6203;
  --erro: #a02222;
  /* fundos dos selos: peça pequena usa token sólido (`-soft`), nunca rgba —
   * com transparência o contraste dependeria do que está atrás (design.md) */
  --ok-soft: #e3f2ea;
  --alerta-soft: #fdf1d8;
  --erro-soft: #fbe6e4;
  --neutro-soft: #e7eef3;
}

* { box-sizing: border-box; }

/* `display: flex` de autor vence o `display: none` que o navegador dá ao
 * atributo `hidden` — sem isto a barra da fila aparece com 0 pendência. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--texto);
  background: var(--fundo);
  padding-bottom: 5rem;
}

.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.9rem;
  background: var(--marca);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 5;
}

.topo__marca { display: flex; align-items: center; gap: 0.6rem; }
.topo__logo { width: 2rem; height: 2rem; background: #fff; border-radius: 0.4rem; padding: 0.2rem; }
.topo__sub { display: block; font-size: 0.75rem; opacity: 0.85; }
.topo__acoes { display: flex; align-items: center; gap: 0.6rem; }

.chip {
  font-size: 0.75rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}
.chip--off { background: #7a2b2b; }

.link {
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
  padding: 0.4rem;
}

.conteudo { padding: 0.9rem; max-width: 46rem; margin: 0 auto; }
h1 { font-size: 1.25rem; margin: 0.4rem 0 0.6rem; }

.nota { color: var(--fraco); font-size: 0.9rem; margin: 0.3rem 0 0.8rem; }
.erro { color: var(--erro); font-size: 0.9rem; }

/* Estado "sem servidor": a linha diz a idade do dado — é o que separa confiar
 * na lista de achar que ela está atualizada. Ícone + texto, uma linha só. */
.nota--offline {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--alerta);
  background: #fdf6e7;
  border: 1px solid #ecd9a8;
  border-radius: 0.45rem;
  padding: 0.4rem 0.55rem;
  margin: 0 0 0.7rem;
}
.nota--offline svg { flex: 0 0 auto; }
.selo--fila { background: #fdf6e7; color: var(--alerta); }

.cartao {
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: 0.6rem;
  padding: 1rem;
  display: grid;
  gap: 0.75rem;
}

label { display: grid; gap: 0.3rem; font-size: 0.85rem; color: var(--fraco); }

input, select {
  font: inherit;
  color: var(--texto);
  padding: 0.7rem;
  border: 1px solid var(--borda);
  border-radius: 0.45rem;
  background: #fff;
  width: 100%;
}

.botao {
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--marca);
  border: 0;
  border-radius: 0.45rem;
  padding: 0.8rem 1rem;
  cursor: pointer;
}
.botao:disabled { opacity: 0.55; }

.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }

.carga, .parada {
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: 0.6rem;
  padding: 0.8rem;
}

.carga { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; }
.carga__info { display: grid; gap: 0.15rem; }
.carga__nome { font-weight: 700; }
.carga__meta { font-size: 0.8rem; color: var(--fraco); }

.parada__topo { display: flex; justify-content: space-between; gap: 0.5rem; }
.parada__ordem {
  font-weight: 700;
  color: #fff;
  background: var(--marca-clara);
  border-radius: 999px;
  min-width: 1.7rem;
  height: 1.7rem;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
}
.parada__cliente { font-weight: 700; }
.parada__endereco, .parada__meta { font-size: 0.85rem; color: var(--fraco); }
.parada__acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.6rem; }
.parada__acoes .largo { grid-column: 1 / -1; }
.parada--feita { opacity: 0.6; }
.parada--feita .documento__nf { color: var(--ok); }

/* ferramentas da parada: navegação, canhoto e evidência */
.parada__ferramentas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
  border-top: 1px dashed var(--borda);
  padding-top: 0.5rem;
}
.parada__ferramentas a,
.parada__ferramentas button {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.5rem 0.7rem;
  border-radius: 0.45rem;
  border: 1px solid var(--borda);
  background: #fff;
  color: var(--marca);
  text-decoration: none;
  cursor: pointer;
}
.parada__ferramentas .pendente { border-color: var(--alerta); color: var(--alerta); }
.parada__ferramentas .enviado { border-color: var(--ok); color: var(--ok); }
.parada__foto { font-size: 0.78rem; color: var(--fraco); width: 100%; }
.parada__ferramentas input[type="file"] { display: none; }

.jornada { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0 0 0.8rem; }
.botao--claro { background: #fff; color: var(--marca); border: 1px solid var(--marca); }
.botao--claro:disabled { opacity: 0.5; }
/* "encerrar" é ação de fechar o dia: botão **preenchido** em vermelho, como o
 * "finalizar mesmo assim" do modal. Era contorno, e contorno parece secundário
 * demais para o que encerra a carga (pedido do usuário, 28/10/2026). */
.botao--fim { background: var(--erro); color: #fff; border: 1px solid var(--erro); }
.botao--claro svg, .icone-botao svg { vertical-align: -2px; margin-right: 0.35rem; }

.busca { display: block; margin: 0 0 0.8rem; }
.busca input { padding: 0.7rem; }
.dg-oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* uma entrega = cliente + endereço; cada nota tem seu status e seu canhoto */
.documento {
  margin-top: 0.6rem;
  border-top: 1px solid var(--borda);
  padding-top: 0.5rem;
}
.documento__titulo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}
.documento__nf { font-weight: 700; }

.icone-botao {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border-radius: 0.45rem;
  border: 1px solid var(--borda);
  background: #fff;
  color: var(--marca);
  cursor: pointer;
}
.icone-botao svg { margin: 0; }
.icone-botao.pendente { border-color: var(--alerta); color: var(--alerta); }

.selo {
  font-size: 0.75rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: #e7eef3;
  color: var(--marca);
}
/* O selo diz o **resultado** da entrega: verde entregue, vermelho devolvido e
 * cancelado, amarelo parcial, e neutro o que ainda não aconteceu ("Aguardando").
 * Um padrão por significado — o mesmo token em qualquer lugar da tela. */
.selo--entregue { background: var(--ok-soft); color: var(--ok); }
.selo--devolvido,
.selo--cancelado { background: var(--erro-soft); color: var(--erro); }
.selo--entregue_parcial { background: var(--alerta-soft); color: var(--alerta); }
.selo--neutro { background: #e7eef3; color: var(--fraco); }
.selo--concluida { background: var(--ok-soft); color: var(--ok); }
.carga--concluida { border-style: dashed; background: #fbfcfd; }
.carga--concluida .carga__nome { color: var(--fraco); }

/* Filtro das concluídas: botão **preenchido**, com olho. Fechado = as concluídas
 * estão fora da vista (neutro); aberto = estão à vista (verde). */
.filtro-concluidas {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font: inherit;
  font-size: 0.82rem;
  margin: 0 0 0.6rem;
  padding: 0.4rem 0.7rem;
  border: 0;
  border-radius: 999px;
  background: var(--neutro-soft);
  color: var(--fraco);
  cursor: pointer;
}
.filtro-concluidas[aria-pressed="true"] {
  background: var(--ok);
  color: #fff;
}
.filtro-concluidas svg { flex: 0 0 auto; }

/* Entrega concluída: fundo verde do selo e acento na borda — o motorista vê de
 * longe o que já fechou, sem confundir com o que falta. */
.parada--concluida {
  background: var(--ok-soft);
  border-left: 3px solid var(--ok);
}
/* "registrar novamente" corrige um apontamento: existe, mas não disputa com o
 * "Registrar" de quem ainda não entregou. */
.botao--repetir { font-weight: 500; padding: 0.45rem 0.6rem; font-size: 0.82rem; }

.barra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.7rem 0.9rem;
  background: #fff;
  border-top: 1px solid var(--borda);
}

.aviso {
  position: fixed;
  left: 50%;
  bottom: 5rem;
  transform: translateX(-50%);
  background: var(--marca);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: 0.5rem;
  max-width: 90vw;
  font-size: 0.9rem;
}
.aviso--erro { background: var(--erro); }

.parada__ferramentas a span, .parada__ferramentas a svg { margin-right: 0.25rem; }
.parada__ferramentas a { display: inline-flex; align-items: center; }

/* --- modal de registro (uma nota por vez) ------------------------------- */
/* `display: grid` no `<dialog>` vence o `display: none` do navegador quando ele
 * está fechado — o modal ficava visível antes do login (visto em 28/10/2026).
 * Por isso o grid só vale com [open]. */
dialog.modal[open] {
  border: 0;
  border-radius: 0.7rem;
  padding: 1rem;
  width: min(92vw, 26rem);
  max-height: 92vh;
  margin: auto;
  display: grid;
  gap: 0.6rem;
  overflow: auto;
}
/* O mapa é o conteúdo: mais largura e a altura que sobrar da tela. */
dialog.modal--largo[open] {
  width: min(94vw, 38rem);
  max-height: 94vh;
  grid-template-rows: auto auto auto 1fr auto auto;
  overflow: hidden;
}
dialog.modal--largo .local__mapa {
  height: auto;
  min-height: min(54vh, 420px);
}
dialog.modal:not([open]) { display: none !important; }
.modal::backdrop { background: rgba(10, 22, 30, 0.55); }
.modal__titulo { font-size: 1.05rem; margin: 0; }
.modal__acoes { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 0.3rem; }
.campo { display: grid; gap: 0.25rem; font-size: 0.85rem; color: var(--fraco); }
.campo textarea {
  font: inherit;
  color: var(--texto);
  padding: 0.6rem;
  border: 1px solid var(--borda);
  border-radius: 0.45rem;
  width: 100%;
  resize: vertical;
}

/* compactar a entrega: o dado é o que importa, não o vazio */
.parada { padding: 0.55rem; }
.lista { gap: 0.5rem; }
.parada__cliente { margin: 0.35rem 0 0.15rem; }
.parada__endereco, .parada__meta { margin: 0 0 0.15rem; }
.parada__ferramentas { margin-top: 0.35rem; padding-top: 0.35rem; }
.documento { margin-top: 0.45rem; padding-top: 0.4rem; }
.documento__acoes { display: flex; gap: 0.4rem; align-items: center; margin-top: 0.4rem; }
.documento__acoes .botao { flex: 1; padding: 0.6rem; }

.topo__botao {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font: inherit;
  font-size: 0.8rem;
  padding: 0.35rem 0.55rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.topo__botao svg { width: 14px; height: 14px; }
.topo__botao--fim { border-color: #ffb4ae; color: #ffd9d5; }
.exigencia { display: grid; gap: 0.3rem; }

/* cabeçalho da rota: título à esquerda, jornada à direita (área branca) */
.rota__cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.rota__cabecalho h1 { margin: 0; font-size: 1.15rem; }
.botao--jornada { font-size: 0.82rem; padding: 0.45rem 0.65rem; white-space: nowrap; }
/* a bandeira de "encerrar" precisa ser lida de longe: 18 px no botão */
.botao--jornada svg { width: 18px; height: 18px; }

.canhoto__imagem {
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid var(--borda);
  background: #f3f6f8;
}

/* cabeçalho de modal: título à esquerda, fechar à direita — vale para qualquer
 * modal (o do mapa tinha regra própria e o da foto ficou sem) */
.modal__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.modal__topo .icone-botao { width: 2.2rem; height: 2.2rem; }

/* --- editor da foto: prévia honesta, girar e cortar ---------------------- */
dialog.modal--foto[open] {
  width: min(96vw, 34rem);
  max-height: 96vh;
  grid-template-rows: auto auto 1fr auto auto;
  overflow: hidden;
}
.foto__area {
  display: grid;
  place-items: center;
  min-height: 0;
  background: #eef3f6;
  border-radius: 0.5rem;
  border: 1px solid var(--borda);
  padding: 0.25rem;
  overflow: auto;
}
.foto__moldura { position: relative; display: inline-block; line-height: 0; touch-action: none; overflow: hidden; }
.foto__canvas { max-width: 100%; max-height: min(56vh, 420px); height: auto; display: block; }
/* O corte é uma **janela**: escurece o que fica fora (`box-shadow` gigante,
 * recortado pela moldura), borda branca por cima da foto e alças nos cantos. */
.foto__corte {
  position: absolute;
  border: 2px solid #fff;
  box-shadow: 0 0 0 9999px rgba(10, 22, 30, 0.45);
  pointer-events: none;
  cursor: move;
}
.foto__corte::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px dashed rgba(154, 98, 3, 0.9);
  pointer-events: none;
}
/* alça com área de toque maior que o desenho (dedo não é ponteiro fino) */
.foto__alca {
  position: absolute;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 2px solid var(--marca);
  pointer-events: auto;
  touch-action: none;
}
.foto__alca--nw { left: 0; top: 0; cursor: nwse-resize; }
.foto__alca--ne { left: 100%; top: 0; cursor: nesw-resize; }
.foto__alca--sw { left: 0; top: 100%; cursor: nesw-resize; }
.foto__alca--se { left: 100%; top: 100%; cursor: nwse-resize; }
.foto__acoes { display: flex; align-items: center; gap: 0.4rem; }
.foto__acoes .botao { padding: 0.5rem 0.7rem; font-size: 0.82rem; }
.foto__acoes .botao[aria-pressed="true"] { border-color: var(--alerta); color: var(--alerta); }
.foto__acoes .icone-botao { width: 2.4rem; height: 2.4rem; }

.local__mapa { height: 240px; border-radius: 0.5rem; border: 1px solid var(--borda); background: #eef3f6; }
.local__mapa:empty { display: none; }
.leaflet-container { font: inherit; }

/* --- mapa da rota (o mapa é o conteúdo: tela cheia) --------------------- */
.rota__acoes { display: flex; align-items: center; gap: 0.4rem; }
.rota__acoes .icone-botao { width: 2.2rem; height: 2.2rem; }
.rota__acoes .icone-botao svg { width: 18px; height: 18px; }

/* linha de estado do mapa: ícone + valor, uma linha, como os totais */
.nota--mapa {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.5rem;
  color: var(--fraco);
  font-size: 0.82rem;
}
.nota--mapa svg { flex: 0 0 auto; }

dialog.modal--mapa[open] {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  border-radius: 0;
  padding: 0.6rem;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 0.45rem;
  overflow: hidden;
}
.modal--mapa .mapa__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.modal--mapa .modal__acoes { justify-content: space-between; gap: 0.4rem; }
.modal--mapa .modal__acoes .botao {
  padding: 0.6rem 0.7rem;
  font-size: 0.85rem;
  flex: 1;
}
/* `<a class="botao">` é botão na aparência: mesma caixa, sem sublinhado */
a.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
}
.mapa__area {
  min-height: 0;
  border-radius: 0.5rem;
  border: 1px solid var(--borda);
  background: #eef3f6;
}
/* marcador numerado desenhado pelo app: não depende de imagem nenhuma, então
 * funciona offline e nunca aparece como "quadrado vazio" */
.mapa__pino {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  background: var(--marca);
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(10, 22, 30, 0.35);
  font-size: 0.75rem;
  font-weight: 700;
}
.mapa__pino--fora { background: var(--fraco); }
.mapa__popup { font-size: 0.85rem; }
.mapa__popup strong { display: block; }
.mapa__popup a { color: var(--marca); font-weight: 600; }