/* ── Reset + base mobile-first ─────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  background:#0a0a0f;color:#e8e9ed;line-height:1.45;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  min-height:100vh;min-height:100dvh;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
a{color:inherit;text-decoration:none;}
h1,h2,h3{line-height:1.2;font-weight:800;letter-spacing:-0.02em;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
input,select{font-family:inherit;font-size:16px;}
:focus-visible{outline:2px solid #ff5a31;outline-offset:2px;border-radius:6px;}
.muted{color:#888;font-weight:400;}
.small{font-size:13px;}
[hidden]{display:none !important;}

.tela{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;}

/* ── Login ─────────────────────────────────────────────── */
.login-wrap{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:40px 24px;max-width:420px;margin:0 auto;width:100%;
}
.logo-grande{font-size:32px;letter-spacing:-0.02em;margin-bottom:48px;text-align:center;}
.logo-grande b{color:#ff5a31;}
.login-wrap h1{font-size:32px;margin-bottom:8px;}
.login-wrap p{color:#b8bac3;margin-bottom:32px;}
.login-wrap label{display:block;font-size:14px;color:#b8bac3;margin-bottom:8px;font-weight:600;}
.login-wrap input{
  width:100%;padding:16px 18px;font-size:17px;
  background:#13131c;border:1.5px solid #2a2a3a;border-radius:12px;
  color:#fff;margin-bottom:16px;
  transition:border-color .15s;
}
.login-wrap input:focus{outline:none;border-color:#ff5a31;}
.login-wrap button{
  width:100%;padding:16px;font-size:16px;font-weight:700;
  background:#ff5a31;color:#fff;border-radius:12px;
  transition:transform .1s,background .15s;
}
.login-wrap button:active{transform:scale(.98);}
.login-wrap button:disabled{background:#3a3a45;color:#888;}
.login-wrap .small{margin-top:32px;text-align:center;}
#msg-login{margin-top:12px;font-size:14px;min-height:20px;}
#msg-login .err{color:#ff5a31;}

/* ── App bar ──────────────────────────────────────────── */
.appbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;background:#0d0d14;border-bottom:1px solid #1a1a24;
  position:sticky;top:0;z-index:30;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.appbar-loja{font-size:11px;color:#888;font-weight:600;letter-spacing:.04em;text-transform:uppercase;}
.appbar-nome{font-size:16px;font-weight:700;}
.btn-icon{
  width:40px;height:40px;border-radius:10px;
  background:#1a1a24;font-size:18px;
  display:flex;align-items:center;justify-content:center;
}
.btn-icon:active{background:#252535;}
.appbar-acoes{display:flex;align-items:center;gap:10px;}
.badge-gps{
  font-size:11px;font-weight:700;white-space:nowrap;
  color:#fca5a5;background:#3a0f14;border:1px solid #7f1d1d;
  border-radius:12px;padding:4px 10px;
}

.conteudo{flex:1;padding:16px;display:flex;flex-direction:column;gap:24px;}

/* ── Entrega ativa ────────────────────────────────────── */
.card-ativa{
  background:linear-gradient(180deg,#1a1109 0%,#13131c 100%);
  border:1.5px solid #ff5a31;border-radius:16px;padding:18px;
  box-shadow:0 10px 30px -10px rgba(255,90,49,0.4);
}
.ativa-titulo{
  display:flex;align-items:center;gap:8px;
  font-size:12px;color:#ff5a31;text-transform:uppercase;letter-spacing:.06em;font-weight:700;
  margin-bottom:12px;
}
.status-dot{
  width:8px;height:8px;border-radius:50%;background:#ff5a31;
  animation:pulse 1.5s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.5;transform:scale(1.3);}}
.ativa-cliente{margin-bottom:6px;}
.ativa-nome{font-size:20px;font-weight:800;}
.ativa-tel{font-size:14px;color:#b8bac3;}
.ativa-endereco{font-size:14px;color:#b8bac3;margin-bottom:16px;}
.ativa-acoes{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;}
.ativa-acoes .btn{flex:1;min-width:0;}
.ativa-status-acoes{display:flex;gap:8px;flex-wrap:wrap;}
.btn-status{
  flex:1;min-width:0;padding:12px;border-radius:10px;
  background:#1a1a24;color:#e8e9ed;font-weight:700;font-size:14px;
  border:1.5px solid #2a2a3a;
}
.btn-status:active{transform:scale(.97);}
.btn-status.ativo{background:#ff5a31;border-color:#ff5a31;color:#fff;}
.btn-status-ok{background:#0f3a26;border-color:#16a34a;color:#4ade80;}
.btn-status-ok:active{background:#16a34a;color:#fff;}
.btn-status-cancel{background:#3a0f14;border-color:#7f1d1d;color:#fca5a5;flex:0 0 auto;}

/* ── Multiplas ativas (ate 3 por motoboy) ─────────────── */
.sec-ativas h2{
  font-size:13px;text-transform:uppercase;letter-spacing:.06em;
  color:#ff5a31;font-weight:700;margin-bottom:10px;
}
.lista-ativas{display:flex;flex-direction:column;gap:12px;}
.ativa-cod{margin-left:auto;color:#888;font-weight:700;letter-spacing:0;}

/* ── Banners de liberacao no card ─────────────────────── */
.banner{border-radius:10px;padding:10px 12px;font-size:13px;font-weight:600;margin-bottom:14px;}
.banner-ok{background:#0f3a26;border:1px solid #16a34a;color:#4ade80;}
.banner-espera{background:#2a1c06;border:1px solid #b45309;color:#fdba74;}

/* ── Codigo de entrega (4 digitos do cliente) ─────────── */
.codigo-box{margin-top:14px;background:#0f0f17;border:1px solid #2a2a3a;border-radius:12px;padding:14px;}
.codigo-box label{display:block;font-size:13px;color:#b8bac3;font-weight:600;margin-bottom:8px;}
.codigo-input{
  width:100%;padding:12px;font-size:28px;font-weight:800;text-align:center;
  letter-spacing:.4em;background:#13131c;border:1.5px solid #2a2a3a;border-radius:10px;color:#fff;
}
.codigo-input:focus{outline:none;border-color:#ff5a31;}
.codigo-msg{font-size:13px;color:#fca5a5;font-weight:600;margin-top:8px;min-height:18px;}
.codigo-box .btn{width:100%;margin-top:8px;}
.btn-link{
  display:block;width:100%;text-align:center;margin-top:10px;padding:8px 6px;
  font-size:13px;font-weight:600;color:#fdba74;text-decoration:underline;
}
.btn-link:disabled{opacity:.5;}

/* ── Botoes ────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:12px 16px;border-radius:10px;font-weight:700;font-size:14px;
  text-align:center;transition:transform .1s,background .15s;
}
.btn:active{transform:scale(.97);}
.btn-primario{background:#ff5a31;color:#fff;}
.btn-primario:hover{background:#ff6f4d;}
.btn-secundario{background:#1a1a24;color:#e8e9ed;border:1.5px solid #2a2a3a;}
.btn-grande{padding:18px;font-size:16px;width:100%;}

/* ── Lista pendentes ──────────────────────────────────── */
.pendentes h2,.historico h2{
  font-size:13px;text-transform:uppercase;letter-spacing:.06em;
  color:#888;font-weight:700;margin-bottom:10px;
}
.lista{display:flex;flex-direction:column;gap:10px;}
.item-entrega{
  background:#13131c;border:1px solid #1f1f2c;border-radius:14px;
  padding:14px 16px;display:flex;justify-content:space-between;align-items:center;
  cursor:pointer;transition:border-color .15s,transform .1s;
  gap:12px;
}
.item-entrega:active{transform:scale(.98);}
.item-entrega:hover{border-color:#2a2a3a;}
.item-info{flex:1;min-width:0;}
.item-cliente{font-weight:700;font-size:15px;margin-bottom:2px;}
.item-end{font-size:13px;color:#888;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.item-meta{text-align:right;flex:0 0 auto;}
.item-taxa{font-size:17px;font-weight:800;color:#4ade80;}
.item-tempo{font-size:11px;color:#888;}

.vazio{text-align:center;padding:40px 20px;background:#0f0f17;border-radius:14px;}
.vazio-emoji{font-size:48px;margin-bottom:12px;opacity:.5;}
.vazio p{color:#888;margin-bottom:4px;}

/* ── Historico ────────────────────────────────────────── */
.lista-mini{display:flex;flex-direction:column;gap:6px;}
.item-mini{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 14px;background:#0f0f17;border-radius:10px;font-size:13px;
}
.item-mini-cliente{color:#b8bac3;}
.item-mini-taxa{color:#4ade80;font-weight:700;}
.vazio-mini{font-size:13px;padding:14px;text-align:center;}

/* ── Modal ────────────────────────────────────────────── */
.modal{
  position:fixed;inset:0;z-index:100;
  background:rgba(0,0,0,0.7);
  display:flex;align-items:flex-end;justify-content:center;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  animation:fadeIn .15s ease-out;
}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.modal-card{
  background:#13131c;border:1px solid #2a2a3a;
  border-radius:20px 20px 0 0;
  width:100%;max-width:480px;
  padding:24px 20px calc(24px + env(safe-area-inset-bottom));
  max-height:90vh;overflow-y:auto;
  animation:slideUp .25s cubic-bezier(.2,.9,.3,1.2);
  position:relative;
}
@media (min-width:520px){
  .modal{align-items:center;padding:20px;}
  .modal-card{border-radius:20px;}
}
@keyframes slideUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
.modal-x{
  position:absolute;top:14px;right:14px;
  width:36px;height:36px;border-radius:50%;
  background:#1a1a24;font-size:20px;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.modal-titulo{font-size:20px;font-weight:800;margin-bottom:18px;}
.modal-bloco{margin-bottom:14px;}
.modal-row{display:flex;gap:24px;}
.modal-row > div{flex:1;}
.modal-label{font-size:11px;color:#888;text-transform:uppercase;letter-spacing:.05em;font-weight:600;display:block;margin-bottom:4px;}
.modal-valor{font-size:16px;font-weight:600;}
.modal-valor.verde{color:#4ade80;}
.modal-mapa{
  display:block;background:#0f0f17;border:1px solid #1f1f2c;
  padding:14px;border-radius:10px;text-align:center;
  margin-bottom:18px;color:#ff5a31;font-weight:700;font-size:14px;
}

/* ── Toast ─────────────────────────────────────────────── */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:#1a1a24;border:1px solid #2a2a3a;color:#fff;
  padding:12px 20px;border-radius:24px;font-size:14px;font-weight:600;
  box-shadow:0 12px 30px -8px rgba(0,0,0,0.6);
  z-index:200;
  animation:slideToast .25s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes slideToast{from{opacity:0;transform:translateX(-50%) translateY(20px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}
.toast.sucesso{border-color:#16a34a;background:#0f3a26;color:#4ade80;}
.toast.erro{border-color:#7f1d1d;background:#3a0f14;color:#fca5a5;}

/* ── Loading dot pulsante no titulo ─────────────────────── */
.live-dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:#4ade80;margin-left:6px;vertical-align:middle;
  animation:pulse 1.5s ease-in-out infinite;
}