:root{
color-scheme: light;
--parede:#F6F7F8; --superficie:#FFFFFF;
--grafite:#17191C; --grafite-medio:#5A6067; --grafite-fraco:#6B7278;
--fio:#DFE3E6; --fio-forte:#C3C9CE;
--ambar:#B9701A; --ambar-texto:#96590E; --ambar-luz:#F6EBDA;
--latao:#8A6E3E; --latao-luz:#F1EDE3;
--verde:#2C6A50; --oxido:#9B2C1E; --oxido-luz:#FAEDEB;
--e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px; --e7:48px; --e8:64px;
--t-nano:11px; --t-micro:13px; --t-corpo:15px; --t-medio:17px;
--t-grande:21px; --t-cifra:24px; --t-titulo:28px;
--r-toque:3px;
--sans:'IBM Plex Sans', ui-sans-serif, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--cond:'IBM Plex Sans Condensed', 'IBM Plex Sans', ui-sans-serif, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
--mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
}
@media (prefers-color-scheme: dark){
:root:not([data-tema]){
color-scheme: dark;
--parede:#101214; --superficie:#171A1D;
--grafite:#EDEFF1; --grafite-medio:#A6ADB4; --grafite-fraco:#939AA1;
--fio:#2A2F34; --fio-forte:#3C444A;
--ambar:#E39A46; --ambar-texto:#E9A857; --ambar-luz:#332614;
--latao:#C2A167; --latao-luz:#26231C;
--verde:#63B592; --oxido:#E58270; --oxido-luz:#2B1A17;
}
}
:root[data-tema="escuro"]{
color-scheme: dark;
--parede:#101214; --superficie:#171A1D;
--grafite:#EDEFF1; --grafite-medio:#A6ADB4; --grafite-fraco:#939AA1;
--fio:#2A2F34; --fio-forte:#3C444A;
--ambar:#E39A46; --ambar-texto:#E9A857; --ambar-luz:#332614;
--latao:#C2A167; --latao-luz:#26231C;
--verde:#63B592; --oxido:#E58270; --oxido-luz:#2B1A17;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--parede); color:var(--grafite);
font-family:var(--sans); font-size:var(--t-corpo); line-height:1.45;
-webkit-font-smoothing:antialiased}
a{color:var(--ambar-texto)}
:focus-visible{outline:2px solid var(--ambar-texto); outline-offset:2px}
.tela{max-width:560px; margin:0 auto; background:var(--superficie); min-height:100vh;
border-left:1px solid var(--fio); border-right:1px solid var(--fio)}
.pad{padding:0 var(--e4)}
.pula{position:absolute; left:-9999px}
.pula:focus{position:static}
.topo{border-top:3px solid var(--ambar); padding:var(--e4) var(--e4) var(--e3);
border-bottom:1px solid var(--fio); display:flex; align-items:baseline;
gap:var(--e2) var(--e3); flex-wrap:wrap}
.topo .marca{font-family:var(--cond); font-weight:600; font-size:var(--t-micro);
letter-spacing:.12em; text-transform:uppercase; color:var(--grafite)}
.topo .marca b{color:var(--ambar-texto); font-weight:600}
.topo nav{margin-left:auto; display:flex; gap:var(--e3) var(--e4); flex-wrap:wrap;
align-items:baseline}
.topo nav a, .topo nav button.linkado{font-family:var(--cond); font-size:var(--t-micro);
letter-spacing:.06em; text-transform:uppercase; color:var(--grafite-medio);
text-decoration:none; border:0; border-bottom:1px solid transparent;
padding:var(--e1) 0 calc(var(--e1) + 2px);
background:none; cursor:pointer}
.topo nav a[aria-current]{color:var(--grafite); border-bottom-color:var(--ambar)}
.rotulo{font-family:var(--cond); font-size:var(--t-nano); font-weight:600;
letter-spacing:.1em; text-transform:uppercase; color:var(--grafite-fraco)}
h1{font-size:var(--t-titulo); font-weight:700; letter-spacing:-.02em; margin:var(--e5) 0 var(--e1);
overflow-wrap:break-word}
h2{font-size:var(--t-grande); font-weight:700; letter-spacing:-.015em; margin:var(--e6) 0 var(--e1)}
h3{font-size:var(--t-medio); font-weight:600; margin:var(--e5) 0 var(--e1)}
.sub{color:var(--grafite-medio); font-size:var(--t-micro); margin:0 0 var(--e3)}
.nota{color:var(--grafite-medio); font-size:var(--t-micro); line-height:1.5}
.n{font-family:var(--mono); font-variant-numeric:tabular-nums;
font-feature-settings:"tnum" 1; text-align:right; white-space:nowrap}
.n .un{font-size:.72em; font-weight:400; color:var(--grafite-fraco); margin-right:.28em}
.n .c{font-size:.74em; color:var(--grafite-medio)}
.cifra{font-size:var(--t-cifra); font-weight:600; letter-spacing:-.02em}
.cifra-g{font-size:var(--t-titulo); font-weight:600; letter-spacing:-.025em}
.lista{border-top:1px solid var(--fio-forte); border-bottom:1px solid var(--fio-forte);
list-style:none; margin:0; padding:0}
.linha{display:grid; grid-template-columns:1fr auto;
grid-template-areas:"cli cli" "meta meta" "valor acao";
gap:var(--e1) var(--e4); padding:var(--e3) var(--e4);
border-bottom:1px solid var(--fio); align-items:center}
.lista > .linha:last-child{border-bottom:0}
.linha .cli{grid-area:cli; font-size:var(--t-medio); font-weight:600;
letter-spacing:-.01em; overflow-wrap:anywhere; align-self:baseline}
.linha .meta{grid-area:meta; display:flex; gap:var(--e2) var(--e3); align-items:baseline;
flex-wrap:wrap; color:var(--grafite-fraco); font-size:var(--t-micro)}
.linha .cod{font-family:var(--mono); font-size:var(--t-micro); color:var(--grafite-fraco)}
.linha .valor{grid-area:valor; justify-self:end; padding-top:var(--e1)}
.linha .acao{grid-area:acao; justify-self:end}
.linha.alta{box-shadow:inset 3px 0 0 var(--ambar)}
@media (min-width:560px){
.linha{grid-template-columns:1fr auto auto;
grid-template-areas:"cli valor acao" "meta valor acao";
gap:var(--e1) var(--e4); align-items:baseline}
.linha .valor{align-self:center; padding-top:0}
.linha .acao{align-self:center}
}
.btn{font-family:var(--sans); font-size:var(--t-micro); font-weight:600;
padding:var(--e2) var(--e3); border-radius:var(--r-toque); cursor:pointer;
border:1px solid var(--grafite); background:var(--grafite); color:var(--superficie);
min-height:40px; white-space:nowrap}
.btn.sec{background:transparent; color:var(--grafite); border-color:var(--fio-forte)}
.btn.arq{border-color:var(--ambar); background:var(--ambar); color:#fff}
:root[data-tema="escuro"] .btn.arq{color:#17191C}
@media (prefers-color-scheme: dark){:root:not([data-tema]) .btn.arq{color:#17191C}}
.btn.mini{padding:var(--e1) var(--e2); min-height:32px; font-size:var(--t-nano)}
.btn[disabled]{opacity:.55; cursor:progress}
.btn-largo{width:100%; min-height:44px; font-size:var(--t-corpo)}
.faixa{border-left:3px solid var(--fio-forte); padding:var(--e3) var(--e4);
background:var(--parede)}
.faixa.desconhecido{border-left-color:var(--latao); background:var(--latao-luz)}
.faixa.erro{border-left-color:var(--oxido); background:var(--oxido-luz)}
.faixa.ok{border-left-color:var(--verde); background:var(--parede)}
.faixa.aviso{border-left-color:var(--ambar); background:var(--ambar-luz)}
.faixa p{margin:var(--e1) 0}
.barra{height:28px; border:1px solid var(--fio-forte); display:flex; margin:var(--e3) 0 var(--e2)}
.barra .seg{height:100%}
.barra .seg.hach{background-image:repeating-linear-gradient(135deg,
var(--latao) 0 1.5px, transparent 1.5px 7px); background-color:var(--latao-luz)}
.barra .seg.medida{background:var(--grafite-medio)}
.escala{display:flex; gap:var(--e1); font-family:var(--cond); font-size:var(--t-nano);
letter-spacing:.06em; text-transform:uppercase; color:var(--grafite-fraco); flex-wrap:wrap}
.escala span{padding-right:var(--e3); border-left:1px solid var(--fio-forte);
padding-left:var(--e2)}
.escala span.on{color:var(--latao); font-weight:600; border-left-color:var(--latao)}
.rodape{border-top:1px solid var(--fio); margin-top:var(--e6); padding:var(--e4);
color:var(--grafite-fraco); font-size:var(--t-micro); line-height:1.6}
.rodape .n{display:inline; font-size:inherit; text-align:left}
.rodape b{color:var(--grafite-medio); font-weight:600}
.forma{display:flex; flex-direction:column; gap:var(--e4); margin:var(--e5) 0}
.campo{display:flex; flex-direction:column; gap:var(--e1)}
.campo label{font-family:var(--cond); font-size:var(--t-nano); font-weight:600;
letter-spacing:.1em; text-transform:uppercase; color:var(--grafite-fraco)}
.campo input, .campo select, .campo textarea{font-family:var(--sans); font-size:var(--t-medio);
padding:var(--e3); border:1px solid var(--fio-forte); border-radius:0;
background:var(--superficie); color:var(--grafite); min-height:44px; width:100%}
.campo .ajuda{font-size:var(--t-micro); color:var(--grafite-fraco)}
.copiavel{font-family:var(--mono); font-size:var(--t-micro); word-break:break-all;
background:var(--parede); border:1px solid var(--fio-forte); padding:var(--e3);
display:block; width:100%; color:var(--grafite)}
.itens-bloco{scroll-margin-top:var(--e4)}
.lista.itens{border-top:1px solid var(--fio-forte); margin-top:var(--e3)}
.item{border-bottom:1px solid var(--fio); border-left:3px solid var(--fio-forte);
padding:var(--e3) var(--e4); background:var(--superficie)}
.lista.itens > .item:last-child{border-bottom:0}
.item.tom-pendente{border-left-color:var(--ambar); background:var(--ambar-luz)}
.item.tom-loja{border-left-color:var(--verde)}
.item.tom-fabrica{border-left-color:var(--latao)}
.item .i-topo{display:flex; align-items:baseline; gap:var(--e2); flex-wrap:wrap;
margin-bottom:var(--e1)}
.item .i-ord{font-family:var(--mono); font-size:var(--t-nano); color:var(--grafite-fraco);
min-width:1.4em}
.item .forn{font-family:var(--cond); font-size:var(--t-nano); font-weight:600;
letter-spacing:.1em; text-transform:uppercase; color:var(--grafite)}
.item .forn.sem{color:var(--grafite-fraco); font-weight:400; text-transform:none;
letter-spacing:0; font-style:italic}
.item .selo.cod{font-family:var(--mono); font-size:var(--t-nano); color:var(--grafite-medio);
border:1px solid var(--fio-forte); padding:0 var(--e1); margin-left:auto}
.item .selo.cod u{text-decoration:none; color:var(--grafite-fraco); margin-right:.35em}
.item .i-desc{margin:0 0 var(--e1); font-size:var(--t-medio); font-weight:600;
overflow-wrap:break-word}
.item .i-qtd{margin:0 0 var(--e2); font-size:var(--t-micro); color:var(--grafite-medio)}
.item .i-qtd .n{display:inline; font-size:var(--t-medio); font-weight:600; color:var(--grafite)}
.item .i-estado{margin:0 0 var(--e1); display:flex; gap:var(--e2); flex-wrap:wrap;
align-items:baseline}
.i-selo{font-family:var(--cond); font-size:var(--t-nano); font-weight:600;
letter-spacing:.08em; text-transform:uppercase; padding:1px var(--e2);
border:1px solid var(--fio-forte); color:var(--grafite-medio); white-space:nowrap}
.i-selo.tom-pendente{color:var(--ambar-texto); border-color:var(--ambar)}
.i-selo.tom-loja{color:var(--verde); border-color:var(--verde)}
.i-selo.tom-fabrica{color:var(--latao); border-color:var(--latao)}
.item .i-diz{font-size:var(--t-micro); color:var(--grafite-medio); flex:1; min-width:12ch}
.item .i-partida{margin:var(--e2) 0; padding:var(--e2) var(--e3);
border-left:2px solid var(--latao); background:var(--latao-luz);
font-size:var(--t-micro); color:var(--grafite)}
.item .i-meta{margin:var(--e1) 0; font-size:var(--t-micro); color:var(--grafite-medio)}
.item .i-meta u{text-decoration:none; font-family:var(--cond); font-size:var(--t-nano);
letter-spacing:.1em; text-transform:uppercase; color:var(--grafite-fraco);
margin-right:var(--e2)}
.item .i-meta.cobra{color:var(--ambar-texto)}
.item .i-meta.vencida{color:var(--oxido)}
.item .i-marca{display:flex; flex-wrap:wrap; align-items:center; gap:var(--e2);
margin-top:var(--e3); padding-top:var(--e2); border-top:1px solid var(--fio)}
.item .i-marca > .ajuda{width:100%; font-family:var(--cond); font-size:var(--t-nano);
font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--grafite-fraco)}
.i-achei, .i-so-botao{display:flex; align-items:center; gap:var(--e2); margin:0; flex-wrap:wrap}
.i-achei .ajuda{font-size:var(--t-micro); color:var(--grafite-fraco)}
.i-achei input{font-family:var(--mono); font-variant-numeric:tabular-nums; text-align:right;
width:6ch; min-height:44px; padding:var(--e1) var(--e2); border:1px solid var(--fio-forte);
border-radius:0; background:var(--superficie); color:var(--grafite); font-size:var(--t-corpo)}
.i-marca .btn{min-height:44px; padding:var(--e2) var(--e3)}
.i-achei input::placeholder{color:var(--grafite-fraco); opacity:.45; font-style:italic}
.btn.tom-pendente[class]{border-color:var(--ambar); color:var(--ambar-texto)}
.btn.tom-fabrica[class]{border-color:var(--latao); color:var(--latao)}
.i-editar{margin-top:var(--e3)}
.i-editar > summary{font-family:var(--cond); font-size:var(--t-nano); font-weight:600;
letter-spacing:.1em; text-transform:uppercase; color:var(--grafite-medio);
cursor:pointer; padding:var(--e3) 0; min-height:44px}
.forma-item{gap:var(--e3); margin:var(--e2) 0 var(--e3)}
.forma-item h3{margin-top:0}
.campo-par{display:grid; grid-template-columns:1fr; gap:var(--e3)}
@media (min-width:560px){ .campo-par{grid-template-columns:1fr 1fr} }
.novo-item{border-top:1px solid var(--fio-forte); padding-top:var(--e4)}
.evid{border-left:3px solid var(--fio-forte); background:var(--parede);
padding:var(--e3) var(--e4); margin:var(--e3) 0}
.evid-topo{margin:0 0 var(--e2); font-size:var(--t-micro); color:var(--grafite-medio);
display:flex; gap:var(--e2); align-items:baseline; flex-wrap:wrap}
.evid-topo .rotulo{width:100%}
.evid-topo .n{display:inline; font-size:var(--t-medio); font-weight:600; color:var(--grafite)}
.evid-lista{list-style:none; margin:0; padding:0}
.evid-linha{font-size:var(--t-micro); color:var(--grafite-medio); padding:2px 0 2px var(--e3);
border-left:2px solid var(--fio-forte)}
.evid-linha.tom-pendente{color:var(--ambar-texto); border-left-color:var(--ambar)}
.evid-linha.tom-loja{color:var(--verde); border-left-color:var(--verde)}
.evid-linha.tom-fabrica{color:var(--latao); border-left-color:var(--latao)}
.evid-linha.tom-prazo{border-left-color:var(--fio-forte)}
.evid-partes{margin:var(--e2) 0 0; font-size:var(--t-micro); color:var(--grafite)}
.evid .nota{margin:var(--e2) 0 0}
.fila-topo{margin:var(--e3) 0 var(--e1); font-size:var(--t-micro); color:var(--grafite-medio)}
.fila-topo .n{font-size:var(--t-medio); font-weight:600; color:var(--grafite)}
.lista.itens.fila{margin-top:var(--e4)}
.item .i-pedido{display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--e2);
margin:0 0 var(--e1); font-size:var(--t-micro); color:var(--grafite-medio)}
.item .i-pedido a{min-height:44px; display:inline-flex; align-items:center; font-weight:600}
.item .i-pedido .cli{color:var(--grafite)}
.item .i-pedido .cli u{text-decoration:none; font-family:var(--cond); font-size:var(--t-nano);
letter-spacing:.1em; text-transform:uppercase; color:var(--grafite-fraco);
margin-right:var(--e2)}
.item .i-pedido .etapa, .item .i-pedido .vend{font-family:var(--cond); font-size:var(--t-nano);
letter-spacing:.1em; text-transform:uppercase; color:var(--grafite-fraco)}
.item .i-pedido .vend{margin-left:auto}
.linha.feito{background:var(--superficie); box-shadow:none}
.lista > .linha.feito{border-left:6px solid var(--verde)}
.linha.feito .cli{font-weight:600}
.linha.feito .cli .rotulo{color:var(--verde); margin-right:var(--e2)}
.linha.feito .meta{color:var(--verde)}
.faixa.esp-feito{border:1px solid var(--verde); border-left:6px solid var(--verde);
background:var(--superficie); padding:var(--e4)}
.faixa.esp-feito:focus{outline:2px solid var(--ambar-texto); outline-offset:2px}
.esp-feito-tit{font-size:var(--t-medio); font-weight:700; margin:0 0 var(--e1); color:var(--grafite)}
.esp-gestos{display:flex; flex-wrap:wrap; gap:var(--e2) var(--e3); align-items:center; margin:var(--e3) 0}
.esp-feito .esp-gestos{margin-bottom:0}
.rotulo.esp-ok{color:var(--verde)}
table.dados{width:100%; border-collapse:collapse; margin-top:var(--e3)}
table.dados th{font-family:var(--cond); font-size:var(--t-nano); font-weight:600;
letter-spacing:.08em; text-transform:uppercase; color:var(--grafite-fraco);
text-align:right; padding:var(--e2); border-bottom:1px solid var(--fio-forte);
vertical-align:bottom}
table.dados th:first-child{text-align:left}
table.dados td{padding:var(--e3) var(--e2); border-bottom:1px solid var(--fio);
font-family:var(--mono); font-variant-numeric:tabular-nums; text-align:right;
font-size:var(--t-micro)}
table.dados td:first-child{font-family:var(--sans); text-align:left;
font-size:var(--t-corpo); font-weight:600}
.rolavel{overflow-x:auto}
.acao{display:flex; align-items:center; gap:var(--e2); flex-wrap:wrap; justify-content:flex-end}
details.quando{position:relative}
details.quando > summary{list-style:none; display:inline-flex; align-items:center;
justify-content:center; min-width:40px; min-height:40px; padding:0 var(--e2);
border:1px solid var(--fio-forte); border-radius:var(--r-toque); cursor:pointer;
color:var(--grafite-medio); background:transparent; font-size:var(--t-micro)}
details.quando > summary::-webkit-details-marker{display:none}
details.quando[open] > summary{border-color:var(--grafite); color:var(--grafite)}
.outras{display:flex; flex-direction:column; gap:var(--e2); align-items:stretch;
margin-top:var(--e2); padding:var(--e3); border:1px solid var(--fio-forte);
background:var(--parede); min-width:200px}
.outras .btn{width:100%}
.outras input[type=date]{font-family:var(--mono); font-size:var(--t-micro); padding:var(--e2);
border:1px solid var(--fio-forte); background:var(--superficie); color:var(--grafite);
min-height:40px; width:100%}
.outras .ajuda{font-family:var(--cond); font-size:var(--t-nano); font-weight:600;
letter-spacing:.1em; text-transform:uppercase; color:var(--grafite-fraco)}
@media (min-width:560px){
details.quando[open] > .outras{position:absolute; right:0; z-index:5;
background:var(--superficie); border-color:var(--grafite)}
}
.sem-margem{margin:0}
.nota-antes-da-lista{margin-bottom:var(--e3)}
.pad-apos-lista{padding-top:var(--e3)}
.pad-afastado{margin-top:var(--e3)}
.cifra-linha{margin:var(--e2) 0 0}
.apagado{color:var(--grafite-fraco)}
@media (min-width:960px){
.tela{max-width:860px}
}
.nota-ao-lado{margin-left:var(--e2)}
.resumo{display:grid; grid-template-columns:1fr; gap:var(--e3); margin:var(--e3) 0 var(--e2)}
.cartao{border:1px solid var(--fio-forte); border-top:3px solid var(--fio-forte);
padding:var(--e3) var(--e4) var(--e4); background:var(--parede)}
.cartao.conv{border-top-color:var(--verde)}
.cartao.abre{border-top-color:var(--ambar)}
.cartao .rotulo{display:block; margin-bottom:var(--e1)}
.cartao .cifra-linha{margin:0 0 var(--e1); text-align:left}
.cartao .cifra-linha .n{text-align:left}
.cartao .nota{margin:0}
@media (min-width:560px){
.resumo{grid-template-columns:1fr 1fr; gap:var(--e4)}
}
.cartao.docs{border-top-color:var(--fio-forte)}
@media (min-width:860px){
.resumo.tres{grid-template-columns:1fr 1fr 1fr}
}
.vcel .cif.desconhecido{font-family:var(--cond); font-size:var(--t-nano);
font-weight:600; letter-spacing:.08em; color:var(--latao)}
.manchete{font-size:var(--t-grande); line-height:1.35; letter-spacing:-.015em;
margin:var(--e4) 0 var(--e2); max-width:40ch}
.manchete .n{font-size:inherit}
.lista.metodo{list-style:none; margin:var(--e3) 0 0; padding:0}
.lista.metodo > .linha{display:block; padding:var(--e3) var(--e4)}
.lista.metodo .cli{display:block; font-family:var(--cond); font-weight:600;
letter-spacing:.02em; margin-bottom:var(--e1)}
.lista.metodo .meta{display:block; color:var(--grafite-medio)}
.lista.metodo .meta > span{display:block; margin-top:var(--e1)}
.lista.metodo .meta > span .n{display:inline}
.marca{justify-self:end; white-space:nowrap; font-family:var(--cond);
font-size:var(--t-nano); font-weight:600; letter-spacing:.08em;
text-transform:uppercase; padding:var(--e1) var(--e2);
border:1px solid var(--fio-forte)}
.marca.ok{color:var(--verde); border-color:var(--verde)}
.marca.ruim{color:var(--oxido); border-color:var(--oxido); background:var(--oxido-luz)}
.marca.desconhecido{color:var(--latao); border-color:var(--latao); background:var(--latao-luz)}
.linha .marca{margin-left:auto; align-self:center}
.painel{list-style:none; margin:0; padding:0;
border-top:1px solid var(--fio-forte); border-bottom:1px solid var(--fio-forte)}
.vcab{display:none}
.vlinha{display:grid; grid-template-columns:1fr; gap:var(--e1);
padding:var(--e3) var(--e4); border-bottom:1px solid var(--fio)}
.painel > .vlinha:last-child{border-bottom:0}
.vlinha .cli{font-size:var(--t-medio); font-weight:600; letter-spacing:-.01em;
overflow-wrap:anywhere; margin-bottom:var(--e1)}
.vcel{display:flex; align-items:baseline; gap:var(--e3); min-width:0}
.vcel .rot{font-family:var(--cond); font-size:var(--t-nano); font-weight:600;
letter-spacing:.1em; text-transform:uppercase; color:var(--grafite-fraco)}
.vcel .qtd{margin-left:auto; color:var(--grafite-medio); font-size:var(--t-micro)}
.vcel .cif{font-size:var(--t-micro); min-width:8.5em; text-align:right}
.vcel .cif .n{font-size:var(--t-micro)}
:root{--trilhas-vend:1fr 3rem 7rem 6.25rem 3rem 7rem}
.vcel.vausente{display:block; font-family:var(--sans); font-size:var(--t-micro);
color:var(--grafite-fraco); text-align:left; min-width:0; overflow-wrap:normal}
@media (min-width:960px){
.vcab{display:grid; grid-template-columns:var(--trilhas-vend); gap:var(--e4);
padding:0 var(--e4) var(--e2); font-family:var(--cond); font-size:var(--t-nano);
font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--grafite-fraco)}
.vcab span + span{text-align:right}
.vlinha{grid-template-columns:1fr auto; gap:var(--e4); align-items:baseline}
.vlinha.com-ticket{grid-template-columns:var(--trilhas-vend)}
.vlinha .cli{margin-bottom:0}
.vcel{display:contents}
.vcel .rot{display:none}
.vcel .qtd{margin-left:0; text-align:right}
.vcel .cif{min-width:0}
.vcel.vausente{display:block}
.vcel.vausente[data-cobre="3"]{grid-column:2 / span 3}
.vcel.vausente[data-cobre="2"]{grid-column:5 / span 2}
.vcel.vausente[data-cobre="5"]{grid-column:2 / -1}
}
.doc{display:grid; grid-template-columns:1fr auto;
grid-template-areas:"cli cli" "meta meta" "selo selo"; gap:var(--e1) var(--e3);
padding:var(--e3) var(--e4); border-bottom:1px solid var(--fio); align-items:center}
.lista > .doc:last-child{border-bottom:0}
.doc .cli{grid-area:cli; font-size:var(--t-medio); font-weight:600; letter-spacing:-.01em}
.doc .meta{grid-area:meta; display:flex; flex-direction:column; gap:2px;
color:var(--grafite-fraco); font-size:var(--t-micro); min-width:0}
.doc .arq{font-family:var(--mono); font-size:var(--t-nano); overflow-wrap:anywhere}
.doc .selo{grid-area:selo; justify-self:start; white-space:normal; max-width:100%;
min-width:0; overflow-wrap:anywhere;
font-family:var(--cond); font-size:var(--t-nano); font-weight:600; letter-spacing:.08em;
text-transform:uppercase; padding:var(--e1) var(--e2); border:1px solid var(--fio-forte)}
.doc .selo.ok{color:var(--verde); border-color:var(--verde)}
.doc .selo.ruim{color:var(--oxido); border-color:var(--oxido); background:var(--oxido-luz)}
@media (min-width:560px){
.doc{grid-template-columns:1fr auto; grid-template-areas:"cli selo" "meta selo";
align-items:start}
.doc .selo{align-self:center; justify-self:end; white-space:nowrap}
}
.nota-abertura{margin:var(--e2) 0 0; max-width:62ch}
.nota-apos-resumo{margin:var(--e3) 0 0; max-width:62ch}
.topo nav a.sec{color:var(--grafite-fraco)}
.recorte{display:inline-flex; border:1px solid var(--fio-forte); margin:0 0 var(--e3)}
.recorte .rec{font-family:var(--cond); font-size:var(--t-micro); font-weight:600;
letter-spacing:.06em; text-transform:uppercase; text-decoration:none;
color:var(--grafite-medio); padding:0 var(--e3); min-height:40px;
display:inline-flex; align-items:center}
.recorte .rec + .rec{border-left:1px solid var(--fio-forte)}
.recorte .rec.on{color:var(--grafite); background:var(--parede);
box-shadow:inset 0 -3px 0 var(--ambar)}
.linha.fechou{background:var(--parede); box-shadow:inset 3px 0 0 var(--verde)}
.linha.fechou .cli{font-weight:600}
.linha.fechou .meta b{color:var(--grafite-medio); font-weight:600}
.completar{grid-column:1 / -1; margin-top:var(--e2); padding-top:var(--e2);
border-top:1px solid var(--fio)}
.completar .nota{margin:0 0 var(--e2)}
.completar .erro-linha{color:var(--oxido)}
.completar .ok-linha{color:var(--verde)}
.completar-forma{display:grid; grid-template-columns:1fr; gap:var(--e2); margin:0}
.completar-forma .cx{display:flex; flex-direction:column; gap:var(--e1); min-width:0}
.completar-forma .ajuda{font-family:var(--cond); font-size:var(--t-nano); font-weight:600;
letter-spacing:.1em; text-transform:uppercase; color:var(--grafite-fraco)}
.completar-forma input{font-family:var(--sans); font-size:var(--t-corpo); min-height:44px;
padding:0 var(--e3); border:1px solid var(--fio-forte); background:var(--superficie);
color:var(--grafite); width:100%}
.completar-forma .btn{justify-self:start; min-height:44px}
@media (min-width:560px){
.completar-forma{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;
align-items:end; gap:var(--e3)}
}
.tut-reabrir{padding:var(--e2) var(--e4) 0; text-align:left}
.tut-reabrir button.linkado{font-family:var(--cond); font-size:var(--t-micro);
font-weight:600; letter-spacing:.06em; text-transform:uppercase;
background:none; border:0; padding:0; cursor:pointer; color:var(--ambar-texto);
border-bottom:1px solid transparent; min-height:40px}
.tut-reabrir button.linkado:hover{border-bottom-color:var(--ambar)}
.tutorial{margin:var(--e4) var(--e4) 0; padding:var(--e4);
border:1px solid var(--fio-forte); border-left:3px solid var(--ambar);
background:var(--superficie)}
.tut-cabeca{display:flex; align-items:baseline; gap:var(--e3); justify-content:space-between}
.tutorial h2{margin:0; font-size:var(--t-grande)}
.tut-lista{list-style:none; margin:var(--e3) 0; padding:0; counter-reset:passagem}
.tut-lista li{counter-increment:passagem; display:grid; grid-template-columns:auto 1fr;
gap:var(--e1) var(--e3); padding:var(--e3) 0; border-top:1px solid var(--fio)}
.tut-lista li::before{content:counter(passagem); grid-row:1 / span 2;
font-family:var(--mono); font-size:var(--t-micro); color:var(--grafite-fraco);
border:1px solid var(--fio-forte); min-width:26px; height:26px;
display:flex; align-items:center; justify-content:center}
.tut-lista li b{font-family:var(--cond); font-size:var(--t-micro); font-weight:600;
letter-spacing:.08em; text-transform:uppercase; color:var(--grafite-medio)}
.tut-lista li span{font-size:var(--t-corpo); line-height:1.45}
.trello{margin:var(--e3) 0 0}
.trello .ajuda{display:block; font-family:var(--cond); font-size:var(--t-nano);
font-weight:600; letter-spacing:.1em; text-transform:uppercase;
color:var(--grafite-fraco); margin-bottom:var(--e1)}
.trello-cx{display:flex; gap:var(--e2); align-items:stretch; flex-wrap:wrap}
.trello-cx .copiavel{flex:1 1 16em; min-width:0; width:auto; min-height:44px;
font-family:var(--mono); font-size:var(--t-micro); word-break:normal;
background:var(--parede); border:1px solid var(--fio-forte); color:var(--grafite);
padding:0 var(--e3)}
.trello-cx .btn{min-height:44px}
.trello .nota{margin:var(--e1) 0 0}
.forma.envio input[type=file]{font-family:var(--sans); font-size:var(--t-micro);
padding:var(--e3); min-height:44px; border:1px dashed var(--fio-forte);
background:var(--parede); color:var(--grafite); border-radius:var(--r-toque);
width:100%; box-sizing:border-box}
.forma.envio input[type=file]::file-selector-button{font-family:var(--sans);
font-size:var(--t-micro); font-weight:600; min-height:32px; margin-right:var(--e3);
padding:var(--e1) var(--e3); border:1px solid var(--fio-forte); cursor:pointer;
border-radius:var(--r-toque); background:transparent; color:var(--grafite)}
.campo .ajuda .ex{font-family:var(--mono); font-size:var(--t-nano); color:var(--grafite-medio);
overflow-wrap:anywhere}
details.especiais > summary{font-family:var(--cond); font-size:var(--t-nano); font-weight:600;
letter-spacing:.08em; text-transform:uppercase; color:var(--grafite-fraco);
cursor:pointer; min-height:44px; display:flex; align-items:center}
details.especiais[open] > summary{color:var(--grafite)}
details.especiais > summary::before{content:'\25B8'; margin-right:var(--e2); font-size:var(--t-micro)}
details.especiais[open] > summary::before{content:'\25BE'}
.escolha{display:flex; align-items:center; gap:var(--e3); min-height:44px; cursor:pointer;
font-size:var(--t-corpo)}
.escolha input[type=checkbox],
.escolha input[type=radio]{width:22px; height:22px; accent-color:var(--ambar); flex:none}
.escolhas{border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--e2)}
.escolhas > legend{padding:0; font-family:var(--cond); font-size:var(--t-nano);
font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--grafite-medio)}
.escolhas .escolha{align-items:flex-start; padding:var(--e2) 0}
.escolhas .escolha > span{display:flex; flex-direction:column; gap:2px; min-width:0}
.escolhas .escolha .ajuda{font-size:var(--t-micro); color:var(--grafite-fraco)}
.escolhas > .nota{margin:var(--e1) 0 0}
.envio-aviso{margin:var(--e2) 0 0}
pre.cru{font-family:var(--mono); font-size:var(--t-nano); line-height:1.6; margin:var(--e3) 0 0;
padding:var(--e3); background:var(--parede); border-left:3px solid var(--oxido);
overflow-x:auto; white-space:pre; color:var(--grafite)}
.linha .linha-diz{grid-column:1 / -1; margin:var(--e1) 0 0}
.forma.apelido{gap:var(--e3); margin:var(--e4) 0; padding-bottom:var(--e3);
border-bottom:1px solid var(--fio)}
.lista.alarmes .acao .btn{min-height:44px}
.doc .arq a{display:inline-flex; align-items:center; min-height:44px}
:root{
--largura-app:1360px;
--largura-acesso:400px;
--medida:76ch;
}
.esteira{margin:var(--e4) 0 var(--e2)}
.esteira > .rotulo{display:block; margin:0 0 var(--e2)}
.esteira .bandas{list-style:none; margin:0; padding:0}
.esteira .banda{border-top:1px solid var(--fio-forte); padding:var(--e2) 0 var(--e3)}
.esteira .banda > .b-nome{display:block; font-family:var(--cond); font-size:var(--t-nano);
font-weight:600; letter-spacing:.1em; text-transform:uppercase;
color:var(--grafite-fraco); margin:0 0 var(--e2)}
.esteira .banda > ol{list-style:none; margin:0; padding:0;
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--e2)}
.esteira .et{min-width:0; background:var(--superficie); border:1px solid var(--fio)}
.esteira .et > a, .esteira .et > div{display:block; padding:var(--e2) var(--e3) var(--e3);
text-decoration:none; color:inherit}
.esteira .et > a:hover .et-nome{border-bottom-color:var(--ambar)}
.esteira .et-nome{display:block; font-family:var(--cond); font-size:var(--t-nano);
font-weight:600; letter-spacing:.1em; text-transform:uppercase;
color:var(--grafite-medio); border-bottom:1px solid transparent;
padding-bottom:1px; margin-bottom:var(--e1)}
.esteira .et .et-n{display:block; font-size:var(--t-medio); font-weight:600;
text-align:left; letter-spacing:-.01em; color:var(--grafite)}
.esteira .et .et-n .un{font-size:.7em}
.esteira .et .et-n.palavra{font-family:var(--cond); font-size:var(--t-micro);
font-weight:600; letter-spacing:.04em; color:var(--grafite-medio)}
.esteira .et-diz{display:block; font-size:var(--t-nano); line-height:1.5;
color:var(--grafite-fraco); margin-top:var(--e1)}
.esteira .et.viva{border-top:2px solid var(--grafite)}
.esteira .et.viva .et-nome{color:var(--grafite)}
.esteira .et.noutra{border-top:2px solid var(--fio-forte)}
.esteira .et.fora{border-top:0; background:var(--latao-luz); border-color:var(--latao-luz)}
.esteira .et.fora::before{content:''; display:block; height:6px; margin:0 -1px;
background-image:repeating-linear-gradient(135deg,
var(--latao) 0 1.5px, transparent 1.5px 7px);
background-color:var(--latao-luz); border-bottom:1px solid var(--latao)}
.esteira .et.fora .et-nome{color:var(--latao)}
.esteira .et.fora .et-n.palavra{color:var(--latao)}
.esteira .et.fora .et-diz{color:var(--latao)}
.esteira .esteira-diz{margin:var(--e3) 0 0; max-width:var(--medida)}
@media (min-width:700px){
.esteira .banda > ol{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1100px){
.esteira{margin:var(--e5) 0 var(--e3)}
.esteira .banda > ol{grid-template-columns:repeat(6,minmax(0,1fr)); gap:var(--e3)}
.esteira .et > a, .esteira .et > div{min-height:92px}
.esteira .esteira-diz{max-width:none; column-count:2; column-gap:var(--e6)}
}
.cabeca .cab-txt{min-width:0}
.cobre-linha{border-left:3px solid var(--fio-forte); background:var(--parede);
padding:var(--e3) var(--e4); margin:var(--e3) 0 0}
.cobre-linha p{margin:0; font-size:var(--t-micro); line-height:1.55;
color:var(--grafite-medio)}
.cobre-linha p + p{margin-top:var(--e1)}
.cobre-linha b{color:var(--grafite)}
.cobre-linha .falta{color:var(--latao)}
@media (min-width:1100px){
.cabeca{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
gap:0 var(--e6); align-items:start}
.cabeca .cobre-linha{margin-top:var(--e6)}
.cabeca .nota-abertura{max-width:62ch}
.manchete{font-size:var(--t-cifra); line-height:1.3; max-width:46ch;
margin:var(--e5) 0 var(--e2)}
}
.secao{border-top:1px solid var(--fio-forte); padding-bottom:var(--e5)}
.secao > .pad:first-child h2{margin-top:var(--e4)}
@media (min-width:1100px){
.secao .nota, .secao .sub, .secao .faixa p{max-width:var(--medida)}
}
.regua{margin-top:var(--e6); border-top:1px solid var(--fio-forte)}
.regua > .rotulo{display:block; padding:var(--e3) var(--e4) 0}
.dobra{border-bottom:1px solid var(--fio)}
.dobra > summary{display:flex; align-items:baseline; gap:var(--e2) var(--e3);
flex-wrap:wrap; cursor:pointer; padding:var(--e3) var(--e4);
min-height:44px; list-style:none}
.dobra > summary::-webkit-details-marker{display:none}
.dobra > summary::before{content:'\25B8'; font-size:var(--t-micro);
color:var(--grafite-fraco); flex:none}
.dobra[open] > summary::before{content:'\25BE'}
.dobra > summary:hover .d-nome{border-bottom-color:var(--ambar)}
.dobra[open] > summary{border-bottom:1px solid var(--fio)}
.d-nome{font-size:var(--t-medio); font-weight:600; letter-spacing:-.01em;
border-bottom:1px solid transparent; padding-bottom:1px}
.d-diz{font-size:var(--t-micro); color:var(--grafite-fraco); min-width:0}
.dobra > .corpo-dobra{padding-bottom:var(--e5)}
.dobra .nota, .dobra .sub, .dobra p{max-width:var(--medida)}
.dobra .corpo-dobra > .pad > h2:first-child{position:absolute; width:1px; height:1px;
margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0}
@media (min-width:1100px){
.regua{margin-top:var(--e7)}
.dobra .corpo-dobra .meta, .dobra .corpo-dobra .nota{max-width:var(--medida)}
}
@media (min-width:1100px){
.tela:not(.app){max-width:var(--largura-app)}
.tela:not(.app) .pad{padding:0 var(--e5)}
.tela:not(.app) .topo{padding:var(--e4) var(--e5) var(--e3)}
.tela:not(.app) .rodape{padding:var(--e5)}
.tela:not(.app) .lista > .linha,
.tela:not(.app) .lista > .doc,
.tela:not(.app) .painel > .vlinha{padding-left:var(--e5); padding-right:var(--e5)}
.tela:not(.app) .vcab{padding-left:var(--e5); padding-right:var(--e5)}
.tela:not(.app) .dobra > summary{padding-left:var(--e5); padding-right:var(--e5)}
.tela:not(.app) .regua > .rotulo{padding-left:var(--e5); padding-right:var(--e5)}
.tela:not(.app) .nota-abertura,
.tela:not(.app) .nota-apos-resumo{max-width:var(--medida)}
.tela:not(.app) .rodape p{max-width:var(--medida)}
.tela:not(.app) .secao .faixa p{max-width:var(--medida)}
}
.acesso-logo{display:block;width:112px;height:112px;border-radius:50%;margin:var(--e5) auto}
.acesso>.acesso-logo+h1{margin-top:0}
@media (min-width:560px){
.tela:not(.app) .acesso{max-width:var(--largura-acesso); margin:var(--e7) auto 0;
border:1px solid var(--fio-forte); background:var(--superficie); padding:var(--e5)}
.acesso-logo{width:144px;height:144px;margin-top:0}
}
.topo nav form.tema{display:inline}
.topo nav button.linkado.tema-bt{color:var(--grafite-fraco)}
.topo nav button.linkado.tema-bt:hover{border-bottom-color:var(--ambar);
color:var(--grafite-medio)}
.mat-bloco .lista{margin-top:var(--e3)}
.linha.mat-linha{align-items:baseline}
.mat-texto{grid-column:1 / -1; font-family:var(--sans); font-size:var(--t-corpo);
line-height:1.5; margin:var(--e2) 0 0; padding:var(--e3) var(--e4);
background:var(--parede); border-left:3px solid var(--fio-forte);
white-space:pre-wrap; overflow-wrap:anywhere; color:var(--grafite)}
.mat-cortou, .linha .mat-diz{grid-column:1 / -1; margin:var(--e1) 0 0}
.mat-foto{grid-column:1 / -1; display:block; margin:var(--e2) 0 0;
border:1px solid var(--fio-forte); background:var(--parede)}
.mat-foto img{display:block; max-width:100%; width:auto; height:auto;
max-height:60vh; object-fit:contain; margin:0 auto}
#escolha .escolha{display:flex; flex-wrap:wrap; gap:var(--e2) var(--e3); align-items:flex-end; margin:var(--e3) 0 0}
#escolha label{display:flex; flex-direction:column; gap:var(--e1); font-size:var(--t-micro); color:var(--grafite)}
#escolha input, #escolha select{font:inherit; font-size:var(--t-corpo); min-height:40px; padding:0 var(--e2);
border:1px solid var(--fio-forte); background:transparent; color:inherit}
#escolha .escolha-bt{display:flex; flex-wrap:wrap; gap:var(--e2); align-items:center}
#escolha .btn[disabled]{cursor:not-allowed}
#escolha .limites{margin:var(--e2) 0 0}
.esp-assunto{display:inline-block; font-family:var(--cond); font-size:var(--t-nano);
font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:1px var(--e2);
border:1px solid var(--fio-forte); color:var(--grafite-medio); white-space:nowrap}
.esp-conta{margin:var(--e3) 0 var(--e2); font-size:var(--t-micro); color:var(--grafite-medio)}
.esp-conta .n{display:inline; font-size:var(--t-medio); font-weight:600; color:var(--grafite)}
.esp-espera{display:flex; flex-direction:column; align-items:flex-end}
.esp-espera .n{font-size:var(--t-medio); font-weight:600}
.lista > .linha.esp-chegou{border-left:3px solid var(--ambar)}
.item.esp-novo{border-left:6px solid var(--verde)}
.esp-assunto-forma{display:flex; flex-wrap:wrap; gap:var(--e2) var(--e3); align-items:flex-end;
margin:var(--e4) 0 0}
.esp-assunto-forma .campo{flex:1 1 14em; min-width:0}
.esp-assunto-forma .btn{min-height:44px}
.esp-fechar{border-top:1px solid var(--fio-forte); margin-top:var(--e5); padding-bottom:var(--e5)}
@media (min-width:1100px){
.tela:not(.app) .esp-lead{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
align-items:start; border-top:1px solid var(--fio-forte); margin-top:var(--e4)}
.tela:not(.app) .esp-lead-mat{border-right:1px solid var(--fio-forte)}
}
.esp-resumo{list-style:none; margin:var(--e3) 0; padding:0; display:flex; flex-wrap:wrap; gap:var(--e2)}
.esp-resumo li{display:flex; align-items:baseline; gap:var(--e2); border:1px solid var(--fio-forte);
padding:var(--e1) var(--e3)}
.esp-resumo .n{font-size:var(--t-medio); font-weight:600}
.esp-resumo li.zero .n{font-weight:400; color:var(--grafite-fraco)}
.esp-vivo{margin:var(--e2) 0 0}
.esp-colunas{display:grid; grid-template-columns:1fr; gap:var(--e4); padding:0 var(--e4); margin:var(--e3) 0}
@media (min-width:700px){ .esp-colunas{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))} }
@media (min-width:1100px){ .tela:not(.app) .esp-colunas{padding:0 var(--e5)} }
.esp-col{border:1px solid var(--fio-forte); border-top:3px solid var(--grafite-medio);
background:var(--parede); min-width:0}
.esp-col-cab{display:flex; align-items:baseline; gap:var(--e2) var(--e3); flex-wrap:wrap; padding:var(--e3)}
.esp-col-cab .nome{font-weight:600; overflow-wrap:anywhere; flex:1 1 auto; min-width:0}
.esp-col-cab .n{font-size:var(--t-medio); font-weight:600}
.esp-col > .nota{margin:0; padding:0 var(--e3) var(--e3)}
.esp-cards{list-style:none; margin:0; padding:0; border-top:1px solid var(--fio-forte)}
.esp-card{background:var(--superficie); border-bottom:1px solid var(--fio); padding:var(--e3)}
.esp-cards > .esp-card:last-child{border-bottom:0}
.esp-card.esp-chegou{border-left:3px solid var(--ambar)}
.esp-card.esp-novo{border-left:6px solid var(--verde)}
.esp-card .cli{display:block; font-weight:600; overflow-wrap:anywhere}
.esp-card .esp-l2{display:flex; flex-wrap:wrap; gap:var(--e1) var(--e2); align-items:baseline;
margin:var(--e1) 0 0; font-size:var(--t-micro); color:var(--grafite-fraco)}
.esp-card .esp-l2 .n{color:var(--grafite); font-size:var(--t-corpo); font-weight:600}
.esp-card .acao{justify-content:flex-start; margin-top:var(--e2)}
.recorte.conc-abas{display:flex; flex-wrap:wrap}
.conc-abas .conc-n{font-family:var(--mono); color:var(--grafite); margin-left:var(--e1)}
.lista > .linha.conc-rec{border-left:3px solid var(--verde)}
.linha .conc-digitar, .linha .conc-porque{grid-column:1 / -1}
.conc-digitar{display:flex; flex-wrap:wrap; gap:var(--e2) var(--e3); align-items:flex-end; margin:var(--e2) 0 0}
.conc-digitar .campo{flex:1 1 14em; min-width:0}
.conc-porque > summary{font-size:var(--t-micro); color:var(--grafite-medio); cursor:pointer; min-height:40px}
.conc-venda-tit{margin-top:0}
.conc-bloco .btn{display:inline-flex; align-items:center}
.tela.app{
--q-app:#D7DCDF; --q-board:#CFD5D9; --q-col:#E2E7E9; --q-col-head:#EDF0F2;
--q-card:#FFFFFF; --q-card-2:#F6F8F9; --q-chrome:#EDF0F2;
--q-fio:#C3CBD0; --q-fio-2:#D8DEE2; --q-fio-3:#AEB8BE;
--q-t1:#12171A; --q-t2:#48535A; --q-t3:#5E686E; --q-t4:#78828A;
--q-sinal:#A8430A; --q-sinal-bg:#F6E3D7; --q-sinal-fio:#DFB69A;
--q-aten:#7E5A0C; --q-fecha:#1D6248; --q-fecha-bg:#DFEDE6;
--q-k30:#8A5714; --q-k30-bg:#F7EBD8; --q-k30-fio:#E3CBA4;
--q-k40:#2A5E80; --q-k40-bg:#E2EEF5; --q-k40-fio:#BCD6E5;
--q-r:3px;
--q-col-min:248px; --q-lane-min:300px;
--q-sombra:0 1px 0 rgba(12,20,26,.05), 0 2px 6px rgba(12,20,26,.10);
--q-rotulo:'Barlow Condensed','IBM Plex Sans Condensed','Arial Narrow',var(--cond);
--q-texto:'Source Sans 3',var(--sans);
--q-mono:var(--mono);
}
@media (prefers-color-scheme: dark){
:root:not([data-tema]) .tela.app{
--q-app:#0B0E10; --q-board:#0E1215; --q-col:#161A1E; --q-col-head:#1B2126;
--q-card:#212830; --q-card-2:#1C232A; --q-chrome:#12171A;
--q-fio:#2C343B; --q-fio-2:#232A31; --q-fio-3:#3C464E;
--q-t1:#E9EEF1; --q-t2:#A6B2BA; --q-t3:#8A959C; --q-t4:#6F7A81;
--q-sinal:#F2853F; --q-sinal-bg:#33190C; --q-sinal-fio:#6B3416;
--q-aten:#D3A047; --q-fecha:#52B78A; --q-fecha-bg:#10261E;
--q-k30:#DFA765; --q-k30-bg:#2B2318; --q-k30-fio:#4A3A22;
--q-k40:#8CC0DE; --q-k40-bg:#152530; --q-k40-fio:#27404F;
--q-sombra:0 1px 0 rgba(0,0,0,.30), 0 2px 8px rgba(0,0,0,.42);
}
}
:root[data-tema="escuro"] .tela.app{
--q-app:#0B0E10; --q-board:#0E1215; --q-col:#161A1E; --q-col-head:#1B2126;
--q-card:#212830; --q-card-2:#1C232A; --q-chrome:#12171A;
--q-fio:#2C343B; --q-fio-2:#232A31; --q-fio-3:#3C464E;
--q-t1:#E9EEF1; --q-t2:#A6B2BA; --q-t3:#8A959C; --q-t4:#6F7A81;
--q-sinal:#F2853F; --q-sinal-bg:#33190C; --q-sinal-fio:#6B3416;
--q-aten:#D3A047; --q-fecha:#52B78A; --q-fecha-bg:#10261E;
--q-k30:#DFA765; --q-k30-bg:#2B2318; --q-k30-fio:#4A3A22;
--q-k40:#8CC0DE; --q-k40-bg:#152530; --q-k40-fio:#27404F;
--q-sombra:0 1px 0 rgba(0,0,0,.30), 0 2px 8px rgba(0,0,0,.42);
}
body.app{overflow:hidden; height:100dvh}
.tela.app{
max-width:none; border-left:0; border-right:0; min-height:0; height:100dvh;
display:grid; grid-template-rows:auto 1fr; background:var(--q-app);
color:var(--q-t1); font-family:var(--q-texto); font-size:14px; line-height:1.35;
}
.tela.app > main{min-height:0; display:grid; grid-template-rows:1fr auto}
.tela.app .topo{border-top-width:3px; padding:var(--e2) var(--e3); background:var(--q-chrome);
border-bottom:1px solid var(--q-fio)}
.tela.app #quadro-vivo{min-height:0; display:flex; flex-direction:column}
.tela.app #quadro-vivo > .quadro{flex:1; min-height:0}
.tela.app .bancada{display:flex; align-items:stretch; flex-wrap:wrap; background:var(--q-chrome);
border-bottom:1px solid var(--q-fio)}
.tela.app .metricas{display:flex; align-items:stretch; flex:0 0 auto; scrollbar-width:none}
.tela.app .metricas::-webkit-scrollbar{display:none}
.tela.app .met{padding:8px 16px; border-right:1px solid var(--q-fio-2); display:flex;
flex-direction:column; justify-content:center; gap:2px; white-space:nowrap;
min-width:0; overflow:hidden}
.tela.app .met u{font:500 9.5px/1 var(--q-rotulo); letter-spacing:.16em; text-transform:uppercase;
color:var(--q-t3); text-decoration:none}
.tela.app .met b{font:600 15px/1 var(--q-mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em;
color:var(--q-t1)}
.tela.app .met b .un{font-size:11px; font-weight:500; color:var(--q-t2); margin-right:2px}
.tela.app .met b .c{font-size:11px}
.tela.app .met small{font:400 10px/1 var(--q-rotulo); letter-spacing:.09em; text-transform:uppercase;
color:var(--q-t4)}
.tela.app .met.alerta u, .tela.app .met.alerta b{color:var(--q-sinal)}
.tela.app .met.fecha u, .tela.app .met.fecha b{color:var(--q-fecha)}
.tela.app .novo{display:flex; align-items:center; gap:var(--e2); flex-wrap:wrap; margin:0;
padding:8px 14px; border:0; border-left:1px solid var(--q-fio-2); background:transparent;
flex:1 1 340px; min-width:0}
.tela.app .novo label.rotulo{font:500 9.5px/1 var(--q-rotulo); letter-spacing:.16em;
text-transform:uppercase; color:var(--q-t3); margin:0}
.tela.app .novo input[name="titulo"]{flex:1 1 12em; min-width:0; height:36px; padding:0 10px;
background:var(--q-card); border:1px solid var(--q-fio); border-radius:var(--q-r);
font:400 13px var(--q-texto); color:var(--q-t1)}
.tela.app .novo input[name="titulo"]::placeholder{color:var(--q-t4)}
.tela.app .novo .btn{min-height:36px; padding:0 14px}
.tela.app .novo .nota{flex:1 1 100%; margin:0; font:400 11px/1.3 var(--q-texto); color:var(--q-t4)}
.tela.app .novo .erro-linha{color:var(--q-sinal)}
.tela.app .qv-avisos{display:flex; flex-direction:column}
.tela.app .qv-avisos:empty{display:none}
.tela.app .faixa{margin:0; padding:7px 14px; border-left:3px solid var(--q-fio-3);
background:var(--q-col); border-bottom:1px solid var(--q-fio-2)}
.tela.app .faixa .nota{margin:0; font-size:12.5px; color:var(--q-t2)}
.tela.app .faixa.erro{border-left-color:var(--q-sinal); background:var(--q-sinal-bg)}
.tela.app .faixa.erro .nota{color:var(--q-sinal)}
.tela.app .faixa.aviso{border-left-color:var(--q-aten)}
.tela.app .sugestao-forma{display:flex; gap:var(--e2); flex-wrap:wrap; align-items:center;
margin-top:6px}
.tela.app .quadro{display:grid; grid-template-rows:1fr auto; gap:9px; padding:9px 13px 0;
background:var(--q-board); min-height:0; flex-direction:unset}
.tela.app .trilha-faixa{min-height:0; display:flex; flex-direction:column; gap:5px}
.tela.app .trilha-faixa > h2{display:flex; align-items:center; gap:9px; margin:0;
font:600 10px/1 var(--q-rotulo); letter-spacing:.22em; text-transform:uppercase;
color:var(--q-t3)}
.tela.app .trilha-faixa > h2::after{content:""; flex:1; height:1px; background:var(--q-fio-2)}
.tela.app .trilha-faixa > h2 em{font-style:normal; font:500 10px/1 var(--q-mono); letter-spacing:.04em;
color:var(--q-t4)}
.tela.app .trilha-faixa > h2 em .un{font-size:9px}
.tela.app .trilha-faixa > h2 em .c{font-size:9px}
.tela.app .trilha{display:grid; gap:10px; min-height:0; flex:1; overflow-x:auto; overflow-y:hidden;
scrollbar-width:thin; padding-bottom:2px}
.tela.app .trilha.fluxo{grid-template-columns:repeat(var(--n,5), minmax(var(--q-col-min), 1fr))}
.tela.app .trilha.desvios{grid-template-columns:repeat(var(--n,4), minmax(var(--q-lane-min), 1fr))}
.tela.app .trilha.n1{--n:1} .tela.app .trilha.n2{--n:2} .tela.app .trilha.n3{--n:3}
.tela.app .trilha.n4{--n:4} .tela.app .trilha.n5{--n:5} .tela.app .trilha.n6{--n:6}
.tela.app .trilha.n7{--n:7} .tela.app .trilha.n8{--n:8} .tela.app .trilha.n9{--n:9}
.tela.app .trilha.n10{--n:10} .tela.app .trilha.n11{--n:11} .tela.app .trilha.n12{--n:12}
.tela.app .trilha::-webkit-scrollbar{height:9px}
.tela.app .trilha::-webkit-scrollbar-thumb{background:var(--q-fio-3); border-radius:9px}
.tela.app .trilha::-webkit-scrollbar-track{background:transparent}
@media (min-width:901px){
.tela.app .trilha-faixa.baixa .trilha{height:346px; flex:none} }
.tela.app .coluna{display:flex; flex-direction:column; min-height:0; padding:0; border:1px solid var(--q-fio-2);
background:var(--q-col); border-radius:var(--q-r); border-top:1px solid var(--q-fio-2)}
.tela.app .coluna > header{position:relative; padding:8px 10px 7px; background:var(--q-col-head);
border-bottom:1px solid var(--q-fio-2); border-radius:var(--q-r) var(--q-r) 0 0}
.tela.app .lin1{display:flex; align-items:center; gap:7px}
.tela.app .idx{font:600 10.5px/1 var(--q-mono); letter-spacing:.02em; color:var(--q-t3);
border:1px solid var(--q-fio); padding:3px 4px; border-radius:2px; background:var(--q-col)}
.tela.app .lin1 .coluna-nome{flex:1; margin:0; font:600 13px/1.1 var(--q-rotulo); letter-spacing:.085em;
text-transform:uppercase; color:var(--q-t1); white-space:nowrap; overflow:hidden;
text-overflow:ellipsis}
.tela.app .lin1 .qtd{font:600 12px/1 var(--q-mono); color:var(--q-t2); font-variant-numeric:tabular-nums}
.tela.app .lin2{display:flex; align-items:baseline; gap:8px; margin-top:5px}
.tela.app .vez{font:500 9.5px/1.25 var(--q-rotulo); letter-spacing:.13em; text-transform:uppercase;
color:var(--q-t3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tela.app .soma{margin-left:auto; font:500 11.5px/1 var(--q-mono); font-variant-numeric:tabular-nums;
color:var(--q-t2); white-space:nowrap; text-align:right}
.tela.app .soma .un{font-size:9.5px; color:var(--q-t3)}
.tela.app .soma .c{font-size:9.5px}
.tela.app .soma .apagado{font:500 9.5px/1 var(--q-rotulo); letter-spacing:.1em; text-transform:uppercase;
color:var(--q-t4)}
.tela.app .lin3{display:flex; align-items:center; gap:6px; margin-top:4px}
.tela.app .lin3 .cota{font-size:10px; color:var(--q-t4)}
.tela.app .lin3 .cota.at{color:var(--q-aten)}
.tela.app .lin3 .cota.tr{color:var(--q-sinal)}
.tela.app .lin3 .cota.ok{color:var(--q-fecha)}
.tela.app .pilha{flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; list-style:none;
margin:0; border:0; padding:8px; display:flex; flex-direction:column; gap:8px;
align-content:start; scrollbar-width:thin}
.tela.app .pilha::-webkit-scrollbar{width:8px}
.tela.app .pilha::-webkit-scrollbar-thumb{background:var(--q-fio-3); border-radius:8px}
.tela.app .coluna-vazia{padding:10px; margin:0; font:400 12px/1.4 var(--q-texto); color:var(--q-t4)}
.tela.app .coluna > footer{border-top:1px solid var(--q-fio-2)}
.tela.app .coluna > footer .novo-aqui{display:flex; align-items:center; width:100%; min-height:36px;
padding:9px 10px; text-align:left; font:500 10.5px/1 var(--q-rotulo); letter-spacing:.15em;
text-transform:uppercase; color:var(--q-t3); text-decoration:none}
.tela.app .coluna > footer .novo-aqui:hover{color:var(--q-t1); background:var(--q-col-head)}
.tela.app .coluna.papel-excecao > header::before{content:""; position:absolute; left:0; right:0; top:0;
height:4px; opacity:.7;
background:repeating-linear-gradient(135deg, var(--q-sinal) 0 2px, transparent 2px 6px)}
.tela.app .coluna.papel-excecao .idx{color:var(--q-sinal); border-color:var(--q-sinal-fio);
background:var(--q-sinal-bg)}
.tela.app .coluna.papel-excecao .vez{color:var(--q-sinal)}
.tela.app .coluna.fim > header::before{display:none}
.tela.app .coluna.fim .idx{color:var(--q-fecha); border-color:var(--q-fecha); background:var(--q-fecha-bg)}
.tela.app .coluna.fim .vez{color:var(--q-fecha)}
.tela.app .card{position:relative; background:var(--q-card); border:1px solid var(--q-fio);
border-left:0; border-radius:var(--q-r); box-shadow:var(--q-sombra);
display:flex; flex-direction:column; padding:0}
.tela.app .card::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
background:var(--q-fio-3); border-radius:var(--q-r) 0 0 var(--q-r)}
.tela.app .card.at::before{background:var(--q-aten)}
.tela.app .card.tr::before{background:var(--q-sinal)}
.tela.app .card.ok::before{background:var(--q-fecha)}
.tela.app .card:hover{border-color:var(--q-fio-3)}
.tela.app .card.voando{opacity:.45}
.tela.app .c-topo{display:flex; align-items:center; gap:6px; padding:7px 9px 0 11px}
.tela.app .forn{flex:1; min-width:0; font:500 10.5px/1 var(--q-mono); letter-spacing:.055em;
text-transform:uppercase; color:var(--q-t2); white-space:nowrap; overflow:hidden;
text-overflow:ellipsis}
.tela.app .np{font:400 10px/1 var(--q-mono); color:var(--q-t4); font-variant-numeric:tabular-nums}
.tela.app .peca{padding:6px 10px 0 11px; font:600 14px/17px var(--q-texto);
color:var(--q-t1); letter-spacing:-.002em; text-decoration:none;
height:40px;
overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.tela.app .peca:hover{text-decoration:underline}
.tela.app .peca .qtd{font:600 14px/1.22 var(--q-mono); font-variant-numeric:tabular-nums;
letter-spacing:-.03em}
.tela.app .peca .un{font-style:normal; font-size:11px; color:var(--q-t2); font-weight:400}
.tela.app .selos{display:flex; gap:4px; padding:6px 10px 0 11px; overflow:hidden; height:27px}
.tela.app .selos:empty{display:none; height:0}
.tela.app .selo{flex:none; height:19px; padding:0 5px; border:1px solid var(--q-fio); border-radius:2px;
display:inline-flex; align-items:center; font:500 9.5px/1 var(--q-rotulo);
letter-spacing:.11em; text-transform:uppercase; color:var(--q-t2); background:var(--q-card-2);
max-width:12em; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.tela.app .selo.cod{font-family:var(--q-mono); letter-spacing:.02em; font-size:10px; font-weight:600;
color:var(--q-t1); border-color:var(--q-fio-3); background:var(--q-col-head)}
.tela.app .selo.cod u{text-decoration:none; font:500 8.5px var(--q-rotulo); letter-spacing:.14em;
color:var(--q-t3); margin-right:4px}
.tela.app .selo.k30{color:var(--q-k30); background:var(--q-k30-bg); border-color:var(--q-k30-fio);
font-family:var(--q-mono); font-size:9.5px; letter-spacing:.02em}
.tela.app .selo.k40{color:var(--q-k40); background:var(--q-k40-bg); border-color:var(--q-k40-fio);
font-family:var(--q-mono); font-size:9.5px; letter-spacing:.02em}
.tela.app .selo.itens{flex:none}
.tela.app .selos > .selo:not(.itens){flex:0 1 auto; min-width:0}
.tela.app .selo > span{min-width:0; overflow:hidden; text-overflow:ellipsis;
white-space:nowrap}
.tela.app .selo.cod > u{flex:none}
.tela.app .selo.itens.pend{color:var(--q-k30); background:var(--q-k30-bg);
border-color:var(--q-k30-fio); font-weight:600}
.tela.app .selo.itens.vazio{color:var(--q-t4); background:transparent; border-style:dashed}
.tela.app .selo.itens.partes{color:var(--q-t2); background:var(--q-col-head);
border-color:var(--q-fio-3)}
.tela.app .card .cli{display:flex; align-items:baseline; gap:6px; padding:7px 10px 8px 11px;
border-bottom:1px dashed var(--q-fio-2); margin:2px 0 0; font-weight:400}
.tela.app .card .cli u{text-decoration:none; font:500 9px/1 var(--q-rotulo); letter-spacing:.17em;
text-transform:uppercase; color:var(--q-t3); flex:none}
.tela.app .card .cli b{font:600 13.5px/1.15 var(--q-texto); color:var(--q-t1); white-space:nowrap;
overflow:hidden; text-overflow:ellipsis}
.tela.app .tarja{display:flex; align-items:center; gap:7px; margin:8px 9px 0 11px; padding:4px 6px;
background:var(--q-sinal-bg); border-left:2px solid var(--q-sinal); border-radius:0 2px 2px 0}
.tela.app .tarja b{font:600 9.5px/1 var(--q-rotulo); letter-spacing:.14em; text-transform:uppercase;
color:var(--q-sinal); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tela.app .tarja span{margin-left:auto; font:500 9px/1 var(--q-rotulo); letter-spacing:.1em;
text-transform:uppercase; color:var(--q-t3); white-space:nowrap}
.tela.app .card .acao{display:block; margin:0; padding:5px 10px 0 11px;
font:400 12px/1.32 var(--q-texto); color:var(--q-t2); justify-content:unset}
.tela.app .card .acao b{font-weight:600; color:var(--q-t1)}
.tela.app .canhoto{display:flex; align-items:center; gap:8px; padding:7px 9px 8px 11px;
background:var(--q-card-2); border-radius:0 0 var(--q-r) 0; margin-top:auto}
.tela.app .valor{font:600 16px/1 var(--q-mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em;
color:var(--q-t1); white-space:nowrap}
.tela.app .valor .un{font-size:10px; font-weight:500; color:var(--q-t3); margin-right:2px}
.tela.app .valor .c{font-size:11px}
.tela.app .valor.sem{font:600 11px/1 var(--q-rotulo); letter-spacing:.13em; text-transform:uppercase;
color:var(--q-sinal)}
.tela.app .vend{margin-left:auto; flex:none; min-width:23px; height:19px; padding:0 3px;
border:1px solid var(--q-fio); border-radius:2px; display:grid; place-items:center;
background:var(--q-card); font:600 9.5px/1 var(--q-mono); letter-spacing:.03em;
color:var(--q-t2)}
.tela.app .cota{display:inline-flex; align-items:center; gap:5px; flex:none; color:var(--q-t3);
font:500 10.5px/1 var(--q-mono); font-variant-numeric:tabular-nums; white-space:nowrap}
.tela.app .cota s{text-decoration:none; display:block; height:7px; flex:none; width:7px;
border-left:1px solid currentColor; border-right:1px solid currentColor; position:relative}
.tela.app .cota s::before{content:""; position:absolute; left:0; right:0; top:3px; height:1px;
background:currentColor}
.tela.app .cota.d1 s{width:9px}
.tela.app .cota.d2 s{width:12px}
.tela.app .cota.d3 s{width:14px}
.tela.app .cota.d4 s{width:17px}
.tela.app .cota.d5 s{width:19px}
.tela.app .cota.d6 s{width:21px}
.tela.app .cota.d7 s{width:24px}
.tela.app .cota.d8 s{width:26px}
.tela.app .cota.d9 s{width:29px}
.tela.app .cota.d10 s{width:31px}
.tela.app .cota.d11 s{width:33px}
.tela.app .cota.d12 s{width:36px}
.tela.app .cota.d13 s{width:38px}
.tela.app .cota.d14 s{width:41px}
.tela.app .cota.d15 s{width:43px}
.tela.app .cota.dmax s{width:44px}
.tela.app .cota.at{color:var(--q-aten)}
.tela.app .cota.tr{color:var(--q-sinal)}
.tela.app .cota.ok{color:var(--q-fecha); font-family:var(--q-rotulo); font-size:10px; letter-spacing:.12em;
text-transform:uppercase}
.tela.app .card .gesto{display:flex; align-items:center; gap:6px; padding:0 9px 8px 11px;
background:var(--q-card-2); border-radius:0 0 var(--q-r) 0; margin:0}
.tela.app .card .gesto > form{min-width:0; flex:1; margin:0}
.tela.app .btn.passo{display:block; width:100%; min-height:30px; line-height:28px;
padding:0 8px; border:1px solid var(--q-fio-3); border-radius:var(--q-r);
background:var(--q-card); color:var(--q-t2); font:600 10px var(--q-rotulo);
letter-spacing:.11em; text-transform:uppercase; text-align:left; overflow:hidden;
text-overflow:ellipsis; white-space:nowrap}
.tela.app .btn.passo::before{content:"\2192\00a0"; color:var(--q-t3); font-size:12px}
.tela.app .btn.passo:hover{border-color:var(--q-t3); color:var(--q-t1); background:var(--q-col-head)}
.tela.app .quando{flex:none; position:relative}
.tela.app .quando > summary{list-style:none; display:grid; place-items:center; width:30px;
height:30px; border:1px solid var(--q-fio); border-radius:var(--q-r); background:var(--q-card);
color:var(--q-t3); font-size:11px; cursor:pointer}
.tela.app .quando > summary::-webkit-details-marker{display:none}
.tela.app .quando .outras{position:absolute; right:0; bottom:calc(100% + 4px); z-index:4;
width:max-content; max-width:15em; display:flex; flex-direction:column; gap:4px; margin:0;
padding:7px; background:var(--q-card); border:1px solid var(--q-fio-3);
border-radius:var(--q-r); box-shadow:var(--q-sombra)}
.tela.app .quando .outras .ajuda{font:500 9px/1 var(--q-rotulo); letter-spacing:.14em;
text-transform:uppercase; color:var(--q-t3)}
.tela.app .quando .outras .nota-gesto{font:400 10.5px/1.3 var(--q-texto); color:var(--q-t4)}
.tela.app .quando .outras input[name="nota"]{height:30px; padding:0 7px; border-radius:var(--q-r);
border:1px solid var(--q-fio); background:var(--q-card-2); color:var(--q-t1);
font:400 11.5px var(--q-texto); min-width:0}
.tela.app .cobranca{margin:8px 9px 0 11px; padding:6px 7px; border-left:2px solid var(--q-aten);
background:var(--q-col-head); border-radius:0 2px 2px 0}
.tela.app .cobranca-diz{margin:0 0 5px; font:400 11px/1.3 var(--q-texto); color:var(--q-t2)}
.tela.app .cobranca-forma{display:flex; gap:5px; flex-wrap:wrap; align-items:center; margin:0}
.tela.app .cobranca-forma .ajuda{width:100%; font:500 9px/1 var(--q-rotulo); letter-spacing:.14em;
text-transform:uppercase; color:var(--q-t3)}
.tela.app .cobranca-forma input{flex:1 1 7em; min-width:0; height:30px; padding:0 7px;
border:1px solid var(--q-fio); border-radius:var(--q-r); background:var(--q-card);
color:var(--q-t1); font:400 11.5px var(--q-mono)}
.tela.app .btn.mini{min-height:30px; padding:0 9px; border:1px solid var(--q-fio-3);
border-radius:var(--q-r); background:var(--q-card); color:var(--q-t2);
font:600 9.5px/1 var(--q-rotulo); letter-spacing:.12em; text-transform:uppercase;
display:inline-flex; align-items:center; text-decoration:none}
.tela.app .btn.mini.sec{color:var(--q-t3); border-color:var(--q-fio)}
.tela.app .coluna.recebendo{outline:2px dashed var(--q-sinal); outline-offset:-2px}
.tela.app .coluna.recebendo .pilha{background:var(--q-col-head)}
.tela.app .legenda{display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:6px 14px;
background:var(--q-chrome); border-top:1px solid var(--q-fio);
font:500 9.5px/1 var(--q-rotulo); letter-spacing:.13em; text-transform:uppercase;
color:var(--q-t3)}
.tela.app .legenda .leg{display:inline-flex; align-items:center; gap:6px}
.tela.app .legenda .am{width:14px; height:3px; background:var(--q-fio-3); border-radius:2px}
.tela.app .legenda .am.at{background:var(--q-aten)}
.tela.app .legenda .am.tr{background:var(--q-sinal)}
.tela.app .legenda .dir{margin-left:auto; display:flex; gap:16px; color:var(--q-t4); flex-wrap:wrap}
.tela.app .trilho{display:none}
@media (max-width:900px){
body.app{overflow:auto; height:auto}
.tela.app{height:auto; min-height:100dvh; display:block}
.tela.app > main{display:block}
.tela.app #quadro-vivo{display:block}
.tela.app .bancada{display:block}
.tela.app .metricas{display:grid; grid-template-columns:repeat(3,1fr); overflow:visible;
border-bottom:1px solid var(--q-fio-2)}
.tela.app .met{padding:7px 9px; border-right:1px solid var(--q-fio-2)}
.tela.app .met:last-child{border-right:0}
.tela.app .met.oculta{display:none}
.tela.app .met b{font-size:14px}
.tela.app .met{white-space:normal; padding:7px 8px}
.tela.app .met u{font-size:9px; letter-spacing:.1em; line-height:1.15}
.tela.app .met small{white-space:normal; line-height:1.2}
.tela.app .met b{white-space:nowrap}
.tela.app .topo{padding:var(--e2) var(--e3) 0; gap:0 var(--e3)}
.tela.app .topo .marca{font-size:var(--t-nano)}
.tela.app .topo nav{gap:0 var(--e3); margin-left:0; width:100%}
.tela.app .topo nav a, .tela.app .topo nav button.linkado{font-size:var(--t-nano)}
.tela.app .novo{border-left:0; padding:8px 10px; gap:6px}
.tela.app .novo label.rotulo{flex:1 1 100%}
.tela.app .novo input[name="titulo"]{height:44px; font-size:15px; flex:1 1 8em}
.tela.app .novo .btn{min-height:44px; flex:none}
.tela.app .trilho{display:flex; gap:6px; position:sticky; top:0; z-index:5; padding:7px 10px;
background:var(--q-chrome); border-bottom:1px solid var(--q-fio); overflow-x:auto;
scrollbar-width:none}
.tela.app .trilho::-webkit-scrollbar{display:none}
.tela.app .chip{flex:none; min-height:44px; max-width:none; padding:0 11px;
border:1px solid var(--q-fio); border-radius:var(--q-r); background:var(--q-card);
display:flex; align-items:center; gap:7px; font:600 11.5px/1 var(--q-rotulo);
letter-spacing:.11em; text-transform:uppercase; color:var(--q-t2)}
.tela.app .chip .idx{border:0; background:transparent; padding:0; color:var(--q-t3)}
.tela.app .chip .n{font:600 11px/1 var(--q-mono); color:var(--q-t1)}
.tela.app .chip.on{border-color:var(--q-t2); color:var(--q-t1); background:var(--q-col-head)}
.tela.app .chip.ex{border-color:var(--q-sinal-fio); color:var(--q-sinal)}
.tela.app .chip.ex .idx{color:var(--q-sinal)}
.tela.app .quadro{display:block; padding:10px 10px 0}
.tela.app .trilha-faixa{display:block}
.tela.app .trilha-faixa > h2{margin:14px 0 7px}
.tela.app .trilha-faixa:first-child > h2{margin-top:2px}
.tela.app .trilha{display:block; overflow:visible}
@media (min-width:0px){
.tela.app .trilha-faixa.baixa .trilha{height:auto} }
.tela.app .coluna{margin-bottom:10px; scroll-margin-top:64px}
.tela.app .coluna > header{position:sticky; top:59px; z-index:3}
.tela.app .pilha{overflow:visible; padding:8px; gap:8px}
.tela.app .coluna > footer .novo-aqui{min-height:44px; font-size:11.5px}
.tela.app .peca{font:600 15px/18px var(--q-texto); padding:8px 10px 0 11px; height:44px}
.tela.app .peca .qtd{font-size:15px}
.tela.app .card .cli b{font-size:14.5px}
.tela.app .selo{height:22px; font-size:10px}
.tela.app .selo.cod{font-size:11px}
.tela.app .valor{font-size:17px}
.tela.app .cota{font-size:11.5px}
.tela.app .card .gesto{padding:0 9px 9px 11px; gap:8px}
.tela.app .btn.passo{min-height:44px; font-size:11.5px}
.tela.app .quando > summary{width:44px; height:44px}
.tela.app .btn.mini{min-height:44px; padding:0 12px}
.tela.app .cobranca-forma input{height:44px; font-size:14px}
.tela.app .quando .outras input[name="nota"]{height:44px; font-size:14px}
.tela.app .legenda{padding:10px}
.tela.app .legenda .dir{width:100%; margin:6px 0 0; flex-wrap:wrap; gap:10px}
}
@media (prefers-reduced-motion:no-preference){
.tela.app .card, .tela.app .btn.passo{transition:border-color .12s ease, background-color .12s ease}
}
.tela.app{display:flex; flex-direction:column}
.tela.app > main{flex:1; min-width:0; display:flex; flex-direction:column}
.tela.app > main > #quadro-vivo{flex:1; min-height:0}
.tela.app #quadro-vivo, .tela.app .quadro, .tela.app .trilha-faixa{min-width:0}
.tela.app .tutorial{margin:var(--e2) var(--e3) 0; background:var(--q-col); border-color:var(--q-fio-2)}
.tela.app .tut-reabrir{padding:var(--e2) var(--e3) 0}
.tela.app .trello .copiavel{background:var(--q-col); border-color:var(--q-fio-2); color:var(--q-t1)}