/* Design system — Roteador de Lojas
   Fundo uniforme off-white, navbar com borda sutil, sem sombras difusas:
   separação por bordas finas. Ação primária em indigo. */

:root {
  --indigo-700: #4338CA;
  --indigo-600: #4F46E5;
  --indigo-100: #E0E7FF;
  --indigo-50: #EEF2FF;
  --verde-700: #047857;
  --verde-100: #D1FAE5;
  --ambar-700: #B45309;
  --ambar-100: #FEF3C7;
  --vermelho-600: #DC2626;
  --vermelho-100: #FEE2E2;
  --ink-900: #111827;
  --ink-600: #4B5563;
  --ink-500: #6B7280;
  --ink-400: #9CA3AF;
  --borda: #E5E7EB;
  --borda-forte: #D1D5DB;
  --fundo: #FAFAFA;
  --branco: #FFFFFF;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  background: var(--fundo);
  color: var(--ink-900);
  min-height: 100vh;
  font-size: 15px;
}

/* ---------- Navbar ---------- */
.navbar { background: var(--branco); border-bottom: 1px solid var(--borda); position: sticky; top: 0; z-index: 50; }
.nav-inner { max-width: 960px; margin: 0 auto; padding: 0 24px; height: 60px; display: flex; align-items: center; gap: 24px; }
.marca { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1rem; letter-spacing: -.01em; text-decoration: none; color: var(--ink-900); }
.marca-icone {
  width: 28px; height: 28px; border-radius: 8px; flex: none;
  background: var(--ink-900); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.nav-links { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-links > a { text-decoration: none; color: var(--ink-500); font-weight: 500; font-size: .92rem; padding: 8px 12px; border-radius: 8px; }
.nav-links > a:hover { color: var(--ink-900); background: var(--fundo); }
.nav-links > a.ativo { color: var(--indigo-700); font-weight: 600; background: var(--indigo-50); }
.nav-user { display: flex; align-items: center; gap: 2px; margin-left: 10px; padding-left: 14px; border-left: 1px solid var(--borda); color: var(--ink-500); font-size: .9rem; }
.nav-nome { font-weight: 600; color: var(--ink-900); padding: 0 6px; white-space: nowrap; }
.nav-user a { color: var(--ink-500); text-decoration: none; padding: 8px 10px; border-radius: 8px; font-size: .88rem; white-space: nowrap; }
.nav-user a:hover { color: var(--ink-900); background: var(--fundo); }

main { max-width: 960px; margin: 0 auto; padding: 40px 24px 64px; }

/* ---------- Hero / painel de busca ---------- */
.hero { padding: 8px 0 24px; }
.hero h1 { font-size: 1.9rem; font-weight: 700; letter-spacing: -.03em; }
.hero .sub { color: var(--ink-500); margin-top: 6px; font-size: 1rem; }
.busca { display: flex; gap: 12px; margin-top: 24px; max-width: 720px; }
.input-lupa { position: relative; flex: 1; min-width: 0; }
.input-lupa svg {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; color: var(--ink-400); pointer-events: none;
}
.input-lupa input {
  width: 100%; height: 56px; padding: 0 16px 0 48px;
  font: inherit; font-size: 1.05rem;
  background: var(--branco); border: 1px solid var(--borda-forte); border-radius: 12px;
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.input-lupa input:focus { border-color: var(--indigo-600); box-shadow: 0 0 0 3px var(--indigo-100); }
.input-lupa input::placeholder { color: var(--ink-400); }

button.principal {
  height: 56px; padding: 0 28px;
  font: inherit; font-size: 1rem; font-weight: 600; color: #fff;
  background: var(--indigo-600); border: none; border-radius: 12px; cursor: pointer;
  transition: background .15s;
}
button.principal:hover { background: var(--indigo-700); }
button.principal:disabled { opacity: .55; cursor: wait; }
button.secundario {
  height: 42px; padding: 0 18px;
  font: inherit; font-size: .92rem; font-weight: 600; color: var(--ink-900);
  background: var(--branco); border: 1px solid var(--borda-forte); border-radius: 10px; cursor: pointer;
  transition: border-color .15s;
}
button.secundario:hover { border-color: var(--ink-500); }
button.mini {
  height: 42px; padding: 0 18px;
  font: inherit; font-size: .9rem; font-weight: 600; color: #fff;
  background: var(--indigo-600); border: none; border-radius: 10px; cursor: pointer;
}
button.mini:hover { background: var(--indigo-700); }
button.perigo {
  height: 42px; padding: 0 14px;
  font: inherit; font-size: .88rem; font-weight: 600; color: var(--vermelho-600);
  background: var(--branco); border: 1px solid #FECACA; border-radius: 10px; cursor: pointer;
}
button.perigo:hover { background: var(--vermelho-100); }

/* ---------- Status ---------- */
#status { margin-top: 14px; min-height: 1.3em; color: var(--ink-500); font-size: .9rem; display: flex; align-items: center; gap: 8px; }
#status:not(:empty)::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%; flex: none;
  border: 2px solid var(--borda-forte); border-top-color: var(--indigo-600);
  animation: girar .7s linear infinite;
}
#status.status-erro { color: var(--vermelho-600); font-weight: 600; }
#status.status-erro::before { display: none; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- Cards ---------- */
.card { background: var(--branco); border: 1px solid var(--borda); border-radius: 12px; padding: 22px 24px; margin-top: 16px; }
.card.erro { border-color: #FCA5A5; background: #FEF2F2; color: #B91C1C; font-weight: 500; }

/* ---------- Resultado da busca ---------- */
.badge {
  display: inline-flex; padding: 4px 10px; border-radius: 999px;
  background: var(--verde-100); color: var(--verde-700);
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.loja-nome { font-size: 1.45rem; font-weight: 700; letter-spacing: -.02em; margin-top: 10px; }
.pills { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.pill {
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--borda); background: var(--fundo);
  font-weight: 600; font-size: .9rem; color: var(--ink-600);
}
.pill.km { background: var(--indigo-50); border-color: var(--indigo-100); color: var(--indigo-700); }
.endereco { margin-top: 12px; color: var(--ink-600); }
.outras { margin-top: 18px; border-top: 1px solid var(--borda); padding-top: 12px; }
.outras-titulo { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-500); margin-bottom: 6px; }
.outras ul { list-style: none; }
.outras li { display: flex; justify-content: space-between; padding: 7px 0; color: var(--ink-600); font-size: .92rem; border-bottom: 1px dashed var(--borda); }
.outras li:last-child { border: 0; }
.outra-km { font-weight: 600; color: var(--ink-900); }
.modo { margin-top: 14px; font-size: .75rem; color: var(--ink-400); }
#mapa { height: 420px; margin-top: 16px; border-radius: 12px; border: 1px solid var(--borda); }

/* ---------- Salvar venda (na busca) ---------- */
.venda-box { margin-top: 18px; border-top: 1px solid var(--borda); padding-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.venda-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.venda-form input, .form-inline input {
  height: 42px; padding: 0 14px; font: inherit;
  border: 1px solid var(--borda-forte); border-radius: 10px; outline: none;
  background: var(--branco);
}
.venda-form input:focus, .form-inline input:focus { border-color: var(--indigo-600); box-shadow: 0 0 0 3px var(--indigo-100); }
.venda-ok { color: var(--verde-700); font-weight: 600; }
.venda-erro { color: var(--vermelho-600); font-weight: 600; font-size: .9rem; }

/* ---------- Página de vendas ---------- */
.filtros { display: flex; gap: 8px; margin-top: 20px; }
.filtro {
  height: 38px; padding: 0 18px;
  font: inherit; font-size: .9rem; font-weight: 600; color: var(--ink-500);
  background: var(--branco); border: 1px solid var(--borda); border-radius: 999px; cursor: pointer;
}
.filtro.ativo { color: var(--indigo-700); background: var(--indigo-50); border-color: var(--indigo-100); }
.venda-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.pedido { font-size: 1.05rem; font-weight: 700; }
.chip { padding: 4px 12px; border-radius: 999px; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.chip-aberta { background: var(--ambar-100); color: var(--ambar-700); }
.chip-finalizada { background: var(--verde-100); color: var(--verde-700); }
.venda-loja { margin-top: 8px; font-weight: 600; }
.venda-endereco { margin-top: 4px; color: var(--ink-600); font-size: .92rem; }
.venda-meta { margin-top: 6px; color: var(--ink-400); font-size: .8rem; }
.venda-nf { margin-top: 8px; color: var(--verde-700); font-weight: 600; font-size: .92rem; }
.finalizar-box { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.form-inline { display: flex; gap: 8px; flex-wrap: wrap; }
.vazio {
  margin-top: 24px; padding: 48px 16px; text-align: center;
  color: var(--ink-500); border: 1px dashed var(--borda-forte); border-radius: 12px;
}

/* ---------- Verificação ---------- */
.filtros-verif { display: flex; gap: 8px; margin-top: 20px; flex-wrap: wrap; }
.filtros-verif input {
  height: 42px; padding: 0 14px; font: inherit;
  border: 1px solid var(--borda-forte); border-radius: 10px; outline: none;
  background: var(--branco); width: 180px;
}
.filtros-verif input:focus { border-color: var(--indigo-600); box-shadow: 0 0 0 3px var(--indigo-100); }
.resumo { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.resumo-chip { padding: 6px 14px; border-radius: 999px; font-size: .82rem; font-weight: 700; }
.chip-conferida { background: var(--verde-100); color: var(--verde-700); }
.chip-divergente { background: var(--vermelho-100); color: var(--vermelho-600); }
.chip-nao { background: var(--ambar-100); color: var(--ambar-700); }
.chip-pendente { background: var(--borda); color: var(--ink-500); }
.verif-ok { margin-top: 8px; color: var(--verde-700); font-size: .92rem; }
.verif-erro { margin-top: 8px; color: var(--vermelho-600); font-size: .95rem; }
.verif-aviso { margin-top: 8px; color: var(--ambar-700); font-size: .92rem; }

/* ---------- Relatório de cobertura ---------- */
.stats { display: flex; gap: 28px; margin-top: 14px; flex-wrap: wrap; }
.stat { display: flex; flex-direction: column; }
.stat-numero { font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; }
.stat-numero.ok { color: var(--verde-700); }
.stat-numero.ruim { color: var(--vermelho-600); }
.stat-numero.dinheiro { font-size: 1.35rem; }
.valor-pos { color: var(--verde-700); font-weight: 700; white-space: nowrap; }
.valor-neg { color: var(--vermelho-600); font-weight: 700; white-space: nowrap; }
.stat-rotulo { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-500); margin-top: 2px; }

/* ---------- Formulários (admin) ---------- */
label.campo { display: block; margin-top: 12px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-500); }
label.campo input {
  width: 100%; margin-top: 6px; height: 44px; padding: 0 14px;
  font: inherit; font-size: .95rem;
  border: 1px solid var(--borda-forte); border-radius: 10px; outline: none;
  background: var(--branco);
}
label.campo input:focus { border-color: var(--indigo-600); box-shadow: 0 0 0 3px var(--indigo-100); }
label.campo select {
  width: 100%; margin-top: 6px; height: 44px; padding: 0 12px;
  font: inherit; font-size: .95rem;
  border: 1px solid var(--borda-forte); border-radius: 10px; outline: none;
  background: var(--branco); color: var(--ink-900);
}
label.campo select:focus { border-color: var(--indigo-600); box-shadow: 0 0 0 3px var(--indigo-100); }
.secao { margin-top: 36px; font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; }
.coords { display: flex; gap: 12px; }
.coords label { flex: 1; }
.acoes { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.card h2 { font-size: 1.05rem; font-weight: 700; }

/* ---------- Login ---------- */
.auth { min-height: calc(100vh - 60px); display: flex; align-items: flex-start; justify-content: center; padding: 10vh 24px 24px; }
.auth-box { width: 100%; max-width: 400px; background: var(--branco); border: 1px solid var(--borda); border-radius: 14px; padding: 36px 32px; }
.auth-box .marca-icone { width: 44px; height: 44px; font-size: 20px; border-radius: 12px; margin-bottom: 18px; }
.auth-box h1 { font-size: 1.4rem; font-weight: 700; letter-spacing: -.02em; }
.auth-box .sub { color: var(--ink-500); margin-top: 4px; font-size: .92rem; }
.auth-box button.principal { width: 100%; margin-top: 18px; height: 48px; }

/* ---------- Responsivo ---------- */
@media (max-width: 640px) {
  .nav-inner { padding: 0 14px; gap: 8px; }
  .marca span.marca-texto { display: none; }
  .nav-links > a { padding: 8px 9px; font-size: .88rem; }
  .nav-user { margin-left: 2px; padding-left: 8px; }
  main { padding: 28px 16px 56px; }
  .hero h1 { font-size: 1.5rem; }
  .busca { flex-direction: column; }
  button.principal { width: 100%; }
  .coords { flex-direction: column; gap: 0; }
  .acoes button { flex: 1; }
}