/* Tema fixo preto/branco — não segue o claro/escuro do resto do app.
   Decisão de segurança (SPEC.md §2.6): celular no carro, reflexo de sol,
   uma mão só, alvo de toque mínimo 48px. */

:root {
  --preto: #0b0b0c;
  --preto-card: #1a1a1c;
  --preto-borda: #2c2c2f;
  --branco: #f7f7f8;
  --cinza: #9a9a9e;
  --verde: #22c55e;
  --vermelho: #ef4444;
  --amarelo: #eab308;
}

* { 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; }

/* ---------- 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(--branco); }

.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-primario { background: var(--branco); color: #000; }
.mot-btn-primario:active { background: #d8d8db; }
.mot-btn-primario:disabled { background: #4a4a4d; color: #8a8a8d; }

.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); }

.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: #3a3a3d; color: var(--branco); }
.mot-etiqueta.em_andamento { background: #1e3a8a; color: #bfdbfe; }
.mot-etiqueta.finalizada { background: #14532d; color: #bbf7d0; }

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

.mot-lista-titulo {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cinza);
  margin: 4px 0 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: #2c2c2f;
  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; }

.mot-parada-texto { flex: 1; min-width: 0; }
.mot-parada-texto strong { display: block; font-size: 15px; }
.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;
}

.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 ---------- */

.mot-parada-detalhe { 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-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; }

/* ---------- 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-carregando { text-align: center; padding: 60px 20px; color: var(--cinza); }