:root {
  --brand: #ff5a1f;
  --brand-dark: #e14a12;
  --brand-soft: #fff1eb;
  --ink: #18181b;
  --ink-2: #52525b;
  --ink-3: #a1a1aa;
  --line: #e4e4e7;
  --bg: #f6f6f7;
  --card: #ffffff;
  --brand-btn: #cc4410; --brand-btn-hover: #b33a0b; /* laranja com contraste AA para texto branco */
  --ok: #15803d; --ok-soft: #dcfce7; --ok-btn: #15803d; --ok-btn-hover: #116b33;
  --violet: #6d28d9; --violet-soft: #ede9fe;
  --orange: #c2410c; --orange-soft: #ffedd5;
  --warn: #b45309; --warn-soft: #fef3c7;
  --info: #2563eb; --info-soft: #dbeafe;
  --danger: #dc2626; --danger-soft: #fee2e2;
  --radius: 14px;
  --ring: 0 0 0 3px rgba(255,90,31,.35);
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.06);
  --nav-h: 64px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); }
body { font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
a { color: var(--brand-dark); }
h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.2; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1rem; }
.muted { color: var(--ink-2); } .small { font-size: .85rem; } .tiny { font-size: .75rem; }
.hidden { display: none !important; }
.row { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.stack > * + * { margin-top: .75rem; }
.grow { flex: 1; }

/* ---------- Botões e formulários ---------- */
.btn {
  appearance: none; border: 1px solid var(--line); background: #fff; color: var(--ink);
  padding: .65rem 1rem; border-radius: 10px; font: inherit; font-weight: 650; cursor: pointer; min-height: 42px;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; text-decoration: none; text-align: center;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .05s; -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: #fafafa; border-color: #d4d4d8; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn:disabled, .btn:disabled:hover { background: #e4e4e7; border-color: #e4e4e7; color: #71717a; cursor: not-allowed; box-shadow: none; transform: none; }
/* Hierarquia: primária (laranja) · sucesso (verde) · perigo (contorno vermelho) · secundária (contorno) · ghost */
.btn.primary { background: var(--brand-btn); border-color: var(--brand-btn); color: #fff; box-shadow: 0 2px 8px rgba(204,68,16,.25); }
.btn.primary:hover { background: var(--brand-btn-hover); border-color: var(--brand-btn-hover); }
.btn.ok { background: var(--ok-btn); border-color: var(--ok-btn); color: #fff; box-shadow: 0 2px 8px rgba(21,128,61,.25); }
.btn.ok:hover { background: var(--ok-btn-hover); border-color: var(--ok-btn-hover); }
.btn.danger { color: var(--danger); border-color: #fca5a5; background: #fff; }
.btn.danger:hover { background: var(--danger-soft); border-color: var(--danger); }
.btn.ghost { border-color: transparent; background: transparent; box-shadow: none; }
.btn.ghost:hover { background: var(--bg); }
.btn.block { width: 100%; }
.btn.lg { padding: .9rem 1.2rem; font-size: 1.05rem; min-height: 52px; border-radius: 12px; }
.btn.sm { padding: .35rem .65rem; font-size: .85rem; min-height: 32px; }

label { display: block; font-weight: 600; font-size: .85rem; margin-bottom: .3rem; color: var(--ink-2); }
input, select, textarea {
  width: 100%; padding: .65rem .75rem; border: 1px solid var(--line); border-radius: 10px;
  font: inherit; background: #fff; color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: none; box-shadow: var(--ring); border-color: var(--brand); }
textarea { resize: vertical; min-height: 64px; }
.field { margin-bottom: .8rem; }
.fields-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.check { display: flex; gap: .5rem; align-items: center; font-weight: 500; color: var(--ink); }
.check input { width: auto; }

/* ---------- Cards ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem; }
.card + .card { margin-top: 1rem; }
.card h2 { margin-bottom: .75rem; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem; }
.stat .v { font-size: 1.45rem; font-weight: 700; }
.stat .l { font-size: .8rem; color: var(--ink-2); }

.badge { display: inline-flex; align-items: center; gap: .3rem; padding: .22rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 700; white-space: nowrap; border: 1px solid transparent; line-height: 1.3; }
.badge .b-ico { font-size: .7rem; line-height: 1; }
.badge.ok { background: var(--ok-soft); color: var(--ok); border-color: #bbf7d0; }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.info { background: var(--info-soft); color: var(--info); }
.badge.danger { background: var(--danger-soft); color: var(--danger); }
.badge.muted { background: #f4f4f5; color: var(--ink-2); }
.badge.violet { background: var(--violet-soft); color: var(--violet); }
.badge.orange { background: var(--orange-soft); color: var(--orange); }
.stars { color: #f59e0b; letter-spacing: 1px; }

/* ---------- Layout ---------- */
.topbar {
  position: sticky; top: 0; z-index: 900; height: 56px; background: #fff; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 0 1rem;
}
.topbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: linear-gradient(90deg, var(--brand), #ffb08f 60%, transparent); }
/* Logotipo em texto (sem imagem): 🛵 + MOTOBOY EXPRESSO */
.logo { font-weight: 800; font-size: 1.1rem; display: flex; align-items: center; gap: .5rem; color: var(--ink); text-decoration: none; min-width: 0; }
.logo-mark { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, #ff7a45, var(--brand)); display: grid; place-items: center; font-size: 1.15rem; flex: none; box-shadow: 0 2px 6px rgba(255,90,31,.35); }
.logo-text { text-transform: uppercase; letter-spacing: .04em; font-style: italic; white-space: nowrap; }
.logo b { color: var(--brand-btn); }
.logo-lg { justify-content: center; font-size: 1.55rem; }
.logo-lg .logo-mark { width: 48px; height: 48px; font-size: 1.6rem; border-radius: 14px; }
.who { display: flex; align-items: center; gap: .6rem; font-size: .9rem; min-width: 0; }
.who .name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.layout { display: grid; grid-template-columns: 220px 1fr; min-height: calc(100vh - 56px); }
.sidenav { background: #fff; border-right: 1px solid var(--line); padding: 1rem .6rem; }
.sidenav a {
  display: flex; gap: .6rem; align-items: center; padding: .65rem .8rem; border-radius: 10px; color: var(--ink-2);
  text-decoration: none; font-weight: 600; margin-bottom: 2px;
}
.sidenav a:hover { background: var(--bg); }
.sidenav a.active { background: var(--brand-soft); color: var(--brand-btn); box-shadow: inset 3px 0 0 var(--brand); }
.sidenav .lbl-s { display: none; }
.nav-group { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding: .9rem .8rem .3rem; }
.nav-group:first-child { padding-top: .2rem; }
.sidenav .ico { width: 1.3rem; text-align: center; }
main.page { padding: 1.25rem; max-width: 1280px; width: 100%; }

.split { display: grid; grid-template-columns: minmax(320px, 420px) 1fr; gap: 1rem; align-items: start; }
.map { height: 520px; border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; z-index: 1; }
.map.tall { height: calc(100vh - 56px - 2.5rem); min-height: 420px; }
.sticky { position: sticky; top: 72px; }

table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-3); }
tr.click { cursor: pointer; } tr.click:hover td { background: #fafafa; }
.table-wrap { overflow-x: auto; }
.empty { text-align: center; color: var(--ink-3); padding: 2rem 1rem; }

/* ---------- Auth ---------- */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 1rem;
  background: radial-gradient(1000px 500px at 10% -10%, #ffe2d6, transparent), var(--bg); }
.auth .card { width: 100%; max-width: 460px; padding: 1.5rem; }
.tabs { display: flex; gap: .3rem; background: var(--bg); padding: .25rem; border-radius: 12px; margin-bottom: 1rem; }
.tabs button { flex: 1; border: 0; background: transparent; padding: .55rem; border-radius: 9px; font: inherit; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.tabs button.active { background: #fff; color: var(--ink); box-shadow: var(--shadow); }
.role-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: 1rem; }
.role-pick button { border: 2px solid var(--line); background: #fff; border-radius: 12px; padding: .7rem .3rem; cursor: pointer; font: inherit; font-weight: 600; font-size: .85rem; }
.role-pick button .e { font-size: 1.5rem; display: block; }
.role-pick button.active { border-color: var(--brand); background: var(--brand-soft); }
.demo { margin-top: 1rem; font-size: .8rem; color: var(--ink-2); background: var(--bg); border-radius: 10px; padding: .7rem; }
.demo button { margin: .15rem; }

/* ---------- Endereço ---------- */
.addr { position: relative; }
.addr .inp { display: flex; gap: .4rem; }
.addr .results { position: absolute; z-index: 1000; left: 0; right: 0; top: 100%; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); max-height: 240px; overflow: auto; }
.addr .results div { padding: .55rem .7rem; cursor: pointer; font-size: .88rem; border-bottom: 1px solid #f4f4f5; }
.addr .results div:hover { background: var(--brand-soft); }
.pick-active { outline: 2px dashed var(--brand); outline-offset: 2px; }
.dot { width: 22px; height: 22px; border-radius: 50%; color: #fff; display: inline-grid; place-items: center; font-size: .72rem; font-weight: 800; flex: none; }
.dot.a { background: var(--ok); } .dot.b { background: var(--danger); }

.quote { background: var(--brand-soft); border: 1px solid #ffd2c0; border-radius: 12px; padding: .9rem; }
.quote .price { font-size: 1.8rem; font-weight: 800; color: var(--brand-dark); }

/* ---------- Mapa ---------- */
.pin { width: 30px; height: 30px; border-radius: 50% 50% 50% 0; background: var(--c); transform: rotate(-45deg); display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.35); border: 2px solid #fff; }
.pin span { transform: rotate(45deg); color: #fff; font-weight: 800; font-size: .8rem; }
.moto { width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 3px solid var(--brand); display: grid; place-items: center; font-size: 20px; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.moto.idle { border-color: var(--ok); } .moto.me { border-color: var(--info); }
.moto.pulse { animation: pulse 1.6s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,90,31,.5); } 70% { box-shadow: 0 0 0 14px rgba(255,90,31,0); } 100% { box-shadow: 0 0 0 0 rgba(255,90,31,0); } }

/* ---------- Timeline ---------- */
.steps { display: flex; gap: .25rem; margin: .5rem 0 1rem; }
.steps .s { flex: 1; text-align: center; font-size: .7rem; color: var(--ink-3); font-weight: 600; }
.steps .s::before { content: ''; display: block; height: 6px; border-radius: 6px; background: var(--line); margin-bottom: .35rem; }
.steps .s.done { color: var(--ink); } .steps .s.done::before { background: var(--brand); }
.steps .s.now::before { background: linear-gradient(90deg, var(--brand), #ffb08f); animation: shine 1.2s infinite alternate; }
@keyframes shine { from { opacity: .55; } to { opacity: 1; } }
.events { list-style: none; padding: 0; margin: 0; font-size: .85rem; }
.events li { padding: .35rem 0 .35rem 1rem; border-left: 2px solid var(--line); position: relative; }
.events li::before { content: ''; position: absolute; left: -5px; top: .7rem; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.events li:last-child::before { background: var(--brand); }
.person { display: flex; gap: .75rem; align-items: center; }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-dark); display: grid; place-items: center; font-weight: 800; flex: none; }
.place { display: flex; gap: .6rem; align-items: flex-start; padding: .45rem 0; }

/* ---------- Motoboy ---------- */
.online-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.switch { position: relative; width: 64px; height: 36px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; background: #d4d4d8; border-radius: 999px; cursor: pointer; transition: .2s; }
.switch span::before { content: ''; position: absolute; width: 28px; height: 28px; left: 4px; top: 4px; background: #fff; border-radius: 50%; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.switch input:checked + span { background: var(--ok); }
.switch input:checked + span::before { transform: translateX(28px); }
.big-status { font-size: 1.1rem; font-weight: 700; }
.offer-timer { height: 6px; background: var(--line); border-radius: 6px; overflow: hidden; margin: .75rem 0; }
.offer-timer i { display: block; height: 100%; background: var(--brand); transition: width 1s linear; }
.earning { font-size: 2rem; font-weight: 800; color: var(--ok); }

/* ---------- Modal / toast ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 2000; display: grid; place-items: center; padding: 1rem; animation: fade .15s; }
.modal { background: #fff; border-radius: 18px; width: 100%; max-width: 440px; padding: 1.25rem; max-height: 92vh; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
@keyframes fade { from { opacity: 0; } }
#toasts { position: fixed; top: 66px; right: 1rem; z-index: 3000; display: flex; flex-direction: column; gap: .5rem; max-width: calc(100vw - 2rem); }
.toast { background: var(--ink); color: #fff; padding: .7rem 1rem; border-radius: 10px; box-shadow: var(--shadow); font-size: .9rem; animation: fade .2s; }
.toast.error { background: var(--danger); } .toast.ok { background: var(--ok); }
.rate-stars { display: flex; gap: .3rem; font-size: 2rem; justify-content: center; margin: .5rem 0 1rem; }
.rate-stars button { background: none; border: 0; cursor: pointer; color: #d4d4d8; font-size: inherit; padding: 0; }
.rate-stars button.on { color: #f59e0b; }
.conn { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); display: inline-block; }
.conn.on { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.list-item { display: flex; justify-content: space-between; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.list-item:last-child { border-bottom: 0; }

td.addr-cell { min-width: 160px; max-width: 260px; }
td.addr-cell .dot { width: 18px; height: 18px; font-size: .62rem; vertical-align: -3px; }

/* ---------- Endereços (componente passo a passo) ---------- */
.ap-section { margin-bottom: 1rem; }
.ap-title { font-size: .95rem; color: var(--ink); display: flex; align-items: center; gap: .35rem; margin-bottom: .5rem; }
.ap-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin-bottom: .6rem; }
.ap-modes button { border: 2px solid var(--line); background: #fff; border-radius: 12px; padding: .6rem .3rem; font: inherit; font-weight: 700; font-size: .82rem; cursor: pointer; color: var(--ink-2); display: flex; flex-direction: column; align-items: center; gap: .15rem; min-height: 58px; }
.ap-modes button span { font-size: 1.25rem; }
.ap-modes button.active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); }
.ap-input { font-size: 1rem; padding: .75rem .8rem; }
.ap-list { display: flex; flex-direction: column; gap: .4rem; margin-top: .5rem; }
.ap-item { display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: .7rem .8rem; font: inherit; cursor: pointer; line-height: 1.3; }
.ap-item:hover { border-color: var(--brand); background: var(--brand-soft); }
.ap-item.add { border-style: dashed; }
.ap-item.suggestion { margin-top: .5rem; flex-wrap: wrap; }
.ap-item-ico { font-size: 1.4rem; width: 2rem; text-align: center; flex: none; }
.ap-card { display: flex; gap: .6rem; align-items: flex-start; border: 1px solid var(--line); border-radius: 12px; padding: .75rem; margin: .4rem 0 .6rem; background: #fafafa; line-height: 1.35; }
.ap-card.ok { border-color: #bbf7d0; background: #f0fdf4; }
.ap-card.locked { border-color: #fed7aa; background: var(--brand-soft); }
.ap-card-ico { font-size: 1.5rem; flex: none; }
.ap-err { color: var(--danger); background: var(--danger-soft); border-radius: 10px; padding: .55rem .7rem; font-size: .88rem; margin: .4rem 0; }
.ap-empty { padding: .5rem 0; }
.ap-save { margin-top: .2rem; }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; }
.chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: .4rem .75rem; font: inherit; font-size: .85rem; cursor: pointer; }
.chip.active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); font-weight: 700; }
.ok-text { color: var(--ok); } .warn-text { color: var(--warn); } .err-text { color: var(--danger); }
.addr-row { display: flex; gap: .6rem; align-items: center; padding: .7rem 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.addr-row:last-of-type { border-bottom: 0; }

/* ---------- Cronômetros do motoboy (leitura em 1 segundo) ---------- */
.dl-card, .wait-card { border: 2px solid var(--info); background: var(--info-soft); border-radius: 16px; padding: .9rem .9rem .8rem; text-align: center; margin: .3rem 0 .9rem; }
.dl-card.delivery { border-color: var(--violet); background: var(--violet-soft); }
.dl-card.late { border-color: #f59e0b; background: var(--warn-soft); }
.dl-card.over { border-color: var(--danger); background: #fff5f5; }
.dl-card.done { border-color: var(--line); background: #fafafa; }
.dl-title, .wait-title { font-weight: 900; font-size: 1.15rem; letter-spacing: .02em; }
.dl-card.pickup .dl-title { color: #1d4ed8; } .dl-card.delivery .dl-title { color: var(--violet); }
.dl-card.late .dl-title { color: var(--warn); } .dl-card.over .dl-title { color: var(--danger); }
.dl-card.done .dl-title { color: var(--ok); }
.dl-timer, .wait-timer { font-size: 3.4rem; font-weight: 900; line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: .02em; margin: .15rem 0; }
.dl-card.late .dl-timer { color: var(--warn); } .dl-card.over .dl-timer { color: var(--danger); }
.dl-card.done .dl-timer { font-size: 2rem; color: var(--ink-2); }
.dl-label { font-size: .85rem; font-weight: 600; color: var(--ink-2); }
.dl-dist { font-size: 1.05rem; margin-top: .35rem; }
.dl-dist b { font-size: 1.2rem; }
.dl-card.over { animation: alertPulse 2s ease-in-out infinite; }
@keyframes alertPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); } 50% { box-shadow: 0 0 0 5px rgba(220,38,38,.15); } }
.wait-card { border-color: var(--orange); background: var(--orange-soft); }
.wait-title { color: var(--orange); }
.wait-sub { font-weight: 700; }
.wait-card.penalized { border-color: #fecaca; background: #fff7f7; }
.wait-timer.done { color: var(--ink-3); }
.wait-penalty { margin-top: .5rem; color: var(--danger); background: var(--danger-soft); border-radius: 10px; padding: .45rem .6rem; font-size: .88rem; }
.dl-sum { padding: .5rem 0; border-bottom: 1px solid var(--line); }
.dl-sum:last-of-type { border-bottom: 0; }

/* ---------- Motoboy: corrida, botão de ação e status ---------- */
.run-card { border-top: 4px solid var(--brand); }
.run-head { align-items: flex-start; margin-bottom: .2rem; }
.action-btn { min-height: 60px; font-size: 1.15rem; font-weight: 800; letter-spacing: .01em; }
.action-btn.act-pickup, .action-btn.act-collected, .action-btn.act-arrive { background: var(--brand-btn); border-color: var(--brand-btn); box-shadow: 0 3px 10px rgba(204,68,16,.3); }
.action-btn.act-pickup:hover, .action-btn.act-collected:hover, .action-btn.act-arrive:hover { background: var(--brand-btn-hover); }
.btn.action-btn:disabled, .btn.action-btn:disabled:hover { background: #e4e4e7; border-color: #d4d4d8; color: #52525b; box-shadow: none; }
.gate { text-align: center; margin-top: .4rem; font-weight: 600; }
.online-card { border-left: 5px solid #a1a1aa; }
.online-card.on { border-left-color: #22c55e; } .online-card.busy { border-left-color: var(--brand); }
.st-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #a1a1aa; margin-right: .45rem; vertical-align: 1px; }
.online-card.on .st-dot { background: #22c55e; animation: blink 1.6s ease-in-out infinite; } .online-card.busy .st-dot { background: var(--brand); }
@keyframes blink { 50% { opacity: .35; } }
.idle-card { text-align: center; }
.idle-ico { font-size: 2.2rem; animation: blink 2.4s ease-in-out infinite; }
.sim-card { background: #fcfcfd; }
.offer-actions { display: grid; grid-template-columns: 1fr 1.6fr; gap: .6rem; }
.offer-actions .btn { min-height: 58px; font-size: 1.1rem; }
.offer-cd { font-size: 1.5rem; font-weight: 900; color: var(--warn); font-variant-numeric: tabular-nums; background: var(--warn-soft); border-radius: 12px; padding: .1rem .6rem; min-width: 3.2rem; text-align: center; }

/* ---------- Acompanhamento (cliente / loja) ---------- */
.hero { display: flex; gap: .75rem; align-items: center; margin: .75rem 0 .2rem; padding: .7rem .8rem; border-radius: 12px; background: var(--bg); }
.hero-ico { font-size: 1.9rem; flex: none; }
.hero-title { font-weight: 800; font-size: 1.05rem; }
.hero-searching { background: var(--warn-soft); } .hero-searching .hero-ico { animation: blink 1.6s ease-in-out infinite; }
.hero-accepted, .hero-arrived_pickup { background: var(--info-soft); }
.hero-picked_up { background: var(--violet-soft); }
.hero-no_courier { background: var(--danger-soft); }
.arrived-banner { margin-top: .75rem; background: var(--orange-soft); border: 2px solid var(--orange); border-radius: 14px; padding: .85rem .95rem; text-align: center; animation: pop .35s ease-out; }
.arrived-title { font-weight: 900; font-size: 1.35rem; color: var(--orange); }
#ttimer { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.done-banner { margin-top: .75rem; background: var(--ok-soft); border: 2px solid var(--ok); border-radius: 14px; padding: .85rem .95rem; text-align: center; animation: pop .35s ease-out; }
.done-title { font-weight: 900; font-size: 1.35rem; color: var(--ok); letter-spacing: .02em; }
@keyframes pop { from { transform: scale(.97); opacity: .4; } }

/* ---------- Admin ---------- */
.page-head { margin-bottom: 1rem; }
.page-head h1 { margin-bottom: .2rem; }
.page-head p { margin: 0; }
.quick-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.quick { display: flex; gap: .65rem; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .7rem .8rem; text-decoration: none; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.quick:hover { border-color: var(--brand); box-shadow: var(--shadow); }
.quick b { display: block; font-size: .9rem; }
.q-ico { font-size: 1.4rem; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; background: var(--brand-soft); border-radius: 10px; flex: none; }
.info-card { background: #fcfcfd; }

/* ---------- Geral ---------- */
h1 { letter-spacing: -.01em; }
.stat { box-shadow: var(--shadow); }
.stat .v { font-variant-numeric: tabular-nums; }
.empty-ico { font-size: 2rem; margin-bottom: .3rem; opacity: .8; }
.list-item { transition: background .15s; border-radius: 8px; padding-left: .3rem; padding-right: .3rem; }
.list-item:hover { background: #fafafa; }
main.page > * { animation: fade .18s ease-out; }
.steps .s.done::before { background: var(--brand); }
.auth-brand { text-align: center; margin-bottom: 1rem; }
.auth-tagline { color: var(--ink-2); margin: .5rem 0 .4rem; }
.auth-perks { display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap; font-size: .78rem; font-weight: 700; color: var(--ink-2); }
.auth-perks span { background: var(--bg); border-radius: 999px; padding: .2rem .6rem; }
.auth { grid-template-rows: 1fr auto; }
.auth-footer { text-align: center; font-size: .78rem; color: var(--ink-2); padding: .8rem 0 0; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- Responsivo (celular) ---------- */
@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  .sidenav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 950; height: var(--nav-h); padding: 0 .25rem;
    display: flex; border-right: 0; border-top: 1px solid var(--line); overflow-x: auto;
  }
  .sidenav a { flex: 1 0 0; min-width: 62px; flex-direction: column; gap: .1rem; font-size: .64rem; line-height: 1.3; padding: .4rem .1rem; margin: .35rem 1px; text-align: center; }
  .sidenav .ico { font-size: 1.15rem; }
  .sidenav a.active { box-shadow: inset 0 -3px 0 var(--brand); }
  .nav-group { display: none; }
  .sidenav a:has(.lbl-s) .lbl { display: none; }
  .sidenav .lbl-s { display: inline; }
  .sidenav a span:not(.ico) { white-space: nowrap; }
  .split.courier-home > .map-col { order: 0; }
  .courier-home .map.tall { height: 42vh; min-height: 260px; }
  .topbar { padding: 0 .7rem; }
  main.page { padding: .85rem .85rem calc(var(--nav-h) + 1rem); }
  .split { grid-template-columns: 1fr; }
  .split > .map-col { order: -1; }
  .map { height: 300px; }
  .map.tall { height: 40vh; min-height: 260px; }
  .sticky { position: static; }
  .who .name { display: none; }
  .fields-2 { grid-template-columns: 1fr; }
  th.hide-m, td.hide-m { display: none; }
  /* Histórico em cartões no celular */
  table.rtable thead { display: none; }
  table.rtable, table.rtable tbody, table.rtable tr, table.rtable td { display: block; width: 100%; }
  table.rtable tr { border: 1px solid var(--line); border-radius: 12px; padding: .5rem .75rem; margin-bottom: .6rem; }
  table.rtable td { border: 0; padding: .2rem 0; display: flex; gap: .75rem; justify-content: space-between; text-align: right; max-width: none; }
  table.rtable td::before { content: attr(data-label); font-size: .72rem; font-weight: 700; color: var(--ink-3); text-transform: uppercase; text-align: left; flex: none; }
}
@media (max-width: 480px) {
  .logo { font-size: .95rem; gap: .4rem; }
  .logo-mark { width: 30px; height: 30px; font-size: 1rem; }
  .logo-lg { font-size: 1.25rem; }
  .logo-lg .logo-mark { width: 42px; height: 42px; }
  .who { gap: .4rem; }
  .who .badge { display: none; }
  .dl-timer, .wait-timer { font-size: 3rem; }
  .auth .card { padding: 1.1rem; }
  .quick-links { grid-template-columns: 1fr 1fr; }
  .quick { flex-direction: column; align-items: flex-start; gap: .35rem; }
  .quick .small { display: none; }
}

/* ---------- Buscar loja (favoritas, resultados compactos, sugerir loja) ---------- */
.ap-list-title { font-size: .78rem; font-weight: 800; color: var(--ink-2); text-transform: uppercase; letter-spacing: .05em; margin: .1rem 0 .1rem; }
.ap-results { display: flex; flex-direction: column; gap: .4rem; max-height: 236px; overflow-y: auto; padding-right: 2px; }
.ap-hint { margin-top: .1rem; }
.ap-notfound { display: flex; flex-direction: column; gap: .45rem; }
.ap-nf-title { font-weight: 700; font-size: .9rem; }
.ap-nf-box { border: 1px dashed #fdba74; background: var(--brand-soft); border-radius: 12px; padding: .75rem; display: flex; flex-direction: column; gap: .45rem; }
.ap-nf-done { border: 1px solid #bbf7d0; background: #f0fdf4; border-radius: 12px; padding: .7rem; color: var(--ok); font-weight: 600; font-size: .9rem; }

/* ---------- Admin: sugestões de lojas ---------- */
.sug-indicator { display: flex; gap: .7rem; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .7rem .85rem; margin-bottom: .75rem; text-decoration: none; color: var(--ink); }
.sug-indicator .small { display: block; }
.sug-indicator.has { border-color: #fdba74; background: #fffaf5; }
.sug-indicator:hover { border-color: var(--brand); }
.new-tag { color: var(--brand-btn); }
.nav-count { margin-left: auto; background: var(--ink-3); color: #fff; border-radius: 999px; font-size: .7rem; font-weight: 800; padding: .05rem .45rem; min-width: 1.3rem; text-align: center; }
.nav-count.new { background: var(--brand-btn); }
tr.row-new td { background: #fffaf5; }
.sug-req { list-style: none; padding: 0; margin: .2rem 0 .6rem; font-size: .88rem; max-height: 180px; overflow: auto; }
.sug-req li { padding: .25rem 0; border-bottom: 1px solid var(--line); }
.sug-status { display: flex; flex-wrap: wrap; gap: .35rem; }
@media (max-width: 860px) {
  .nav-count { position: absolute; top: 2px; right: 6px; margin: 0; font-size: .6rem; }
  .sidenav a { position: relative; }
}

/* ---------- Entregas múltiplas (loja) ---------- */
.qty-box { background: var(--brand-soft); border: 1px solid #ffd2c0; border-radius: 14px; padding: .8rem; margin: .4rem 0 1rem; }
.qty-box label { color: var(--ink); font-size: .95rem; font-weight: 800; }
.qty-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.qty-row input { width: 4.5rem; text-align: center; font-size: 1.3rem; font-weight: 800; padding: .45rem; }
.qty-btn { width: 48px; height: 48px; font-size: 1.4rem; padding: 0; }
.stop-card { border: 1px solid var(--line); border-left: 4px solid #a1a1aa; border-radius: 12px; padding: .75rem .8rem .5rem; margin-bottom: .9rem; background: #fff; }
.stop-card.ok { border-left-color: var(--ok); }
.stop-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .5rem; flex-wrap: wrap; }
.stop-num { font-weight: 900; letter-spacing: .04em; }
.stop-state { font-size: .8rem; font-weight: 700; }
.stop-state.ok { color: var(--ok); } .stop-state.missing { color: var(--danger); }
.sum-title { font-weight: 900; font-size: .8rem; letter-spacing: .06em; color: var(--brand-btn); margin-bottom: .2rem; }
.route-order { margin-top: .6rem; font-size: .88rem; }
.route-order ol { margin: .3rem 0 .2rem; padding-left: 1.2rem; }
.route-order li { margin: .15rem 0; }
.block-banner { background: var(--danger-soft); border: 2px solid var(--danger); color: #7f1d1d; border-radius: 12px; padding: .8rem .9rem; margin: .4rem 0 1rem; }
.bb-title { font-weight: 800; color: var(--danger); margin-bottom: .2rem; }
.ok-banner { background: var(--ok-soft); border: 1px solid #bbf7d0; color: var(--ok); border-radius: 12px; padding: .65rem .85rem; margin-bottom: 1rem; }

/* ---------- Financeiro ---------- */
.due-stat.has { border-color: #fdba74; background: #fffaf5; }
.due-stat.has .v { color: var(--brand-btn); }
.bill-row { display: flex; gap: .75rem; justify-content: space-between; align-items: center; padding: .75rem 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.bill-row:last-child { border-bottom: 0; }
.bill-row.st-overdue .bill-main > b:first-child { color: var(--danger); }
.bill-main { flex: 1 1 260px; min-width: 0; }
.bill-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.bill-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem .8rem; font-size: .9rem; }
.bill-grid .l { display: block; font-size: .72rem; color: var(--ink-2); text-transform: uppercase; font-weight: 700; }
.pay-amount { font-size: 2rem; font-weight: 900; color: var(--brand-btn); margin: .3rem 0 .6rem; }
.overdue-card.has { border: 2px solid var(--danger); background: #fffafa; }
.overdue-card h2 { color: var(--danger); }
.bill-alert { border-color: #fca5a5; background: #fff7f7; }

/* ---------- Paradas: acompanhamento e motoboy ---------- */
.stops-card h3 { font-weight: 900; }
.stops-progress { height: 8px; border-radius: 8px; background: var(--line); overflow: hidden; margin: .55rem 0 .4rem; }
.stops-progress i { display: block; height: 100%; background: var(--ok); transition: width .4s; }
.stops-list { list-style: none; padding: 0; margin: .2rem 0 .4rem; }
.stops-list li { display: flex; gap: .55rem; align-items: flex-start; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.stops-list li:last-child { border-bottom: 0; }
.stops-list .sl-ico { font-size: 1.15rem; line-height: 1.3; }
.stops-list .sl-next b, .stops-list .sl-arrived b { color: var(--info); }
.stops-list .sl-pending { opacity: .75; }
.stop-banner { background: var(--info-soft); border: 2px solid var(--info); border-radius: 14px; padding: .65rem .8rem; margin: .2rem 0 .7rem; text-align: center; }
.stop-banner.pre { background: var(--brand-soft); border-color: #fdba74; display: flex; flex-direction: column; gap: .15rem; }
.sb-kicker { font-size: .78rem; font-weight: 900; letter-spacing: .06em; color: #1d4ed8; }
.sb-title { font-size: 1.45rem; font-weight: 900; line-height: 1.1; }
.sb-client { font-size: .95rem; margin-top: .15rem; }
.stops-mini { margin: .4rem 0; border: 1px solid var(--line); border-radius: 12px; padding: .5rem .7rem; }
.stops-mini summary { cursor: pointer; }
.stops-mini ol { list-style: none; padding: 0; margin: .4rem 0 0; }
.stops-mini li { padding: .3rem 0; font-size: .9rem; }
.stops-mini li.sl-done { opacity: .7; }
.offer-multi { background: var(--brand-soft); border: 1px solid #ffd2c0; border-radius: 12px; padding: .6rem .7rem; margin: .4rem 0; }
.om-title { font-weight: 900; font-size: 1.1rem; }
.om-list { list-style: none; padding: 0; margin: .4rem 0 0; font-size: .85rem; max-height: 150px; overflow: auto; }
.om-list li { display: flex; gap: .4rem; align-items: flex-start; padding: .15rem 0; }
.om-list .dot { width: 20px; height: 20px; font-size: .68rem; }

/* ---------- Acompanhamento público (destinatário) ---------- */
.pub-main { max-width: 640px; margin: 0 auto; padding: 1rem; }
.hero-pub.st-arrived { background: var(--orange-soft); }
.hero-pub.st-done { background: var(--ok-soft); }
.hero-pub.st-done .hero-title { color: var(--ok); }
@media (max-width: 480px) {
  .bill-grid { grid-template-columns: 1fr 1fr; }
  .sb-title { font-size: 1.3rem; }
  .bill-actions .btn { flex: 1; }
}

/* ---------- Pix ---------- */
.pix-card { border: 2px solid #32bcad; }
.pix-box { text-align: center; }
.pix-title { font-weight: 900; letter-spacing: .05em; color: #0f766e; margin-bottom: .3rem; }
.pix-amount { display: flex; flex-direction: column; align-items: center; margin-bottom: .5rem; }
.pix-amount b { font-size: 2rem; font-weight: 900; }
.pix-qr { width: 220px; max-width: 70vw; aspect-ratio: 1; image-rendering: pixelated; border: 1px solid var(--line); border-radius: 12px; padding: .4rem; background: #fff; margin: .2rem auto .6rem; display: block; }
.pix-box label { text-align: left; }
.pix-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .78rem; word-break: break-all; resize: none; margin-bottom: .5rem; background: #fafafa; }
.pix-status { margin: .7rem 0 .4rem; padding: .6rem .7rem; border-radius: 12px; font-weight: 800; }
.pix-status.warn { background: var(--warn-soft); color: var(--warn); }
.pix-status.ok { background: var(--ok-soft); color: var(--ok); }
.pix-status.danger { background: var(--danger-soft); color: var(--danger); }
.pix-status.muted { background: #f4f4f5; color: var(--ink-2); }
.pix-actions { justify-content: center; margin-bottom: .3rem; }
.pix-exp { margin-top: .3rem; }
.pay-cfg { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .6rem .9rem; }
.pay-cfg .l { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; color: var(--ink-2); }
.pay-cfg b { word-break: break-all; }
.pix-filters { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: .5rem; margin-bottom: .8rem; }
@media (max-width: 860px) { .pix-filters { grid-template-columns: 1fr 1fr; } .pix-filters #pq { grid-column: 1 / -1; } }

/* ---------- Regras da Plataforma / Termos ---------- */
.rules-nav .chip { text-decoration: none; color: var(--ink); }
.rules-group { font-size: 1.05rem; margin: 1.2rem 0 .5rem; }
.rules-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .8rem; }
.rule-card { margin: 0; display: flex; flex-direction: column; transition: box-shadow .2s, border-color .2s; }
.rule-card.rule-off { opacity: .8; border-style: dashed; }
.rule-card.saved-flash { border-color: var(--ok); box-shadow: 0 0 0 3px rgba(22,163,74,.18); }
.rule-input { display: flex; align-items: center; gap: .35rem; flex: 1; min-width: 0; }
.rule-input input { flex: 1; min-width: 0; }
.rule-input .unit { font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.rule-card select { flex: 1; min-width: 0; }
.rule-saved { min-height: 1.1em; margin-top: .3rem; }
.switch.sm { width: 46px; height: 26px; }
.switch.sm span::before { width: 20px; height: 20px; }
.switch.sm input:checked + span::before { transform: translateX(20px); }
.terms-text { white-space: pre-wrap; background: var(--bg); border-radius: 12px; padding: .8rem 1rem; max-height: 46vh; overflow: auto; font-size: .88rem; line-height: 1.45; margin: .7rem 0; }
.terms-values { font-size: .85rem; margin: .4rem 0 .8rem; }
.terms-values table { width: 100%; border-collapse: collapse; margin-top: .3rem; }
.terms-values td { padding: .25rem .2rem; border-bottom: 1px solid var(--line); }
.terms-values td:last-child { text-align: right; }
.terms-box { background: var(--bg); border-radius: 12px; padding: .7rem .8rem; margin: .4rem 0 .8rem; }
.terms-check { margin-top: .4rem; align-items: flex-start; }
.terms-check input { margin-top: .2rem; }
.auth .card.terms-gate { max-width: 760px; }
.modal.modal-wide { max-width: 760px; }
.terms-admin textarea { width: 100%; font: inherit; font-size: .88rem; }
.fields-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
@media (max-width: 640px) { .fields-3 { grid-template-columns: 1fr; } .rules-grid { grid-template-columns: 1fr; } }
tr.clickable { cursor: pointer; }
table.kv { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.kv td { padding: .3rem .2rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.fee-box { background: var(--warn-soft); color: var(--ink); border-radius: 12px; padding: .7rem .8rem; margin: .3rem 0 .8rem; }
.store-info { font-size: .85rem; background: var(--bg); border-radius: 10px; padding: .45rem .6rem; margin: .4rem 0; }

/* ---------- Ajuda e suporte ---------- */
details.faq { border-bottom: 1px solid var(--line); padding: .55rem 0; }
details.faq summary { cursor: pointer; font-weight: 600; }
details.faq p { margin: .4rem 0 0; }
.sup-item { border: 1px solid var(--line); border-radius: 12px; padding: .6rem .7rem; margin-bottom: .5rem; cursor: pointer; }
.sup-item:hover { background: var(--bg); }
.sup-img { display: block; max-width: 100%; max-height: 420px; border-radius: 10px; border: 1px solid var(--line); margin: .5rem 0; }
.sup-thread { display: grid; gap: .45rem; margin-top: .6rem; }
.sup-msg { border-radius: 12px; padding: .5rem .7rem; font-size: .9rem; white-space: pre-wrap; background: var(--bg); }
.sup-msg.admin { background: var(--brand-soft); border-left: 3px solid var(--brand); }

/* ---------------------------------------------------------------- Motoboys na região (mapa geral de disponibilidade)
   Áreas aproximadas (≈ 1 km) vindas do servidor — sem animação contínua. */
.avail-zone { width: 60px; height: 60px; border-radius: 50%; background: rgba(22,163,74,.16); border: 2px dashed rgba(22,163,74,.7); display: grid; place-items: center; position: relative; }
.avail-zone span { font-size: 1.2rem; }
.avail-zone b { position: absolute; top: 2px; right: 2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #16a34a; color: #fff; font-size: .72rem; display: grid; place-items: center; }
.av-counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: .6rem 0; }
.av-n { background: #f4f4f5; border-radius: 12px; padding: .6rem .4rem; text-align: center; }
.av-n b { display: block; font-size: 1.6rem; line-height: 1.1; }
.av-n span { font-size: .8rem; opacity: .8; }
.av-n.ok b { color: #16a34a; } .av-n.busy b { color: #b45309; }
.av-msg { background: #f4f4f5; border-radius: 12px; padding: .65rem .75rem; font-size: .92rem; }
.av-msg.warn { background: #fef3c7; color: #92400e; }
.av-empty { font-weight: 600; margin: .3rem 0; }

/* ---------------------------------------------------------------- Foto de perfil do motoboy (cadastro e conferência do Admin) */
.photo-box { border: 1px dashed var(--line, #e4e4e7); border-radius: 12px; padding: .7rem .8rem; margin: .6rem 0 .8rem; }
.photo-row { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.photo-prev { width: 112px; height: 112px; border-radius: 50%; overflow: hidden; background: #f4f4f5; display: grid; place-items: center; flex: none; text-align: center; }
.photo-prev img { width: 100%; height: 100%; object-fit: cover; }
.photo-actions { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; min-width: 160px; }
.photo-actions label.btn { cursor: pointer; margin: 0; }
.review-grid { display: grid; grid-template-columns: minmax(180px, 260px) 1fr; gap: 1rem; align-items: start; }
.review-photo { aspect-ratio: 3 / 4; background: #f4f4f5; border-radius: 12px; overflow: hidden; display: grid; place-items: center; text-align: center; padding: .4rem; }
.review-photo img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 560px) { .review-grid { grid-template-columns: 1fr; } .review-photo { max-height: 50vh; } }