/* Layout: app de transportadora — barra azul fixa, uma coluna central (max 560px), cartões só para carteirinha e pacotes */
:root{
  --blue:#0747D6; --blue-deep:#06267A; --ink:#0B1638; --muted:#5A6588;
  --paper:#F3F6FD; --card:#FFFFFF; --line:#DCE3F5; --orange:#FF8A1F; --orange-soft:#FFF1E3;
  --green:#14A06B; --green-soft:#E3F6EE; --amber-soft:#FFF4D6; --amber:#B7790A;
  --display:"Archivo", "Arial Narrow", system-ui, sans-serif;
  --body:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme: light;
}
*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-radius:6px}
.wrap{width:100%;max-width:580px;margin:0 auto;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}

/* top bar */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--blue);color:#fff;box-shadow:0 2px 0 var(--blue-deep)}
.bar .wrap{max-width:1120px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:12px}
.logo{display:flex;align-items:center;gap:9px;font-family:var(--display);font-stretch:112%;font-weight:800;font-size:20px;letter-spacing:-.01em;line-height:1}
.logo i{font-style:italic;font-weight:900;color:#FFD3A8}
.logo svg{flex:none}
.ghost{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);color:#fff;border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600}
.ghost:hover{background:rgba(255,255,255,.22)}

/* login */
.login{min-height:100%;display:flex;flex-direction:column;background:var(--blue);color:#fff;position:relative;overflow:hidden}
.login::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-28deg,transparent 0 46px,rgba(255,255,255,.05) 46px 92px);pointer-events:none}
.login .wrap{position:relative;width:100%;padding-block:56px 40px;display:flex;flex-direction:column;gap:28px}
.login h1{font-family:var(--display);font-stretch:118%;font-weight:900;font-size:clamp(40px,11vw,62px);line-height:.92;margin:0;letter-spacing:-.02em;text-wrap:balance}
.login h1 i{color:#FFD3A8}
.login p.lead{margin:0;max-width:40ch;color:rgba(255,255,255,.82)}
.panel{background:var(--card);color:var(--ink);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:14px;box-shadow:0 18px 40px rgba(3,20,70,.35)}
.panel h2{margin:0;font-family:var(--display);font-stretch:108%;font-size:19px;font-weight:800}
label.f{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.f input{border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;font-size:16px;text-transform:none;letter-spacing:0;font-weight:500;color:var(--ink);background:#fff}
.f input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(7,71,214,.15)}
.err{color:#C42B3C;font-size:13px;font-weight:600;margin:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--blue);color:#fff;border:0;border-radius:12px;padding:14px 20px;font-weight:700;font-size:16px;transition:transform .15s,background .15s}
.btn:hover{background:#0A3DB5}
.btn:active{transform:translateY(1px)}
.btn.orange{background:var(--orange);color:#2A1300}
.btn.orange:hover{background:#F27A0B}
.btn[disabled]{opacity:.45;cursor:default}
.fine{font-size:12px;color:rgba(255,255,255,.65);margin:0}

/* liz home */
.hero{background:var(--blue);color:#fff;padding-block:30px 64px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-60px;bottom:-80px;width:260px;height:260px;border-radius:50%;border:38px solid rgba(255,255,255,.07)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700}
.hero .eyebrow{color:#FFD3A8}
.hero h1{font-family:var(--display);font-stretch:115%;font-weight:900;font-size:clamp(34px,9.5vw,52px);line-height:.98;margin:10px 0 14px;letter-spacing:-.02em;text-wrap:balance}
.hero p{margin:0 0 10px;max-width:46ch;color:rgba(255,255,255,.88)}
.lift{margin-top:-40px;position:relative;z-index:1;display:flex;flex-direction:column;gap:16px;padding-block-end:40px}
.order{background:var(--card);border-radius:18px;padding:20px;border:1px solid var(--line);display:flex;flex-direction:column;gap:16px;box-shadow:0 10px 30px rgba(7,40,120,.08)}
.order-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.code{font-family:var(--mono);font-weight:700;font-size:14px;letter-spacing:.04em}
.kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.kv div{min-width:0}
.kv dt{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.kv dd{margin:2px 0 0;font-weight:600}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.fact{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 12px}
.fact b{display:block;font-family:var(--display);font-stretch:112%;font-size:22px;font-weight:900;color:var(--blue);font-variant-numeric:tabular-nums;line-height:1.1}
.fact span{font-size:12px;color:var(--muted);line-height:1.3;display:block;margin-top:4px}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.steps li{display:flex;gap:12px;align-items:flex-start}
.steps .n{flex:none;width:26px;height:26px;border-radius:50%;background:var(--orange-soft);color:#A54A00;font-weight:800;font-size:13px;display:grid;place-items:center;font-family:var(--mono)}
.foot{font-size:12px;color:var(--muted);text-align:center;padding-block:8px 0}

/* section heads */
.sec{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:8px}
.sec h2{margin:0;font-family:var(--display);font-stretch:110%;font-weight:800;font-size:20px;letter-spacing:-.01em}
.sec small{color:var(--muted);font-size:12px}
.back{background:none;border:0;padding:0;color:var(--blue);font-weight:700;display:inline-flex;gap:6px;align-items:center;align-self:flex-start}

/* badge / carteirinha */
.badge{border-radius:18px;overflow:hidden;background:var(--card);border:1px solid var(--line);box-shadow:0 14px 34px rgba(7,40,120,.12)}
.badge-head{background:var(--blue);color:#fff;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.badge-head .eyebrow{color:#FFD3A8;font-size:10px}
.badge-body{display:grid;grid-template-columns:118px minmax(0,1fr);gap:16px;padding:16px}
.photo{width:118px;aspect-ratio:4/5;max-width:100%;border-radius:12px;object-fit:cover;border:3px solid var(--blue);background:var(--line);display:block}
.badge h3{margin:0 0 2px;font-family:var(--display);font-stretch:105%;font-weight:800;font-size:19px;line-height:1.15;text-wrap:balance}
.role{color:var(--blue);font-weight:700;font-size:13px;margin:0 0 10px}
.badge .kv{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 12px}
.badge .kv dd{font-size:14px}
.rookie{display:inline-flex;align-items:center;gap:6px;background:var(--orange);color:#2A1300;font-weight:800;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:999px}
.badge-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 16px;border-top:1px dashed var(--line);background:#FAFBFF}
.barcode{height:34px;flex:1;max-width:220px;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 5px,transparent 5px 8px,var(--ink) 8px 11px,transparent 11px 12px,var(--ink) 12px 13px,transparent 13px 16px)}
.notice{background:var(--orange-soft);border-radius:12px;padding:12px 14px;font-size:14px;color:#6A3300}
.notice b{color:#4A2300}

/* progress */
.prog{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.prog-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-weight:600}
.prog-row b{font-family:var(--display);font-stretch:112%;font-size:22px;font-weight:900;color:var(--blue);font-variant-numeric:tabular-nums}
.track{height:10px;background:var(--line);border-radius:999px;overflow:hidden}
.track i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),#3B7BFF);border-radius:999px;transition:width .6s}

/* packages */
.pkg{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:14px}
.pkg[data-s="rota"]{border-color:#F7C089;box-shadow:0 0 0 3px var(--orange-soft)}
.pkg[data-s="entregue"]{border-color:#A6DEC6}
.pkg-top{display:flex;gap:12px;align-items:center}
.box{flex:none;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--paper);color:var(--blue)}
.pkg[data-s="rota"] .box{background:var(--orange-soft);color:#C25A00}
.pkg[data-s="entregue"] .box{background:var(--green-soft);color:var(--green)}
.pkg-title{min-width:0;flex:1}
.pkg-title h3{margin:0;font-size:16px;font-weight:700;line-height:1.25}
.pkg-title .code{font-size:12px;color:var(--muted);font-weight:500}
.pill{flex:none;font-size:12px;font-weight:800;padding:5px 10px;border-radius:999px;white-space:nowrap}
.pill.pendente{background:var(--amber-soft);color:var(--amber)}
.pill.rota{background:var(--orange);color:#2A1300}
.pill.entregue{background:var(--green);color:#fff}
.tl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.tl li{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted);min-width:0}
.tl li::before{content:"";height:5px;border-radius:999px;background:var(--line)}
.tl li.on{color:var(--ink);font-weight:600}
.tl li.on::before{background:var(--blue)}
.tl li.on.last::before{background:var(--orange)}
.pkg[data-s="entregue"] .tl li.on::before{background:var(--green)}
.tl time{font-family:var(--mono);font-size:11px;color:var(--muted);font-weight:500}
.msg{font-size:14px;background:var(--paper);border-radius:10px;padding:10px 12px;margin:0}
.msg b{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:block}
.pulse{display:inline-block;width:8px;height:8px;border-radius:50%;background:currentColor;margin-right:6px;vertical-align:1px;animation:pulse 1.4s infinite}
@keyframes pulse{50%{opacity:.25}}
.stamp{font-size:12px;color:var(--muted);text-align:center}

/* admin */
.admin-head{display:flex;gap:14px;align-items:center;padding-block:22px 6px}
.admin-head img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:3px solid var(--blue)}
.admin-head h1{margin:0;font-family:var(--display);font-stretch:110%;font-weight:900;font-size:24px;line-height:1.1}
.admin-head p{margin:2px 0 0;color:var(--muted);font-size:13px}
.count{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.count div{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.count b{display:block;font-family:var(--display);font-stretch:112%;font-size:24px;font-weight:900;font-variant-numeric:tabular-nums;line-height:1.1}
.count span{font-size:12px;color:var(--muted)}
.seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;background:var(--paper);padding:4px;border-radius:12px;border:1px solid var(--line)}
.seg button{border:0;background:transparent;border-radius:9px;padding:10px 4px;font-size:13px;font-weight:700;color:var(--muted);line-height:1.2}
.seg button:hover{background:#E6ECFB}
.seg button[aria-pressed="true"][data-v="pendente"]{background:var(--amber-soft);color:var(--amber);box-shadow:inset 0 0 0 1.5px #EBC56B}
.seg button[aria-pressed="true"][data-v="rota"]{background:var(--orange);color:#2A1300}
.seg button[aria-pressed="true"][data-v="entregue"]{background:var(--green);color:#fff}
.mini{display:flex;flex-direction:column;gap:5px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.mini input{border:1.5px solid var(--line);border-radius:10px;padding:9px 12px;font-size:15px;text-transform:none;letter-spacing:0;font-weight:500;color:var(--ink);background:#fff;width:100%}
.mini input:focus{outline:none;border-color:var(--blue)}
.dock{position:sticky;bottom:0;z-index:4;background:linear-gradient(transparent,var(--paper) 30%);padding-block:22px calc(14px + env(safe-area-inset-bottom,0px))}
.dock .btn{width:100%}
.dock p{margin:8px 0 0;text-align:center;font-size:12px;color:var(--muted)}
.toast{position:fixed;left:50%;bottom:calc(90px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;font-size:14px;font-weight:600;z-index:20;max-width:calc(100% - 32px);text-align:center}
.stack{display:flex;flex-direction:column;gap:14px}
.wa{background:#EEF8F2;border:1px solid #BFE6CF;border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:10px}
.wa-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.wa-head b{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#1B6B47}
.wa-head span{font-size:12px;font-weight:700;color:#B3261E}
.wa-text{margin:0;white-space:pre-wrap;font-size:14px;line-height:1.45;user-select:text;-webkit-user-select:text;overflow-wrap:anywhere}
.btn.wa-btn{background:#1FA855;padding:11px 16px;font-size:15px}
.btn.wa-btn:hover{background:#178A45}
.wa-empty{margin:0;font-size:13px;color:var(--muted)}
/* mapa ao vivo */
.live{background:var(--card);border:1px solid #F7C089;box-shadow:0 0 0 3px var(--orange-soft);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:12px}
.live-head{display:flex;align-items:center;gap:12px}
.live-title{display:flex;flex-direction:column;min-width:0}
.live-title b{font-family:var(--display);font-stretch:108%;font-size:17px;font-weight:800;line-height:1.2}
.live-title small{font-size:12px;color:var(--muted);font-family:var(--mono)}
.map{height:280px;max-width:100%;border-radius:12px;overflow:hidden;position:relative;z-index:0;isolation:isolate;background:var(--paper)}
.live-msg{margin:0;font-size:13px;color:var(--muted)}
.car-pin{background:none;border:0}
.car{width:46px;height:46px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;border:3px solid #fff;box-shadow:0 4px 14px rgba(7,40,120,.45);animation:carPulse 2s infinite}
@keyframes carPulse{0%,100%{box-shadow:0 4px 14px rgba(7,40,120,.45),0 0 0 0 rgba(7,71,214,.35)}50%{box-shadow:0 4px 14px rgba(7,40,120,.45),0 0 0 12px rgba(7,71,214,0)}}
.locpanel{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px}
.loc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.loc-head b{font-size:16px}
.loc-head p{margin:2px 0 0;font-size:13px;color:var(--muted)}
.loc-meta{margin:0;font-size:12px;color:var(--muted);font-family:var(--mono)}
.btn.stop{background:#fff;color:#B3261E;box-shadow:inset 0 0 0 1.5px #F0B8B3}
.btn.stop:hover{background:#FDF0EF}
/* entregas: uma coluna no celular, duas no computador */
.wrap.wide{max-width:1120px;display:flex;flex-direction:column;gap:14px}
.deliv{display:flex;flex-direction:column;gap:14px}
.col-a,.col-b{min-width:0}
@media (min-width:900px){
  .deliv{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:28px;align-items:start}
  .col-a{position:sticky;top:calc(84px + env(safe-area-inset-top,0px))}
  .map{height:420px}
  .tl li{font-size:13px}
}
@media (max-width:420px){
  .badge-body{grid-template-columns:96px minmax(0,1fr);gap:12px}
  .photo{width:96px}
  .facts{grid-template-columns:1fr}
  .fact{display:flex;align-items:baseline;gap:10px}
  .fact span{margin:0}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}