/* Talão de OS — tela do técnico (clara, para uso no sol).
   Folha branca pautada em azul-carbono, rótulos pequenos, valores grandes,
   vermelho só no número da OS. */
:root{
  --desk:#E4E8EF; --paper:#FFFFFF; --rule:#CBD2DF; --rule-2:#A3AEC6;
  --ink:#141A2A; --ink-2:#47516C; --ink-3:#5F6984;
  --carbon:var(--marca); --carbon-2:#16306F; --carbon-soft:#E8EDF8; --carbon-line:#B7C4E4;
  --serial:#C4302B;
  --canary:#F6DE84; --canary-soft:#FBF0C4; --canary-ink:#5A4700;
  --copy-green:#CDEBD8; --copy-green-ink:#1D5A36;
  --error:#B3261E; --error-soft:#FBE9E7;
  --f-ui:"Barlow",system-ui,sans-serif; --f-label:"Barlow Condensed","Barlow",system-ui,sans-serif;
  --f-num:"Red Hat Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--desk);color:var(--ink);font:500 16px/1.4 var(--f-ui);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
button,input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--carbon);color:#fff}
:focus-visible{outline:3px solid var(--carbon);outline-offset:2px}
input,textarea{caret-color:var(--carbon)}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg.i{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ---------- faixa do topo ---------- */
.band{position:sticky;top:0;z-index:20;background:var(--carbon);color:#fff;padding:calc(env(safe-area-inset-top,0px) + var(--espaco-3)) var(--espaco-4) var(--espaco-3)}
.band-in{max-width:440px;margin:0 auto;display:flex;align-items:center;gap:var(--espaco-3)}
.wordmark{font:700 21px/1 var(--f-ui);letter-spacing:-.01em}
.wordmark small{display:block;font:600 11px/1 var(--f-label);letter-spacing:.16em;text-transform:uppercase;opacity:.78;margin-top:var(--espaco-1)}
.band .back{appearance:none;border:0;background:transparent;color:#fff;display:inline-flex;align-items:center;gap:var(--espaco-1);min-height:40px;padding:0 var(--espaco-2) 0 0;font-weight:600;cursor:pointer}
.band .spacer{flex:1}
.who{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.who b{font-weight:600}
.who span{font:500 13px var(--f-num);opacity:.8}

main{max-width:440px;margin:0 auto;padding:var(--espaco-3) 10px calc(108px + env(safe-area-inset-bottom,0px))}

/* ---------- lista: minhas OS ---------- */
.day{display:flex;align-items:baseline;justify-content:space-between;margin:6px 6px 10px}
.day h1{margin:0;font:700 26px/1.1 var(--f-ui);letter-spacing:-.01em}
.day p{margin:0;color:var(--ink-2);font-weight:500}
.ledger{background:var(--paper);border:1px solid var(--rule-2);border-radius:3px}
.entry{display:grid;grid-template-columns:62px 1fr auto;gap:2px var(--espaco-3);align-items:center;width:100%;text-align:left;padding:14px 14px;border:0;border-top:1px solid var(--rule);background:transparent;cursor:pointer}
.entry:first-child{border-top:0}
.entry:active{background:var(--carbon-soft)}
.entry .t{grid-row:span 2;font:600 17px var(--f-num);color:var(--carbon)}
.entry .c{font-weight:700;font-size:17px}
.entry .s{color:var(--ink-2);font-size:14.5px;grid-column:2}
.entry .n{grid-row:span 2;font:600 14px var(--f-num);color:var(--serial)}
.entry .ref{color:var(--ink-3)}
.entry.done{background:var(--canary-soft)}
.entry.ok{background:#EAF6EF}
.stamp{display:inline-block;font:700 11px/1 var(--f-label);letter-spacing:.12em;text-transform:uppercase;padding:var(--espaco-1) 6px;border:1.5px solid currentColor;border-radius:2px;margin-top:var(--espaco-1)}
.stamp.wait{color:var(--canary-ink);background:var(--canary-soft)}
.stamp.ok{color:var(--copy-green-ink);background:var(--copy-green)}
.foot-note{margin:14px 6px 0;color:var(--ink-3);font-size:13.5px}

/* ---------- o talão ---------- */
.slip{background:var(--paper);border:1px solid var(--rule-2);border-radius:3px;position:relative}
.head{padding:14px 14px var(--espaco-3)}
.head-top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--espaco-3)}
.lbl{font:600 11.5px/1.1 var(--f-label);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.serial{font:700 23px/1 var(--f-num);color:var(--serial);letter-spacing:.02em}
.serial small{font:600 12px var(--f-label);letter-spacing:.08em;margin-right:var(--espaco-1);color:var(--serial)}
.head .cli{margin:10px 0 0;font:700 22px/1.15 var(--f-ui);letter-spacing:-.01em}
.head .loc{margin:3px 0 0;color:var(--ink-2)}
.head .ori{margin:10px 0 0;padding:10px var(--espaco-3);background:var(--carbon-soft);border-radius:2px;font-size:15px;color:var(--ink)}
.head .ori b{display:block;font:600 11px/1 var(--f-label);letter-spacing:.1em;text-transform:uppercase;color:var(--carbon);margin-bottom:5px}

/* picote: furos de verdade, recortados na cor da mesa */
.perf{height:14px;position:relative;background:radial-gradient(circle at 7px 7px,var(--desk) 3.4px,transparent 3.9px) 4px 0/14px 14px repeat-x}
.perf::before,.perf::after{content:"";position:absolute;top:0;width:9px;height:14px;background:var(--desk)}
.perf::before{left:-1px;border-radius:0 9px 9px 0;border-right:1px solid var(--rule-2)}
.perf::after{right:-1px;border-radius:9px 0 0 9px;border-left:1px solid var(--rule-2)}

/* grade de campos */
.grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule)}
.cell{position:relative;border-bottom:1px solid var(--rule);min-width:0}
.cell.l{border-right:1px solid var(--rule)}
.cell.full{grid-column:1/-1}
.cell>button.open{appearance:none;width:100%;border:0;background:transparent;text-align:left;padding:11px 14px var(--espaco-3);min-height:72px;display:flex;flex-direction:column;gap:5px;cursor:pointer}
.cell>button.open:active{background:var(--carbon-soft)}
.val{font:600 18px/1.2 var(--f-ui);color:var(--ink);overflow-wrap:anywhere}
.val.empty{color:var(--ink-3);font-weight:500}
.val small{display:block;font:500 13.5px/1.3 var(--f-ui);color:var(--ink-2);margin-top:2px}
.cell .chev{position:absolute;right:12px;top:14px;color:var(--ink-3)}
.cell.open-now{background:var(--carbon-soft)}
.cell.open-now .chev{transform:rotate(180deg);color:var(--carbon)}
.cell.miss .lbl{color:var(--error)}
.cell.miss .lbl::after{content:" · falta";text-transform:none;letter-spacing:0}

/* opções que abrem dentro do campo */
.opts{list-style:none;margin:0;padding:0 0 6px;border-top:1px solid var(--carbon-line);background:var(--paper)}
.opts li button{appearance:none;width:100%;border:0;background:transparent;display:flex;align-items:center;gap:var(--espaco-3);padding:var(--espaco-3) 14px;min-height:50px;text-align:left;cursor:pointer;font-weight:500;font-size:17px}
.opts li+li button{border-top:1px solid var(--rule)}
.opts .mark{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--rule-2);flex:none;display:grid;place-items:center}
.opts [aria-checked="true"]{font-weight:700}
.opts [aria-checked="true"] .mark{border:6px solid var(--carbon)}
.opts .k{font:500 13px var(--f-num);color:var(--ink-3);margin-left:auto}
.sub{padding:var(--espaco-3) 14px 14px;border-top:1px solid var(--carbon-line);display:flex;flex-direction:column;gap:var(--espaco-3);background:var(--paper)}
.sub .row{display:flex;flex-wrap:wrap;gap:6px}
.pick{appearance:none;border:1px solid var(--rule-2);background:var(--paper);border-radius:3px;padding:9px var(--espaco-3);min-height:44px;font-weight:600;cursor:pointer}
.pick[aria-pressed="true"]{background:var(--carbon);border-color:var(--carbon);color:#fff}
.field{display:flex;flex-direction:column;gap:6px}
.text{width:100%;border:1px solid var(--rule-2);border-radius:3px;background:#fff;padding:11px var(--espaco-3);min-height:48px;font-size:17px}
.text:focus{outline:none;border-color:var(--carbon);box-shadow:0 0 0 3px var(--carbon-soft)}
.text.num{font-family:var(--f-num)}
.done-btn{align-self:flex-start;appearance:none;border:0;background:transparent;color:var(--carbon);font-weight:700;padding:6px 0;cursor:pointer}

/* horário */
.time{padding:11px 14px var(--espaco-3);min-height:72px;display:flex;flex-direction:column;gap:5px}
.time .val{font:600 22px/1.1 var(--f-num)}
.mark-time{appearance:none;align-self:flex-start;border:1px solid var(--carbon);background:var(--paper);color:var(--carbon);border-radius:3px;padding:7px var(--espaco-3);min-height:40px;font-weight:700;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.mark-time:disabled{border-color:var(--rule);color:var(--ink-3);cursor:default}

/* fotos */
.photo{padding:11px 14px 14px;display:flex;flex-direction:column;gap:var(--espaco-2)}
.shots{display:flex;gap:6px;flex-wrap:wrap}
.shot{position:relative;width:62px;height:62px;border-radius:2px;overflow:hidden;background:var(--desk)}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot button{position:absolute;top:2px;right:2px;width:24px;height:24px;border-radius:50%;border:0;background:rgba(20,26,42,.78);color:#fff;display:grid;place-items:center;cursor:pointer}
.shot button svg{width:14px;height:14px}
.add-shot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:62px;height:62px;border:1.5px dashed var(--carbon);border-radius:2px;color:var(--carbon);font:600 12px var(--f-label);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.add-shot:focus-within{outline:3px solid var(--carbon);outline-offset:2px}

/* material */
.mat-head{display:flex;justify-content:space-between;align-items:baseline;padding:11px 14px 6px}
.mat-head .lbl small{text-transform:none;letter-spacing:0;font:500 13px var(--f-ui);color:var(--ink-3);margin-left:6px}
.mats{list-style:none;margin:0;padding:0}
.mats li{display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--espaco-1) 10px;padding:var(--espaco-2) 10px var(--espaco-2) 14px;border-top:1px dotted var(--rule-2)}
.mats .nm{font-weight:600}
.mats .src{appearance:none;border:0;background:transparent;padding:0;font:600 12.5px var(--f-label);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);text-align:left;cursor:pointer;justify-self:start}
.mats .src b{color:var(--carbon);font-weight:700}
.qty{grid-row:span 2;display:flex;align-items:center;border:1px solid var(--rule-2);border-radius:3px}
.qty button{appearance:none;width:44px;height:44px;border:0;background:transparent;color:var(--carbon);display:grid;place-items:center;cursor:pointer}
.qty button:active{background:var(--carbon-soft)}
.qty output{min-width:58px;text-align:center;font:600 16px var(--f-num);border-left:1px solid var(--rule);border-right:1px solid var(--rule);line-height:44px}
.qty output small{font:500 11px var(--f-label);letter-spacing:.04em;color:var(--ink-3);margin-left:3px}
.qty .gq{display:flex;align-items:center;border-left:1px solid var(--rule);border-right:1px solid var(--rule);padding-right:8px}
.qty .gq input{width:62px;height:44px;border:0;background:transparent;text-align:right;font:600 16px var(--f-num);padding:0 2px}
.qty .gq input:focus{outline:none;background:var(--carbon-soft)}
.qty .gq small{font:500 11px var(--f-label);letter-spacing:.04em;color:var(--ink-3);margin-left:3px}
.mats .src{cursor:default}
.photo .lbl small{text-transform:none;letter-spacing:0;font:500 13px var(--f-ui);color:var(--ink-3);margin-left:6px}
.rm-eq{color:var(--ink-3);font-weight:600}
.add-item{appearance:none;width:100%;border:0;border-top:1px dotted var(--rule-2);background:transparent;color:var(--carbon);font-weight:700;text-align:left;padding:13px 14px;cursor:pointer;display:flex;gap:var(--espaco-2);align-items:center}
.mat-empty{padding:var(--espaco-1) 14px var(--espaco-3);color:var(--ink-3);font-size:15px}

/* relato */
.report{padding:11px 14px 14px;display:flex;flex-direction:column;gap:var(--espaco-2)}
.ta{position:relative}
.ta textarea{width:100%;min-height:96px;resize:none;border:1px solid var(--rule-2);border-radius:3px;padding:11px 54px 11px var(--espaco-3);font-size:17px;line-height:1.45;background:#fff}
.ta textarea:focus{outline:none;border-color:var(--carbon);box-shadow:0 0 0 3px var(--carbon-soft)}
.ta .mic{position:absolute;right:6px;bottom:6px;width:42px;height:42px;border:1px solid var(--rule);border-radius:3px;background:#fff;color:var(--carbon);display:grid;place-items:center;cursor:pointer}
.hint{margin:0;color:var(--ink-3);font-size:14px}

/* ---------- barra de fechar ---------- */
.closebar{position:fixed;left:0;right:0;bottom:0;z-index:15;background:var(--paper);border-top:1px solid var(--rule-2);padding:10px var(--espaco-3) calc(10px + env(safe-area-inset-bottom,0px))}
.closebar-in{max-width:440px;margin:0 auto;display:flex;align-items:center;gap:var(--espaco-3)}
.left{flex:1;min-width:0;line-height:1.2}
.left b{display:block;font:700 16px var(--f-ui)}
.left span{display:block;color:var(--ink-2);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.left.ready b{color:var(--copy-green-ink)}
.primary{appearance:none;border:0;border-radius:4px;background:var(--carbon);color:#fff;font:700 18px var(--f-ui);padding:0 22px;min-height:56px;cursor:pointer;display:inline-flex;align-items:center;gap:var(--espaco-2)}
.primary:active{background:var(--carbon-2)}
.primary[aria-disabled="true"]{background:var(--paper);color:var(--carbon);box-shadow:inset 0 0 0 1.5px var(--carbon)}

.form-foot{margin:0;padding:10px 14px var(--espaco-3);font:600 11px/1.3 var(--f-label);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- a via que destaca (assinatura) ---------- */
/* a parte de baixo rasga no picote; o cabeçalho fica como canhoto */
.slip.torn{overflow:hidden}
.tearing{animation:tear .75s var(--ease) forwards;transform-origin:85% 0}
@keyframes tear{
  0%{transform:none}
  25%{transform:translateY(5px) rotate(.6deg)}
  100%{transform:translateY(70vh) rotate(5deg);opacity:0}
}
/* a 2ª via: as mesmas células do talão, em amarelo, com a borda de cima picotada */
.copy{position:relative;background:var(--canary-soft);border:1px solid #DDBF52;border-top:0;border-radius:0 0 3px 3px;
  --cut:var(--desk)}
.copy::before{content:"";display:block;height:9px;background:radial-gradient(circle at 7px 0,var(--cut) 4px,transparent 4.5px) 4px 0/14px 9px repeat-x;border-bottom:1px dashed #DDBF52}
.copy.green{background:#E3F3E9;border-color:#9ACFAE}
.copy.green::before{border-bottom-color:#9ACFAE}
.copy .grid{border-top-color:#E2C766}
.copy .cell{border-color:#E2C766}
.copy.green .grid,.copy.green .cell{border-color:#A9D6BA}
.copy-head{padding:14px 14px 14px;display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:var(--espaco-1) var(--espaco-3)}
.copy-head .lbl{color:var(--canary-ink)}
.copy-head .serial{font-size:24px}
.copy-head .cli{grid-column:1/-1;margin:var(--espaco-2) 0 0;font:700 22px/1.15 var(--f-ui)}
.copy-note{grid-column:1/-1;margin:0;color:var(--canary-ink)}
.copy.green .copy-note,.copy.green .copy-head .lbl{color:var(--copy-green-ink)}
.ro{padding:11px 14px var(--espaco-3);display:flex;flex-direction:column;gap:5px}
.copy .form-foot{color:var(--canary-ink)}
.stamp-corner{position:absolute;right:12px;top:58px;transform:rotate(-7deg);font:700 13px/1 var(--f-label);letter-spacing:.16em;text-transform:uppercase;
  color:var(--canary-ink);border:2px solid currentColor;border-radius:3px;padding:6px var(--espaco-2);opacity:.85}
.copy.green .stamp-corner{color:var(--copy-green-ink)}
.after{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.ghost{appearance:none;border:1px solid var(--rule-2);background:var(--paper);border-radius:4px;min-height:52px;font-weight:700;cursor:pointer}

/* logo no topo: recorte do "B" da marca */
.logo-tile{width:36px;height:36px;border-radius:4px;flex:none;background:#fff url(../assets/marca-b.svg) center/contain no-repeat}
.arrive{animation:arrive .5s var(--ease) both}
@keyframes arrive{from{transform:translateY(28px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.tearing,.arrive{animation:none}}

.toast{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:max-content;background:var(--ink);color:#fff;padding:11px var(--espaco-4);border-radius:4px;font-weight:600;z-index:40;max-width:calc(100% - 32px)}

@media (min-width:700px){
  main{padding-top:var(--espaco-5)}
}

/* ---------- deslocamento e check-in (fluxo do Auvo: aberta → a caminho → check-in → check-out) ---------- */
.go{margin-top:var(--espaco-3);display:flex;flex-direction:column;gap:var(--espaco-2)}
.go.miss{outline:2px solid var(--error);outline-offset:4px;border-radius:3px}
.nav-btn{display:flex;align-items:center;justify-content:center;gap:var(--espaco-2);min-height:48px;border-radius:4px;background:var(--carbon-soft);color:var(--carbon);font-weight:700;text-decoration:none;border:1px solid var(--carbon-line)}
.nav-btn:active{background:var(--carbon-line)}
.go .pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--espaco-2)}
.step-btn{appearance:none;display:flex;align-items:center;justify-content:center;gap:7px;min-height:52px;border-radius:4px;border:1.5px solid var(--carbon);background:var(--paper);color:var(--carbon);font:700 16.5px var(--f-ui);cursor:pointer;padding:0 10px;text-align:center}
.step-btn.main{background:var(--carbon);color:#fff}
.step-btn.main:active{background:var(--carbon-2)}
.step-btn.on{background:var(--canary-soft);border-color:#DDBF52;color:var(--canary-ink);cursor:default;font-size:15px}
.go>.step-btn{width:100%}
.stage{margin:0;display:flex;align-items:center;gap:7px;color:var(--ink-2);font-size:15px}
.stage b{color:var(--ink)}
.stage.done{color:var(--copy-green-ink);background:#EAF6EF;border:1px solid #A9D6BA;border-radius:3px;padding:10px var(--espaco-3)}
.stage.ask{font-weight:700;color:var(--ink)}
/* lista: outros dias */
.sec-h{margin:22px 6px var(--espaco-2);font:600 12px/1.2 var(--f-label);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.sec-h:first-child{margin-top:var(--espaco-1)}
.sec-h.late{color:var(--error)}
.sec-h span,.sec-toggle span{font-family:var(--f-num);margin-left:var(--espaco-1)}
.sec-toggle{appearance:none;border:0;background:transparent;color:var(--carbon);font-weight:700;font-size:15px;padding:14px 6px var(--espaco-2);cursor:pointer}
.entry .t small{display:block;font:500 11.5px var(--f-num);color:var(--ink-3)}
.fix-btn{appearance:none;width:100%;min-height:48px;border-radius:4px;border:1.5px solid var(--carbon);background:var(--paper);color:var(--carbon);font:700 16px var(--f-ui);cursor:pointer;margin-bottom:10px}

/* pop-up ao fechar a OS */
.ask-bg{position:fixed;inset:0;z-index:40;background:rgba(20,26,42,.45);display:flex;align-items:flex-end;justify-content:center}
.ask{width:100%;max-width:520px;background:var(--paper);border-radius:10px 10px 0 0;padding:20px 18px calc(18px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px;box-shadow:0 -12px 32px rgba(0,0,0,.2);animation:askup .25s var(--ease)}
@keyframes askup{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
.ask h2{margin:0;font:700 21px var(--f-ui);color:var(--ink)}
.ask p{margin:0 0 6px;color:var(--ink-2);font-size:15px}
.ask .primary{width:100%;justify-content:center;min-height:54px}
.ask .row{display:flex;flex-wrap:wrap;gap:6px}
.ask .field{display:flex;flex-direction:column;gap:6px;margin:6px 0}
.ask-rem{appearance:none;border:1px solid var(--rule-2);background:var(--paper);color:var(--ink);border-radius:4px;min-height:44px;font:600 15px var(--f-ui);cursor:pointer}
.ask-back{appearance:none;border:0;background:transparent;color:var(--ink-3);font:600 14.5px var(--f-ui);padding:6px;cursor:pointer}
@media (prefers-reduced-motion:reduce){.ask{animation:none}}

.who-call{margin:var(--espaco-1) 0 0;color:var(--ink-2);font-size:15px}
.who-call b{color:var(--ink)}
.who-call a{color:var(--carbon);font-weight:700}
.auto-ck{margin:0;display:flex;gap:var(--espaco-2);align-items:flex-start;color:var(--ink-2);font-size:14.5px;line-height:1.4}
.auto-ck .i{color:var(--carbon);margin-top:1px}
.auto-ck b{color:var(--ink)}
.auto-ck.off{color:var(--ink-3)}
.auto-ck .sim{display:block;margin-top:var(--espaco-1);padding:var(--espaco-1) 0;font-size:14px}
.left.tap{cursor:pointer;border-radius:3px}
.left.tap:active{background:var(--error-soft)}
.left.tap b{color:var(--error)}
.cell.miss .sub .lbl{color:var(--ink-2)}
.cell.miss .sub .lbl::after{content:none}