:root{
  --fundo:#f5f7fb; --cartao:#fff; --texto:#0f1b2d; --suave:#5b6779; --linha:#e3e8f0; --leve:#f1f4f9;
  --marca:#1a56db; --marca-texto:#fff; --marca-leve:#e9f0fe; --marca-borda:#bcd0fb;
  --bom:#15803d; --bom-fundo:#e3f5e9; --ruim:#c0362c; --ruim-fundo:#fdeceb;
  --atencao:#b45309; --atencao-fundo:#fdf0d8; --info:#1e4fb8; --info-fundo:#e6eefc;
  --ml:#fff1a8; --ml-texto:#5c4a00; --neutro-pill:#eef1f5;
  --sombra:0 1px 2px rgba(15,27,45,.04),0 1px 3px rgba(15,27,45,.06);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --fundo:#0d1117; --cartao:#161b23; --texto:#e7ebf2; --suave:#9aa5b5; --linha:#2a313c; --leve:#1d232d;
  --marca:#6f9bff; --marca-texto:#0d1117; --marca-leve:#1a2640; --marca-borda:#34507f;
  --bom:#4cc283; --bom-fundo:#13301f; --ruim:#ff7b6b; --ruim-fundo:#3a1a16;
  --atencao:#f0ad4e; --atencao-fundo:#33270f; --info:#9dbbff; --info-fundo:#1a2640;
  --ml:#3d3510; --ml-texto:#ffe066; --neutro-pill:#232a35; --sombra:none; color-scheme:dark}}
:root[data-theme="dark"]{
  --fundo:#0d1117; --cartao:#161b23; --texto:#e7ebf2; --suave:#9aa5b5; --linha:#2a313c; --leve:#1d232d;
  --marca:#6f9bff; --marca-texto:#0d1117; --marca-leve:#1a2640; --marca-borda:#34507f;
  --bom:#4cc283; --bom-fundo:#13301f; --ruim:#ff7b6b; --ruim-fundo:#3a1a16;
  --atencao:#f0ad4e; --atencao-fundo:#33270f; --info:#9dbbff; --info-fundo:#1a2640;
  --ml:#3d3510; --ml-texto:#ffe066; --neutro-pill:#232a35; --sombra:none; color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--fundo);color:var(--texto);font:15px/1.5 "Inter","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--marca);text-decoration:none}
h1{font-size:30px;line-height:1.2;margin:0;letter-spacing:-.02em;font-weight:750} h2{font-size:16px;margin:0 0 8px}
.sprites{position:absolute}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic.grande{width:28px;height:28px}

.app{display:flex;min-height:100vh}
/* menu lateral */
.lateral{width:252px;flex:none;background:var(--cartao);border-right:1px solid var(--linha);display:flex;flex-direction:column;padding:22px 12px 14px;position:sticky;top:0;height:100vh;overflow-y:auto}
.marca{display:flex;align-items:center;gap:10px;color:var(--texto);padding:0 10px 22px}
.selo{background:var(--marca);color:var(--marca-texto);border-radius:9px;padding:4px 8px;font-size:18px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.marca-nome{display:flex;flex-direction:column;font-weight:800;font-size:22px;letter-spacing:-.01em;line-height:1.1}
.marca-nome small{font-weight:500;font-size:12.5px;color:var(--suave);letter-spacing:0;margin-top:2px}
.menu{display:flex;flex-direction:column;gap:2px;flex:1}
.secao-menu{margin:6px 12px 6px;font-size:12px;font-weight:650;text-transform:uppercase;letter-spacing:.07em;color:var(--suave)}
.menu a{display:flex;align-items:center;gap:12px;color:var(--texto);padding:9px 12px;border-radius:9px;font-weight:500;font-size:15px}
.menu a .ic{color:var(--suave)}
.menu a:hover{background:var(--leve)}
.menu a.ativo{background:var(--marca-leve);color:var(--marca);font-weight:650}
.menu a.ativo .ic{color:var(--marca)}
.divisor{border:0;border-top:1px solid var(--linha);margin:12px 10px}
.espaco-menu{flex:1;min-height:12px}
.empresa-card{position:relative;display:flex;flex-direction:row;align-items:center;gap:10px;margin:12px 4px 0;padding:10px 12px;border:1px solid var(--linha);border-radius:10px;background:var(--cartao);box-shadow:var(--sombra);cursor:pointer;font-weight:650;font-size:14px}
.empresa-ic{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--leve);color:var(--suave);flex:none}
.empresa-ic .ic{width:18px;height:18px}
.empresa-card select{appearance:none;-webkit-appearance:none;border:0;background:none;font:inherit;font-weight:650;color:var(--texto);flex:1;min-width:0;padding:0 18px 0 0;cursor:pointer}
.empresa-card .seta{position:absolute;right:12px;width:18px;height:18px;color:var(--suave);pointer-events:none}
.empresa-nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rodape{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 8px 0;color:var(--suave);font-size:13px}
.rodape a{display:inline-flex;align-items:center;gap:4px;color:var(--suave)}
.rodape a .ic{width:16px;height:16px}
.rodape a:hover{color:var(--texto)}

main{flex:1;min-width:0}
/* cabecalho da pagina */
.topo-pagina{display:flex;align-items:flex-start;gap:14px;padding:22px 28px 0;max-width:1340px}
.titulos{flex:1;min-width:0}
.trilha{font-size:14px;color:var(--suave);margin-bottom:6px}
.trilha span{margin:0 6px;color:var(--suave)}
.trilha strong{color:var(--texto);font-weight:600}
.subtitulo{margin:6px 0 0;color:var(--suave);font-size:16px}
.topo-acoes{display:flex;align-items:center;gap:12px;padding-top:34px;color:var(--suave);font-size:14px}
.abrir-menu{display:none;background:none;border:0;color:var(--texto);padding:4px;cursor:pointer;margin-top:28px}
.conteudo{padding:22px 28px 32px;max-width:1340px;display:flex;flex-direction:column;gap:18px}
.botao-icone{display:inline-grid;place-items:center;width:40px;height:40px;border:1px solid var(--linha);border-radius:10px;background:var(--cartao);color:var(--texto);cursor:pointer;box-shadow:var(--sombra)}
.botao-icone:hover{border-color:var(--marca-borda)}

.cartao{background:var(--cartao);border:1px solid var(--linha);border-radius:12px;padding:18px 20px;box-shadow:var(--sombra)}
.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.atalho{display:flex;flex-direction:column;gap:8px;color:var(--texto)}
.atalho:hover{border-color:var(--marca)}
.atalho .ic{color:var(--marca)}
.etiqueta{align-self:flex-start;font-size:12px;font-weight:600;color:var(--atencao);background:var(--atencao-fundo);border-radius:999px;padding:2px 9px}
.vazio p{color:var(--suave);margin:0}
.status{margin:0;font-weight:600}
.status[data-estado="carregando"]{color:var(--suave)}
.status[data-estado="ok"]{color:var(--bom)}
.status[data-estado="erro"]{color:var(--ruim)}

.tela-login{display:grid;place-items:center;min-height:100vh;padding:16px}
.login{width:100%;max-width:360px;display:flex;flex-direction:column;gap:14px}
.login .marca{padding:0}
.login .lembrar{flex-direction:row;display:flex;align-items:center;gap:8px;font-weight:normal;cursor:pointer}
.login .lembrar input{width:auto;margin:0}
.sub{margin:-6px 0 0;color:var(--suave);font-size:14px}
label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:14px}
input{font:inherit;padding:10px 12px;border:1px solid var(--linha);border-radius:10px;background:var(--cartao);color:var(--texto)}
input:focus{outline:2px solid var(--marca);outline-offset:1px}
.botao{font:inherit;font-weight:650;background:var(--marca);color:var(--marca-texto);border:1px solid var(--marca);border-radius:10px;padding:10px 16px;cursor:pointer}
.botao:focus-visible,.botao-icone:focus-visible,select:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
.aviso{margin:0;padding:9px 12px;border-radius:9px;font-size:14px}
.aviso.ruim{background:var(--ruim-fundo);color:var(--ruim)}

@media (max-width:820px){
  .lateral{position:fixed;left:0;z-index:10;transform:translateX(-100%);transition:transform .2s;box-shadow:var(--sombra)}
  .lateral.aberto{transform:none}
  .abrir-menu{display:block}
  .topo-pagina{padding:14px 16px 0}
  .topo-acoes{padding-top:30px}
  .conteudo{padding:16px}
  h1{font-size:24px}
}

/* ---------- componentes comuns ---------- */
.suave{color:var(--suave)}
.oculto{display:none!important}
.bom{color:var(--bom)} .ruim{color:var(--ruim)}
.botao.pequeno{padding:7px 12px;font-size:14px;display:inline-flex;align-items:center;gap:6px}
.botao.secundario{background:var(--cartao);color:var(--texto);border:1px solid var(--linha)}
.botao.contorno{background:var(--cartao);color:var(--marca);border:1.5px solid var(--marca)}
.botao.contorno:hover{background:var(--marca-leve)}
.botao:disabled{opacity:.5;cursor:default}
.botao .ic{width:16px;height:16px}
button.icone{background:none;border:0;color:var(--suave);cursor:pointer;padding:4px}
.check{flex-direction:row;align-items:center;gap:8px;font-weight:500}
.aviso.atencao{background:var(--atencao-fundo);color:var(--atencao)}
.aviso.info{background:var(--leve);color:var(--texto)}
.aviso a{font-weight:650}
.avisos{display:flex;flex-direction:column;gap:8px}
.avisos:empty{display:none}

.filtros{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.chips{display:flex;flex-wrap:wrap;gap:4px;background:var(--cartao);border:1px solid var(--linha);border-radius:10px;padding:4px;box-shadow:var(--sombra)}
.chips button{font:inherit;font-size:14px;font-weight:550;border:0;background:none;color:var(--suave);padding:6px 11px;border-radius:7px;cursor:pointer}
.chips button.ativo{background:var(--marca);color:var(--marca-texto)}
.datas{display:flex;gap:8px;align-items:center}
.datas input{padding:6px 8px}
.sinc{margin-left:auto;display:flex;gap:10px;align-items:center;font-size:13px}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.kpi{background:var(--cartao);border:1px solid var(--linha);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:2px;box-shadow:var(--sombra)}
.kpi span{color:var(--suave);font-size:13px;font-weight:600}
.kpi strong{font-size:22px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi small{color:var(--suave);font-size:12px}
.kpi.destaque{border-color:var(--marca)}

.tabela-cartao{padding:0;overflow:hidden}
.tabela-topo{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--linha)}
.tabela-topo input[type=search]{flex:1;min-width:200px;max-width:380px;padding:8px 12px}
.espaco{flex:1}
.rolagem{overflow-x:auto}
.tabela{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.tabela th{text-align:left;font-size:14px;font-weight:600;color:var(--texto);padding:12px 14px;border-bottom:1px solid var(--linha);white-space:nowrap;background:var(--cartao);position:sticky;top:0}
.tabela td{padding:12px 14px;border-bottom:1px solid var(--linha);white-space:nowrap;vertical-align:middle}
.tabela tbody tr:last-child td{border-bottom:0}
#tabela tbody tr[data-i]{cursor:pointer}
#tabela tbody tr[data-i]:hover{background:var(--leve)}
.n{text-align:right} .centro{text-align:center}
.produto{white-space:normal!important;min-width:220px;max-width:380px}
.produto span{display:block;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.produto small{color:var(--suave);font-size:12px}
.vazio-linha{text-align:center;color:var(--suave);padding:28px!important}
.falta{font-size:12px;font-weight:600;color:var(--atencao);background:var(--atencao-fundo);border-radius:999px;padding:2px 8px}
.marca-est{color:var(--atencao);font-weight:700;cursor:help}

.edita input{width:96px;padding:6px 8px;text-align:right;font-variant-numeric:tabular-nums}
.edita input[type=checkbox]{width:auto}
.edita tr.sem td:first-child{box-shadow:inset 3px 0 var(--atencao)}

.explica p{margin:0 0 12px;max-width:820px}
.acoes{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.arquivo{position:relative;overflow:hidden;font-weight:650}
.arquivo input{position:absolute;inset:0;opacity:0;cursor:pointer}

.regras summary{cursor:pointer;display:flex;flex-direction:column;gap:2px;list-style:none}
.regras summary h2{margin:0}
.regras summary::-webkit-details-marker{display:none}
.regras[open] summary{margin-bottom:16px}
.regras h3{font-size:14px;margin:18px 0 4px}
.regras .check{margin:10px 0}
.regras-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.ufs{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin:10px 0 16px}
.ufs label{font-size:13px}
.ufs input{padding:6px 8px}

/* gaveta com a conta da venda */
.gaveta-fundo{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:20}
.gaveta{position:fixed;top:0;right:0;height:100vh;width:min(480px,100vw);background:var(--cartao);border-left:1px solid var(--linha);z-index:21;transform:translateX(100%);transition:transform .2s;overflow-y:auto;padding:20px}
.gaveta.aberta{transform:none}
.gaveta header{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:16px}
.gaveta h2{font-size:16px;margin:0 0 4px}
.gaveta p{margin:0;font-size:13px}
.gaveta .aviso{margin-top:12px}
.conta{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.conta td{padding:9px 4px;border-bottom:1px solid var(--linha);vertical-align:top}
.conta td small{display:block;color:var(--suave);font-size:12px}
.conta .neg{color:var(--ruim)} .conta .pos{color:var(--bom)}
.conta .total td{border-bottom:0;border-top:2px solid var(--texto);font-weight:750;font-size:16px;padding-top:12px}
.fonte{font-size:11px;font-weight:650;border-radius:999px;padding:2px 8px;white-space:nowrap;background:var(--leve);color:var(--suave)}
.fonte.f-nota,.fonte.f-ml{background:var(--bom-fundo);color:var(--bom)}
.fonte.f-estimado{background:var(--atencao-fundo);color:var(--atencao)}

@media (max-width:820px){
  .sinc{margin-left:0}
  .kpi strong{font-size:19px}
}

/* ---------- estoque e expedicao ---------- */
.empresa-atual{margin-left:auto;font-size:13px;font-weight:600;color:var(--suave);background:var(--leve);border-radius:999px;padding:3px 10px}
.faixa-demo{background:var(--atencao-fundo);color:var(--atencao);font-size:14px;font-weight:600;padding:9px 28px;border-bottom:1px solid var(--linha)}
.faixa-demo a{color:inherit;text-decoration:underline}
.painel{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
a.kpi{color:var(--texto)} a.kpi:hover{border-color:var(--marca)}
.kpi.alerta strong{color:var(--ruim)} .kpi.atencao strong{color:var(--atencao)} .kpi.ok strong{color:var(--bom)}
.duas{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
select{font:inherit;padding:9px 12px;border:1px solid var(--linha);border-radius:10px;background:var(--cartao);color:var(--texto)}
textarea{font:inherit;padding:10px 12px;border:1px solid var(--linha);border-radius:9px;background:var(--fundo);color:var(--texto);min-height:70px}
.selo-sit{display:inline-block;font-size:12px;font-weight:650;border-radius:999px;padding:3px 9px;white-space:nowrap;background:var(--leve);color:var(--suave)}
.s-pronto_imprimir{background:#e3ecff;color:#1f4fb0}
.s-pronto,.s-despachado{background:var(--bom-fundo);color:var(--bom)}
.s-aguardando_nota,.s-aguardando_etiqueta,.s-aguardando_pagamento{background:var(--atencao-fundo);color:var(--atencao)}
.s-sem_estoque,.s-sem_vinculo,.s-nota_rejeitada,.s-erro,.s-conferir,.s-conferencia{background:var(--ruim-fundo);color:var(--ruim)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .s-pronto_imprimir{background:#1b2a4a;color:#9dbbff}}
:root[data-theme="dark"] .s-pronto_imprimir{background:#1b2a4a;color:#9dbbff}
.mini{width:40px;height:40px;border-radius:7px;object-fit:cover;background:var(--leve);display:block}
.mini.vazia{display:grid;place-items:center;color:var(--suave);font-size:10px;text-align:center;line-height:1.1}
.com-foto{display:flex;gap:10px;align-items:center}
.troca-empresa{display:inline-flex;align-items:center;gap:6px}
.troca-empresa select{font:inherit;font-weight:650;border:1px solid var(--linha);background:var(--cartao);color:var(--texto);border-radius:8px;padding:4px 8px}
.oculto-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.passos{margin:10px 0;padding-left:20px;font-size:14px;display:flex;flex-direction:column;gap:6px}
.com-foto > div{min-width:0}
.com-foto .mini{flex:none}

/* conferencia da embalagem (antes de imprimir) */
.modal.conferencia{max-width:800px;max-height:90vh;padding:0;gap:0;overflow:hidden}
.cf-topo,.cf-totais,.cf-rodape{flex:none}
.cf-topo{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;padding:18px 20px 12px;border-bottom:1px solid var(--linha)}
.cf-topo h2{margin:0;font-size:19px;text-wrap:balance}
.cf-topo p{margin:2px 0 0;font-size:14px}
.cf-totais{display:flex;gap:8px;flex-wrap:wrap;padding:10px 20px;background:var(--leve);font-size:14px}
.cf-totais b{font-variant-numeric:tabular-nums}
.cf-lista{flex:1 1 auto;min-height:0;overflow:auto;padding:12px 20px;display:flex;flex-direction:column;gap:12px}
.cf-pacote{flex:none;border:1px solid var(--linha);border-radius:12px;overflow:hidden}
.cf-pacote.bloq{opacity:.6}
.cf-cab{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;padding:9px 14px;background:var(--leve);font-size:13px;color:var(--suave)}
.cf-nome{font-size:16px;color:var(--texto);font-weight:700}
.cf-nome small{font-weight:500;color:var(--suave);font-size:12px;margin-left:6px}
.cf-dir{margin-left:auto;display:flex;gap:6px;align-items:center}
.cf-item{display:grid;grid-template-columns:84px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 14px}
.cf-item + .cf-item{border-top:1px dashed var(--linha)}
.cf-foto{width:84px;height:84px;border-radius:10px;object-fit:contain;background:#fff;border:1px solid var(--linha);display:block;max-width:100%}
.cf-foto.vazia{display:grid;place-items:center;background:var(--leve);color:var(--suave);font-size:12px}
.cf-titulo{font-weight:650;font-size:15px;line-height:1.35}
.cf-sku{color:var(--suave);font-size:12px;margin-top:2px}
.cf-kit{margin-top:6px;font-size:13px;color:var(--suave)}
.cf-kit b{color:var(--texto)}
.cf-unid{min-width:84px;text-align:center;border-radius:10px;padding:6px 10px;background:var(--leve);border:2px solid var(--linha)}
.cf-unid b{display:block;font-size:30px;line-height:1;font-variant-numeric:tabular-nums}
.cf-unid span{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--suave)}
.cf-unid.mais{background:var(--atencao-fundo);border-color:var(--atencao)}
.cf-unid.mais b,.cf-unid.mais span{color:var(--atencao)}
.cf-alerta{margin:0 14px 10px;padding:7px 10px;border-radius:8px;background:var(--atencao-fundo);color:var(--atencao);font-size:13px;font-weight:600}
.cf-estado{padding:7px 14px;border-top:1px solid var(--linha);font-size:13px;color:var(--suave)}
.cf-rodape{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:14px 20px;border-top:1px solid var(--linha)}
.cf-nota{flex:1;min-width:200px;font-size:13px}
@media (max-width:520px){
  .cf-item{grid-template-columns:64px minmax(0,1fr)}
  .cf-foto{width:64px;height:64px}
  .cf-unid{grid-column:1 / -1;display:flex;align-items:baseline;justify-content:center;gap:8px}
  .cf-unid b{display:inline;font-size:24px}
  .cf-dir{margin-left:0}
}
.itens-celula{white-space:normal!important;min-width:240px;max-width:420px}
.itens-celula div{display:flex;gap:6px;align-items:baseline}
.itens-celula b{font-variant-numeric:tabular-nums}
.itens-celula small{color:var(--suave)}
.plat{font-size:11px;font-weight:700;border-radius:5px;padding:1px 6px;background:var(--leve);color:var(--suave)}
.plat.ml{background:var(--ml);color:var(--ml-texto)} .plat.shopee{background:#ffe2d6;color:#a6380f}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .plat.ml{background:#3d3510;color:#ffe066}:root:not([data-theme="light"]) .plat.shopee{background:#40200f;color:#ff9b73}}
.botao.imprimir{background:var(--marca);color:var(--marca-texto)}
.botao.reimprimir{background:var(--leve);color:var(--texto);border:1px solid var(--linha)}
.pronto-por{display:block;font-size:11px;color:var(--suave);margin-top:3px}
.atraso{color:var(--ruim);font-weight:650}
.barra-lote{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--leve);border-bottom:1px solid var(--linha)}
.campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.form-gaveta{display:flex;flex-direction:column;gap:12px}
.form-gaveta .acoes{margin-top:6px}
.estados{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14px;margin:4px 0 14px}
.estados dt{color:var(--suave)} .estados dd{margin:0;font-weight:600}
.linha-tempo{list-style:none;margin:0;padding:0;font-size:13px}
.linha-tempo li{padding:7px 0;border-bottom:1px solid var(--linha);display:flex;flex-direction:column}
.linha-tempo small{color:var(--suave)}
.gaveta h3{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--suave);margin:18px 0 8px}
.modal-fundo{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:30;display:grid;place-items:center;padding:16px}
.modal{background:var(--cartao);border:1px solid var(--linha);border-radius:14px;max-width:760px;width:100%;max-height:88vh;overflow:auto;padding:20px;display:flex;flex-direction:column;gap:12px}
.modal header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.toast{position:fixed;bottom:20px;right:20px;z-index:40;max-width:420px;padding:12px 16px;border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.18);font-weight:600;font-size:14px;background:var(--texto);color:var(--cartao)}
.toast.ruim{background:var(--ruim);color:#fff}
.sugestao{font:inherit;font-size:12px;font-weight:600;border:1px dashed var(--marca);color:var(--marca);background:none;border-radius:999px;padding:2px 9px;cursor:pointer;margin:2px 4px 2px 0}
.contas{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.conta-card{display:flex;flex-direction:column;gap:10px}
.conta-card header{display:flex;justify-content:space-between;align-items:center;gap:8px}
.modo{font-size:12px;font-weight:700;border-radius:999px;padding:2px 9px}
.modo.demo{background:var(--atencao-fundo);color:var(--atencao)} .modo.leitura{background:var(--leve);color:var(--suave)}
.modo.escrita{background:var(--bom-fundo);color:var(--bom)} .modo.pendente{background:var(--ruim-fundo);color:var(--ruim)}
.lista-simples{margin:0;padding-left:18px;font-size:14px} .lista-simples li{margin:3px 0}
.abas{display:flex;gap:4px;border-bottom:1px solid var(--linha)}
.abas button{font:inherit;font-weight:600;border:0;background:none;color:var(--suave);padding:10px 14px;cursor:pointer;border-bottom:2px solid transparent}
.abas button.ativo{color:var(--marca);border-bottom-color:var(--marca)}
.comp-linha{display:flex;gap:8px;align-items:center}
.comp-linha select{flex:1} .comp-linha input{width:80px}
.n-pos{color:var(--bom)} .n-neg{color:var(--ruim)}
@media (max-width:820px){.faixa-demo{padding:9px 16px}}
.envio{font-size:11px;font-weight:700;border-radius:5px;padding:1px 6px;background:var(--leve);color:var(--suave)}
.envio.e-flex{background:#e6f4ea;color:#1d7a45} .envio.e-agencia{background:#e8eefc;color:#2b4fa8} .envio.e-coleta{background:#f3e8fc;color:#7a3aa8}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .envio.e-flex{background:#16301f;color:#6fd69a}:root:not([data-theme="light"]) .envio.e-agencia{background:#1b2a4a;color:#9dbbff}:root:not([data-theme="light"]) .envio.e-coleta{background:#2e1c3d;color:#cfa2f0}}
:root[data-theme="dark"] .envio.e-flex{background:#16301f;color:#6fd69a}
:root[data-theme="dark"] .envio.e-agencia{background:#1b2a4a;color:#9dbbff}
:root[data-theme="dark"] .envio.e-coleta{background:#2e1c3d;color:#cfa2f0}
.dias{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.dias button{font:inherit;text-align:left;display:flex;flex-direction:column;gap:2px;background:var(--cartao);border:1px solid var(--linha);border-radius:12px;padding:12px 14px;cursor:pointer;color:var(--texto);box-shadow:var(--sombra)}
.dias button span{font-size:13px;font-weight:650;color:var(--suave)}
.dias button strong{font-size:24px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.dias button small{font-size:12px;color:var(--suave);min-height:16px}
.dias button.ativo{border-color:var(--marca);box-shadow:inset 0 0 0 1px var(--marca)}
.dias button.alerta strong{color:var(--ruim)}
.grande-kpi strong{font-size:30px}



/* ---------- pedidos e expedicao (visual novo) ---------- */
.dias{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.dias button{font:inherit;text-align:left;display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:start;background:var(--cartao);border:1px solid var(--linha);border-radius:12px;padding:18px 20px;cursor:pointer;color:var(--texto);box-shadow:var(--sombra);min-height:112px}
.dias button .ic{grid-row:span 3;width:24px;height:24px;color:var(--suave);margin-top:2px}
.dias button span{font-size:16px;font-weight:600;color:var(--texto)}
.dias button strong{font-size:32px;line-height:1.15;letter-spacing:-.02em;font-variant-numeric:tabular-nums;font-weight:750}
.dias button small{font-size:14px;color:var(--suave);min-height:0}
.dias button:hover{border-color:var(--marca-borda)}
.dias button.ativo{border:2px solid var(--marca);background:var(--marca-leve);padding:17px 19px}
.dias button.ativo .ic{color:var(--marca)}
.dias button.alerta strong{color:var(--ruim)}
.faixa-info{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--info-fundo);color:var(--texto);border-radius:10px;padding:12px 18px;font-size:15px}
.faixa-info .ic{color:var(--info)}
.faixa-info strong{color:var(--info);font-size:16px}
.faixa-info .sep{width:1px;align-self:stretch;background:var(--texto);opacity:.35}
.faixa-info a{font-weight:600}
.abas-pedidos{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--linha);padding-bottom:10px}
.abas-pedidos button{font:inherit;font-size:16px;font-weight:600;border:0;background:none;color:var(--texto);padding:8px 26px;border-radius:9px;cursor:pointer;display:inline-flex;align-items:center;gap:10px}
.abas-pedidos button:hover{background:var(--leve)}
.abas-pedidos button.ativo{background:var(--marca);color:var(--marca-texto)}
.abas-pedidos .conta-aba{background:var(--cartao);color:var(--marca);border-radius:999px;padding:0 9px;font-size:14px;font-weight:700;line-height:22px}
.abas-pedidos button:not(.ativo) .conta-aba{display:none}
.busca-linha{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.campo-busca{position:relative;display:block;flex:1 1 360px;min-width:220px}
.campo-busca .ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--suave)}
.campo-busca input{width:100%;padding:11px 14px 11px 46px;font-size:15px;box-shadow:var(--sombra)}
.busca-linha select{min-width:200px;padding:11px 14px;box-shadow:var(--sombra)}
.botao.filtros{display:inline-flex;align-items:center;gap:10px;background:var(--cartao);color:var(--texto);border:1px solid var(--linha);box-shadow:var(--sombra);padding:10px 20px}
.botao.filtros.ativo{border-color:var(--marca);color:var(--marca)}
.mais-filtros{display:flex;flex-wrap:wrap;gap:12px;align-items:center;background:var(--cartao);border:1px solid var(--linha);border-radius:10px;padding:12px 14px}
.cartao-pedidos .tabela-topo{gap:14px}
.cartao-pedidos .tabela-topo h2{margin:0;font-size:17px;display:flex;align-items:center;gap:12px}
.cartao-pedidos .tabela-topo .sep{width:1px;height:22px;background:var(--linha)}
.cartao-pedidos .tabela-topo .qtd{font-size:15px;color:var(--texto)}
.cartao-pedidos .tabela-topo .botao{display:inline-flex;align-items:center;gap:8px}
.cartao-pedidos .tabela-topo .botao:disabled{background:var(--leve);color:var(--suave);border-color:var(--linha);opacity:1}
.cartao-pedidos .tabela td{white-space:normal}
.cartao-pedidos input[type=checkbox]{width:18px;height:18px;accent-color:var(--marca)}
.ped-num{font-weight:700;font-size:15px}
.ped-num small{font-weight:500;color:var(--suave)}
.selos{display:flex;gap:6px;margin-top:3px;flex-wrap:wrap}
.selos .plat,.selos .envio{font-size:13px;font-weight:650;padding:1px 10px;border-radius:6px}
.prod-celula{display:flex;gap:14px;align-items:center;min-width:260px}
.prod-celula img,.prod-celula .vazia{width:64px;height:52px;object-fit:contain;flex:none;border-radius:6px;background:#fff}
.prod-celula .vazia{display:grid;place-items:center;background:var(--leve);color:var(--suave);font-size:11px}
.prod-celula b{display:block;font-weight:650;font-size:15px;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.prod-celula small{color:var(--suave);font-size:13px}
.prod-celula .mais-itens{color:var(--marca);font-size:13px;font-weight:600}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;border-radius:7px;padding:3px 11px;white-space:nowrap;background:var(--neutro-pill);color:var(--texto)}
.pill .ic{width:16px;height:16px}
.pill.atencao{background:var(--atencao-fundo);color:var(--atencao)}
.pill.bom{background:var(--bom-fundo);color:var(--bom)}
.pill.ruim{background:var(--ruim-fundo);color:var(--ruim)}
.pill.info{background:var(--info-fundo);color:var(--info)}
.despacho{white-space:nowrap;font-size:15px}
.despacho.atraso{color:var(--ruim);font-weight:650}
.acao-celula .botao{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;font-size:15px;white-space:nowrap}
.acao-celula .botao .ic{width:18px;height:18px}
.acao-celula .pronto-por{margin-top:4px}
.rodape-tabela{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 18px;border-top:1px solid var(--linha);font-size:15px;color:var(--suave)}
.paginas{display:flex;gap:8px}
.paginas button{font:inherit;min-width:38px;height:38px;border:1px solid var(--linha);border-radius:9px;background:var(--cartao);color:var(--texto);cursor:pointer;font-weight:600;display:inline-grid;place-items:center;padding:0 8px}
.paginas button.ativo{background:var(--marca);border-color:var(--marca);color:var(--marca-texto)}
.paginas button:disabled{opacity:.45;cursor:default}
.paginas .ic{width:18px;height:18px}
.nota-rodape{font-size:13px;margin:0}
@media (max-width:1100px){.dias{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.dias{grid-template-columns:1fr 1fr;gap:10px}.dias button{padding:12px;min-height:0}.dias button strong{font-size:24px}.abas-pedidos button{padding:8px 14px}.busca-linha select{flex:1 1 140px;min-width:0}}
.prod-celula.outro{margin-top:10px;padding-top:10px;border-top:1px dashed var(--linha)}
.un-mais{color:var(--atencao)}
.unid-pill{display:inline-flex;flex-direction:column;align-items:center;min-width:64px;padding:4px 10px;border-radius:9px;background:var(--leve);border:1.5px solid var(--linha);line-height:1.1}
.unid-pill b{font-size:22px;font-variant-numeric:tabular-nums}
.unid-pill small{font-size:11px;font-weight:650;text-transform:uppercase;letter-spacing:.05em;color:var(--suave)}
.unid-pill.mais{background:var(--atencao-fundo);border-color:var(--atencao)}
.unid-pill.mais b,.unid-pill.mais small{color:var(--atencao)}
.tabela th.centro{text-align:center}

/* ---------- pos-venda ---------- */
.pv-filtros{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pv-sku{flex:1 1 200px;min-width:180px}
.pv-acao{border-left:4px solid var(--marca)}
.pv-acao-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.pv-acao-item{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--linha);border-radius:10px;color:var(--texto);background:var(--cartao)}
.pv-acao-item strong{font-size:24px;font-variant-numeric:tabular-nums;line-height:1.1}
.pv-acao-item span{font-size:13px;color:var(--suave)}
.pv-acao-item small{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ruim)}
.pv-acao-item:hover{border-color:var(--marca-borda)}
.pv-acao-item.tom-ruim{background:var(--ruim-fundo);border-color:var(--ruim)} .pv-acao-item.tom-ruim strong{color:var(--ruim)}
.pv-acao-item.tom-atencao{background:var(--atencao-fundo);border-color:var(--atencao)} .pv-acao-item.tom-atencao strong{color:var(--atencao)}
.pv-acao-item.tom-info{background:var(--info-fundo);border-color:var(--marca-borda)} .pv-acao-item.tom-info strong{color:var(--info)}
.pv-acao-item.zerado{opacity:.7}
.pv-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.pv-kpi{color:var(--texto)} a.pv-kpi:hover{border-color:var(--marca)}
.pv-kpi strong{font-size:26px}
.pv-base{font-size:13px;margin:-4px 0 12px}
.barras{display:flex;flex-direction:column;gap:8px}
.barra-linha{display:grid;grid-template-columns:minmax(120px,1.4fr) 2fr auto;gap:10px;align-items:center;color:var(--texto);font-size:14px;padding:3px 4px;border-radius:6px}
.barra-linha:hover{background:var(--leve)}
.barra-rotulo{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barra-trilho{height:12px;background:var(--leve);border-radius:6px;overflow:hidden}
.barra-trilho span{display:block;height:100%;background:var(--marca);border-radius:6px}
.barra-valor{font-variant-numeric:tabular-nums;font-weight:650;white-space:nowrap}
.barra-valor small{font-weight:500;color:var(--suave)}
.pv-h3{font-size:13px;color:var(--suave);margin:4px 0 6px;font-weight:650}
.pv-grafico{width:100%;height:auto;max-width:100%}
.pv-grafico .eixo{font-size:10px;fill:var(--suave)}
.pv-grafico .base{stroke:var(--linha)}
.s1{fill:var(--marca)} .s2{fill:var(--atencao)} .s3{fill:var(--ruim)} .s4{fill:var(--bom)}
.legenda{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--suave);margin-top:4px}
.legenda i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.legenda i.s1{background:var(--marca)} .legenda i.s2{background:var(--atencao)} .legenda i.s3{background:var(--ruim)} .legenda i.s4{background:var(--bom)}
.pv-mini-grade{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}
.pv-mini-grade div{background:var(--leve);border-radius:8px;padding:8px 10px;display:flex;flex-direction:column}
.pv-mini-grade strong{font-size:18px;font-variant-numeric:tabular-nums}
.pv-mini-grade span{font-size:12px;color:var(--suave)}
.pv-como summary{cursor:pointer;list-style:none} .pv-como summary::-webkit-details-marker{display:none}
.pv-como ul{margin:12px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:14px;max-width:900px}
.pv-item{border:1px solid var(--linha);border-radius:10px;padding:12px;margin:10px 0;display:flex;flex-direction:column;gap:8px}
.pv-item-cab{display:flex;flex-direction:column}
.pv-destinos{display:flex;flex-direction:column;gap:6px}
.pv-fotos{display:flex;gap:8px;flex-wrap:wrap}
.pv-fotos img{width:84px;height:84px;object-fit:cover;border-radius:8px;border:1px solid var(--linha)}
.pv-msg{white-space:pre-wrap}
.pv-fin{margin-top:10px}
.pv-fin h4{margin:0 0 6px;font-size:13px}
@media (max-width:1100px){.pv-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.pv-cards{grid-template-columns:1fr}.pv-mini-grade{grid-template-columns:repeat(2,minmax(0,1fr))}.barra-linha{grid-template-columns:1fr auto}.barra-trilho{grid-column:1 / -1;order:3}}