/* Conversor de PO COMEX
   Estrutura: layout novo de telas do Sankhya (Design System BI / ez-design: cabeçalho branco, botões redondos,
   cards com sombra suave, campos contornados, chips e grade clara).
   Cores e fontes: Manual de Marca Evoden v1.0 (azul #003057 dominante, vermelho #D50032 como destaque, Rubik no
   texto, Futura nos títulos com fallback Jost). Tokens "propostos" do design.md para estados de interface. */
:root{
  --azul:#003057;--azul-hover:#00406F;--azul-press:#002240;--azul-100:#E6EDF4;--azul-50:#F2F6FA;
  --verm:#D50032;--verm-hover:#B0002A;--verm-50:#FCE8EC;
  --fundo:#F3F5F8;--sup:#FFFFFF;--borda:#D9DFE7;--texto:#1B2733;--texto-2:#5F6F7F;--texto-3:#8A97A6;
  --ok-bg:#E7F6E0;--ok:#157A00;--av-bg:#FFF7D5;--av:#8C6B00;--er-bg:#F7E0E5;--er:#BD0025;
  --r-s:4px;--r:8px;--r-l:12px;--pill:999px;
  --sh:0 1px 2px rgba(0,48,87,.06),0 2px 12px rgba(0,48,87,.06);--sh-forte:0 12px 32px rgba(0,48,87,.22);
  --f-titulo:'Futura','Jost','Century Gothic',sans-serif;--f-texto:'Rubik','Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:14px/1.45 var(--f-texto);color:var(--texto);background:var(--fundo)}
h1,h2,h3{font-family:var(--f-titulo);color:var(--azul);margin:0;font-weight:600;line-height:1.2}
button,input,select{font:inherit}
svg.i{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
:focus-visible{outline:2px solid var(--verm);outline-offset:2px}

/* faixa da marca no topo */
.faixa{height:4px;background:linear-gradient(90deg,var(--azul) 0 72%,var(--verm) 72% 100%)}

/* cabeçalho da tela (layout novo Sankhya) */
.hdr{background:var(--sup);border-bottom:1px solid var(--borda);padding:12px 24px;display:flex;align-items:center;gap:14px}
.hdr .marca{display:flex;flex-direction:column}
.hdr .crumb{font-size:12px;color:var(--texto-2)}
.hdr h1{font-size:22px}
.esp{flex:1}
.selo{font-size:11px;font-weight:500;color:var(--azul);background:var(--azul-100);border-radius:var(--pill);padding:3px 10px}
.usuario{display:flex;align-items:center;gap:10px;color:var(--texto-2);font-size:13px}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--azul);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:500;font-size:13px;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--verm)}

/* botões */
.ib{width:36px;height:36px;border-radius:50%;border:1px solid var(--borda);background:var(--sup);color:var(--azul);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;position:relative;padding:0}
.ib:hover{background:var(--azul-50);border-color:var(--azul)}
.ib[data-dica]:hover::after{content:attr(data-dica);position:absolute;top:42px;right:0;background:var(--azul);color:#fff;font-size:11px;padding:4px 8px;border-radius:var(--r-s);white-space:nowrap;z-index:40}
.btn{height:38px;border-radius:var(--r);padding:0 16px;cursor:pointer;border:1px solid var(--azul);background:var(--sup);color:var(--azul);display:inline-flex;align-items:center;gap:8px;font-weight:500;white-space:nowrap}
.btn:hover{background:var(--azul-50)}
.btn.pri{background:var(--azul);color:#fff}
.btn.pri:hover{background:var(--azul-hover)}
.btn.pri:active{background:var(--azul-press)}
.btn.cta{background:var(--verm);border-color:var(--verm);color:#fff}
.btn.cta:hover{background:var(--verm-hover)}
.btn.pq{height:30px;padding:0 10px;font-size:12px;border-radius:var(--r-s)}
.btn.lnk{border-color:transparent;background:transparent}
.btn.lnk:hover{background:var(--azul-50)}
.btn[disabled]{border-color:var(--borda);background:#EEF1F5;color:var(--texto-3);cursor:not-allowed}

/* corpo */
.corpo{max-width:1400px;margin:0 auto;padding:20px 24px 40px;display:flex;flex-direction:column;gap:16px}
.card{background:var(--sup);border-radius:var(--r-l);box-shadow:var(--sh);padding:18px 20px}
.card h2{font-size:17px;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.card h2 .n{width:24px;height:24px;border-radius:50%;background:var(--verm);color:#fff;font:600 12px var(--f-texto);display:inline-flex;align-items:center;justify-content:center}

/* passo 1: cliente + arquivo */
.entrada{display:grid;grid-template-columns:minmax(220px,320px) 1fr auto;gap:16px;align-items:end}
@media (max-width:900px){.entrada{grid-template-columns:1fr}}
.campo label{display:block;font-size:12px;color:var(--texto-2);margin-bottom:4px}
.campo select,.campo input[type=text],.campo input[type=password]{width:100%;height:40px;border:1px solid var(--borda);border-radius:var(--r);padding:0 12px;background:var(--sup);color:var(--texto)}
.campo select:focus,.campo input:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px var(--azul-100)}
.soltar{height:40px;border:1.5px dashed var(--borda);border-radius:var(--r);display:flex;align-items:center;gap:10px;padding:0 14px;color:var(--texto-2);cursor:pointer;background:var(--azul-50);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.soltar:hover,.soltar.sobre{border-color:var(--azul);color:var(--azul)}
.soltar.tem{border-style:solid;border-color:var(--azul);color:var(--azul);background:var(--sup)}
.soltar b{font-weight:500}
.soltar input{display:none}
.campo label.soltar{display:flex;margin:0;font-size:14px}

/* mensagens */
.aviso{display:none;border-radius:var(--r);padding:10px 14px;font-size:13px;align-items:center;gap:10px}
.aviso.on{display:flex}
.aviso.erro{background:var(--er-bg);color:var(--er)}
.aviso.info{background:var(--azul-100);color:var(--azul)}
.aviso.ok{background:var(--ok-bg);color:var(--ok)}

/* resumo */
.resumo{display:none;grid-template-columns:repeat(3,minmax(0,1fr)) 2fr;gap:12px}
.resumo.on{display:grid}
@media (max-width:1000px){.resumo{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpi{background:var(--sup);border-radius:var(--r-l);box-shadow:var(--sh);padding:14px 16px;border-top:3px solid var(--azul)}
.kpi span{display:block;font-size:12px;color:var(--texto-2)}
.kpi b{display:block;font:600 24px var(--f-titulo);color:var(--azul);font-variant-numeric:tabular-nums;margin-top:2px}
.kpi.sit{border-top-color:var(--verm)}
.kpi .arq{font-size:12px;color:var(--texto-2);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* chips de status (filtro) */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.chip{border:1px solid var(--borda);background:var(--sup);border-radius:var(--pill);padding:4px 12px;font-size:12px;cursor:pointer;color:var(--texto-2);display:inline-flex;gap:6px;align-items:center}
.chip i{font-style:normal;font-weight:600}
.chip.on{background:var(--azul);border-color:var(--azul);color:#fff}

/* grade */
.grade-card{padding:0;overflow:hidden;display:none}
.grade-card.on{display:block}
.grade-top{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--borda);flex-wrap:wrap}
.grade-top h2{margin:0}
.busca{position:relative}
.busca input{height:36px;border:1px solid var(--borda);border-radius:var(--pill);padding:0 12px 0 34px;width:240px}
.busca svg{position:absolute;left:11px;top:9px;color:var(--texto-3)}
.rolar{overflow:auto;max-height:calc(100vh - 360px);min-height:240px}
table{border-collapse:separate;border-spacing:0;width:100%}
th,td{padding:9px 12px;text-align:left;white-space:nowrap;border-bottom:1px solid #EDF0F4}
thead th{position:sticky;top:0;z-index:2;background:#F7F9FB;color:var(--texto-2);font-weight:500;font-size:12px;border-bottom:1px solid var(--borda)}
td.r,th.r{text-align:right;font-variant-numeric:tabular-nums}
td.d{max-width:280px;overflow:hidden;text-overflow:ellipsis}
td.cod{font-variant-numeric:tabular-nums;color:var(--azul);font-weight:500}
tbody tr:hover td{background:var(--azul-50)}
tbody tr.pend td:first-child{box-shadow:inset 3px 0 0 var(--verm)}
.sub{display:block;font-size:11px;color:var(--texto-3)}
.st{display:inline-flex;align-items:center;gap:5px;padding:2px 10px;border-radius:var(--pill);font-size:11px;font-weight:500}
.st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.st.OK{background:var(--ok-bg);color:var(--ok)}
.st.SUGERIDO,.st.CONFERIR{background:var(--av-bg);color:var(--av)}
.st.NAO_ENCONTRADO,.st.INATIVO{background:var(--er-bg);color:var(--er)}
.acoes{display:flex;gap:6px;justify-content:flex-end}
tbody tr .btn.lnk{visibility:hidden}
tbody tr:hover .btn.lnk{visibility:visible}
.vazio{padding:40px 20px;text-align:center;color:var(--texto-2)}

/* proforma */
.pf-campos{display:grid;grid-template-columns:200px 160px 1fr;gap:12px 16px;padding:16px 20px;border-bottom:1px solid var(--borda);align-items:start}
.pf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px 16px}
@media (max-width:900px){.pf-campos{grid-template-columns:1fr}}
input.preco{width:92px;height:30px;border:1px solid var(--borda);border-radius:var(--r-s);padding:0 8px;text-align:right;font-variant-numeric:tabular-nums}
input.preco:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px var(--azul-100)}
tr.sep td{height:8px;padding:0;background:#FBFCFD}
tfoot td{position:sticky;bottom:0;background:#F7F9FB;font-weight:600;color:var(--azul);border-top:1px solid var(--borda)}

/* rodapé de ações */
.rodape{display:flex;align-items:center;gap:12px;padding:14px 20px;border-top:1px solid var(--borda);background:#FBFCFD;flex-wrap:wrap}
.rodape .dica{font-size:12px;color:var(--texto-2)}

/* modal */
.fundo-modal{position:fixed;inset:0;background:rgba(0,34,64,.45);display:none;align-items:center;justify-content:center;z-index:60;padding:16px}
.fundo-modal.on{display:flex}
.modal{background:var(--sup);border-radius:var(--r-l);box-shadow:var(--sh-forte);width:min(680px,100%);max-height:84vh;display:flex;flex-direction:column;overflow:hidden}
.modal .mt{padding:16px 20px;border-bottom:1px solid var(--borda)}
.modal .mt h3{font-size:17px}
.modal .mt p{margin:4px 0 0;font-size:13px;color:var(--texto-2)}
.modal .mc{padding:14px 20px;display:flex;flex-direction:column;gap:10px;min-height:0}
.lista{overflow:auto;border:1px solid var(--borda);border-radius:var(--r);max-height:46vh}
.lista div{padding:9px 12px;cursor:pointer;border-bottom:1px solid #EDF0F4;display:flex;gap:10px}
.lista div:hover{background:var(--azul-50)}
.lista div b{color:var(--azul);min-width:64px;font-variant-numeric:tabular-nums}
.modal .mr{padding:12px 20px;border-top:1px solid var(--borda);display:flex;justify-content:flex-end}

@media (max-width:640px){
  .selo,#nomeUsu{display:none}.hdr{padding:10px 16px}.hdr h1{font-size:18px}
  .corpo{padding:16px 12px 32px}.resumo.on{grid-template-columns:1fr 1fr}.kpi.sit{grid-column:1/-1}
  .busca input{width:100%}.busca{width:100%}.rolar{max-height:none}
}

/* login */
.login{min-height:100%;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(360px,1fr)}
@media (max-width:860px){.login{grid-template-columns:1fr}.login .lado{display:none}}
.lado{position:relative;overflow:hidden;background:var(--azul);color:#fff;padding:48px;display:flex;flex-direction:column;justify-content:flex-end}
.lado h2{color:#fff;font-size:34px;max-width:440px}
.lado p{max-width:420px;color:rgba(255,255,255,.82);font-size:15px}
.lado .pg{position:absolute;border-radius:18px;transform:skewX(-18deg)}
.lado .pg.a{width:360px;height:96px;top:70px;right:-60px;background:linear-gradient(90deg,rgba(213,0,50,.9),rgba(213,0,50,.35))}
.lado .pg.b{width:300px;height:96px;top:186px;right:20px;border:2px solid rgba(213,0,50,.75)}
.lado .pg.c{width:420px;height:96px;top:302px;right:-120px;background:rgba(255,255,255,.07)}
.lado .rod{position:absolute;top:28px;left:48px;font:600 13px var(--f-texto);letter-spacing:2px;color:rgba(255,255,255,.7)}
.form-lado{display:flex;align-items:center;justify-content:center;padding:32px 20px;background:var(--fundo)}
.form-login{width:min(380px,100%);background:var(--sup);border-radius:var(--r-l);box-shadow:var(--sh);padding:28px;display:flex;flex-direction:column;gap:14px;border-top:4px solid var(--verm)}
.form-login h1{font-size:24px}
.form-login .sub{font-size:13px;color:var(--texto-2);margin-top:-8px}
.form-login .btn{width:100%;justify-content:center;height:42px}
.erro-login{min-height:18px;color:var(--er);font-size:13px}