/* Zunno Entregador (pacote 192). Identidade visual Zunno: tema escuro = modelo I (moldura preta, área e cartões grafite),
   tema claro = modelo F (moldura grafite, área cinza concreto, cartões brancos, ativo laranja). Feito para o celular:
   botões grandes, um passo de cada vez. */
:root{
  --laranja:#FF5A00;--laranja-hover:#FF7429;--laranja-press:#E04F00;--verde:#22C55E;--amarelo:#F5B70A;--vermelho:#EF4444;
  --fonte:"Inter Tight","Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
:root,[data-tema="claro"]{
  color-scheme:light;
  --moldura:#2A2E35;--moldura-borda:#1E2127;--moldura-texto:#E4E7EB;--moldura-fraco:#9AA1AB;
  --fundo:#F2F4F6;--barra:#DDE1E6;--cartao:#FFFFFF;--borda:#D9DDE2;--sombra:0 1px 3px rgba(16,24,40,.08);
  --interno:#F2F4F6;--titulo:#14171C;--texto:#3A3F47;--suave:#6B727C;--campo:#FFFFFF;--campo-borda:#C9CED5;
  --botao:#FFFFFF;--botao-borda:#C9CED5;--ativo-fundo:#FF5A00;--ativo-texto:#FFFFFF;--laranja-texto:#C2410C;
  --verde-fundo:rgba(34,197,94,.12);--verde-texto:#15803D;--amarelo-fundo:rgba(245,183,10,.16);--amarelo-texto:#92400E;--vermelho-texto:#B91C1C;
}
[data-tema="escuro"]{
  color-scheme:dark;
  --moldura:#0B0C0E;--moldura-borda:#202328;--moldura-texto:#D9DCE1;--moldura-fraco:#7D848E;
  --fundo:#18191C;--barra:#0B0C0E;--cartao:#222428;--borda:#2F3237;--sombra:0 2px 8px rgba(0,0,0,.45);
  --interno:#1A1C1F;--titulo:#F4F5F7;--texto:#C3C8D0;--suave:#8B929C;--campo:#1A1C1F;--campo-borda:#3A3E45;
  --botao:#2A2D32;--botao-borda:#3A3E45;--ativo-fundo:#2B1407;--ativo-texto:#FF7A33;--laranja-texto:#FF7A33;
  --verde-fundo:rgba(34,197,94,.14);--verde-texto:#4ADE80;--amarelo-fundo:rgba(245,183,10,.14);--amarelo-texto:#FACC15;--vermelho-texto:#F87171;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--fundo);color:var(--texto);font:16px/1.45 var(--fonte);-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
h1,h2,h3{color:var(--titulo);margin:0}
button,input,textarea{font:inherit}
.escondido{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.suave{color:var(--suave);font-size:14px;margin:4px 0}
.pequeno-texto{font-size:13px}

/* ---- topo ---- */
.topo{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;padding-top:max(10px,env(safe-area-inset-top));background:var(--moldura);border-bottom:1px solid var(--moldura-borda)}
.marca{display:flex;align-items:center;gap:9px;min-width:0}
.marca-z{width:34px;height:34px;object-fit:contain}
.marca-texto{display:flex;flex-direction:column;gap:3px;line-height:1}
.marca-nome{height:15px;width:auto;display:block}
.marca-produto{font:700 9.5px/1 var(--mono);letter-spacing:.2em;color:#9AA1AB}
.topo-acoes{display:flex;align-items:center;gap:8px}
.tema{display:flex;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:2px}
.tema button{border:0;background:transparent;color:var(--moldura-fraco);font-size:12px;font-weight:600;padding:5px 10px;border-radius:999px;cursor:pointer;min-height:30px}
.tema button[aria-pressed="true"]{background:var(--laranja);color:#fff}
.icone-botao{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:transparent;color:var(--moldura-texto);cursor:pointer}
.icone-botao svg{width:22px;height:22px}

.aviso{margin:10px 12px 0;padding:10px 12px;border-radius:12px;background:rgba(239,68,68,.12);color:var(--vermelho-texto);font-size:14px;font-weight:600}
.aviso.bom{background:var(--verde-fundo);color:var(--verde-texto)}
.erro{margin:10px 0 0;padding:10px 12px;border-radius:10px;background:rgba(239,68,68,.12);color:var(--vermelho-texto);font-size:14px;font-weight:600}

.tela{max-width:640px;margin:0 auto;padding:12px 12px calc(28px + env(safe-area-inset-bottom))}

/* ---- botões e campos ---- */
.botao{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:10px 16px;border-radius:12px;border:1px solid var(--botao-borda);background:var(--botao);color:var(--titulo);font-weight:700;font-size:16px;text-decoration:none;cursor:pointer;flex:1 1 0;min-width:0}
.botao svg{width:20px;height:20px;flex:none}
.botao.principal{background:var(--laranja);border-color:var(--laranja);color:#fff}
.botao.principal:active{background:var(--laranja-press)}
.botao.verde{background:var(--verde);border-color:var(--verde);color:#fff}
.botao.perigo{color:var(--vermelho-texto)}
.botao.perigo-cheio{background:var(--vermelho);border-color:var(--vermelho);color:#fff}
.botao.quieto{background:transparent;flex:0 0 auto}
.botao.pequeno{min-height:38px;padding:6px 12px;font-size:14px}
.botao.grande{min-height:56px;font-size:17px;width:100%}
.botao:disabled{opacity:.5;cursor:default}
.botao:focus-visible,input:focus-visible,textarea:focus-visible,.camera:focus-within{outline:3px solid var(--laranja);outline-offset:2px}
label,.rotulo-campo{display:block;margin:14px 0 6px;font-size:14px;font-weight:600;color:var(--titulo)}
input,textarea{width:100%;padding:13px 14px;border-radius:12px;border:1px solid var(--campo-borda);background:var(--campo);color:var(--titulo);font-size:17px}
textarea{resize:vertical}

/* ---- entrar ---- */
.tela-entrar{display:flex;justify-content:center;padding-top:28px}
.entrar-cartao{width:100%;max-width:420px;background:var(--cartao);border:1px solid var(--borda);box-shadow:var(--sombra);border-radius:18px;padding:24px 20px;text-align:left}
.entrar-icone{display:block;margin:0 auto 12px;border-radius:16px}
.entrar-cartao h1{text-align:center;font-size:24px}
.entrar-cartao>p{text-align:center}
.entrar-cartao form{margin-top:8px}
.entrar-cartao .botao{margin-top:18px}
.senha{position:relative}
.senha input{padding-right:70px}
.ver-senha{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--laranja-texto);font-weight:700;padding:8px 10px;cursor:pointer}

/* ---- lista ---- */
.ola{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin:4px 2px 12px}
.rotulo{font:700 11px/1 var(--mono);letter-spacing:.14em;color:var(--suave);text-transform:uppercase}
.ola h1{font-size:24px;margin-top:6px}
.numeros{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.numeros div{background:var(--cartao);border:1px solid var(--borda);border-radius:14px;padding:10px 12px;box-shadow:var(--sombra)}
.numeros b{display:block;font-size:24px;color:var(--titulo);line-height:1.1}
.numeros span{font-size:12px;color:var(--suave)}
.numeros .em-rota b{color:var(--laranja-texto)}
.numeros .feitas b{color:var(--verde-texto)}
.abas{display:flex;background:var(--barra);border-radius:12px;padding:3px;margin-bottom:12px}
[data-tema="escuro"] .abas{border:1px solid var(--borda)}
.abas button{flex:1;border:0;background:transparent;color:var(--suave);font-weight:700;min-height:42px;border-radius:9px;cursor:pointer}
.abas button[aria-selected="true"]{background:var(--ativo-fundo);color:var(--ativo-texto)}
[data-tema="escuro"] .abas button[aria-selected="true"]{box-shadow:inset 0 -2px 0 var(--laranja)}
.vazio{text-align:center;padding:36px 12px;color:var(--suave);background:var(--cartao);border:1px dashed var(--borda);border-radius:16px}
.vazio b{display:block;color:var(--titulo);font-size:17px;margin-bottom:4px}
.cartao{background:var(--cartao);border:1px solid var(--borda);border-radius:16px;padding:14px;margin-bottom:12px;box-shadow:var(--sombra)}
.cartao.em_rota{border:2px solid var(--laranja)}
.cartao.entregue,.cartao.cancelado{opacity:.75}
.cartao-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.cartao-cab h2{font-size:18px;line-height:1.25}
.parada{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 6px;border-radius:8px;background:var(--interno);border:1px solid var(--borda);font:700 13px/1 var(--mono);color:var(--titulo);margin-right:8px;vertical-align:2px}
.selo{flex:none;font-size:12px;font-weight:700;border-radius:999px;padding:4px 10px;background:var(--interno);color:var(--suave);border:1px solid var(--borda)}
.selo.em_rota{background:rgba(255,90,0,.14);color:var(--laranja-texto);border-color:transparent}
.selo.entregue{background:var(--verde-fundo);color:var(--verde-texto);border-color:transparent}
.selo.cancelado{background:rgba(239,68,68,.12);color:var(--vermelho-texto);border-color:transparent}
.bairro{display:inline-block;margin-top:8px;font:700 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--laranja-texto)}
.endereco{font-size:18px;font-weight:700;color:var(--titulo);margin:4px 0 2px}
.ref{font-size:14px;color:var(--amarelo-texto);margin:2px 0}
.detalhes{margin-top:8px;border-top:1px solid var(--borda);padding-top:8px}
.detalhes summary{cursor:pointer;color:var(--suave);font-size:14px;font-weight:600;min-height:32px;display:flex;align-items:center}
.detalhes ul{margin:6px 0 0;padding-left:18px;font-size:15px}
.cobrar{margin:10px 0 0;padding:10px 12px;border-radius:12px;background:var(--interno);display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:14px}
.cobrar b{font-size:18px;color:var(--titulo)}
.nota-linha{font-size:14px;margin:6px 0 0;color:var(--suave)}
.contatos{display:flex;gap:8px;margin-top:12px}
.contatos .botao{flex:1 1 0;min-width:0;min-height:46px;padding:0 6px;font-size:14px;white-space:nowrap;gap:4px}
.acoes{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.acoes .botao{flex:1 1 auto;white-space:nowrap}
.acoes .botao.principal{flex:2 1 auto}
.feito-linha{margin:8px 0 0;font-size:14px;color:var(--verde-texto);font-weight:600}

/* ---- passo a passo ---- */
.tela-entrega{padding-top:8px}
.entrega-topo{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.entrega-topo .icone-botao{border-color:var(--borda);color:var(--titulo);background:var(--cartao)}
.entrega-titulos{min-width:0}
.entrega-titulos h2{font-size:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.entrega-titulos p{margin:0}
.passos{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;list-style:none;margin:0 0 14px;padding:0}
.passos li{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--suave);text-align:center}
.passos li span{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--cartao);border:2px solid var(--borda);font-weight:800;color:var(--suave)}
.passos li.atual{color:var(--titulo)}
.passos li.atual span{border-color:var(--laranja);color:var(--laranja-texto)}
.passos li.ok span{background:var(--laranja);border-color:var(--laranja);color:#fff}
.passo{background:var(--cartao);border:1px solid var(--borda);border-radius:16px;padding:16px;box-shadow:var(--sombra)}
.passo h3{font-size:19px;margin-bottom:4px}
.dica{margin:8px 0 0;padding:8px 10px;border-radius:10px;background:var(--interno);font-size:14px}
.camera{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;margin:14px 0 0;min-height:128px;border:2px dashed var(--laranja);border-radius:16px;background:rgba(255,90,0,.06);color:var(--laranja-texto);font-weight:800;font-size:17px;cursor:pointer;text-align:center}
.camera svg{width:40px;height:40px}
.camera.ocupada{opacity:.6;pointer-events:none}
.leitura{margin:12px 0 0;padding:10px 12px;border-radius:12px;font-size:15px;font-weight:700;background:var(--interno)}
.leitura.ok{background:var(--verde-fundo);color:var(--verde-texto)}
.leitura.atencao{background:var(--amarelo-fundo);color:var(--amarelo-texto)}
.miniaturas{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.miniatura{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--interno);border:1px solid var(--borda)}
.miniatura img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in}
.miniatura button{position:absolute;top:4px;right:4px;width:32px;height:32px;border-radius:50%;border:0;background:rgba(0,0,0,.65);color:#fff;font-size:18px;line-height:1;cursor:pointer}
.miniatura.enviando::after{content:"Enviando…";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);color:#fff;font-size:13px;font-weight:700}
.linha-rotulo{display:flex;justify-content:space-between;align-items:center;margin-top:14px}
.linha-rotulo .rotulo-campo{margin:0}
.quadro-assinatura{position:relative;margin-top:8px;height:210px;border-radius:14px;border:2px solid var(--campo-borda);background:#fff;overflow:hidden;touch-action:none}
.quadro-assinatura canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
.quadro-assinatura::after{content:"";position:absolute;left:18px;right:18px;bottom:44px;border-bottom:1.5px dashed #b7bcc4;pointer-events:none}
.assinatura-dica{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-size:13px;color:#8a9099;pointer-events:none}
.quadro-assinatura.assinado .assinatura-dica{display:none}
.quadro-assinatura img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff}
.resumo{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.resumo li{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:var(--interno);font-size:15px}
.resumo li::before{content:"✓";flex:none;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--verde);color:#fff;font-weight:800;font-size:14px}
.resumo li.falta::before{content:"!";background:var(--amarelo);color:#111}
.resumo li.opcional::before{content:"–";background:var(--borda);color:var(--titulo)}
.rodape-passos{position:sticky;bottom:0;display:flex;gap:10px;margin:14px -12px 0;padding:12px 12px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--fundo) 75%,transparent)}
.passo-feito{text-align:center;padding:30px 16px}
.feito-icone{width:84px;height:84px;margin:0 auto 14px;border-radius:50%;background:var(--verde);color:#fff;display:flex;align-items:center;justify-content:center;font-size:46px;font-weight:800}

/* ---- janelas ---- */
dialog{width:min(92vw,460px);border:1px solid var(--borda);border-radius:18px;padding:18px;background:var(--cartao);color:var(--texto);box-shadow:0 20px 60px rgba(0,0,0,.4)}
dialog::backdrop{background:rgba(0,0,0,.6)}
dialog h2{font-size:20px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chips button{border:1px solid var(--botao-borda);background:var(--interno);color:var(--titulo);border-radius:999px;padding:8px 12px;font-size:14px;font-weight:600;cursor:pointer;min-height:40px}
.ver-foto{padding:10px;width:min(96vw,720px)}
.ver-foto img{width:100%;max-height:75vh;object-fit:contain;display:block;border-radius:10px;margin-bottom:10px}
.ver-foto .botao{width:100%}
@media (min-width:700px){.tela{padding-top:20px}}