/* ===========================================================
   AM EXPRESS · Rotas — Design System
   Ferramenta de campo: alto contraste, toque generoso,
   número da parada como elemento herói.
   =========================================================== */

:root{
  /* Marca */
  --navy:        #0D1D56;
  --navy-700:    #122a73;
  --navy-900:    #08123c;
  --royal:       #2B5CE6;
  --royal-600:   #1f49c4;
  --royal-300:   #6f97ff;

  /* Superfícies */
  --bg:          #eef1f8;
  --surface:     #ffffff;
  --surface-2:   #f6f8fd;
  --border:      #e2e8f0;
  --border-2:    #cdd6e6;

  /* Texto */
  --ink:         #0d152e;
  --muted:       #64748b;
  --muted-2:     #94a3b8;

  /* Status */
  --ok:          #15a34a;
  --ok-bg:       #e7f8ee;
  --warn:        #e08600;
  --warn-bg:     #fdf2dd;
  --danger:      #dc2626;
  --danger-bg:   #fdeaea;
  --info-bg:     #e8efff;

  --radius:      16px;
  --radius-sm:   11px;
  --shadow:      0 1px 2px rgba(13,29,86,.06), 0 8px 24px -12px rgba(13,29,86,.18);
  --shadow-lg:   0 24px 60px -20px rgba(8,18,60,.45);
  --tab-h:       60px;
  --header-h:    56px;
  --safe-b:      env(safe-area-inset-bottom, 0px);
  --safe-t:      env(safe-area-inset-top, 0px);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; }
html{ height:100%; background:var(--bg); }
body{
  min-height:100vh;
  min-height:100svh;
  min-height:100dvh;
  min-height:-webkit-fill-available;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:16px;
  line-height:1.45;
  overscroll-behavior-y:none;
  -webkit-font-smoothing:antialiased;
}
.cond{ font-family:"Saira Condensed","Inter",sans-serif; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; font-size:16px; }
::selection{ background:var(--royal-300); color:#fff; }

#app{ min-height:100vh; min-height:100svh; min-height:100dvh; min-height:-webkit-fill-available; display:flex; flex-direction:column; }

/* ---------- App shell ---------- */
.app-shell{
  flex:1; display:flex; flex-direction:column;
  max-width:560px; width:100%; margin:0 auto;
  background:var(--bg);
  position:relative;
}

/* ---------- Header ---------- */
.hdr{
  height:calc(var(--header-h) + var(--safe-t));
  padding-top:var(--safe-t);
  display:flex; align-items:center; gap:12px;
  padding-left:16px; padding-right:16px;
  background:linear-gradient(100deg,var(--navy) 0%, var(--navy-900) 100%);
  color:#fff; position:sticky; top:0; z-index:30;
  box-shadow:0 6px 20px -12px rgba(8,18,60,.7);
}
.hdr__logo{ height:30px; width:auto; opacity:.98; }
.hdr__title{ font-weight:700; font-size:1.02rem; letter-spacing:.2px; }
.hdr__title small{ display:block; font-weight:500; font-size:.7rem; color:var(--royal-300); letter-spacing:.6px; text-transform:uppercase; }
.hdr__spacer{ flex:1; }
.hdr__btn{
  background:rgba(255,255,255,.12); border:none; color:#fff;
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  font-size:1.1rem;
}
.hdr__btn:active{ background:rgba(255,255,255,.25); }

/* ---------- Conteúdo ---------- */
.main{
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:16px 16px calc(var(--tab-h) + var(--safe-b) + 18px);
}
.screen-title{ font-weight:800; font-size:1.35rem; letter-spacing:-.3px; margin:2px 0 14px; }
.screen-title span{ color:var(--royal); }

/* ---------- Cards ---------- */
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:16px; margin-bottom:14px;
}
.card--flush{ padding:0; overflow:hidden; }
.card__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.card__title{ font-weight:700; font-size:1rem; }
.card__hint{ color:var(--muted); font-size:.85rem; }

/* ---------- Dashboard hero ---------- */
.hero{
  background:linear-gradient(135deg,var(--navy) 0%, var(--royal-600) 130%);
  color:#fff; border-radius:var(--radius); padding:18px 18px 16px;
  box-shadow:var(--shadow); margin-bottom:14px; position:relative; overflow:hidden;
}
.hero::after{
  content:""; position:absolute; right:-40px; top:-50px;
  width:170px; height:170px; border-radius:50%;
  background:radial-gradient(circle,rgba(111,151,255,.5),transparent 70%);
}
.hero__date{ font-size:.78rem; text-transform:uppercase; letter-spacing:1px; color:var(--royal-300); font-weight:600; }
.hero__hi{ font-size:1.05rem; font-weight:700; color:#fff; margin-top:2px; }
.hero__big{ font-family:"Saira Condensed",sans-serif; font-weight:800; font-size:3.1rem; line-height:1; margin:6px 0 2px; }
.hero__big small{ font-size:1.1rem; color:#cdd8ff; font-weight:600; }
.hero__sub{ color:#dbe4ff; font-size:.92rem; }
.hero__bar{ height:9px; border-radius:99px; background:rgba(255,255,255,.18); margin-top:14px; overflow:hidden; }
.hero__bar > i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#7dffc4,#26d07c); transition:width .5s ease; }

/* ---------- Stats grid ---------- */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; }
.stat{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:12px 10px; text-align:center; box-shadow:var(--shadow);
}
.stat__num{ font-family:"Saira Condensed",sans-serif; font-weight:800; font-size:1.7rem; line-height:1; color:var(--navy); }
.stat__lbl{ font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; margin-top:4px; }
.stat--ok .stat__num{ color:var(--ok); }
.stat--royal .stat__num{ color:var(--royal); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; border-radius:13px; font-weight:700; font-size:1rem;
  padding:14px 18px; width:100%; transition:transform .05s, filter .15s;
  background:var(--royal); color:#fff;
}
.btn:active{ transform:scale(.98); }
.btn:disabled{ opacity:.5; pointer-events:none; }
.btn--lg{ padding:17px; font-size:1.08rem; }
.btn--navy{ background:var(--navy); }
.btn--ok{ background:var(--ok); }
.btn--danger{ background:var(--danger); }
.btn--ghost{ background:var(--surface-2); color:var(--navy); border:1.5px solid var(--border-2); }
.btn--outline{ background:transparent; color:var(--royal); border:1.5px solid var(--royal); }
.btn-row{ display:flex; gap:10px; }
.btn-row .btn{ width:auto; flex:1; }

/* ---------- Status chips ---------- */
.chip{ display:inline-flex; align-items:center; gap:5px; font-size:.74rem; font-weight:700;
  padding:4px 9px; border-radius:99px; text-transform:uppercase; letter-spacing:.3px; }
.chip--pending{ background:var(--surface-2); color:var(--muted); }
.chip--separated{ background:var(--info-bg); color:var(--royal-600); }
.chip--delivered{ background:var(--ok-bg); color:var(--ok); }
.chip--failed{ background:var(--danger-bg); color:var(--danger); }
.chip--warn{ background:var(--warn-bg); color:var(--warn); }

/* ---------- Stop list ---------- */
.stop{
  display:flex; align-items:center; gap:12px; padding:13px 14px;
  border-bottom:1px solid var(--border);
}
.stop:last-child{ border-bottom:none; }
.stop__num{
  flex:none; width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  font-family:"Saira Condensed",sans-serif; font-weight:800; font-size:1.35rem;
  background:var(--navy); color:#fff;
}
.stop--delivered .stop__num{ background:var(--ok); }
.stop--failed .stop__num{ background:var(--danger); }
.stop--unset .stop__num{ background:var(--surface-2); color:var(--muted-2); border:1.5px dashed var(--border-2); }
.stop__num--multi{ background:var(--danger); }
.stop__body{ flex:1; min-width:0; }
.stop__name{ font-weight:700; font-size:.97rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stop__addr{ color:var(--muted); font-size:.83rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stop__meta{ display:flex; gap:8px; align-items:center; margin-top:4px; }
.stop__chevron{ color:var(--muted-2); font-size:1.2rem; flex:none; }

/* ---------- Forms ---------- */
.field{ margin-bottom:12px; }
.field label{ display:block; font-size:.8rem; font-weight:600; color:var(--muted); margin-bottom:5px; }
.input, .textarea, select.input{
  width:100%; padding:13px 14px; border:1.5px solid var(--border-2); border-radius:12px;
  background:var(--surface); color:var(--ink); outline:none;
}
.input:focus,.textarea:focus{ border-color:var(--royal); box-shadow:0 0 0 3px rgba(43,92,230,.13); }
.textarea{ min-height:74px; resize:vertical; }

/* ---------- Scanner ---------- */
.scan{ position:fixed; inset:0; z-index:60; background:#000; display:flex; flex-direction:column; }
.scan__cam{ position:relative; flex:1; overflow:hidden; }
#reader{ width:100%; height:100%; }
#reader video{ object-fit:cover !important; width:100% !important; height:100% !important; }
.scan__frame{
  position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;
}
.scan__box{
  width:72vw; max-width:330px; aspect-ratio:1.5; border-radius:18px;
  box-shadow:0 0 0 100vmax rgba(0,0,0,.5); position:relative;
}
.scan__box::before,.scan__box::after,
.scan__box > i::before,.scan__box > i::after{
  content:""; position:absolute; width:30px; height:30px; border:4px solid var(--royal-300);
}
.scan__box::before{ top:-2px; left:-2px; border-right:none; border-bottom:none; border-radius:14px 0 0 0; }
.scan__box::after{ top:-2px; right:-2px; border-left:none; border-bottom:none; border-radius:0 14px 0 0; }
.scan__box > i::before{ bottom:-2px; left:-2px; border-right:none; border-top:none; border-radius:0 0 0 14px; }
.scan__box > i::after{ bottom:-2px; right:-2px; border-left:none; border-top:none; border-radius:0 0 14px 0; }
.scan__laser{ position:absolute; left:8%; right:8%; height:3px; background:var(--royal-300);
  box-shadow:0 0 12px var(--royal-300); top:50%; animation:laser 2.2s ease-in-out infinite; }
@keyframes laser{ 0%,100%{ top:18%; } 50%{ top:82%; } }
.scan__top{ position:absolute; top:0; left:0; right:0; padding:calc(14px + var(--safe-t)) 16px 14px;
  display:flex; align-items:center; justify-content:space-between; color:#fff; z-index:2;
  background:linear-gradient(180deg,rgba(0,0,0,.6),transparent); }
.scan__count{ font-weight:700; }
.scan__close{ background:rgba(255,255,255,.18); border:none; color:#fff; width:40px; height:40px;
  border-radius:50%; font-size:1.3rem; }
.scan__hint{ position:absolute; bottom:calc(22px + var(--safe-b)); left:0; right:0;
  text-align:center; color:#fff; font-size:.92rem; padding:0 24px; z-index:2; text-shadow:0 1px 4px #000; }

/* Scan result overlay (número GIGANTE) */
.scanres{ position:fixed; inset:0; z-index:70; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:calc(24px + var(--safe-t)) 24px calc(24px + var(--safe-b));
  animation:pop .22s ease; color:#fff; }
.scanres--ok{ background:linear-gradient(160deg,var(--navy),var(--royal-600)); }
.scanres--bad{ background:linear-gradient(160deg,#7c1414,#b51d1d); }
.scanres--dup{ background:linear-gradient(160deg,#6b4d00,#a37400); }
.scanres__label{ font-size:.9rem; text-transform:uppercase; letter-spacing:2px; opacity:.85; }
.scanres__num{ font-family:"Saira Condensed",sans-serif; font-weight:800; font-size:46vw; line-height:.82;
  margin:6px 0; text-shadow:0 8px 40px rgba(0,0,0,.4); }
.scanres__name{ font-size:1.4rem; font-weight:700; }
.scanres__addr{ font-size:1rem; opacity:.9; margin-top:4px; max-width:90%; }
.scanres__msg{ font-size:1.5rem; font-weight:700; margin-top:8px; }
@keyframes pop{ from{ transform:scale(.85); opacity:0; } to{ transform:scale(1); opacity:1; } }

/* ---------- Map ---------- */
#map{ width:100%; height:100%; }
.map-wrap{ position:absolute; inset:0; }
.map-screen{ position:fixed; inset:0; z-index:20; display:flex; flex-direction:column; padding-top:calc(var(--header-h) + var(--safe-t)); padding-bottom:calc(var(--tab-h) + var(--safe-b)); }
.leaflet-marker-num{ display:grid; place-items:center; width:30px; height:30px; border-radius:50% 50% 50% 4px;
  transform:rotate(-45deg); font-weight:800; font-family:"Saira Condensed",sans-serif; color:#fff;
  box-shadow:0 3px 8px rgba(0,0,0,.35); border:2px solid #fff; font-size:.95rem; }
.leaflet-marker-num > span{ transform:rotate(45deg); }
.marker-wrap{ position:relative; width:30px; height:30px; }
.marker-qty{ position:absolute; top:-7px; right:-9px; min-width:18px; height:18px; padding:0 4px;
  background:#dc2626; color:#fff; border:2px solid #fff; border-radius:9px; font-size:.7rem; font-weight:800;
  display:grid; place-items:center; font-style:normal; box-shadow:0 1px 3px rgba(0,0,0,.4); line-height:1; }
.map-fab{ position:absolute; z-index:500; right:14px; bottom:18px; display:flex; flex-direction:column; gap:10px; }
.map-fab button{ width:50px; height:50px; border-radius:14px; border:none; background:var(--surface);
  box-shadow:var(--shadow-lg); font-size:1.3rem; display:grid; place-items:center; color:var(--navy); }

/* ---------- Markers MapLibre (pino numerado grande, mantém o padrão do app) ---------- */
.mlmarker{ position:relative; width:32px; height:32px; cursor:pointer; }
.mlmarker__pin{ display:grid; place-items:center; width:32px; height:32px; border-radius:50% 50% 50% 4px;
  transform:rotate(-45deg); font-weight:800; font-family:"Saira Condensed",sans-serif; color:#fff;
  box-shadow:0 3px 8px rgba(0,0,0,.35); border:2px solid #fff; font-size:1rem; }
.mlmarker__pin > span{ transform:rotate(45deg); }
.mlmarker__qty{ position:absolute; top:-7px; right:-9px; min-width:18px; height:18px; padding:0 4px;
  background:#dc2626; color:#fff; border:2px solid #fff; border-radius:9px; font-size:.7rem; font-weight:800;
  display:grid; place-items:center; font-style:normal; box-shadow:0 1px 3px rgba(0,0,0,.4); line-height:1; z-index:2; }
.maplibregl-popup{ max-width:280px !important; font-family:"Inter",sans-serif; }
.maplibregl-popup-content{ border-radius:12px; padding:12px 14px; box-shadow:0 8px 24px rgba(0,0,0,.22); font-size:.9rem; line-height:1.4; }
.maplibregl-popup-close-button{ font-size:1.2rem; padding:2px 7px; color:var(--muted); }

/* ---------- Bottom tab bar ---------- */
.tabbar{
  position:fixed; bottom:0; left:0; right:0; z-index:40;
  max-width:560px; margin:0 auto;
  height:calc(var(--tab-h) + var(--safe-b)); padding-bottom:var(--safe-b);
  box-sizing:border-box;
  background:var(--surface); border-top:1px solid var(--border);
  display:grid; grid-template-columns:repeat(4,1fr); align-items:end;
  box-shadow:0 -8px 24px -16px rgba(8,18,60,.4);
}
.tab{ background:none; border:none; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; color:var(--muted-2); font-size:.7rem; font-weight:600; padding-bottom:7px; }
.tab svg{ width:23px; height:23px; }
.tab.is-active{ color:var(--royal); }
.tab.is-active .tab__dot{ opacity:1; }
.tab__dot{ width:5px; height:5px; border-radius:50%; background:var(--royal); opacity:0; margin-top:1px; }
.tab__badge{ position:absolute; top:8px; margin-left:20px; background:var(--danger); color:#fff;
  font-size:.62rem; min-width:17px; height:17px; border-radius:9px; display:grid; place-items:center; padding:0 4px; font-weight:800; }

/* ---------- Empty state ---------- */
.empty{ text-align:center; padding:42px 22px; color:var(--muted); }
.empty__icon{ font-size:3rem; margin-bottom:10px; opacity:.5; }
.empty__title{ font-weight:700; color:var(--ink); font-size:1.05rem; margin-bottom:6px; }

/* ---------- Modal / sheet ---------- */
.sheet-bg{ position:fixed; inset:0; z-index:80; background:rgba(8,18,60,.45); backdrop-filter:blur(2px);
  display:flex; align-items:flex-end; justify-content:center; animation:fade .2s; }
@keyframes fade{ from{opacity:0;} to{opacity:1;} }
.sheet{ background:var(--surface); width:100%; max-width:560px; border-radius:22px 22px 0 0;
  padding:8px 18px calc(20px + var(--safe-b)); max-height:90vh; overflow-y:auto; animation:up .25s ease; }
@keyframes up{ from{ transform:translateY(40px); } to{ transform:translateY(0); } }
.sheet__grip{ width:42px; height:5px; border-radius:99px; background:var(--border-2); margin:8px auto 14px; }
.sheet__title{ font-weight:800; font-size:1.2rem; margin-bottom:4px; }
.sheet__sub{ color:var(--muted); font-size:.9rem; margin-bottom:16px; }

/* ---------- Toast ---------- */
.toast-host{ position:fixed; left:0; right:0; bottom:calc(var(--tab-h) + var(--safe-b) + 14px); z-index:90;
  display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; }
.toast{ background:var(--navy-900); color:#fff; padding:11px 18px; border-radius:99px; font-size:.9rem;
  font-weight:600; box-shadow:var(--shadow-lg); animation:up .2s; max-width:90%; }
.toast--ok{ background:var(--ok); }
.toast--err{ background:var(--danger); }

/* ---------- Progress / misc ---------- */
.progress{ height:8px; border-radius:99px; background:var(--surface-2); overflow:hidden; }
.progress > i{ display:block; height:100%; background:var(--royal); transition:width .3s; }
.divider{ height:1px; background:var(--border); margin:14px 0; }
.row{ display:flex; align-items:center; gap:10px; }
.row--between{ justify-content:space-between; }
.muted{ color:var(--muted); }
.small{ font-size:.85rem; }
.tag-code{ font-family:"Saira Condensed",monospace; font-size:.82rem; background:var(--surface-2);
  border:1px solid var(--border); padding:2px 7px; border-radius:7px; color:var(--navy); letter-spacing:.5px; }
.spinner{ width:20px; height:20px; border:3px solid rgba(255,255,255,.35); border-top-color:#fff;
  border-radius:50%; animation:spin .8s linear infinite; }
.spinner--navy{ border-color:var(--border-2); border-top-color:var(--royal); }
@keyframes spin{ to{ transform:rotate(360deg); } }
.list-actions{ display:flex; gap:8px; padding:12px 14px; background:var(--surface-2); border-top:1px solid var(--border); }
.list-actions .btn{ font-size:.92rem; padding:11px; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ============================ Fase 1: login, captura, GPS, histórico ============================ */

/* spinner grande */
.spinner--lg{ width:34px; height:34px; border-width:4px; }

/* ---- Login ---- */
.login{ min-height:100dvh; display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:26px; padding:30px 22px; background:linear-gradient(160deg,var(--navy),var(--navy-900)); }
.login__brand{ text-align:center; }
.login__logo{ height:64px; width:auto; }
.login__tag{ margin-top:8px; color:var(--royal-300); font-weight:600; font-size:.78rem; letter-spacing:3px; }
.login__card{ width:100%; max-width:380px; background:var(--surface); border:1px solid var(--border);
  border-radius:18px; padding:22px; box-shadow:var(--shadow); }

/* ---- Captura de etiqueta (foto -> IA) ---- */
.cap{ position:fixed; inset:0; z-index:60; background:#05070d; display:flex; flex-direction:column;
  max-width:560px; margin:0 auto; }
.cap__top{ display:flex; align-items:center; justify-content:space-between; padding:calc(14px + var(--safe-t)) 16px 14px;
  color:#fff; background:rgba(0,0,0,.4); }
.cap__count{ font-weight:600; font-size:.92rem; }
.cap__cam{ position:relative; flex:1; overflow:hidden; background:#000; }
.cap__cam video{ width:100%; height:100%; object-fit:cover; }
.cap__frame{ position:absolute; inset:12% 8% auto 8%; height:46%; border:3px solid rgba(255,255,255,.9);
  border-radius:14px; box-shadow:0 0 0 100vmax rgba(0,0,0,.35); }
.cap__loading{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:14px; color:#fff; background:rgba(5,7,13,.72); font-weight:600; }
.cap__hint{ color:#cdd7f0; font-size:.86rem; text-align:center; padding:12px 18px; background:#05070d; }
.cap__bar{ display:flex; align-items:center; justify-content:space-between; padding:14px 26px calc(26px + var(--safe-b));
  background:#05070d; }
.cap__manual{ width:64px; display:flex; flex-direction:column; align-items:center; gap:4px;
  background:none; border:none; color:#cdd7f0; font-size:.72rem; cursor:pointer; }
.cap__shutter{ width:74px; height:74px; border-radius:50%; background:#fff; border:5px solid var(--royal-300);
  cursor:pointer; transition:transform .08s; }
.cap__shutter:active{ transform:scale(.92); }
.cap__shutter:disabled{ opacity:.5; }

/* thumb da etiqueta na conferência */
.confer__thumb{ width:54px; height:54px; object-fit:cover; border-radius:10px; border:1px solid var(--border); }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }

/* ---- marcador "você" no mapa (GPS ao vivo) ---- */
.me-dot{ width:18px; height:18px; border-radius:50%; background:#2B5CE6; border:3px solid #fff;
  box-shadow:0 0 0 4px rgba(43,92,230,.35), 0 1px 4px rgba(0,0,0,.4); }

/* ---- barra de rota / navegação ---- */
.route-bar{ position:absolute; left:12px; right:12px; bottom:14px; z-index:500; display:flex; flex-direction:column;
  gap:8px; background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:10px 14px; box-shadow:var(--shadow); }
.route-bar__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.route-bar__info{ font-size:.92rem; }
.route-bar__info b{ font-size:1.05rem; }
.route-bar__pkg{ font-size:.82rem; color:var(--muted); white-space:nowrap; }
.route-bar__pkg b{ color:var(--ink); font-weight:700; }
.route-bar__nav{ display:inline-flex; align-items:center; gap:6px; background:var(--royal); color:#fff;
  border:none; border-radius:10px; padding:10px 14px; font-weight:700; font-size:.9rem; cursor:pointer; flex:none; }
.route-bar__nav.is-on{ background:var(--danger); }

/* ---- histórico ---- */
.histo{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 4px;
  border-bottom:1px solid var(--border); }
.histo:last-child{ border-bottom:none; }
.histo__date{ display:flex; flex-direction:column; gap:2px; }
.histo__nums{ display:flex; align-items:center; gap:12px; font-size:.86rem; color:var(--muted); }
.histo__nums b{ color:var(--ink); }

/* ---- Numerar por foto: ações no resultado + lista de escolha ---- */
.scanres__actions{ display:flex; flex-direction:column; gap:10px; width:100%; max-width:340px; margin-top:26px; }
.scanres__actions .btn{ width:100%; }
.btn--onlight{ color:#fff; border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.08); }
.btn--onlight:hover{ background:rgba(255,255,255,.16); }
.scanres .scanres__num{ font-size:34vw; }

.pick{ flex:1; overflow-y:auto; padding:14px 16px calc(20px + var(--safe-b)); background:#05070d; display:flex; flex-direction:column; gap:10px; }
.pick__hint{ color:#cdd7f0; font-size:.95rem; font-weight:600; margin:2px 0 0; }
.pick__read{ color:#8fa3cf; font-size:.82rem; background:#0d152e; border:1px solid #1d2b52; border-radius:10px; padding:8px 10px; }
.pick__read b{ color:#e6edff; }
.pick__item{ display:flex; align-items:center; gap:12px; text-align:left; width:100%;
  background:#0d152e; border:1px solid #1d2b52; border-radius:14px; padding:10px 12px; cursor:pointer; transition:.15s; }
.pick__item:hover{ background:#13203f; border-color:var(--royal); }
.pick__num{ flex:none; width:46px; height:46px; border-radius:12px; background:var(--royal);
  color:#fff; font-family:"Saira Condensed",sans-serif; font-weight:800; font-size:1.7rem;
  display:flex; align-items:center; justify-content:center; }
.pick__num--done{ background:var(--ok); }
.pick__info{ min-width:0; }
.pick__name{ color:#e6edff; font-weight:700; font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pick__addr{ color:#8fa3cf; font-size:.82rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pick .btn{ margin-top:4px; }

/* ---- Agrupamento de pacotes + botões de rota ---- */
.qty-badge{ display:inline-block; background:var(--royal); color:#fff; font-size:.72rem; font-weight:700;
  padding:1px 8px; border-radius:20px; vertical-align:middle; margin-left:4px; }
.pick__name .qty-badge{ background:var(--warn); }
.pkgbox{ background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:12px; margin-bottom:14px; }
.pkgbox__title{ font-weight:700; font-size:.92rem; margin-bottom:8px; color:var(--navy); }
.pkgbox__item{ display:flex; align-items:center; gap:8px; padding:6px 0; border-top:1px solid var(--border); }
.pkgbox__item:first-of-type{ border-top:none; }
.pkgbox__n{ flex:none; width:22px; height:22px; border-radius:7px; background:var(--royal); color:#fff;
  font-size:.78rem; font-weight:700; display:grid; place-items:center; }
.pkgbox__name{ flex:1; font-size:.92rem; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.route-bar__btns{ display:flex; align-items:center; gap:8px; flex:none; }
.route-bar__recalc{ display:inline-flex; align-items:center; gap:5px; background:var(--surface); color:var(--navy);
  border:1px solid var(--royal); border-radius:10px; padding:9px 11px; font-weight:700; font-size:.85rem; cursor:pointer; }
.route-bar__recalc:active{ background:var(--bg); }

/* ---- Excluir parada / pacote ---- */
.pkgbox__del{ margin-left:auto; flex:none; width:26px; height:26px; border-radius:7px; border:1px solid var(--border);
  background:var(--surface); color:var(--danger); font-size:.85rem; font-weight:700; cursor:pointer; line-height:1;
  display:grid; place-items:center; }
.pkgbox__del:active{ background:#fde8e8; }
.btn--del{ color:var(--danger); border:1px solid #f1c9c9; background:var(--surface); }
.btn--del:active{ background:#fde8e8; }

/* ---- Equipe (dono) ---- */
.team{ border:1px solid var(--border); border-radius:14px; padding:14px; margin-bottom:12px; background:var(--surface); }
.team__name{ font-weight:800; font-size:1.05rem; }
.team__stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.team__stat{ background:var(--bg); border-radius:10px; padding:10px 8px; text-align:center; }
.team__stat b{ display:block; font-family:"Saira Condensed",sans-serif; font-size:1.5rem; line-height:1; color:var(--navy); }
.team__stat b i{ font-style:normal; font-size:.9rem; color:var(--muted); font-family:"Inter",sans-serif; }
.team__stat span{ font-size:.72rem; color:var(--muted); }

/* ---- Resumo do dia (várias rotas) ---- */
.daybox{ background:linear-gradient(120deg,#0b1b4d,#13287a); color:#fff; border-radius:16px; padding:14px 16px; margin-bottom:14px; box-shadow:var(--shadow); }
.daybox__lbl{ font-size:.72rem; text-transform:uppercase; letter-spacing:1px; color:var(--royal-300); font-weight:700; margin-bottom:8px; }
.daybox__row{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.daybox__stat{ text-align:center; }
.daybox__stat b{ display:block; font-family:"Saira Condensed",sans-serif; font-size:1.6rem; line-height:1; }
.daybox__stat b i{ font-style:normal; font-size:.9rem; color:#bcccff; font-family:"Inter",sans-serif; }
.daybox__stat span{ font-size:.7rem; color:#cdd8ff; }
.daybox__row--time{ grid-template-columns:repeat(2,1fr); margin-top:8px; padding-top:8px; border-top:1px solid rgba(255,255,255,.15); }
.timebox{ display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.86rem; margin-bottom:14px; padding:2px 2px; }
.timebox b{ color:var(--ink); }
.btn--newroute{ color:var(--royal); border:1px dashed var(--royal-300); background:var(--surface); }
.btn--newroute:active{ background:#eef2ff; }

/* ---- CEP automático + endereço (Conferir) ---- */
.grid-addr{ display:grid; grid-template-columns:1fr 110px; gap:10px; }
.cepwrap{ position:relative; }
.cepwrap__spin{ position:absolute; right:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; }
.field--cep label{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }

/* ---- Rotas do dia (vários celulares, mesmo login) ---- */
.rotaline{ display:flex; align-items:center; gap:10px; padding:12px 0; border-bottom:1px solid var(--border); }
.rotaline:last-child{ border-bottom:none; }
.rotaline__info{ flex:1; min-width:0; }
.rotaline__title{ font-weight:700; }
.rotaline__btn{ flex:none; padding:8px 12px; font-size:.82rem; }
.rotaline__del{ flex:none; width:30px; height:30px; border-radius:8px; border:1px solid var(--border);
  background:var(--surface); color:var(--danger); cursor:pointer; display:grid; place-items:center; }
.rotaline__del:active{ background:var(--danger-bg); }

/* ---- Aviso persistente: endereços não localizados ---- */
.card--danger{ border-color:var(--danger); background:var(--danger-bg); }

/* ---- Compensou hoje? (ganho - combustível) ---- */
.moneybox{ border-radius:16px; padding:14px 16px; margin-bottom:14px; box-shadow:var(--shadow); }
.moneybox--ok{ background:linear-gradient(120deg,#0a5c2e,#0f8a3f); color:#fff; }
.moneybox--bad{ background:linear-gradient(120deg,#7a1f1f,#a82a2a); color:#fff; }
.moneybox__lbl{ font-size:.78rem; text-transform:uppercase; letter-spacing:1px; font-weight:700; opacity:.9; }
.moneybox__lucro{ font-family:"Saira Condensed",sans-serif; font-weight:800; font-size:2.2rem; line-height:1.1; margin:2px 0 10px; }
.moneybox__row{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.moneybox__stat{ background:rgba(255,255,255,.14); border-radius:10px; padding:8px 10px; }
.moneybox__stat b{ display:block; font-size:1.05rem; font-weight:800; }
.moneybox__stat span{ font-size:.72rem; opacity:.85; }
.moneybox__cta{ width:100%; margin-bottom:14px; font-size:.85rem; }

/* ---- Avisos automáticos via WhatsApp (saiu / na porta) ---- */
.btn--avisar{ position:relative; font-size:.84rem; padding:10px 8px; }
.avisado-tick{ color:var(--ok); font-weight:800; margin-left:4px; }
.avisarfila{ background:#0d8a4f; }
.avisarfila:active{ background:#0a6e3f; }

/* ---- Flash do nº da caixa (após bipar) ---- */
.bipflash{ position:fixed; inset:0; z-index:3000; display:flex; flex-direction:column; align-items:center;
  justify-content:center; background:rgba(6,10,25,.86); pointer-events:none; animation:bipin .15s ease-out; }
.bipflash__lbl{ color:#9fb4e8; font-size:1rem; text-transform:uppercase; letter-spacing:2px; font-weight:700; }
.bipflash__num{ color:#fff; font-family:"Saira Condensed",sans-serif; font-weight:800; font-size:9rem; line-height:1; }
@keyframes bipin{ from{ opacity:0; transform:scale(.94); } to{ opacity:1; transform:scale(1); } }

/* ---- Numerar por CEP: campo grande de digitar ---- */
.cepbig{ font-size:1.9rem; font-weight:800; text-align:center; letter-spacing:3px; padding:16px 12px; }

/* ---- Tabela de separação (caixa -> parada) ---- */
.tabsep__row{ display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); }
.tabsep__cx{ flex:none; min-width:52px; height:44px; border-radius:10px; background:#0d152e; color:#fff;
  display:grid; place-items:center; font-family:"Saira Condensed",sans-serif; font-weight:800; font-size:1.5rem; }
.tabsep__arrow{ flex:none; color:var(--muted); font-weight:800; }
.tabsep__ord{ flex:none; min-width:52px; height:44px; border-radius:10px; background:var(--royal); color:#fff;
  display:grid; place-items:center; font-family:"Saira Condensed",sans-serif; font-weight:800; font-size:1.5rem; }
.tabsep__ord--no{ background:var(--warn); font-size:.7rem; font-family:"Inter",sans-serif; }
.tabsep__info{ flex:1; min-width:0; font-size:.85rem; line-height:1.25; }

/* ---- Caixas visíveis (lista, ficha, resultado) ---- */
.tag-cx{ background:#0d152e; color:#fff; }
.pick__cx{ font-size:.78rem; color:var(--royal); font-weight:700; margin-top:2px; }
.scanres__cx{ font-size:1.05rem; margin-top:6px; background:rgba(255,255,255,.16); border-radius:10px; padding:8px 12px; display:inline-block; }
.stopcx{ font-size:.95rem; margin:4px 0 8px; }

/* ---- Botões dentro do popup do mapa (Entregue / Waze) ---- */
.pop-actions{ display:flex; gap:8px; margin-top:10px; }
.pop-btn{ flex:1; padding:9px 10px; border-radius:9px; border:1px solid var(--border); background:var(--surface);
  color:var(--navy); font-weight:700; font-size:.82rem; cursor:pointer; }
.pop-btn--ok{ background:var(--ok); color:#fff; border-color:var(--ok); }
.pop-btn:active{ transform:scale(.97); }
.pop-done{ flex:1; text-align:center; padding:9px 10px; color:var(--ok); font-weight:700; font-size:.82rem; }

/* ---- Progresso da importação por prints ---- */
.importprog{ position:fixed; inset:0; z-index:3000; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:12px; background:rgba(6,10,25,.88); color:#fff; text-align:center; padding:24px; }
.importprog__txt{ font-size:1.1rem; }
.importprog__sub{ color:#9fb4e8; font-size:.9rem; }
.scanres__cli{ font-size:1rem; margin-top:6px; background:rgba(255,255,255,.16); border-radius:10px; padding:8px 12px; display:inline-block; }

/* ---- Segurança: posicionamento dos markers/popups do MapLibre mesmo se o CSS
       do motor falhar em carregar (evita pinos "empilhados" na tela) ---- */
.maplibregl-marker{ position:absolute; top:0; left:0; will-change:transform; }
.maplibregl-popup{ position:absolute; top:0; left:0; will-change:transform; z-index:600; display:flex; }
.maplibregl-popup-anchor-bottom{ flex-direction:column-reverse; }
.maplibregl-canvas{ position:absolute; left:0; top:0; }
.maplibregl-canvas-container{ height:100%; width:100%; }