:root { --bg:#f4f5f7; --card:#fff; --ink:#1c1f24; --muted:#6a7280; --line:#e2e5ea; --brand:#e8590c; --ok:#2b8a3e; --warn:#e67700; --bad:#c92a2a; }
@media (prefers-color-scheme: dark) { :root { --bg:#14161a; --card:#1e2127; --ink:#eceef2; --muted:#9aa3b2; --line:#2c3038; } }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.4 -apple-system, system-ui, sans-serif; background:var(--bg); color:var(--ink); }
header { display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:500; }
header h1 { font-size:18px; margin:0; flex:1; }
main { max-width:1100px; margin:0 auto; padding:16px; display:grid; gap:16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; }
.card h2 { margin:0 0 12px; font-size:16px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:760px) { .grid2 { grid-template-columns:1fr; } }
label { display:block; font-size:13px; color:var(--muted); margin:10px 0 4px; }
input, select { width:100%; padding:10px 12px; font-size:16px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--ink); }
button { padding:10px 16px; font-size:16px; border:0; border-radius:8px; background:var(--brand); color:#fff; cursor:pointer; font-weight:600; }
button.ghost { background:transparent; color:var(--ink); border:1px solid var(--line); }
button.ok { background:var(--ok); } button.bad { background:var(--bad); }
button.big { width:100%; padding:16px; font-size:18px; margin-top:12px; }
button:disabled { opacity:.5; }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.muted { color:var(--muted); font-size:14px; }
.badge { display:inline-block; padding:2px 8px; border-radius:99px; font-size:12px; font-weight:700; background:var(--line); }
.badge.searching { background:#fff3bf; color:#664d03; } .badge.accepted, .badge.picked_up { background:#d0ebff; color:#0b4a7a; }
.badge.delivered { background:#d3f9d8; color:#1b5e20; } .badge.cancelled, .badge.no_courier { background:#ffe3e3; color:#7a1212; }
.map { height:340px; border-radius:10px; border:1px solid var(--line); }
.item { padding:12px 0; border-bottom:1px solid var(--line); } .item:last-child { border-bottom:0; }
table { width:100%; border-collapse:collapse; font-size:14px; } th, td { text-align:left; padding:8px 6px; border-bottom:1px solid var(--line); } th { color:var(--muted); font-weight:600; }
.err { color:var(--bad); font-size:14px; margin-top:8px; min-height:18px; }
.login { max-width:380px; margin:48px auto; } .tabs { display:flex; gap:8px; flex-wrap:wrap; }
.tabs button { background:var(--card); color:var(--ink); border:1px solid var(--line); } .tabs button.on { background:var(--brand); color:#fff; border-color:var(--brand); }
.big-num { font-size:28px; font-weight:800; }

/* ---- organização das páginas (empresa e entregador) ---- */
:root { --brand2:#ff8a1f; --shadow:0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.06); }
header { box-shadow:var(--shadow); }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; flex:1; min-width:0; }
.brand img { width:36px; height:36px; border-radius:10px; flex:none; }
.brand b { display:block; line-height:1.15; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.brand small { display:block; font-weight:600; color:var(--muted); font-size:12px; }
.chip { background:var(--bg); border:1px solid var(--line); border-radius:99px; padding:6px 12px; font-weight:700; white-space:nowrap; }
.card, details.acc { border-radius:14px; box-shadow:var(--shadow); }
.kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media (max-width:760px) { .kpis { grid-template-columns:repeat(2,1fr); } }
.kpi { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px; box-shadow:var(--shadow); }
.kpi .n { font-size:26px; font-weight:800; line-height:1.1; } .kpi .t { font-size:13px; color:var(--muted); margin-top:2px; }
.kpi.hot { background:linear-gradient(135deg,var(--brand2),var(--brand)); color:#fff; border:0; } .kpi.hot .t { color:rgba(255,255,255,.88); }
.layout { display:grid; grid-template-columns:390px 1fr; gap:16px; align-items:start; }
@media (max-width:900px) { .layout { grid-template-columns:1fr; } }
.step { display:flex; align-items:center; gap:8px; font-weight:700; margin:16px 0 2px; }
.step i { width:22px; height:22px; border-radius:50%; background:var(--brand); color:#fff; font-style:normal; font-size:12px; display:grid; place-items:center; flex:none; }
.map.tall { height:560px; } @media (max-width:900px) { .map.tall { height:340px; } }
.tl { display:flex; margin:12px 0 2px; isolation:isolate; }
.tl span { flex:1; font-size:11px; color:var(--muted); text-align:center; position:relative; padding-top:16px; }
.tl span::before { content:''; position:absolute; top:0; left:50%; width:11px; height:11px; margin-left:-5.5px; border-radius:50%; background:var(--line); }
.tl span::after { content:''; position:absolute; top:4.5px; left:-50%; width:100%; height:2px; background:var(--line); z-index:-1; }
.tl span:first-child::after { display:none; }
.tl span.done { color:var(--ink); font-weight:600; } .tl span.done::before, .tl span.done::after { background:var(--ok); }
details.acc { background:var(--card); border:1px solid var(--line); }
details.acc > summary { cursor:pointer; list-style:none; padding:14px 16px; font-weight:700; display:flex; align-items:center; gap:8px; }
details.acc > summary::-webkit-details-marker { display:none; }
details.acc > summary::after { content:'▾'; margin-left:auto; color:var(--muted); } details.acc[open] > summary::after { content:'▴'; }
details.acc .body { padding:0 16px 16px; }
.seg { display:inline-flex; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:3px; }
.seg button { background:transparent; color:var(--muted); padding:6px 14px; font-size:14px; } .seg button.on { background:var(--card); color:var(--ink); box-shadow:var(--shadow); }
.dcard { border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-top:10px; }
.code { font-size:22px; font-weight:800; letter-spacing:3px; }
.pill { display:inline-flex; align-items:center; gap:6px; background:var(--bg); border:1px solid var(--line); border-radius:99px; padding:4px 10px; font-size:13px; }
.wa-box { background:rgba(37,211,102,.08); border:1px solid rgba(37,211,102,.35); border-radius:12px; padding:10px 12px; margin-top:10px; }
.empty { text-align:center; color:var(--muted); padding:18px 8px; }

/* ---- entregador ---- */
.go { width:100%; padding:20px; font-size:20px; border-radius:14px; margin-top:12px; background:linear-gradient(135deg,#2fb344,#1f8a34); box-shadow:0 8px 20px rgba(43,138,62,.35); }
.go.off { background:linear-gradient(135deg,#6a7280,#4b5260); box-shadow:none; }
.live { display:flex; align-items:center; gap:10px; font-size:22px; font-weight:800; }
.dot { width:14px; height:14px; border-radius:50%; background:#2fb344; box-shadow:0 0 0 0 rgba(47,179,68,.6); animation:pulse 1.6s infinite; flex:none; }
.dot.off { background:#adb5bd; animation:none; }
@keyframes pulse { 70% { box-shadow:0 0 0 14px rgba(47,179,68,0); } 100% { box-shadow:0 0 0 0 rgba(47,179,68,0); } }
.offer { border:2px solid var(--brand); background:linear-gradient(180deg,rgba(255,138,31,.10),transparent 60%), var(--card); animation:pop .35s ease; }
@keyframes pop { from { transform:scale(.96); opacity:.4; } to { transform:none; opacity:1; } }
.bar { height:8px; background:var(--line); border-radius:99px; overflow:hidden; margin:10px 0; } .bar > i { display:block; height:100%; background:linear-gradient(90deg,var(--brand2),var(--brand)); border-radius:99px; transition:width 1s linear; }
.value { font-size:40px; font-weight:900; letter-spacing:-1px; }
.steps { display:flex; gap:6px; margin:10px 0 4px; } .steps span { flex:1; text-align:center; font-size:12px; padding:6px 2px; border-radius:8px; background:var(--bg); color:var(--muted); font-weight:600; }
.steps span.on { background:var(--brand); color:#fff; } .steps span.ok { background:rgba(43,138,62,.15); color:var(--ok); }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.stat { background:var(--bg); border-radius:12px; padding:12px; } .stat b { display:block; font-size:20px; } .stat span { font-size:12px; color:var(--muted); }
header { z-index:2000; }
.map { position:relative; z-index:0; }
.leaflet-control-layers { font-size:14px; border-radius:10px; } .leaflet-control-layers-selector { width:auto; }
@media (max-width:480px) {
  header { padding:10px 12px; gap:8px; }
  .brand small { display:none; }
  .chip { padding:5px 10px; font-size:14px; }
  main { padding:12px; gap:12px; }
  .card { padding:14px; }
  .value { font-size:34px; }
}
@media (min-width:481px) and (max-width:900px) { main { padding:16px 24px; } }

/* ---- tela grande: usar a tela inteira ---- */
main { max-width:none; }
.layout > .dlist { grid-column:1 / -1; }
@media (min-width:1100px) { main { padding:20px 28px; } .layout { grid-template-columns:minmax(360px,28%) 1fr; } .map.tall { height:calc(100vh - 300px); min-height:460px; } }
@media (min-width:1500px) {
  .layout { grid-template-columns:400px 1fr 440px; }
  .layout > .dlist { grid-column:auto; max-height:calc(100vh - 300px); overflow:auto; }
  .map.tall { height:calc(100vh - 360px); }
}

/* painel da loja: esquerda = Entregas, Nova entrega e configurações empilhadas; direita = mapa grande */
.col-left { display:grid; gap:16px; align-content:start; min-width:0; }
.layout { grid-template-columns:minmax(380px,34%) 1fr; }
@media (min-width:1500px) { .layout { grid-template-columns:480px 1fr; } }
@media (min-width:901px) { .col-left .dlist { max-height:46vh; overflow:auto; } .mapcard { position:sticky; top:76px; } .map.tall { height:calc(100vh - 230px); min-height:460px; } }
@media (max-width:900px) {
  .layout { grid-template-columns:1fr; } .col-left { display:contents; }
  .layout .dlist { order:1; max-height:none; } .layout .newcard { order:2; } .layout .mapcard { order:3; } .layout .acc { order:4; }
}

/* relatório da loja abre no lugar do mapa */
.rptlink { background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:14px 16px; font-weight:700; cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
.rptlink span { color:var(--brand); font-weight:600; font-size:13px; } .rptlink:hover { border-color:var(--brand); }
.rptpanel[hidden] { display:none; }
@media (min-width:901px) { .col-left { grid-column:1; grid-row:1; } .layout > .mapcard, .layout > .rptpanel { grid-column:2; grid-row:1; } .rptpanel { align-self:start; } }
@media (max-width:900px) { .layout .rptlink { order:4; } .layout .rptpanel { order:3; } }
/* mapa menor: mais espaço para a coluna da esquerda */
@media (min-width:901px) { .layout { grid-template-columns:minmax(420px,42%) 1fr; } .map.tall { height:clamp(340px, calc(100vh - 430px), 460px); min-height:340px; } }
@media (min-width:1500px) { .layout { grid-template-columns:580px 1fr; } }
/* painel da loja: tudo numa coluna só, um embaixo do outro, mapa por último */
.layout { grid-template-columns:1fr !important; }
.col-left { display:grid !important; grid-column:auto !important; grid-row:auto !important; }
.layout > .mapcard { grid-column:auto !important; grid-row:auto !important; position:static !important; }
.layout .dlist, .layout .newcard, .layout .mapcard, .layout .acc { order:0 !important; }
.col-left .dlist { max-height:520px; overflow:auto; }
.map.tall { height:clamp(520px, 85vh, 900px) !important; min-height:520px; }
/* barra de rolagem sempre visível (no Mac ela costuma ficar escondida) */
html { overflow-y:scroll; scrollbar-width:auto; scrollbar-color:#e8590c #e9ecf0; }
* { scrollbar-width:auto; scrollbar-color:#e8590c #e9ecf0; }
::-webkit-scrollbar { width:14px; height:14px; }
::-webkit-scrollbar-track { background:#e9ecf0; border-radius:8px; }
::-webkit-scrollbar-thumb { background:#e8590c; border-radius:8px; border:3px solid #e9ecf0; min-height:40px; min-width:40px; }
::-webkit-scrollbar-thumb:hover { background:#c94a08; }
::-webkit-scrollbar-corner { background:#e9ecf0; }

/* painel da loja: menu à esquerda (no celular, faixa no topo) */
main.shell { display:grid; grid-template-columns:1fr; gap:16px; align-items:start; }
.menu { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; }
.menu button { background:var(--card); color:var(--ink); border:1px solid var(--line); white-space:nowrap; text-align:left; }
.menu button.on { background:var(--brand); color:#fff; border-color:var(--brand); }
.pages { min-width:0; } .pages > section { display:none; gap:16px; } .pages > section.on { display:grid; }
.pages .dlist { max-height:520px; overflow:auto; }
@media (min-width:900px) { main.shell { grid-template-columns:220px 1fr; } .menu { flex-direction:column; position:sticky; top:76px; overflow:visible; } .menu button { padding:12px 14px; font-size:15px; } }

a.mlink { display:block; text-decoration:none; background:#1c1f24; color:#fff; border-radius:10px; padding:12px 14px; font-weight:700; white-space:nowrap; text-align:left; }
a.mlink:hover { background:#2b2f36; }
/* olhinho de mostrar/esconder senha */
.pwwrap { position:relative; display:block; } .pwwrap input { padding-right:46px; }
.pwwrap .eye { position:absolute; right:4px; top:50%; transform:translateY(-50%); width:38px; height:34px; padding:0; margin:0; background:transparent; border:0; box-shadow:none; color:inherit; font-size:18px; line-height:1; cursor:pointer; }
.pwwrap .eye:hover { background:rgba(0,0,0,.06); border-radius:8px; }

/* logo da loja */
.brand img.logo { object-fit:contain; background:#fff; border:1px solid var(--line); padding:2px; }
.logobox { display:flex; gap:16px; align-items:center; margin-bottom:16px; flex-wrap:wrap; }
.logoprev { width:110px; height:110px; border:2px dashed var(--line); border-radius:16px; background:#fff; display:grid; place-items:center; overflow:hidden; color:var(--muted); font-size:13px; text-align:center; }
.logoprev img { width:100%; height:100%; object-fit:contain; }

/* filtros do relatório */
.rpfilters { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; margin-top:10px; }
.rpfilters label { display:grid; gap:4px; font-size:13px; color:var(--muted); font-weight:600; } .rpfilters input, .rpfilters select { margin:0; min-width:150px; }
@media print { .rpfilters { display:none !important; } }

/* logo da loja enquadrado: quadrado com cantos arredondados */
.brand img.logo { object-fit:cover; background:#fff; border:0; padding:0; border-radius:22%; }
.logoprev { border-radius:22%; } .logoprev img { object-fit:cover; border-radius:22%; }
.seg button.on { background:var(--brand); color:#fff; }

/* pedidos aguardando (WhatsApp) */
#waiting { border-color:rgba(37,211,102,.45); }
.loc { border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin-bottom:10px; background:#fff; }
.loc.new { animation:locflash 1.2s ease 4; } @keyframes locflash { 50% { background:rgba(37,211,102,.25); } }
.loc .wait { color:var(--muted); font-size:13px; font-weight:600; white-space:nowrap; }
button.small { padding:5px 10px; font-size:13px; }
.nocourier { background:rgba(201,42,42,.1); border:1px solid rgba(201,42,42,.4); color:var(--bad); border-radius:10px; padding:8px 10px; margin-top:8px; font-weight:600; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* primeiro nome do entregador online (painel da loja e monitor) */
.kpi .who { font-size:12px; color:var(--ok); font-weight:700; margin-top:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.leaflet-tooltip.cname { background:#1c1f24; color:#fff; border:0; border-radius:8px; padding:2px 8px; font-weight:700; font-size:12px; box-shadow:0 1px 4px rgba(0,0,0,.4); }
.leaflet-tooltip-bottom.cname::before { border-bottom-color:#1c1f24; }

.wholine { margin-top:6px; padding:6px 10px; background:rgba(43,138,62,.1); border-radius:10px; font-size:14px; }
.kpi .who.busy { color:var(--warn); }

/* painel do entregador: menu sempre à esquerda (faixa de ícones no celular/tablet, com texto no computador) */
main.cshell { display:grid; grid-template-columns:76px minmax(0,1fr); gap:12px; align-items:start; max-width:none; margin:0; padding:12px; }
.cmenu { display:flex; flex-direction:column; gap:8px; position:sticky; top:72px; }
.cmenu button { display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 2px; font-size:11px; line-height:1.15; background:var(--card); color:var(--ink); border:1px solid var(--line); text-align:center; }
.cmenu button i { font-style:normal; font-size:24px; }
.cmenu button.on { background:var(--brand); color:#fff; border-color:var(--brand); }
.cmenu button .bdg { position:absolute; }
.cpages { min-width:0; } .cpages > section { display:none; gap:16px; } .cpages > section.on { display:grid; }
@media (min-width:700px) { main.cshell { grid-template-columns:96px minmax(0,1fr); gap:16px; } .cmenu button { font-size:13px; padding:12px 4px; } }
@media (min-width:1000px) { main.cshell { grid-template-columns:220px minmax(0,1fr); padding:16px; }
  .cmenu button { flex-direction:row; gap:10px; padding:12px 14px; font-size:15px; text-align:left; } .cmenu button i { font-size:20px; } }
.avatar { width:110px; height:110px; border-radius:22%; border:2px dashed var(--line); background:#fff; display:grid; place-items:center; overflow:hidden; color:var(--muted); font-size:13px; text-align:center; flex:none; }
.avatar img { width:100%; height:100%; object-fit:cover; }
.brand img.logo { object-fit:cover; background:#fff; border:0; padding:0; border-radius:22%; }
.hrow { display:flex; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); font-size:14px; }
.hrow:last-child { border-bottom:0; } .hrow b { white-space:nowrap; }
.hfilter { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
input[disabled] { opacity:.65; }

/* conferência de documentos do entregador (admin) */
.docmodal { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:3000; overflow:auto; padding:16px; }
.docbox { background:var(--card); border-radius:14px; padding:16px; max-width:1100px; margin:0 auto; }
.docgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; }
.docgrid figure { margin:0; } .docgrid figcaption { font-weight:700; font-size:14px; margin-bottom:4px; }
.docgrid img { width:100%; border-radius:10px; border:1px solid var(--line); background:#fff; }
.cphoto { width:40px; height:40px; border-radius:22%; object-fit:cover; vertical-align:middle; margin-right:10px; background:#fff; border:1px solid var(--line); }
.cphoto.none { display:inline-grid; place-items:center; font-size:20px; color:var(--muted); }
.cphoto.big { width:88px; height:88px; }

/* lista de entregadores: em tela estreita os botões vão para baixo do nome (a última coluna sairia da tela) */
.act-narrow { display:none; }
@media (max-width:1100px) { .act-wide { display:none; } .act-narrow { display:flex; flex-wrap:wrap; } }

/* escolher localização no mapa */
.lp-bar { display:flex; gap:8px; flex-wrap:wrap; } .lp-bar .lp-q { flex:1; min-width:220px; }
.lp-res { display:grid; gap:6px; margin-top:6px; } .lp-res .lp-r { text-align:left; font-weight:400; font-size:13px; }
.lp-map { height:320px; border-radius:12px; margin-top:8px; border:1px solid var(--line); z-index:0; }
.lp-hint { margin-top:6px; }

/* páginas de termos e privacidade */
main.legal { display:block; max-width:760px; margin:0 auto; padding:20px 16px 48px; line-height:1.6; }
main.legal h1 { font-size:26px; margin:8px 0; } main.legal h2 { font-size:18px; margin:26px 0 6px; }
main.legal p, main.legal li { font-size:16px; } main.legal ul { padding-left:22px; }
mark { background:#fff3bf; color:#5c4400; padding:1px 4px; border-radius:4px; }

footer.rights { text-align:center; color:var(--muted); font-size:13px; padding:22px 12px 28px; }