:root{--bg:#f6f4ef;--card:#fff;--ink:#1d2321;--mute:#6b736f;--line:#e4e0d6;--acc:#1f6f5c;--acc2:#e8f2ee;--warn:#b4442f;--r:14px}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%}
header{position:sticky;top:0;z-index:5;background:var(--bg);padding:calc(10px + env(safe-area-inset-top)) 14px 8px;border-bottom:1px solid var(--line)}
h1{font-size:19px;margin:0;letter-spacing:-.2px}
.tabs{display:flex;gap:6px;margin-top:8px}
.tab{flex:1;border:1px solid var(--line);background:var(--card);border-radius:999px;padding:8px 6px;font-size:14px;color:var(--ink);cursor:pointer}
.tab.on{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:600}
.search{display:flex;gap:6px;margin-top:10px}
input,textarea,select{font:inherit;font-size:16px;color:inherit;border:1px solid var(--line);background:var(--card);border-radius:10px;padding:9px 11px;width:100%}
textarea{min-height:64px;resize:vertical}
input:focus,textarea:focus,select:focus{outline:2px solid var(--acc);outline-offset:-1px}
button{font:inherit;cursor:pointer;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink);padding:9px 13px;white-space:nowrap}
button.pri{background:var(--acc);color:#fff;border-color:var(--acc);font-weight:600}
button.ghost{background:transparent;border-color:transparent;color:var(--acc);padding:6px 8px}
button.danger{color:var(--warn)}
button:disabled{opacity:.5;cursor:default}
main{padding:12px 14px calc(90px + env(safe-area-inset-bottom));max-width:760px;margin:0 auto}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px;margin-bottom:10px}
.ctr{display:flex;gap:12px;align-items:center;cursor:pointer}
.thumb{width:64px;height:64px;border-radius:10px;object-fit:cover;background:var(--acc2);flex:none;display:flex;align-items:center;justify-content:center;font-size:26px}
.ctr .t{font-weight:650;font-size:16px}
.mute{color:var(--mute);font-size:13px}
.bar{height:5px;background:var(--line);border-radius:3px;margin-top:6px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--acc)}
.empty{text-align:center;color:var(--mute);padding:40px 10px}
.fab{position:fixed;right:16px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:6;border-radius:999px;padding:14px 18px;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.row{display:flex;gap:8px;align-items:center}
.row>*{min-width:0}
label.f{display:block;font-size:12.5px;color:var(--mute);margin:10px 0 4px;font-weight:600;text-transform:uppercase;letter-spacing:.3px}
.photos{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.ph{position:relative;flex:none}
.ph img{width:150px;height:150px;object-fit:cover;border-radius:12px;display:block;background:var(--acc2);cursor:zoom-in}
.ph button{position:absolute;top:4px;right:4px;padding:2px 8px;background:rgba(0,0,0,.55);color:#fff;border:0;border-radius:999px}
.addph{width:150px;height:150px;flex:none;border:2px dashed var(--line);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--mute);cursor:pointer;background:transparent;font-size:13px}
.items{list-style:none;margin:0;padding:0}
.items li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.items li:last-child{border-bottom:0}
.items li span{flex:1}
.items li.ok span{color:var(--mute);text-decoration:line-through}
.items input[type=checkbox]{width:22px;height:22px;flex:none;accent-color:var(--acc)}
.x{border:0;background:none;color:var(--mute);padding:4px 6px;font-size:16px}
.ai{background:var(--acc2);border:1px solid #cfe3db;border-radius:var(--r);padding:12px;white-space:pre-wrap}
.hit{font-size:13.5px;margin:2px 0 0}
.hit b{background:#fff1b8;font-weight:inherit}
.modal{position:fixed;inset:0;background:rgba(20,24,22,.6);z-index:20;display:flex;align-items:center;justify-content:center;padding:16px}
.modal .box{background:var(--card);border-radius:16px;padding:16px;max-width:520px;width:100%;max-height:90vh;overflow:auto}
.modal img.big{max-width:100%;border-radius:10px;display:block;margin:auto}
.lbl{width:100%;image-rendering:pixelated;border:1px solid var(--line);border-radius:6px;background:#fff}
.scan video{width:100%;border-radius:12px;background:#000;display:block;aspect-ratio:1/1;object-fit:cover}
.code{font:700 28px/1 ui-monospace,Menlo,monospace;letter-spacing:4px;text-align:center;padding:14px;background:var(--acc2);border-radius:12px;margin:8px 0}
#toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translateX(-50%);background:#222;color:#fff;padding:9px 14px;border-radius:10px;font-size:14px;z-index:30;display:none;max-width:90vw}
.chip{display:inline-block;font-size:12px;padding:2px 8px;border-radius:999px;background:#fbe9e5;color:var(--warn);margin-left:6px}
.login{max-width:380px;margin:8vh auto 0;text-align:center}
.login img{width:84px;height:84px;border-radius:20px}
.login input{margin-top:10px}
.spin{display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:s 1s linear infinite;vertical-align:-2px}
@keyframes s{to{transform:rotate(360deg)}}

/* Foto da mala e de onde ela fica */
.slot{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center}
.ph.sm img,.addph.sm{width:100%;max-width:160px;height:120px}
.addph.sm{font-size:12px;text-align:center;padding:4px}
.ph .lida{position:absolute;left:6px;bottom:6px;background:rgba(31,111,92,.92);color:#fff;font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;pointer-events:none}
/* chips (bagagem, ida/volta) e grupos de itens parecidos */
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chipb{border-radius:999px;padding:6px 12px;font-size:14px}
.chipb.on{background:var(--acc);color:#fff;border-color:var(--acc)}
.grp{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--line);white-space:pre-line}
.grp input{width:20px;height:20px;flex:none;margin-top:2px}

/* =================== Visual 2.0 (referência: app Alta) =================== */
:root{--bg:#fff;--card:#fff;--ink:#111;--mute:#7a7a7a;--line:#ececec;--soft:#f3f3f3;--acc:#111;--acc2:#f3f3f3;--ok:#1f6f5c;--warn:#c0362c;--r:18px}
html,body{background:var(--bg);font:15px/1.4 -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;letter-spacing:-.1px}
header{background:rgba(255,255,255,.92);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom:0;padding:calc(10px + env(safe-area-inset-top)) 16px 10px}
.search{margin-top:0;align-items:center;gap:8px}
.pill{flex:1;display:flex;align-items:center;gap:8px;background:var(--soft);border-radius:999px;padding:0 14px;height:46px}
.pill svg{width:20px;height:20px;flex:none;fill:none;stroke:#111;stroke-width:2;stroke-linecap:round}
.pill input{border:0;background:transparent;padding:0;height:100%;font-size:16px}
.pill input:focus{outline:none}
.iconbtn{width:46px;height:46px;border-radius:999px;border:0;background:var(--soft);padding:0;display:flex;align-items:center;justify-content:center;font-size:18px;flex:none}
.iconbtn svg{width:22px;height:22px;fill:none;stroke:#111;stroke-width:1.8;stroke-linecap:round}
.iconbtn.dark{background:#111;color:#fff}
input,textarea,select{border-color:var(--line);border-radius:14px;background:#fff}
input:focus,textarea:focus,select:focus{outline:2px solid #111}
button{border-radius:999px;border-color:var(--line)}
button.pri{background:#111;border-color:#111;color:#fff}
button.ghost{color:#111;background:var(--soft);border-color:transparent;padding:8px 14px}
button.danger{border-color:#f1d4d1}
main{padding:6px 16px calc(110px + env(safe-area-inset-bottom))}
.card{border:0;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px var(--line);padding:14px}
label.f{text-transform:none;letter-spacing:0;font-size:13px;color:#111;font-weight:650;margin:14px 0 6px}
.bar{height:4px;background:var(--soft)}
.bar i{background:#111}
.chipb{background:var(--soft);border-color:transparent;padding:8px 14px}
.chipb.on{background:#111;border-color:#111;color:#fff}
.ph img{border-radius:16px;background:var(--soft)}
.addph{border:1.5px dashed #d6d6d6;border-radius:16px}
.ph .lida{background:rgba(17,17,17,.82)}
.items li{padding:10px 0}
.items input[type=checkbox]{accent-color:#111}
.ai{background:var(--soft);border:0}
.code{background:var(--soft)}
.chip{background:#fdecea}
.thumb{border-radius:12px;background:var(--soft)}
#toast{background:#111;border-radius:999px;padding:10px 16px}
.modal{background:rgba(0,0,0,.45)}
.modal .box{border-radius:22px}
.login img{border-radius:22px}

/* grade de malas */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
@media (min-width:640px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tile{cursor:pointer;min-width:0}
.cover{position:relative;aspect-ratio:3/4;border-radius:20px;overflow:hidden;background:var(--soft)}
.cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.tile:active .cover img{transform:scale(.98)}
.noimg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:44px;opacity:.55}
.num{position:absolute;left:8px;bottom:-6px;font:800 64px/1 -apple-system,"SF Pro Display",system-ui,sans-serif;color:transparent;-webkit-text-stroke:2px #fff;text-shadow:0 1px 8px rgba(0,0,0,.18);pointer-events:none}
.tags{position:absolute;top:8px;left:8px;right:8px;display:flex;flex-wrap:wrap;gap:4px}
.tags span{background:rgba(255,255,255,.92);color:#111;font-size:11px;font-weight:600;padding:3px 8px;border-radius:999px}
.meta{padding:8px 2px 0}
.nm{display:flex;align-items:center;gap:6px}
.nm b{flex:1;min-width:0;font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cnt{color:var(--mute);font-size:14px}
.cnt::before{content:"▤ ";font-size:12px}
.loc{display:flex;align-items:center;gap:4px;color:#111;font-size:14px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.loc span{display:flex}
.loc svg{width:16px;height:16px;flex:none;fill:none;stroke:#111;stroke-width:1.8}
.meta .mute{font-size:12px}

/* barra inferior */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:6;background:rgba(255,255,255,.95);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:6px 8px calc(6px + env(safe-area-inset-bottom))}
.navin{display:flex;align-items:center;justify-content:space-around;max-width:560px;margin:0 auto}
.navb{border:0;background:none;padding:6px 4px;display:flex;flex-direction:column;align-items:center;gap:2px;color:#9a9a9a;flex:1;border-radius:12px}
.navb svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.navb small{font-size:10.5px;font-weight:600}
.navb.on{color:#111}
.navgap{width:72px;flex:none}
.fab{position:fixed;left:50%;right:auto;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom));width:62px;height:62px;padding:0;border-radius:999px;background:#111;border:0;box-shadow:0 6px 18px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;z-index:7}
.fab[hidden]{display:none}
.fab svg{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round}
#toast{bottom:calc(96px + env(safe-area-inset-bottom))}

/* =================== cor de destaque: terracota =================== */
:root{--acc:#c2603c;--accd:#a84f2f;--accs:#f8ebe5}
.iconbtn.dark,button.pri,.fab{background:var(--acc);border-color:var(--acc);color:#fff}
button.pri:active,.fab:active{background:var(--accd)}
.navb.on{color:var(--acc)}
.chipb.on{background:var(--acc);border-color:var(--acc)}
.bar i{background:var(--acc)}
.items input[type=checkbox]{accent-color:var(--acc)}
input:focus,textarea:focus,select:focus{outline-color:var(--acc)}
button.ghost{color:var(--accd);background:var(--accs)}
.ph .lida{background:rgba(194,96,60,.92)}
.ai{background:var(--accs)}
.hit b{background:#fbd9c9}

/* alternar grade / uma por vez */
.viewbar{display:flex;align-items:center;justify-content:space-between;margin:2px 0 12px}
.seg{display:flex;background:var(--soft);border-radius:999px;padding:3px}
.seg button{border:0;background:none;padding:6px 10px;border-radius:999px;display:flex}
.seg button.on{background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.12)}
.seg svg{width:20px;height:20px;fill:none;stroke:#111;stroke-width:1.7}
.seg button.on svg{stroke:var(--acc)}

/* modo cartões (deslizar) */
.deck{position:relative;height:min(68vh,560px);margin-top:4px}
.under{position:absolute;inset:14px 14px -10px;border-radius:26px;background:var(--soft)}
.swipe{position:absolute;inset:0;border-radius:26px;overflow:hidden;background:var(--soft);box-shadow:0 10px 30px rgba(0,0,0,.15);touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.scover{position:relative;width:100%;height:100%}
.scover img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.scover .noimg{font-size:80px}
.sdots{position:absolute;top:10px;left:12px;right:12px;display:flex;gap:4px}
.sdots i{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.45)}
.sdots i.on{background:#fff}
.sgrad{position:absolute;left:0;right:0;bottom:0;padding:60px 18px 18px;background:linear-gradient(transparent,rgba(0,0,0,.72));color:#fff}
.snm{font-size:28px;font-weight:750;letter-spacing:-.4px}
.loc.light{color:#fff}.loc.light svg{stroke:#fff}
.sitens{font-size:14px;opacity:.9;margin-top:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.snav{display:flex;align-items:center;justify-content:space-between;margin-top:20px}
.snav svg{width:22px;height:22px;fill:none;stroke:#111;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* aviso de modo sem internet */
.offline{background:#fff4e5;color:#7a4b12;border-radius:14px;padding:10px 14px;font-size:13.5px;margin:4px 0 12px}

/* v2.1: pendências, perfis e "editado por" */
.offline.pend{background:var(--accs);color:var(--accd);display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.av{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;object-fit:cover;background:var(--acc);color:#fff;font-weight:700;flex:none}
#menuBtn.comfoto{padding:0;overflow:hidden;background:none}
.avbtn{border:0;background:none;padding:0;border-radius:999px;flex:none}
.pessoa{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.pessoa:last-child{border-bottom:0}
.editpor{display:flex;align-items:center;gap:8px;color:var(--mute);font-size:13px;margin:0 2px 10px}

/* =================== v2.2 =================== */
/* puxar para atualizar */
#ptr{position:fixed;left:50%;top:calc(6px + env(safe-area-inset-top));transform:translate(-50%,-60px);z-index:40;background:#111;color:#fff;font-size:13px;padding:7px 14px;border-radius:999px;opacity:0;transition:opacity .15s;pointer-events:none}
#ptr.on{opacity:1}
#ptr.fix{transform:translate(-50%,20px)!important;transition:transform .2s,opacity .15s}
/* botão + : escolher destino */
.destinos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.destino{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 4px;border-radius:18px;background:var(--soft);border:2px solid transparent;white-space:normal}
.destino small{color:var(--mute);font-size:11.5px}
.destino.on{border-color:var(--acc);background:var(--accs)}
/* link (AirTag) com cara de botão */
.btnlink{display:inline-flex;align-items:center;padding:9px 14px;border-radius:999px;background:var(--accs);color:var(--accd);text-decoration:none;font-weight:600;flex:none}
/* mover itens */
.mvlist{max-height:40vh;overflow:auto;border-top:1px solid var(--line)}
.mvlist .grp{white-space:normal}
/* valores do relatório */
.vals{max-height:48vh;overflow:auto;border-top:1px solid var(--line)}
.vrow{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--line)}
.vrow span{flex:1;min-width:0;font-size:14px}
.vrow input{width:96px;flex:none;text-align:right;padding:7px 10px}

/* relatório de despacho (tela + impressão) */
body.imprimindo>*:not(#relatorio-tela):not(#toast){display:none!important}
#relatorio-tela{background:#fff;min-height:100vh;padding:calc(10px + env(safe-area-inset-top)) 14px 30px}
.rbar{display:flex;justify-content:space-between;gap:8px;position:sticky;top:0;background:#fff;padding:6px 0 10px;z-index:2}
.rdica{font-size:12.5px;color:var(--mute);margin-bottom:12px}
#relatorio{max-width:760px;margin:0 auto;color:#000;font-size:13px}
.rhead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;border-bottom:2px solid #000;padding-bottom:8px;margin-bottom:10px}
.rtit{font-size:20px;font-weight:800}
.rsub{font-size:11.5px;color:#555;margin-top:2px}
.rqr{width:84px;height:84px;image-rendering:pixelated;flex:none}
#relatorio table{width:100%;border-collapse:collapse;margin-bottom:10px}
.rinfo th{text-align:left;width:34%;font-weight:600;color:#333;padding:4px 6px 4px 0;vertical-align:top}
.rinfo td{padding:4px 0;word-break:break-all}
.rair{display:flex;align-items:center;gap:10px;font-size:12px;color:#333;margin:0 0 10px}
.rair .rqr{width:72px;height:72px}
.ritens th,.ritens td{border:1px solid #bbb;padding:5px 6px;text-align:left;vertical-align:top}
.ritens th{background:#f1f1f1}
.ritens td:nth-child(1),.ritens td:nth-child(3){width:36px;text-align:center}
.ritens td:nth-child(4),.ritens th:nth-child(4){width:110px;text-align:right}
.ritens tfoot td{font-weight:800;text-align:right}
.ritens tfoot td:last-child{text-align:right}
.rnota{font-size:11px;color:#444;margin:6px 0 12px}
.rsec{font-weight:700;margin:6px 0}
.rfotos{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.rfotos img{width:100%;aspect-ratio:1/1;object-fit:cover;border:1px solid #ccc;break-inside:avoid}
.rassin{display:flex;gap:30px;margin-top:40px}
.rassin div{flex:1;border-top:1px solid #000;padding-top:4px;font-size:11.5px;text-align:center}
@media print{
  @page{margin:12mm}
  .rbar,.rdica,#toast{display:none!important}
  #relatorio-tela{padding:0;min-height:0}
  .ritens tr{break-inside:avoid}
}
