:root {
  color-scheme: light dark;
  --fundo: #f4f3ef; --sup: #ffffff; --sup2: #ecebe5; --txt: #1d1f21; --suave: #5e6266; --borda: #d7d5cd;
  --acento: #1f5f8b; --acento-txt: #ffffff;
  --vermelho: #a4262c; --vermelho-f: #fbe9e7; --ambar: #8a5a00; --ambar-f: #fdf1d8; --verde: #1c6e43; --verde-f: #e2f3e8; --roxo: #5b3d9a; --roxo-f: #eee8f8;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #17191b; --sup: #212427; --sup2: #2b2e32; --txt: #e8e7e3; --suave: #a2a6aa; --borda: #3a3e43;
    --acento: #6fb3e0; --acento-txt: #10222f;
    --vermelho: #ff9b92; --vermelho-f: #47201f; --ambar: #f0c25f; --ambar-f: #41331a; --verde: #79d3a1; --verde-f: #1c3a2a; --roxo: #c3aef2; --roxo-f: #352b4c;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--txt); font: 15px/1.45 system-ui, "Segoe UI", sans-serif; }
#topo { display: flex; align-items: center; gap: 18px; padding: 10px 20px; background: var(--sup); border-bottom: 1px solid var(--borda); position: sticky; top: 0; z-index: 5; flex-wrap: wrap; }
#topo[hidden] { display: none; }
.marca { font-size: 16px; }
#menu { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
#menu a { padding: 6px 11px; border-radius: 6px; color: var(--suave); text-decoration: none; }
#menu a:hover { background: var(--sup2); }
#menu a.ativo { background: var(--sup2); color: var(--txt); font-weight: 600; }
main { max-width: 1240px; margin: 0 auto; padding: 22px 20px 60px; }
h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 16px; margin: 0 0 10px; }
.sub { color: var(--suave); margin: 0 0 18px; }
a { color: var(--acento); }
.cartao { background: var(--sup); border: 1px solid var(--borda); border-radius: 8px; padding: 16px; margin-bottom: 16px; }
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.numero { background: var(--sup); border: 1px solid var(--borda); border-radius: 8px; padding: 12px 14px; }
.numero b { display: block; font-size: 26px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.numero span { color: var(--suave); font-size: 13px; }
.tabela { width: 100%; border-collapse: collapse; }
.tabela th { text-align: left; font-size: 12.5px; color: var(--suave); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--borda); white-space: nowrap; }
.tabela td { padding: 8px; border-bottom: 1px solid var(--borda); vertical-align: top; }
.tabela tr:last-child td { border-bottom: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rolagem { overflow-x: auto; }
.linha-clicavel { cursor: pointer; }
.linha-clicavel:hover td { background: var(--sup2); }
.selo { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.selo.atrasada, .selo.cancelada { color: var(--vermelho); background: var(--vermelho-f); }
.selo.proxima, .selo.aberta { color: var(--ambar); background: var(--ambar-f); }
.selo.ok, .selo.concluida { color: var(--verde); background: var(--verde-f); }
.selo.confirmar, .selo.em_andamento { color: var(--roxo); background: var(--roxo-f); }
.nota { font-size: 13px; color: var(--suave); }
.alerta { padding: 10px 12px; border-radius: 6px; background: var(--ambar-f); color: var(--ambar); margin-bottom: 14px; }
.erro { padding: 10px 12px; border-radius: 6px; background: var(--vermelho-f); color: var(--vermelho); margin-bottom: 14px; }
.ok-msg { padding: 10px 12px; border-radius: 6px; background: var(--verde-f); color: var(--verde); margin-bottom: 14px; }
button, .botao { font: inherit; padding: 7px 13px; border-radius: 6px; border: 1px solid var(--acento); background: var(--acento); color: var(--acento-txt); cursor: pointer; text-decoration: none; display: inline-block; }
button.discreto, .botao.discreto { background: transparent; border-color: var(--borda); color: var(--txt); }
button:disabled { opacity: .55; cursor: default; }
input, select, textarea { font: inherit; padding: 7px 9px; border-radius: 6px; border: 1px solid var(--borda); background: var(--sup); color: var(--txt); width: 100%; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
label { display: block; font-size: 13px; color: var(--suave); }
label input, label select, label textarea { margin-top: 3px; color: var(--txt); }
.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.marcar { display: flex; gap: 7px; align-items: center; color: var(--txt); font-size: 14px; }
.marcar input { width: auto; margin: 0; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.cabeca { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 14px; }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.filtros > * { width: auto; }
.filtros input[type=search] { flex: 1; min-width: 200px; }
.parada { border: 1px solid var(--borda); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; }
.parada.primeira { border-color: var(--acento); }
.parada-topo { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.parada-km { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.parada ul { margin: 8px 0 0; padding-left: 18px; }
.parada li { margin: 2px 0; }
details summary { cursor: pointer; color: var(--acento); margin-top: 6px; font-size: 13.5px; }
mark { background: var(--ambar-f); color: inherit; font-weight: 700; }
.trecho { white-space: pre-wrap; font-size: 13px; color: var(--suave); margin: 4px 0 0; }
code { overflow-wrap: anywhere; }
.login { max-width: 340px; margin: 12vh auto; }
.login .cartao > * + * { margin-top: 12px; }
.itens input { min-width: 70px; }
@media (max-width: 760px) {
  main { padding: 16px 16px 50px; }
  #topo { padding: 8px 16px; gap: 8px; justify-content: space-between; }
  #menu { order: 3; flex: 0 0 100%; flex-wrap: nowrap; overflow-x: auto; }
  #menu a { white-space: nowrap; }
}
.miniaturas { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.miniaturas a { display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; }
.miniaturas img { width: 96px; height: 96px; object-fit: cover; border-radius: 6px; border: 1px solid var(--borda); }