/* Fabricação Própria: tela de demonstração (Proposta Cecora Tecnologia). Tema amarelo + grafite. */
:root{--marca:#F8CB00;--marca-tinta:#1E2022;--lateral:#1E2022;--lateral2:#151718;--grafite:#1E2022;--amarelo:#F8CB00;--amarelo-c:#FFF6CC}
.app{grid-template-columns:236px 1fr}
.side{padding:16px 12px;gap:3px}
.side .marca{padding:4px 4px 14px}
.side .marca img{height:auto;width:100%;max-width:206px}
.side .sec{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.38);font-weight:700;padding:10px 12px 4px}
.side a{position:relative}
.side a .qt{margin-left:auto;font-family:var(--f-num);font-size:12.5px;font-weight:800;background:var(--erro);color:#fff;border-radius:999px;padding:1px 7px;min-width:20px;text-align:center}
.side a .qt.am{background:var(--amarelo);color:var(--grafite)}
.side .pe{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding:10px 6px 4px;border-top:1px solid rgba(255,255,255,.08)}
.side .sync{display:flex;align-items:center;gap:8px;font-size:12px;color:rgba(255,255,255,.62);font-weight:600}
.side .sync i{width:8px;height:8px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 3px rgba(61,220,132,.18)}
.side .sync.off i{background:#999;box-shadow:none}
.side .zerar{all:unset;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:rgba(255,255,255,.7);padding:8px 10px;border-radius:10px;border:1px dashed rgba(255,255,255,.18)}
.side .zerar:hover{color:#fff;border-color:var(--amarelo)}
.side .zerar svg{width:16px;height:16px}
.main{padding-bottom:70px}
.topo{margin-bottom:16px}
.topo .eyebrow{font-family:'Fraunces',Georgia,serif;font-size:15px;letter-spacing:0;text-transform:none;font-weight:800;color:#8a6d00;display:flex;align-items:center;gap:8px}
.topo .eyebrow::before{content:none}
.btn.sm{padding:8px 12px;font-size:13.5px;border-radius:10px}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;filter:grayscale(.4)}
.btn.zap{background:#1F9D57;color:#fff;box-shadow:0 10px 22px -12px #1F9D57}
.muted{color:var(--mudo)}
.peq{font-size:12.5px}
.dir{text-align:right}
.flex{display:flex;align-items:center;gap:10px}
.entre{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sep{height:1px;background:var(--linha);margin:12px 0}
.card h3 .muted{font-family:var(--f-txt);font-weight:600;font-size:13px}
.card .cab{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.card .cab h3{margin:0}
.card .cab .dir{margin-left:auto;display:flex;gap:8px;align-items:center}
/* relógio do corte */
.corte{background:radial-gradient(120% 140% at 100% 0%,#3a3d40 0%,var(--grafite) 55%);color:#fff;border:0}
.corte .rot{color:rgba(255,255,255,.6)}
.corte .hora{font-family:var(--f-num);font-weight:800;font-size:44px;line-height:1;color:var(--amarelo);letter-spacing:.02em;margin-top:6px}
.corte .hora small{font-size:22px;color:rgba(248,203,0,.6)}
.corte .linha{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13px;font-weight:600;color:rgba(255,255,255,.82)}
.corte .trilho{height:7px;border-radius:9px;background:rgba(255,255,255,.12);margin-top:10px;overflow:hidden}
.corte .trilho i{display:block;height:100%;background:linear-gradient(90deg,#ffe57a,var(--amarelo));border-radius:9px}
.corte .selo{position:absolute;right:14px;top:14px}
.tag.esc{background:rgba(255,255,255,.12);color:#fff}
.tag.am{background:var(--amarelo);color:var(--grafite)}
/* lojas */
.lj{padding:0;display:flex;flex-direction:column}
.lj .faixa{height:6px;background:var(--c)}
.lj .lg{height:66px;display:grid;place-items:center;padding:10px 14px 0}
.lj .lg img{max-height:54px;max-width:100%;object-fit:contain}
.lj .corpo{padding:10px 14px 14px}
.lj .n{font-family:var(--f-num);font-weight:800;font-size:28px;line-height:1}
.lj .l2{display:flex;justify-content:space-between;align-items:center;margin-top:8px;gap:6px;flex-wrap:wrap}
/* progresso */
.barra{height:9px;border-radius:9px;background:rgba(27,28,29,.08);overflow:hidden}
.barra i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,#ffd84a,var(--amarelo));transition:width .6s cubic-bezier(.2,.7,.2,1)}
.barra.ok i{background:linear-gradient(90deg,#3cc77b,var(--ok))}
.barra.erro i{background:linear-gradient(90deg,#f06b5e,var(--erro))}
.barra.alerta i{background:linear-gradient(90deg,#f7b042,var(--alerta))}
.op-l{display:grid;grid-template-columns:34px 1fr 64px;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--linha)}
.op-l:last-child{border-bottom:0}
.op-l .ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--amarelo-c);color:#7a5f00}
.op-l .ico svg,.al .ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.op-l b{font-size:14px}
.op-l .pc{font-family:var(--f-num);font-weight:800;font-size:20px;text-align:right}
/* alertas */
.al{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:#fff;border:1px solid var(--linha);text-decoration:none;color:inherit;transition:transform .15s,box-shadow .2s}
.al+.al{margin-top:8px}
.al:hover{transform:translateX(2px);box-shadow:0 8px 18px -12px rgba(0,0,0,.35)}
.al .ico{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:none}
.al.erro .ico{background:color-mix(in srgb,var(--erro) 14%,#fff);color:var(--erro)}
.al.alerta .ico{background:color-mix(in srgb,var(--alerta) 16%,#fff);color:#b26d00}
.al.info .ico{background:color-mix(in srgb,var(--info) 12%,#fff);color:var(--info)}
.al b{display:block;font-size:14px}
.al small{color:var(--mudo);font-size:12.5px;line-height:1.35;display:block;margin-top:2px}
.al .vai{margin-left:auto;align-self:center;color:var(--mudo)}
.al .vai svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
/* grade de pedidos */
.grade{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
.grade th{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--mudo);font-weight:800;padding:8px 6px 10px;border-bottom:1px solid var(--linha);text-align:center;vertical-align:bottom}
.grade th.pr{text-align:left;padding-left:10px}
.grade th .lgm{height:30px;display:grid;place-items:center;margin-bottom:4px}
.grade th .lgm img{max-height:30px;max-width:74px;object-fit:contain}
.grade th .cr{display:block;height:3px;border-radius:3px;background:var(--c);margin:5px auto 0;width:46px}
.grade td{padding:5px 6px;border-bottom:1px solid var(--linha);text-align:center}
.grade td.pr{text-align:left;padding-left:10px;font-weight:700;white-space:nowrap}
.grade td.pr small{display:block;font-weight:500;color:var(--mudo);font-size:11.5px}
.grade input{width:100%;max-width:76px;text-align:center;border:1px solid transparent;border-radius:9px;padding:8px 4px;background:rgba(27,28,29,.035);font-family:var(--f-num);font-weight:700;font-size:17px;outline:none;transition:.15s}
.grade input:hover{border-color:var(--linha)}
.grade input:focus{background:#fff;border-color:var(--amarelo);box-shadow:0 0 0 3px rgba(248,203,0,.3)}
.grade td.sel input{background:var(--amarelo-c);border-color:#e9be00}
.grade input.sug{background:#eef7f1;border-color:#bfe3cc}
.grade .tot{font-family:var(--f-num);font-weight:800;font-size:18px}
.grade .fs{font-family:var(--f-num);font-weight:700;font-size:16px;color:#7a5f00}
.grade tfoot td{font-family:var(--f-num);font-weight:800;font-size:17px;border-bottom:0;padding-top:10px}
.grade tfoot td.pr{font-family:var(--f-txt);font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--mudo)}
.grade tr.dest td{background:linear-gradient(90deg,var(--amarelo-c),#fff)}
.conta{background:linear-gradient(160deg,#fffdf2,#fff);border:1px solid #f1e3a3}
.conta table{width:100%;font-size:13.5px;border-collapse:collapse}
.conta td{padding:5px 0;border-bottom:1px dashed rgba(27,28,29,.12)}
.conta td:last-child{text-align:right;font-family:var(--f-num);font-weight:700;font-size:15px}
.conta tr.r td{border-bottom:0;font-weight:800;padding-top:8px}
.conta tr.r td:last-child{font-size:24px;color:var(--grafite)}
.conta .eq{font-family:var(--f-num);font-weight:700;font-size:14px;background:#fff;border:1px solid var(--linha);border-radius:10px;padding:8px 10px;margin-top:10px;line-height:1.5}
.festa{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--linha)}
.festa:last-child{border-bottom:0}
.festa .ct{width:46px;height:46px;border-radius:12px;background:var(--grafite);color:var(--amarelo);display:grid;place-items:center;text-align:center;line-height:1}
.festa .ct b{font-family:var(--f-num);font-size:20px;display:block}
.festa .ct small{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.pt-loja{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--c);margin-right:5px;box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(0,0,0,.12)}
/* OP */
.ops{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:14px;align-items:start}
.opc{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:12px;border-radius:14px;border:1px solid var(--linha);background:#fff;cursor:pointer;transition:.15s;width:100%;text-align:left}
.opc+.opc{margin-top:8px}
.opc:hover{border-color:#e7c300}
.opc.on{border-color:var(--grafite);box-shadow:0 12px 24px -16px rgba(0,0,0,.5);background:linear-gradient(90deg,var(--amarelo-c),#fff 60%)}
.opc .av{width:44px;height:44px;border-radius:12px;background:var(--grafite);color:var(--amarelo);display:grid;place-items:center;font-family:var(--f-num);font-weight:800;font-size:15px;letter-spacing:.04em}
.opc .av.ok{background:var(--ok);color:#fff}
.opc b{font-size:15px}
.opc .l3{display:flex;gap:6px;align-items:center;margin-top:5px;flex-wrap:wrap}
.opc .q{font-family:var(--f-num);font-weight:800;font-size:22px;text-align:right;line-height:1}
.opc .q small{display:block;font-size:11px;font-family:var(--f-txt);color:var(--mudo);font-weight:600}
.cons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}
.cons .c{background:#fff;border:1px solid var(--linha);border-radius:14px;padding:12px 14px;box-shadow:var(--sombra)}
.cons .c .v{font-family:var(--f-num);font-weight:800;font-size:28px;line-height:1;margin-top:4px}
.cons .c.res{background:var(--grafite);color:#fff;border:0}
.cons .c.res .v{color:var(--amarelo)}
.cons .c.res .rot{color:rgba(255,255,255,.6)}
.etapas{display:flex;gap:4px;margin:10px 0 4px}
.etapas span{flex:1;height:30px;border-radius:8px;background:rgba(27,28,29,.06);font-size:11px;font-weight:700;display:grid;place-items:center;color:var(--mudo);text-align:center;line-height:1.05;padding:0 2px}
.etapas span.ok{background:var(--grafite);color:var(--amarelo)}
.etapas span.at{background:var(--amarelo);color:var(--grafite);box-shadow:0 0 0 2px var(--grafite) inset}
.ins-t td{padding:8px 10px}
.ins-t .falta td{background:color-mix(in srgb,var(--erro) 6%,#fff)}
.aviso{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:12px;font-size:13.5px;font-weight:600;line-height:1.4}
.aviso svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.aviso.erro{background:color-mix(in srgb,var(--erro) 10%,#fff);color:#a8291d}
.aviso.ok{background:color-mix(in srgb,var(--ok) 11%,#fff);color:#137a42}
.aviso.alerta{background:color-mix(in srgb,var(--alerta) 13%,#fff);color:#8a5200}
.aviso.info{background:var(--amarelo-c);color:#5c4700}
/* insumos */
.ins{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:14px;align-items:start}
.mini-b{display:flex;align-items:center;gap:8px;min-width:120px}
.mini-b .barra{flex:1;height:8px;position:relative;overflow:visible}
.mini-b .barra::after{content:"";position:absolute;left:var(--m);top:-3px;bottom:-3px;width:2px;background:var(--grafite);border-radius:2px}
.forn{border:1px solid var(--linha);border-radius:14px;padding:12px 14px;background:#fff}
.forn+.forn{margin-top:10px}
.forn .it{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;padding:5px 0;border-bottom:1px dashed rgba(27,28,29,.1)}
.forn .it:last-of-type{border-bottom:0}
.forn .it b{font-family:var(--f-num);font-size:15px}
.forn .tt{display:flex;align-items:center;justify-content:space-between;margin-top:8px;gap:10px;flex-wrap:wrap}
.forn .tt .v{font-family:var(--f-num);font-weight:800;font-size:20px}
.compra-top{background:var(--grafite);color:#fff;border:0}
.compra-top .rot{color:rgba(255,255,255,.62)}
.compra-top .v{font-family:var(--f-num);font-weight:800;font-size:30px;color:var(--amarelo);line-height:1}
.form-g{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;align-items:end}
.form-g .s2{grid-column:span 2}.form-g .s3{grid-column:span 3}
.pre{position:relative}
.pre span{position:absolute;left:12px;bottom:12px;font-weight:700;color:var(--mudo);font-size:14px}
.pre input{padding-left:36px!important}
/* fichas */
.fich{display:grid;grid-template-columns:210px minmax(0,1fr) 300px;gap:14px;align-items:start}
.lista-p button{all:unset;cursor:pointer;display:flex;justify-content:space-between;align-items:center;width:100%;box-sizing:border-box;padding:10px 12px;border-radius:11px;font-weight:700;font-size:14px}
.lista-p button:hover{background:rgba(27,28,29,.05)}
.lista-p button.on{background:var(--grafite);color:#fff}
.lista-p button.on small{color:var(--amarelo)}
.lista-p small{font-family:var(--f-num);font-weight:700;font-size:13px;color:var(--mudo)}
.cell-in{width:86px;text-align:right;border:1px solid var(--linha);border-radius:9px;padding:7px 8px;font-family:var(--f-num);font-weight:700;font-size:15px;outline:none;background:#fff}
.cell-in:focus{border-color:var(--amarelo);box-shadow:0 0 0 3px rgba(248,203,0,.3)}
.custo-u{background:var(--grafite);color:#fff;border:0;text-align:center}
.custo-u .rot{color:rgba(255,255,255,.6)}
.custo-u .v{font-family:var(--f-num);font-weight:800;font-size:54px;color:var(--amarelo);line-height:1;margin:6px 0 4px}
.mg{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--linha);font-size:14px}
.mg:last-child{border-bottom:0}
.mg b{font-family:var(--f-num);font-size:17px}
.anel{--p:50;width:120px;height:120px;border-radius:50%;background:conic-gradient(var(--ok) calc(var(--p)*1%),rgba(27,28,29,.08) 0);display:grid;place-items:center;margin:4px auto 8px}
.anel div{width:92px;height:92px;border-radius:50%;background:#fff;display:grid;place-items:center;text-align:center;line-height:1}
.anel b{font-family:var(--f-num);font-size:28px;font-weight:800}
.anel small{display:block;font-size:10.5px;color:var(--mudo);font-weight:700;margin-top:3px}
/* checklist */
.turnos{display:flex;gap:8px;flex-wrap:wrap}
.turnos button{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:6px;min-width:150px;padding:10px 14px;border-radius:14px;background:#fff;border:1px solid var(--linha);box-shadow:var(--sombra);flex:1}
.turnos button.on{background:var(--grafite);color:#fff;border-color:var(--grafite)}
.turnos button.on .muted{color:rgba(255,255,255,.6)}
.turnos button b{font-size:15px}
.turnos .entre .num{font-size:20px}
.ck{display:grid;grid-template-columns:52px minmax(0,1fr) 172px 150px;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;background:#fff;border:1px solid var(--linha);transition:.2s}
.ck+.ck{margin-top:8px}
.ck.feito{background:linear-gradient(90deg,#effaf3,#fff 55%);border-color:#cdeedb}
.ck.atras{border-color:color-mix(in srgb,var(--erro) 45%,#fff);box-shadow:inset 4px 0 0 var(--erro)}
.ck.fora{border-color:color-mix(in srgb,var(--erro) 45%,#fff);background:linear-gradient(90deg,#fff1ef,#fff 60%)}
.ck .chk{all:unset;cursor:pointer;width:46px;height:46px;border-radius:14px;border:2px solid rgba(27,28,29,.2);display:grid;place-items:center;background:#fff;transition:.2s}
.ck .chk svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.ck.feito .chk{background:var(--ok);border-color:var(--ok)}
.ck.feito .chk svg{opacity:1}
.ck .t{font-weight:700;font-size:15px}
.ck .d{font-size:12.5px;color:var(--mudo);margin-top:2px}
.ck .meta{display:flex;gap:6px;align-items:center;margin-top:6px;flex-wrap:wrap}
.ck select{width:100%;border:1px solid var(--linha);border-radius:10px;padding:9px 8px;font-size:13.5px;background:#fff;font-weight:600}
.temp{display:flex;align-items:center;gap:6px;margin-top:8px}
.temp input{width:84px;border:1px solid var(--linha);border-radius:10px;padding:8px 8px;font-family:var(--f-num);font-weight:800;font-size:18px;text-align:center;outline:none}
.temp input:focus{border-color:var(--amarelo);box-shadow:0 0 0 3px rgba(248,203,0,.3)}
.temp .pm{all:unset;cursor:pointer;width:34px;height:36px;border-radius:9px;border:1px solid var(--linha);display:grid;place-items:center;font-weight:800;font-size:16px;background:#fff}
.temp .faixa{font-size:12px;color:var(--mudo);font-weight:600}
.foto{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.foto .th{width:64px;height:48px;border-radius:9px;object-fit:cover;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 6px 12px -8px rgba(0,0,0,.4);cursor:zoom-in;background:#ddd}
.foto .cam{all:unset;cursor:pointer;width:64px;height:48px;border-radius:9px;border:1.5px dashed rgba(27,28,29,.25);display:grid;place-items:center;color:var(--mudo)}
.foto .cam:hover{border-color:var(--grafite);color:var(--grafite)}
.foto .cam svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.hist{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.hist button{all:unset;cursor:pointer;text-align:center;padding:10px 6px;border-radius:12px;background:#fff;border:1px solid var(--linha)}
.hist button.on{border-color:var(--grafite);box-shadow:0 0 0 1px var(--grafite)}
.hist button b{display:block;font-family:var(--f-num);font-size:20px}
.hist button small{display:block;font-size:11.5px;color:var(--mudo);font-weight:600}
.hist .pb{height:5px;border-radius:5px;background:rgba(27,28,29,.08);margin-top:6px;overflow:hidden}
.hist .pb i{display:block;height:100%;background:var(--ok)}
/* lotes */
.lotes-g{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:14px;align-items:start}
.tab tr.sel td{background:var(--amarelo-c)}
.etq-wrap{display:grid;place-items:center;padding:18px;background:repeating-linear-gradient(45deg,#ece7da 0 10px,#e6e0d1 10px 20px);border-radius:14px}
.etq{width:420px;max-width:100%;background:#fff;color:#111;border-radius:6px;padding:14px 16px;box-shadow:0 18px 40px -20px rgba(0,0,0,.55);font-family:Arial,Helvetica,sans-serif}
.etq .t1{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;border-bottom:2px solid #111;padding-bottom:8px}
.etq .t1 .pn{font-size:22px;font-weight:900;line-height:1.05;text-transform:uppercase}
.etq .t1 .q{font-size:12px;font-weight:700;margin-top:3px}
.etq .t1 img{height:42px}
.etq .meio{display:grid;grid-template-columns:1fr 112px;gap:12px;padding:8px 0}
.etq .kv{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;font-size:12.5px;align-content:start}
.etq .kv span{color:#555;font-weight:700;text-transform:uppercase;font-size:10.5px;letter-spacing:.04em;padding-top:2px}
.etq .kv b{font-size:14px}
.etq .kv b.lote{font-family:'Courier New',monospace;font-size:16px;letter-spacing:.04em}
.etq .qr svg{width:112px;height:112px;display:block}
.etq .qr small{display:block;text-align:center;font-size:9px;font-weight:700;margin-top:2px}
.etq .cons{display:block;margin:0;background:#111;color:#fff;font-weight:800;font-size:12.5px;padding:6px 8px;border-radius:4px;text-align:center;letter-spacing:.02em}
.etq .ingr{font-size:9.5px;line-height:1.35;margin-top:6px;color:#222}
.etq .ingr b{font-weight:900}
.etq .rod{font-size:9.5px;line-height:1.35;border-top:1px solid #111;margin-top:6px;padding-top:5px;color:#222}
/* expedição */
.rom{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.rom .card{padding:0}
.rom .hd{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--linha);background:linear-gradient(90deg,color-mix(in srgb,var(--c) 22%,#fff),#fff 70%)}
.rom .hd img{height:38px;max-width:90px;object-fit:contain}
.rom .hd .dir{margin-left:auto}
.rom .bd{padding:10px 14px}
.rom .bd table{width:100%;border-collapse:collapse;font-size:13.5px}
.rom .bd td,.rom .bd th{padding:6px 4px;border-bottom:1px solid var(--linha)}
.rom .bd th{font-size:11px;text-transform:uppercase;color:var(--mudo);text-align:left;letter-spacing:.04em}
.rom .bd td.n{text-align:right;font-family:var(--f-num);font-weight:700;font-size:15px}
.rom .bd input{width:64px;text-align:right;border:1px solid var(--linha);border-radius:8px;padding:5px 6px;font-family:var(--f-num);font-weight:700;font-size:15px}
.rom .bd .div td{background:color-mix(in srgb,var(--erro) 8%,#fff)}
.rom .ft{display:flex;gap:8px;flex-wrap:wrap;padding:10px 14px 14px;align-items:center}
.passos{display:flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;color:var(--mudo)}
.passos span{padding:3px 8px;border-radius:999px;background:rgba(27,28,29,.06)}
.passos span.ok{background:var(--grafite);color:var(--amarelo)}
.abas{display:inline-flex;background:#fff;border:1px solid var(--linha);border-radius:12px;padding:4px;gap:4px}
.abas button{all:unset;cursor:pointer;padding:8px 14px;border-radius:9px;font-weight:700;font-size:13.5px;color:var(--mudo)}
.abas button.on{background:var(--grafite);color:#fff}
/* NF-e */
.danfe{font-family:Arial,Helvetica,sans-serif;color:#111;background:#fff;border:1.5px solid #111;font-size:11.5px;position:relative}
.danfe .marca-d{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;overflow:hidden}
.danfe .marca-d span{transform:rotate(-24deg);font-size:46px;font-weight:900;color:rgba(217,58,43,.13);white-space:nowrap;letter-spacing:.04em}
.danfe .ln{display:grid;border-bottom:1px solid #111}
.danfe .ln>div{padding:5px 7px;border-right:1px solid #111}
.danfe .ln>div:last-child{border-right:0}
.danfe .r{font-size:8.5px;text-transform:uppercase;color:#444;font-weight:700;display:block;margin-bottom:1px}
.danfe b{font-size:12px}
.danfe table{width:100%;border-collapse:collapse}
.danfe th,.danfe td{border-bottom:1px solid #bbb;padding:4px 6px;text-align:left;font-size:11px}
.danfe th{font-size:8.5px;text-transform:uppercase;background:#f1f1f1}
.danfe td.n,.danfe th.n{text-align:right}
.danfe .chave{font-family:'Courier New',monospace;font-size:12px;font-weight:700;letter-spacing:.02em}
.danfe .tit-d{font-size:9px;font-weight:900;text-transform:uppercase;background:#111;color:#fff;padding:3px 7px;letter-spacing:.06em}
/* modal */
.mod-f{position:fixed;inset:0;z-index:95;background:rgba(18,19,20,.55);display:grid;place-items:center;padding:16px;animation:fade .2s both}
@keyframes fade{from{opacity:0}}
.mod{background:var(--fundo);border-radius:20px;box-shadow:var(--sombra-f);width:min(var(--w,620px),100%);max-height:calc(100vh - 32px);overflow:auto;animation:sobe .3s cubic-bezier(.2,1.2,.4,1) both}
@keyframes sobe{from{transform:translateY(18px) scale(.98)}}
.mod .mh{display:flex;align-items:center;gap:10px;padding:16px 18px 10px;position:sticky;top:0;background:var(--fundo);z-index:2}
.mod .mh h2{font-family:var(--f-tit);font-weight:800;font-size:22px}
.mod .mh .x{all:unset;cursor:pointer;margin-left:auto;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#fff;border:1px solid var(--linha)}
.mod .mh .x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.mod .mb{padding:4px 18px 18px}
.mod .mf{display:flex;gap:8px;justify-content:flex-end;padding:0 18px 18px;flex-wrap:wrap}
.msg-zap{white-space:pre-wrap;background:#e7f7d9;border-radius:14px 14px 4px 14px;padding:12px 14px;font-size:14px;line-height:1.45;box-shadow:0 1px 0 rgba(0,0,0,.08);max-height:340px;overflow:auto}
.vazio{text-align:center;padding:26px 12px;color:var(--mudo)}
.vazio svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.6;margin-bottom:6px;opacity:.6}
.vazio b{display:block;color:var(--tinta);margin-bottom:2px}
.ic16{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
.carregando{display:grid;place-items:center;min-height:60vh;color:var(--mudo);font-weight:700}
.rastreio{max-width:640px;margin:0 auto}
/* tablet deitado e notebook menor */
@media (max-width:1300px){
  .app{grid-template-columns:208px 1fr}
  .side a{padding:9px 10px;font-size:14px}
  .fich{grid-template-columns:180px minmax(0,1fr) 260px}
  .ck{grid-template-columns:52px minmax(0,1fr) 150px 140px}
  .main{padding-left:18px;padding-right:18px}
  .corte .hora{font-size:38px}
}
@media (max-width:1100px){
  .ops,.ins,.lotes-g{grid-template-columns:1fr}
  .fich{grid-template-columns:1fr 1fr}
  .fich>.lista-c{grid-column:1/-1}
  .lista-p{display:flex;flex-wrap:wrap;gap:4px}
  .lista-p button{width:auto}
  .cons{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .side .sec,.side .pe{display:none}
  .side .marca img{width:150px}
  .rom{grid-template-columns:1fr}
  .form-g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-g .s2,.form-g .s3{grid-column:span 2}
  .ck{grid-template-columns:52px minmax(0,1fr)}
  .ck>.c3,.ck>.c4{grid-column:2}
  .foto{justify-content:flex-start}
  .fich{grid-template-columns:1fr}
  .hist{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media print{
  body *{visibility:hidden!important}
  .imprimir,.imprimir *{visibility:visible!important}
  .imprimir{position:fixed!important;left:0;top:0;box-shadow:none!important;width:100mm!important}
  .demo-aviso{display:none}
  @page{size:auto;margin:6mm}
}
/* grades das páginas */
.g-topo{grid-template-columns:1.25fr 1fr 1fr 1fr}
.g-2b{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.g-ped{grid-template-columns:minmax(0,1fr) 330px;align-items:start}
@media (max-width:1300px){.g-ped{grid-template-columns:minmax(0,1fr) 290px}}
@media (max-width:1100px){.g-topo{grid-template-columns:repeat(2,minmax(0,1fr))}.g-ped{grid-template-columns:1fr}}
@media (max-width:900px){.g-2b{grid-template-columns:1fr}}
@media (max-width:600px){.g-topo{grid-template-columns:1fr}}
/* ajustes pós-QA */
a.btn{text-decoration:none}
.demo-aviso{left:auto;right:12px}
.side a{white-space:nowrap;font-size:14px;gap:10px}
.tab td .peq.nw,.tab td.nw{white-space:nowrap}
.tab td.dir{white-space:nowrap}
.cell-in{width:74px}
.anel{width:136px;height:136px}
.anel div{width:108px;height:108px}
.anel small{font-size:10px;padding:0 6px}
.mg b{white-space:nowrap}
.op-l{padding:6px 0;grid-template-columns:30px 1fr 58px}
.op-l .ico{width:30px;height:30px;border-radius:9px}
.op-l .pc{font-size:18px}
.op-l .barra{height:7px}
.al{padding:8px 12px}
.al+.al{margin-top:6px}
.toast{pointer-events:none}
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .side{position:sticky;top:0;z-index:50;height:auto;flex-direction:row;align-items:center;overflow-x:auto;padding:8px 10px;gap:4px}
  .side .marca{flex:none;border:0;margin:0;padding:0 6px 0 0}
  .side .marca img{width:112px}
  .cons{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ck{grid-template-columns:48px minmax(0,1fr)}
  .topo .dir{margin-left:0}
}
@media (max-width:600px){
  .cons .c .v{font-size:22px}
  .hist{grid-template-columns:repeat(3,minmax(0,1fr))}
  .etq .meio{grid-template-columns:1fr 96px}
  .etq .qr svg{width:96px;height:96px}
}
.opc>span{min-width:0}@media(max-width:600px){.opc{grid-template-columns:40px minmax(0,1fr) auto;gap:8px}.opc .av{width:40px;height:40px}}