/* Sistema de Rotas — visual das telas */
:root {
  --tinta: #1d1d1b;
  --tinta-2: #575550;
  --tinta-3: #8b8781;
  --papel: #ffffff;
  --fundo: #f3f2ef;
  --linha: #dddad4;
  --petroleo: #c8191f;
  --petroleo-escuro: #9e1217;
  --petroleo-fundo: #fff4c2;
  --brasa: #b42318;
  --brasa-fundo: #fdeceb;
  --ambar: #b45309;
  --ambar-fundo: #fdf0e1;
  --raio: 6px;
  --fonte: 'Barlow', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  --fonte-placa: 'Barlow Condensed', 'Arial Narrow', 'Barlow', Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--fonte); font-size: 16px; line-height: 1.45; color: var(--tinta); background: var(--fundo); }
h1 { font-size: 28px; line-height: 1.15; margin: 0; font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: 19px; line-height: 1.25; margin: 0 0 12px; font-weight: 600; }
h3 { font-size: 16px; margin: 0; font-weight: 600; }
p { margin: 0 0 12px; }
a { color: var(--petroleo); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid #ffcc00; outline-offset: 2px; }
.apoio { color: var(--tinta-2); }
.pequeno { font-size: 14px; }
.direita { text-align: right; }
.num { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }

/* ---------- marca e topo ---------- */
.marca { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; color: inherit; text-decoration: none; }
.marca-link { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.marca-logo { display: block; height: 44px; width: auto; }
.marca-grande .marca-logo { height: 96px; margin: 0 auto; }
.marca-grande { display: flex; justify-content: center; }
.cartao-central .marca-grande + h1 { text-align: center; }
.marca-nome { font-family: var(--fonte-placa); font-size: 22px; font-weight: 700; letter-spacing: .01em; color: #fff; padding-left: 12px; border-left: 1px solid rgba(255,255,255,.25); }
.marca-placa { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--raio); background: var(--petroleo); color: #fff; font-family: var(--fonte-placa); font-size: 22px; font-weight: 700; }
.topo { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 28px; padding: 6px 24px; background: var(--tinta); color: #fff; }
.topo-nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.topo-nav a { padding: 8px 14px; border-radius: var(--raio); color: #d6d3cd; text-decoration: none; font-weight: 500; }
.topo-nav a:hover { color: #fff; background: rgba(255,255,255,.08); }
.topo-nav a.ativo { color: #fff; background: var(--petroleo); }
.topo-usuario { display: flex; gap: 14px; align-items: center; font-size: 14px; color: #d6d3cd; }
.topo-usuario a { color: #fff; }
.app { max-width: 1440px; margin: 0 auto; padding: 24px; }
.carregando { color: var(--tinta-2); padding: 40px 0; }

/* ---------- peças básicas ---------- */
.cabecalho-tela { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.cabecalho-tela h1 { flex: 1; min-width: 200px; }
.cartao { background: var(--papel); border: 1px solid var(--linha); border-radius: 10px; padding: 18px 20px; margin-bottom: 18px; }
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 16px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel); color: var(--tinta); font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; }
.botao:hover { border-color: var(--tinta-3); }
.botao:disabled { opacity: .55; cursor: progress; }
.botao-principal { background: var(--petroleo); border-color: var(--petroleo); color: #fff; }
.botao-principal:hover { background: var(--petroleo-escuro); border-color: var(--petroleo-escuro); }
.botao-perigo { color: var(--brasa); }
.botao-perigo:hover { border-color: var(--brasa); }
.botao-mini { min-height: 32px; padding: 4px 10px; font-size: 14px; font-weight: 500; }
.botao-icone { min-height: 32px; width: 32px; padding: 0; font-size: 15px; font-weight: 500; }
.botao-texto { border: 0; background: none; padding: 0; min-height: 0; color: var(--petroleo); font-weight: 600; cursor: pointer; text-decoration: underline; }

label { display: block; font-size: 14px; font-weight: 600; color: var(--tinta-2); }
input[type=text], input[type=password], input[type=date], input[type=time], input[type=number], input[type=search], input:not([type]), select, textarea {
  display: block; width: 100%; min-height: 40px; margin-top: 4px; padding: 8px 10px; border: 1px solid #c4c0b8; border-radius: var(--raio); background: #fff; font-weight: 400; color: var(--tinta);
}
textarea { min-height: 72px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--petroleo); outline: 3px solid rgba(200,25,31,.18); outline-offset: 0; }
label.opcao { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--tinta); cursor: pointer; }
label.opcao input { width: 18px; height: 18px; margin: 0; accent-color: var(--petroleo); }
fieldset { border: 1px solid var(--linha); border-radius: var(--raio); padding: 12px 14px; margin: 0; }
legend { font-size: 14px; font-weight: 600; color: var(--tinta-2); padding: 0 6px; }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grade-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.grade-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pilha { display: grid; gap: 12px; }
.linha-acoes { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.linha-acoes .empurra { margin-left: auto; }

.aviso { padding: 10px 14px; border-radius: var(--raio); border-left: 4px solid var(--tinta-3); background: #f6f5f2; font-size: 15px; margin: 0 0 12px; }
.aviso-erro { border-color: var(--brasa); background: var(--brasa-fundo); color: #7d1c10; }
.aviso-alerta { border-color: var(--ambar); background: var(--ambar-fundo); color: #6a3d02; }
.aviso-ok { border-color: var(--petroleo); background: var(--petroleo-fundo); color: var(--petroleo-escuro); }

.etiqueta { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 13px; font-weight: 600; background: #eceae5; color: var(--tinta-2); white-space: nowrap; }
.etiqueta-cobrar { background: #ffcc00; color: #1d1d1b; }
.etiqueta-atraso { background: var(--brasa-fundo); color: var(--brasa); }
.etiqueta-apertado { background: var(--ambar-fundo); color: var(--ambar); }
.etiqueta-prioridade { background: var(--tinta); color: #fff; }
.etiqueta-ok { background: var(--petroleo-fundo); color: var(--petroleo-escuro); }

table.lista { width: 100%; border-collapse: collapse; background: var(--papel); }
table.lista th { text-align: left; font-size: 14px; font-weight: 600; color: var(--tinta-2); padding: 10px 12px; border-bottom: 2px solid var(--linha); white-space: nowrap; }
table.lista td { padding: 10px 12px; border-bottom: 1px solid var(--linha); vertical-align: top; }
table.lista tbody tr.clicavel { cursor: pointer; }
table.lista tbody tr.clicavel:hover { background: #f8f7f4; }
.tabela-rolagem { overflow-x: auto; border: 1px solid var(--linha); border-radius: 10px; background: var(--papel); }
.tabela-rolagem table.lista th:first-child, .tabela-rolagem table.lista td:first-child { padding-left: 18px; }
.vazio { padding: 32px 20px; text-align: center; color: var(--tinta-2); }

/* ---------- avisos flutuantes e janelas ---------- */
.avisos { position: fixed; right: 20px; bottom: 20px; z-index: 80; display: grid; gap: 8px; max-width: min(420px, calc(100vw - 40px)); }
.toast { padding: 12px 16px; border-radius: var(--raio); background: var(--tinta); color: #fff; box-shadow: 0 6px 24px rgba(29,29,27,.28); font-weight: 500; }
.toast.erro { background: var(--brasa); }
.toast a { color: #fff; }
.fundo-modal { position: fixed; inset: 0; z-index: 60; background: rgba(29,29,27,.55); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; }
.modal { width: 100%; max-width: 640px; background: var(--papel); border-radius: 10px; padding: 22px 24px; box-shadow: 0 20px 60px rgba(29,29,27,.35); }
.modal.largo { max-width: 860px; }
.modal-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.modal-topo h2 { flex: 1; margin: 0; font-size: 21px; }

/* ---------- páginas simples (login / instalação) ---------- */
.pagina-simples { display: grid; place-items: start center; min-height: 100vh; padding: 48px 16px; }
.cartao-central { width: 100%; max-width: 440px; background: var(--papel); border: 1px solid var(--linha); border-radius: 10px; padding: 28px; }
.cartao-central h1 { margin: 18px 0 8px; font-size: 24px; }
.cartao-central form { display: grid; gap: 14px; margin-top: 16px; }
.cartao-central .so-mysql { margin-top: 10px; }

/* ---------- lista de rotas ---------- */
.dia-titulo { display: flex; align-items: baseline; gap: 10px; margin: 22px 0 8px; font-size: 17px; font-weight: 600; }
.dia-titulo small { font-weight: 400; color: var(--tinta-2); font-size: 15px; }
.dia-titulo.hoje::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--petroleo); align-self: center; }
.rota-linha { display: grid; grid-template-columns: minmax(180px, 2fr) repeat(4, minmax(90px, 1fr)) auto; gap: 16px; align-items: center; padding: 14px 18px; background: var(--papel); border: 1px solid var(--linha); border-radius: 10px; margin-bottom: 8px; color: inherit; text-decoration: none; }
.rota-linha:hover { border-color: var(--petroleo); }
.rota-linha strong { font-size: 17px; }
.rota-linha .dado { font-size: 15px; color: var(--tinta-2); }
.rota-linha .dado b { display: block; color: var(--tinta); font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- editor de rota ---------- */
.rota-topo { display: grid; grid-template-columns: minmax(200px, 2fr) 170px minmax(150px, 1fr) 120px auto; gap: 12px; align-items: end; }
.rota-topo .opcao { min-height: 40px; }
.resumo { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; background: var(--tinta); color: #fff; border-radius: 10px; margin-bottom: 18px; overflow: hidden; }
.resumo div { padding: 12px 18px; border-left: 1px solid rgba(255,255,255,.14); }
.resumo div:first-child { border-left: 0; }
.resumo span { display: block; font-size: 14px; color: #c9c5bd; }
.resumo b { font-family: var(--fonte-placa); font-size: 28px; line-height: 1.1; font-weight: 700; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.resumo .alerta b { color: #ffcc00; }
.rota-colunas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 460px); gap: 20px; align-items: start; }
.rota-lado { position: sticky; top: 76px; }

.form-entrega { display: grid; grid-template-columns: minmax(220px, 2.2fr) 110px minmax(170px, 1.2fr) 130px; gap: 12px; align-items: end; }
.form-entrega .larga { grid-column: 1 / -1; }
.form-entrega .obs { grid-column: 1 / 4; }
.form-entrega .acao { grid-column: 4; }
.mais-opcoes { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(200px, 2fr) 120px 120px minmax(150px, 1fr) 120px; gap: 12px; padding-top: 4px; }
.cliente-campo { position: relative; }
.sugestoes { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin-top: 4px; background: #fff; border: 1px solid var(--tinta-3); border-radius: var(--raio); box-shadow: 0 10px 30px rgba(29,29,27,.18); max-height: 320px; overflow-y: auto; }
.sugestao { display: block; width: 100%; text-align: left; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--linha); background: #fff; cursor: pointer; }
.sugestao:last-child { border-bottom: 0; }
.sugestao.ativa, .sugestao:hover { background: var(--petroleo-fundo); }
.sugestao b { display: block; font-weight: 600; }
.sugestao small { color: var(--tinta-2); font-size: 14px; }
.sugestao.nova b { color: var(--petroleo); }
.cliente-info { grid-column: 1 / -1; font-size: 14px; color: var(--tinta-2); margin-top: -4px; }

/* a linha da rota: o elemento que dá cara à tela */
.paradas { position: relative; list-style: none; margin: 0; padding: 0; }
.parada { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 0 14px; padding-bottom: 14px; }
.parada::before { content: ''; position: absolute; left: 28px; top: 0; bottom: 0; width: 3px; background: var(--tinta); opacity: .18; }
.parada:last-child::before { bottom: auto; height: 24px; }
.parada.base::before { top: 24px; }
.parada.arrastando { opacity: .4; }
.parada.alvo .parada-corpo { border-color: var(--petroleo); box-shadow: 0 -3px 0 var(--petroleo); }
.placa { position: relative; z-index: 1; display: grid; place-items: center; width: 58px; height: 48px; border-radius: 8px; background: var(--tinta); color: #fff; font-family: var(--fonte-placa); font-size: 30px; font-weight: 700; line-height: 1; border: 3px solid var(--fundo); }
.placa.base { background: var(--petroleo); font-size: 15px; letter-spacing: .01em; }
.placa.atraso { background: var(--brasa); }
.placa.apertado { background: var(--ambar); }
.placa-hora { position: relative; z-index: 1; display: block; text-align: center; margin-top: 2px; padding: 2px 0; background: var(--fundo); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.placa-hora:empty { display: none; }
.placa-hora.atraso { color: var(--brasa); }
.parada-corpo { background: var(--papel); border: 1px solid var(--linha); border-radius: 10px; overflow: hidden; }
.parada-topo { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px 10px; cursor: grab; }
.parada-topo h3 { font-size: 17px; }
.parada-topo .end { flex: 1; min-width: 0; }
.parada-topo .end p { margin: 2px 0 0; font-size: 15px; color: var(--tinta-2); }
.parada-mover { display: flex; gap: 4px; }
.entrega { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 10px 14px; border-top: 1px solid var(--linha); }
.entrega-nome { font-weight: 600; }
.entrega-dados { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-top: 4px; }
.entrega-obs { margin-top: 4px; font-size: 15px; color: var(--tinta-2); }
.entrega-obs b { color: var(--tinta); font-weight: 600; }
.entrega-acoes { display: flex; gap: 4px; align-items: flex-start; }
.nf { font-variant-numeric: tabular-nums; font-weight: 600; }
.sem-pino { border-left: 4px solid var(--brasa); }

/* ---------- mapa ---------- */
.mapa-caixa { background: var(--papel); border: 1px solid var(--linha); border-radius: 10px; overflow: hidden; }
.mapa { width: 100%; height: 440px; background: #e6e3dd; }
.mapa.pequeno { height: 260px; }
.mapa svg { display: block; width: 100%; height: 100%; }
.mapa-nota { padding: 8px 14px; font-size: 14px; color: var(--tinta-2); border-top: 1px solid var(--linha); }
.pino { position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 6px; background: var(--tinta); color: #fff; font-family: var(--fonte-placa); font-size: 18px; font-weight: 700; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); white-space: nowrap; }
.pino.base { background: var(--petroleo); font-size: 13px; }
.pino.atraso { background: var(--brasa); }
.pino.alvo { background: var(--brasa); border-radius: 50%; }

/* ---------- escolha de pino ---------- */
.pino-busca { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.pino-resultados { display: grid; gap: 6px; }
.pino-resultados button { text-align: left; padding: 8px 10px; border: 1px solid var(--linha); border-radius: var(--raio); background: #fff; cursor: pointer; }
.pino-resultados button.ativa { border-color: var(--petroleo); background: var(--petroleo-fundo); }
.pino-estado { font-size: 14px; }

/* ---------- configurações ---------- */
.config-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.config-grade .cartao { margin: 0; }
.linha-pagamento { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; margin-bottom: 8px; }
.linha-pagamento input[type=text] { margin: 0; }
.medidor { height: 8px; border-radius: 4px; background: #e8e5df; overflow: hidden; margin: 6px 0 2px; }
.medidor i { display: block; height: 100%; background: var(--petroleo); }
.medidor.cheio i { background: var(--brasa); }

@media (max-width: 1100px) {
  .rota-colunas { grid-template-columns: 1fr; }
  .rota-lado { position: static; }
  .resumo { grid-template-columns: repeat(3, 1fr); }
  .resumo div:nth-child(4) { border-left: 0; }
  .config-grade { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .app { padding: 14px; }
  .topo { flex-wrap: wrap; gap: 10px; padding: 10px 14px; }
  .rota-topo, .form-entrega, .mais-opcoes, .grade-3, .grade-4 { grid-template-columns: 1fr 1fr; }
  .form-entrega .obs, .form-entrega .acao { grid-column: 1 / -1; }
  .rota-linha { grid-template-columns: 1fr 1fr; }
  .resumo { grid-template-columns: repeat(2, 1fr); }
  .resumo div:nth-child(odd) { border-left: 0; }
  .grade-2 { grid-template-columns: 1fr; }
  .topo-nav { order: 3; flex-basis: 100%; }
  .topo-nav a { padding: 6px 10px; }
  .topo-usuario { margin-left: auto; }
  .cabecalho-tela h1 { flex-basis: 100%; order: -1; font-size: 24px; }
  .parada { grid-template-columns: 46px minmax(0, 1fr); gap: 0 10px; }
  .parada::before { left: 22px; }
  .placa { width: 46px; height: 40px; font-size: 24px; }
  .placa.base { font-size: 12px; }
  .entrega { grid-template-columns: minmax(0, 1fr); }
  .entrega-acoes { flex-wrap: wrap; }
  .mapa { height: 320px; }
  .avisos { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .toast { animation: sobe .18s ease-out; }
  @keyframes sobe { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
}