/*
 * ui.css - componentes de tela (Ui::*) e blocos de cada modulo. Dono: frente WEB. Ver docs/PADROES.md secoes 4 e 7.
 * Ajustes de celular ficam em mobile.css. Cores so pelas variaveis de app.css.
 *
 * Secoes:  1 avisos  2 cabecalho e KPIs  3 filtros  4 formularios  5 tabela  6 listas e barras  7 modulos de apoio
 *          8 launcher e login  9 SISTEMA (usuarios, backup)  10 MADEIRA  11 FINANCEIRO  12 NOTA
 */

/* ====================================================================== 1. avisos */
.flash{padding:10px 14px;border-radius:var(--raio-p);margin-bottom:12px;border:1px solid var(--line);background:var(--card);border-left:4px solid var(--ok)}
.flash.erro{border-left-color:var(--bad)}
.aviso{padding:10px 14px;border-radius:var(--raio-p);margin:0 0 12px;border:1px solid var(--line);background:var(--card);border-left:4px solid var(--mut);font-size:14px}
.aviso.ok{border-left-color:var(--ok)}.aviso.warn{border-left-color:var(--warn)}.aviso.bad{border-left-color:var(--bad)}

/* ====================================================================== 2. cabecalho e KPIs */
.ui-cab{display:grid;grid-template-columns:1fr auto;gap:2px 16px;align-items:center;margin-bottom:16px}
.ui-cab h2{font-size:20px;margin:0}
.ui-cab .hint{grid-column:1;margin:0}
.ui-cab .ui-acoes{grid-column:2;grid-row:1 / span 2;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:760px){.ui-cab{display:block}}
.ui-kpis{margin-bottom:16px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--raio);padding:14px 16px}
.kpi b{display:block;font-size:24px;line-height:1.2;font-variant-numeric:tabular-nums}
.kpi span{color:var(--mut);font-size:13px}
.kpi.tom-ok{border-left:4px solid var(--ok)}.kpi.tom-warn{border-left:4px solid var(--warn)}.kpi.tom-bad{border-left:4px solid var(--bad)}
.kpi.tom-ok b{color:var(--ok)}.kpi.tom-warn b{color:var(--warn)}.kpi.tom-bad b{color:var(--bad)}

/* ====================================================================== 3. filtros */
.ui-filtros{background:var(--card);border:1px solid var(--line);border-radius:var(--raio);padding:12px 14px;margin-bottom:16px}
.ui-filtros .ui-f{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:flex-end}
.ui-filtros .ui-fc{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--mut);min-width:0}
.ui-filtros .ui-fc-busca{flex:1 1 260px}
.ui-filtros .ui-fc-select{flex:0 1 220px}
.ui-filtros .ui-fc-data input{width:150px}
.ui-filtros .ui-fc input[type=search],.ui-filtros .ui-fc input[type=text]{width:100%}
.ui-filtros .ui-f-check{display:inline-flex;align-items:center;gap:8px;min-height:38px;cursor:pointer}
.ui-filtros .ui-f-acoes{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.ui-filtros .ui-f-atalhos{display:inline-flex;gap:8px;flex-wrap:wrap;padding-left:8px;margin-left:4px;border-left:1px solid var(--line)}
.ui-filtros .ui-f-extra{margin-left:auto;display:inline-flex;gap:8px}

/* ====================================================================== 4. formularios */
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:12px}
.form>*{min-width:0}
.form label,.ui-fc{font-size:12px;color:var(--mut)}
.form label{display:flex;flex-direction:column;gap:4px}
.form label input,.form label select,.form label textarea{color:var(--ink);font-size:15px}
.form .f-full{grid-column:1/-1}
.form .f-dobro{grid-column:span 2}
.form .f-nova{grid-column-start:1}
.form small.hint{font-size:12px}
.form label.ui-check,.ui-check{flex-direction:row;align-items:center;gap:8px;color:var(--ink);font-size:14px;cursor:pointer;min-height:38px}
.ui-form{margin:0}
.ui-form-acoes{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}
.ui-form>.hint{margin:0 0 10px}
.drive{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--mut);margin-top:10px}
.lock{font-size:12px;color:var(--mut)}
.modal .form{margin-bottom:8px}
.modal form.ui-form>.form+.form{margin-top:4px}
/* campo com botao ao lado */
.campo-acao{display:flex;gap:6px}
.campo-acao input{flex:1}

/* autocompletar (espécie, favorecido) */
.ac{position:relative;display:block}
.ac input{width:100%}
.acl{position:absolute;left:0;right:0;top:100%;margin-top:2px;background:var(--card);border:1px solid var(--line);border-radius:var(--raio-p);box-shadow:var(--sombra);max-height:240px;overflow:auto;z-index:20;display:none}
.acl.on{display:block}
.acl div{padding:8px 10px;cursor:pointer;color:var(--ink);font-size:14px}
.acl div small{color:var(--mut);margin-left:6px}
.acl div.at,.acl div:hover{background:var(--soft)}
.acl div.sem{cursor:default;color:var(--mut)}

/* ====================================================================== 5. tabela */
.tbl{margin-bottom:16px}
.card .tbl:last-child{margin-bottom:0}
.ui-tabela tbody tr:hover td{background:color-mix(in srgb,var(--soft) 60%,transparent)}
.ui-tabela td.c-num,.ui-tabela th.c-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ui-tabela td.c-data{white-space:nowrap}
.ui-tabela td.c-acoes{text-align:right;white-space:nowrap}
.ui-tabela td.c-acoes>*{margin-left:6px;vertical-align:middle}
.ui-tabela td.c-acoes form{display:inline}
.ui-tabela tr.rg td,.ui-tabela tr.rg:hover td{background:var(--soft);font-weight:600;white-space:normal}
.ui-tabela .rg-a{float:right;display:inline-flex;gap:6px;margin-left:12px}
.ui-tabela tfoot td{border-top:2px solid var(--line);border-bottom:0;background:transparent}
.ui-tabela tr.sel td{background:var(--soft)}
.ui-tabela tr.apagado td{opacity:.55}
/* linha escolhida em outra tela (ex.: Avisos): tom mais escuro e algumas piscadas rápidas */
.ui-tabela tr.destaque td{background:color-mix(in srgb,var(--acc) 24%,var(--card));animation:destaque-pisca .35s ease-in-out 4}
@keyframes destaque-pisca{50%{background:color-mix(in srgb,var(--acc) 55%,var(--card))}}
@media (prefers-reduced-motion:reduce){.ui-tabela tr.destaque td{animation:none}}
.ui-vazio{padding:24px 8px;text-align:center;margin:0}
.ui-resumo{margin:10px 0 0}
.ui-pag{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin-top:14px}
.ui-pag .hint{padding:0 6px}
/* celula com selecao de motivo, etc. */
.ui-tabela td select{height:32px;font-size:14px}
.ui-tabela td .btn+.btn{margin-left:4px}

/* ====================================================================== 6. listas, barras, cores */
.bar{display:grid;grid-template-columns:130px 1fr 110px;gap:10px;align-items:center;font-size:13px;margin:8px 0}
.bar .tr{background:var(--soft);border-radius:6px;height:14px;overflow:hidden}
.bar .fl{height:100%;background:var(--acc2);border-radius:6px}
.bar .fl.ok{background:var(--ok)}.bar .fl.warn{background:var(--warn)}.bar .fl.bad{background:var(--bad)}
.bar .v{text-align:right;font-variant-numeric:tabular-nums}
.bar .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.painel-topo{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.painel-topo h2{margin:0}
.cor{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.cor i{width:12px;height:12px;border-radius:50%;border:1px solid color-mix(in srgb,var(--ink) 40%,transparent);display:inline-block;background:#999}
.cor-amarela{background:#f2c200!important}.cor-azul{background:#2a6fd6!important}.cor-branca{background:#fff!important}
.cor-verde{background:#2f9a4a!important}.cor-vermelha{background:#d23b2f!important}.cor-laranja{background:#f07c1e!important}
.seg{display:inline-flex;background:var(--card);border:1px solid var(--line);border-radius:var(--raio);padding:4px;gap:4px;margin-bottom:12px}
.seg button{border:0;background:none;font:inherit;padding:8px 16px;border-radius:var(--raio-p);cursor:pointer;color:var(--mut);font-weight:600}
.seg button.on{background:var(--acc);color:var(--on-acc)}
.xb{border:0;background:none;color:var(--bad);cursor:pointer;padding:2px 6px;line-height:1;display:inline-flex;align-items:center;border-radius:6px}
.xb:hover{background:var(--soft)}
.drop{display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;text-align:center;border:2px dashed var(--line);border-radius:var(--raio);padding:20px;margin-bottom:12px;cursor:pointer;background:var(--campo)}
.drop:hover,.drop.over{border-color:var(--acc);background:var(--soft)}

/* ====================================================================== 7. modulos de apoio */
.mx th,.mx td{text-align:center}
.mx td.cp{font-weight:700;background:var(--soft)}
.mx tr.tt td{font-weight:700;background:var(--soft)}
tr.sel{background:var(--soft)}

/* ====================================================================== 8. launcher e login */
.lwrap{text-align:center;width:100%;max-width:1100px;margin:2vh auto 0}
.lwrap .lbrand{width:160px;height:104px;object-fit:contain;background:#fff;border-radius:var(--raio);border:1px solid var(--line);padding:8px}
.lwrap h1{font-size:24px;margin:14px 0 4px}
.lwrap>.hint{margin:0 0 22px}
.lbtns{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;text-align:left}
.lcard{position:relative;display:flex}
.lbtn{flex:1;display:flex;flex-direction:column;gap:6px;padding:22px 20px;border-radius:var(--raio);border:1px solid var(--line);background:var(--card);color:var(--ink);text-decoration:none;transition:border-color .12s,background .12s}
.bolinha{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;margin-left:8px;border-radius:99px;background:var(--bad);color:var(--on-bad);font-size:12px;font-weight:700;line-height:1;vertical-align:middle;box-sizing:border-box}
.lbtn{position:relative}
.lbtn>.bolinha{position:absolute;top:14px;left:56px;margin:0;box-shadow:0 0 0 2px var(--card)}
.lbtn:hover,.lbtn:focus-visible{border-color:var(--acc);outline:none;background:color-mix(in srgb,var(--soft) 55%,var(--card))}
.lbtn .lic{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:var(--raio);background:var(--soft);color:var(--acc);margin-bottom:6px;flex:none}
.lbtn .lic .ico{width:28px;height:28px;stroke-width:1.6}
.lbtn b{font-size:18px;color:var(--ink)}
.lbtn small{color:var(--mut);font-size:13px;line-height:1.45}
.lbtn .ladm{align-self:flex-start;margin-top:6px}
.lbtn.oculto{border-style:dashed;opacity:.7}
.lcad{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:var(--raio-p);border:1px solid var(--line);background:var(--card);color:var(--mut);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.lcad:hover{border-color:var(--acc);color:var(--acc)}
.lcad.travado{color:var(--bad);border-color:var(--bad)}
/* organizar os cartões do launcher (launcher.js) */
.lmover{display:none;position:absolute;left:12px;right:12px;bottom:10px;gap:8px}
.lbtns.organizando .lmover{display:flex}
.lbtns.organizando .lcard{cursor:grab}
.lbtns.organizando .lbtn{outline:2px dashed var(--acc);outline-offset:-2px;padding-bottom:64px}
.lbtns.organizando .lcad{display:none}
.lcard.arrastando{opacity:.45}
.lorg{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:8px}
.lrodape{margin-top:22px;display:flex;flex-direction:column;align-items:center;gap:8px}
.lcaixa{max-width:400px;margin:0 auto;text-align:left}
.lcaixa .card{margin-top:14px}
.lcaixa .form{grid-template-columns:1fr}
.lcaixa .btn{width:100%;margin-top:6px}

/* ====================================================================== 9. SISTEMA */
.ubox{border:1px solid var(--line);border-radius:var(--raio);padding:10px 14px;margin-bottom:8px}
.ubox.off{opacity:.65}
.ubox .uh{display:flex;flex-direction:row;align-items:center;gap:8px;font-weight:650;color:var(--ink);font-size:15px;cursor:pointer}
.ubox .uabas{display:flex;flex-wrap:wrap;gap:6px 18px;margin:8px 0 0 26px}
.ubox .uabas label{display:flex;flex-direction:row;align-items:center;gap:6px;cursor:pointer;font-size:14px;color:var(--ink)}
.bk-pend{border-color:var(--bad)}
.logo-box{border:1px solid var(--line);border-radius:var(--raio);padding:8px;background:#fff;display:inline-block}
.logo-box img{width:170px;height:120px;object-fit:contain;display:block}

/* ====================================================================== 10. MADEIRA */
.rt{border-collapse:collapse;font-size:13px;width:auto}
.rt td{border:1px solid #555;padding:0;height:26px;min-width:46px;text-align:center;color:#000;background:#fff;font-weight:700}
.rt td.g{background:#969696}.rt td.sp{background:#969696;min-width:14px;width:14px}
.rt td.cp{background:#969696;min-width:54px;padding:0 4px;text-align:left}
.rt input{border:0!important;background:transparent!important;width:100%!important;min-width:0;height:26px!important;padding:0 4px!important;text-align:center;font:inherit;color:#000;border-radius:0!important;box-shadow:none!important}
.rt input:focus{background:#fff6d6!important;outline:2px solid var(--acc)}
.rt td.g input{color:#000}.rt input.err{background:#ffd6d6!important}
.rt td.tt{background:#fff;font-size:12px}
.rt td.lb{background:#969696;text-align:left;padding:0 4px}
.rt select{color:#000}
.gqs{display:flex;gap:6px;margin-top:8px;align-items:stretch}
.gqg{flex:1;min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.gq{display:flex;border:1px solid #555;background:#969696;color:#000;font-weight:700;font-size:13px}
.gq span{flex:1;min-width:0;padding:5px 10px;border-right:1px solid #555}.gq b{padding:5px 10px;min-width:60px;text-align:center}
.gq.tot{align-items:center}.gq.tot span{flex:none}.gq small{display:block;font-size:11px;padding:2px 8px;border-bottom:1px solid #555}
.gq.vazio{min-height:30px}
.ptabs{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.ptabs .btn.on{background:var(--acc);color:var(--on-acc)}
.pcx{display:inline-flex;align-items:center;background:#fff;color:#000;border:1px solid var(--line);border-radius:var(--raio-p);padding:2px 2px 2px 0}
.pci{width:58px!important;min-width:0!important;border:0!important;background:#fff!important;color:#000!important;text-align:center;font-weight:700;font-size:15px;padding:4px!important;box-shadow:none!important}
.pci:focus{outline:2px solid var(--acc);border-radius:6px}
.pac{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;border:1px solid var(--line);border-radius:var(--raio);padding:10px 12px;margin-bottom:10px;background:var(--card)}
.pac.editando{border:2px solid var(--warn);background:var(--soft)}
.pac .pn{width:100%;font-weight:800;font-size:13px;color:var(--acc)}
.pac label{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--mut)}
.pac .pbx{width:110px;font-weight:700;font-size:16px;text-align:center}
.pac .plg{width:100%;font-weight:700;font-size:16px;letter-spacing:.5px}
.pac .pinfo{font-size:13px;min-width:150px}
.chips{display:flex;flex-wrap:wrap;gap:6px;min-height:40px;padding:8px;border:1px dashed var(--line);border-radius:var(--raio);background:var(--soft)}
.cls-manual{background:#fff3b0!important;color:#000}
.cel-ok{background:#c8f0c8!important}
.gq.sem-cls{background:#f3b0b0}
.mad-app [hidden]{display:none!important}
.modal form.ui-form>label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--mut)}
.txt-ok{color:var(--ok)}.txt-bad{color:var(--bad)}
.form input.txt-ok{color:var(--ok)}.form input.txt-bad{color:var(--bad)}
.cnpj-acao{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.cnpj-acao .hint{flex:1 1 240px}
.rt input.rt-esp{text-align:left;text-transform:uppercase}
.rt td.cpl{padding:0 2px}
.rt .cpw{display:flex;align-items:center}
.rt input.rt-comp{text-align:left;font-weight:700;width:52px!important;background:#b5b5b5!important;border-radius:3px!important}
.rt td.cp-s{font-size:11px}.rt td.cp-xs{font-size:10px}
.rt td.cls-sel{padding:0}
.rt select.rt-cls{width:100%;border:0;background:transparent;font-size:9px;font-weight:700;padding:3px 0;color:#000;appearance:none;-webkit-appearance:none;text-align:center;text-align-last:center;cursor:pointer}
.rt select.rt-cls.vazio{visibility:hidden}
.kpi.larga{grid-column:span 2}
.kpi.larga b{font-size:14px}
.pac.ok-flash{outline:3px solid var(--ok)}
.pac .plg-l{flex:1;min-width:240px}
.pac .pinfo label{margin-top:6px}
.pac select.pcls{font-weight:700}
.pac .acoes{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pac-aviso{margin:0 0 10px}
/* largura aberta: correção da classificação de cada peça do pacote */
.pac .pmap{display:flex;flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:6px 10px;margin-top:8px;min-width:220px}
.pac .pmap .hint{width:100%}
.pac .pmapl{min-width:150px}
.pac .pmapl select{font-weight:700}
/* regras de classificação: tabela editável, resultado do teste e pré-visualização do Word */
.rg-tab table{font-size:13px}
.rg-tab td{vertical-align:top}
.rg-tab input.rg-num{width:78px;text-align:right}
.rg-tab input.rg-nome{width:150px;font-weight:700}
.rg-tab input.rg-curto{width:140px}
.rg-tab input.rg-chk{width:20px;height:20px}
.rg-tab tr.rg-man td{background:var(--soft)}
.rg-tab td.c-acoes{white-space:nowrap}
.rg-res{font-size:18px}
.mad-imp{border:2px solid var(--acc);border-radius:var(--raio);padding:12px 14px;margin-top:12px}
.mad-imp h3{margin:0 0 4px;font-size:15px}
.mad-imp h4{margin:12px 0 4px;font-size:14px}
/* botões Excel e PDF das listas */
.mad-exp{display:inline-flex;gap:8px;flex-wrap:wrap}
.ui-filtros .ui-f-extra:has(.mad-exp){flex-wrap:wrap;justify-content:flex-end}

/* ====================================================================== 11. FINANCEIRO */
/* seletor Ui::segmento com links */
.seg a{display:inline-flex;align-items:center;justify-content:center;padding:8px 16px;border-radius:var(--raio-p);color:var(--mut);font-weight:600;text-decoration:none}
.seg a:hover{color:var(--ink)}
.seg a.on{background:var(--acc);color:var(--on-acc)}
/* tons de texto e diferenca de pagamento */
.fin-ok,.dif-ok{color:var(--ok)}
.fin-bad,.dif-bad{color:var(--bad)}
.fin-warn{color:var(--warn)}
.dif-ok,.dif-bad{font-size:13px}
/* linha digitavel */
.ui-tabela td.fin-linha,.fin-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;overflow-wrap:anywhere}
.ui-tabela td.fin-linha{color:var(--mut);min-width:200px}
/* entrada de boleto: anexos, leitura do codigo, parcelas */
.fin-anexos{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.fin-info{background:var(--soft);border:1px solid var(--line);border-radius:var(--raio);padding:12px 14px;margin-bottom:12px}
.fin-info-campos{display:flex;flex-wrap:wrap;gap:8px 24px}
.fin-info-campos small{display:block;color:var(--mut);font-size:12px}
.fin-info p{margin:8px 0 0}
.fin-lote{background:var(--card);border:1px solid var(--line);border-radius:var(--raio);padding:14px;margin-bottom:12px}
.fin-lote h3{margin:0 0 4px;font-size:15px}
.fin-lote>.hint{margin:0 0 8px}
.fin-msg{margin:0 0 10px}
/* pagamento de boleto e baixa de cheque: listas montadas pelo JS */
.fin-aviso{position:relative;background:var(--soft);border:1px solid var(--line);border-radius:var(--raio);padding:12px 44px 12px 14px;margin:10px 0}
.fin-aviso .fin-fechar{position:absolute;top:6px;right:6px;border:0;background:none;color:var(--mut);cursor:pointer;padding:6px;border-radius:6px;display:inline-flex}
.fin-aviso .fin-fechar:hover{background:var(--card);color:var(--ink)}
.fin-vp{width:130px}
.fin-lista{margin-top:10px}
.fin-lista .ui-vazio{padding:16px 8px}

/* ====================================================================== 12. NOTA */
.nitabs{display:flex;flex-wrap:wrap;gap:2px;border-bottom:2px solid var(--line);margin-top:10px}
.nitabs button{border:0;background:none;padding:8px 12px;font:inherit;font-weight:700;color:var(--mut);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px}
.nitabs button.on{color:var(--acc);border-bottom-color:var(--acc)}
.nihelp{background:var(--soft);padding:8px 10px;border-radius:var(--raio-p);margin:8px 0}
.maiusc{text-transform:uppercase}
.nf-tit{font-weight:650;font-size:14px;margin:6px 0 0;color:var(--ink)}
.nf-desc{width:100%;font-weight:700;margin-bottom:4px}
.nf-n{width:100%;min-width:110px;font-weight:700;text-align:right}
.nf-sub{display:block;border:0;background:none;padding:2px 0;font:inherit;font-size:13px;color:var(--mut);cursor:pointer;text-align:left}
.nf-sub:hover,.nf-sub:focus-visible{color:var(--acc);text-decoration:underline}
/* subtítulo dentro de um cartão (ex.: Volumes transportados): mesma letra do título do cartão */
.nf-secao{font-size:16px;margin:8px 0 0}
#nfItens td{vertical-align:top}
#nfItens td.c-acoes,#nrLista td.c-acoes{white-space:nowrap}
#nfItens td.c-acoes .btn+.btn{margin-left:6px}
.nf-rebs{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px}
.nf-reb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--raio-p);background:var(--card)}
.nf-reb input{width:110px}.nf-reb select{width:84px}
.nf-rolagem{max-height:52vh;overflow:auto}
#mNfRom .card,#mNfIt .card,#mDanfe .card{max-width:1000px}
.danfe-rolagem{overflow-x:auto}
.danfe-rolagem .dnf{min-width:780px}
.nf-print{position:fixed;right:0;bottom:0;width:0;height:0;border:0}
.dnf{background:#fff;color:#000;font-family:Arial,Helvetica,sans-serif;font-size:11px;position:relative;overflow:hidden;padding:8px}
.dnf .bx{border:1px solid #000;padding:2px 4px;margin:-1px 0 0 -1px;min-width:0;overflow-wrap:anywhere}.dnf .lb{font-size:8px;color:#333;display:block}
.dnf .rw{display:flex}.dnf .rw>.bx{flex:1}
.dnf table{width:100%;border-collapse:collapse;font-size:10px}.dnf th,.dnf td{border:1px solid #000;padding:2px 4px;white-space:normal;color:#000}
.dnf th{background:#eee;font-size:8px;text-transform:uppercase}
.dnf .marca{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%) rotate(-24deg);font-size:46px;font-weight:900;color:rgba(200,0,0,.16);white-space:nowrap;pointer-events:none}
.dnf .bar{height:34px;background:repeating-linear-gradient(90deg,#000 0 2px,#fff 2px 3px,#000 3px 4px,#fff 4px 7px,#000 7px 8px,#fff 8px 9px);margin:3px 0;display:block}
.dnf .stt{font-weight:700;font-size:11px;margin:8px 0 1px}
.dnf .vl{display:block;font-size:11px;min-height:13px}
.dnf .corte{border-top:1px dashed #000;margin:7px 0}
.dnf table.its td{border-top:0;border-bottom:0;vertical-align:top}.dnf table.its td.r{text-align:right}.dnf table.its tr:last-child td{border-bottom:1px solid #000}
.dnf table.its tr.vazio td{height:70px}
.nf-acoes{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;max-width:320px;margin-left:auto}
.nf-acoes .btn{margin:0}
/* linhas de item do cupom NFC-e (nfce.js) */
.nfce-it{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-bottom:8px}
.nfce-it>:nth-child(1){grid-column:span 4}.nfce-it>:nth-child(2){grid-column:span 2}
.nfce-it>:nth-child(3){grid-column:span 1}.nfce-it>:nth-child(4),.nfce-it>:nth-child(5){grid-column:span 2}
.nfce-it .btn{grid-column:span 1}
/* linhas de item do formulário de orçamento (recibos.js) */
.orc-itens{display:flex;flex-direction:column;gap:8px}
.orc-tit{font-weight:600}
.orc-it{display:grid;grid-template-columns:repeat(6,minmax(0,1fr)) auto;gap:6px;align-items:center}
.orc-it input:nth-child(1){grid-column:span 2}
.orc-it input:nth-child(2){grid-column:span 4}
.orc-it input:nth-child(9),.orc-it input:nth-child(10){grid-column:span 3}
.orc-it .btn{grid-column:7;grid-row:1}
.m3-auto{text-align:right;grid-column:span 2}
.orc-it input{width:100%;min-width:0;padding-left:10px;padding-right:6px;text-overflow:ellipsis}
.rec-it{display:grid;grid-template-columns:repeat(6,minmax(0,1fr)) auto;gap:6px;align-items:center}
.rec-it input:nth-child(1){grid-column:span 2}
.rec-it input:nth-child(2){grid-column:span 4}
.rec-it .btn{grid-column:7;grid-row:1}
.rec-it input{width:100%;min-width:0;padding-left:10px;padding-right:6px;text-overflow:ellipsis}
.orc-itens>.btn{align-self:flex-start}
.aut-esp{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,2fr) minmax(0,1fr) auto;gap:6px;align-items:center}
.aut-esp select,.aut-esp input{width:100%;min-width:0}
/* menu de três pontos de uma linha de tabela (Ui::menuAcoes) */
.ui-mais{position:relative;display:inline-block}
.ui-mais>summary{list-style:none;cursor:pointer;user-select:none}
.ui-mais>summary::-webkit-details-marker{display:none}
.ui-mais-lista{position:absolute;right:0;top:100%;margin-top:4px;z-index:30;min-width:200px;padding:4px;display:flex;flex-direction:column;gap:2px;background:var(--card);border:1px solid var(--line);border-radius:var(--raio-p);box-shadow:var(--sombra);text-align:left}
.ui-mais-lista .btn{width:100%;justify-content:flex-start;margin:0;border:0;background:transparent;box-shadow:none;white-space:nowrap}
.ui-mais-lista .btn:hover{background:var(--soft)}
.campo-acao .btn{font-size:14px}
/* roteiro (pages/nota/roteiro.php): cidades de passagem, mapa Leaflet, placas de rodovia */
.rot-pass{display:flex;flex-direction:column;gap:6px;margin:0 0 10px}
.rot-pass-i{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--line);border-radius:var(--raio-p);background:var(--card)}
.rot-pass-n{font-weight:700;color:var(--mut);min-width:24px}
.rot-pass-nome{flex:1 1 140px;font-weight:600}
.rot-add{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;margin:0 0 12px}
.rot-add label{flex:1 1 200px;max-width:260px}
.rot-add label:has(select){flex:0 1 160px}
.rot-mapa{height:480px;border:1px solid var(--line);border-radius:var(--raio-p);background:var(--soft);margin:0 0 8px}
#rotMapaCard:fullscreen{background:var(--card);padding:12px}
#rotMapaCard:fullscreen .rot-mapa{height:calc(100vh - 110px)}
.rot-txt{width:100%;font-weight:700;text-transform:uppercase}
.hint.rot-warn{color:var(--warn)}
#rotNet:not([hidden]){margin:0 0 12px}
#rotNet .aviso{margin:0}
.rot-pin{background:none;border:0}
.rot-escudo{display:inline-block;background:#fff;border:1.5px solid #3c4043;border-radius:4px;padding:1px 5px;font:700 11px Arial,sans-serif;color:#202124;white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.rot-escudo.br{border-color:#188038;color:#0b5e26}
.rot-info{background:#fff;border-radius:var(--raio-p);box-shadow:0 1px 4px rgba(0,0,0,.3);padding:8px 12px;font:13px/1.35 Arial,sans-serif;color:#202124;max-width:260px}
.rot-info b{font-size:16px;color:#188038}
.rot-info span{color:#5f6368}
.nf-pdf-fora{position:fixed;left:-20000px;top:0;width:900px;background:#fff;z-index:-1}

/* ====================================================================== utilitarios */
.ui-inline{display:inline-block;margin:0}
.ui-inline .ui-form-acoes{margin-top:0}
.ui-inline .form:empty{display:none}
.ui-lista{margin:0;padding-left:20px}
.ui-lista li{margin:0 0 8px;color:var(--mut);font-size:14px}
.ui-lista li b{color:var(--ink)}
.ui-colapso{border:1px solid var(--line);border-radius:var(--raio);padding:0 14px;margin-bottom:12px;background:var(--card)}
.ui-colapso>summary{cursor:pointer;padding:10px 0;font-weight:600;color:var(--acc);list-style:none;display:flex;align-items:center;justify-content:space-between}
.ui-colapso>summary::-webkit-details-marker{display:none}
.ui-colapso>summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--mut);border-bottom:2px solid var(--mut);transform:rotate(45deg);transition:transform .15s}
.ui-colapso[open]>summary::after{transform:rotate(225deg)}
.ui-colapso[open]>summary{border-bottom:1px solid var(--line);margin-bottom:12px}
.ui-sem-acoes .ui-form-acoes{display:none}
.logo-linha{gap:16px;align-items:center;margin:14px 0}
.lbtn .tag{align-self:flex-start;margin-top:6px}
.lcaixa>.lbrand{display:block;margin:0 auto}
.lcaixa>h1{text-align:center}
.rot-salvo{margin-bottom:0}
.rot-salvo-txt{white-space:pre-wrap;margin:0 0 10px;font-size:13px}
.ui-amostra{display:inline-block;width:22px;height:22px;border:1px solid var(--line);border-radius:6px;vertical-align:middle}
input[type=color]{min-height:44px;padding:4px;cursor:pointer}

.qr-video{width:100%;max-height:60vh;background:#000;border-radius:var(--raio)}
.qr-folha{display:none}
.qr-etq{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px;border:1px dashed #999;break-inside:avoid}
.qr-etq svg{width:3.2cm;height:3.2cm}
.qr-etq b{font:700 12pt/1 monospace;letter-spacing:1px}
@media print{
  body.qr-imprimindo>*:not(#qrFolha){display:none!important}
  body.qr-imprimindo .qr-folha{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
}
.qr-etq .qr-logo{max-width:3.2cm;max-height:1cm;object-fit:contain}
.qr-etq .qr-emp{font:700 8pt/1.1 Arial,sans-serif;text-align:center;max-width:3.6cm}
.ui-quadro{display:inline-block;min-width:2.6em;padding:4px 8px;border:1.5px solid var(--acc);border-radius:6px;font-weight:700;text-align:center;color:var(--acc);background:var(--card)}
.ui-atalho{display:inline-flex;align-items:center;gap:4px;margin-top:4px;font-size:13px;font-weight:600;color:var(--acc);text-decoration:none}
.ui-atalho:hover{text-decoration:underline}
.ui-atalho .ico{width:14px;height:14px}
/* botão de ajuda logo depois do rótulo do campo (Ui::ajuda, LM.ajuda; comportamento no app.js) */
.rot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.aj{position:relative;display:inline-flex}
.aj-b{position:relative;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin:-4px 0;padding:0;border:1px solid var(--line);border-radius:99px;background:var(--card);color:var(--mut);cursor:help}
.aj-b::after{content:'';position:absolute;inset:-6px}
.aj-b:hover,.aj-b:focus-visible,.aj.aberto .aj-b{border-color:var(--acc);color:var(--acc)}
.aj-b .ico{width:14px;height:14px}
.aj-t{display:none;position:fixed;z-index:90;width:min(300px,calc(100vw - 24px));padding:10px 12px;border-radius:var(--raio-p);border:1px solid var(--line);background:var(--card);color:var(--ink);box-shadow:var(--sombra);font-size:13px;font-weight:400;line-height:1.4;text-align:left;white-space:normal}
.aj.aberto .aj-t{display:block}