
:root{
  --bg:#f5f4f1;--card:#fff;--txt:#1f1f1f;--muted:#707070;--line:#e6e2db;
  --soft:#efede8;--ok:#23633c;--danger:#9a2f2f;--warn:#8b5d10
}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--txt)}
.topo{background:#fff;padding:24px 5vw;display:flex;justify-content:space-between;gap:20px;align-items:center;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.marca{font-size:12px;letter-spacing:.16em;font-weight:700}.topo h1{margin:5px 0}.topo p{margin:0;color:var(--muted)}
.acoes{display:flex;gap:10px}.primario,.secundario{border:0;border-radius:999px;padding:13px 18px;font-weight:700;cursor:pointer}
.primario{background:#222;color:#fff}.secundario{background:var(--soft)}.primario:disabled{opacity:.45;cursor:not-allowed}.grande{width:100%;margin-top:16px}
main{padding:24px 5vw 70px}.status{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.status div{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px}.status strong{display:block;font-size:20px}.status span{font-size:12px;color:var(--muted)}
.filtros{display:grid;grid-template-columns:minmax(240px,1.5fr) minmax(180px,.8fr) minmax(180px,.8fr);gap:12px;margin-bottom:20px}
input,select,textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;font:inherit}
.grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.card{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 8px 28px rgba(0,0,0,.04)}
.card img{width:100%;height:460px;object-fit:contain;background:#f7f7f7;padding:14px}.card-body{padding:18px}
.badge{display:inline-block;background:var(--soft);padding:7px 10px;border-radius:999px;font-size:12px;font-weight:700}
.codigo{color:var(--muted);font-size:13px;margin-top:12px}.nome{font-size:20px;font-weight:700;margin:5px 0 8px;min-height:48px}
.preco{font-size:28px;font-weight:800}.estoque{color:var(--muted);font-size:14px;margin:8px 0 12px}
.tamanhos{display:grid;grid-template-columns:repeat(auto-fit,minmax(68px,1fr));gap:8px}.tam{border:1px solid var(--line);padding:8px;border-radius:10px;text-align:center}
.tam small{display:block;color:var(--muted);margin-bottom:6px}.tam input{padding:8px;text-align:center}
.add{width:100%;margin-top:14px;padding:12px;border:1px solid #222;border-radius:12px;background:#fff;font-weight:700;cursor:pointer}
.painel{position:fixed;right:-560px;top:0;width:min(540px,100%);height:100vh;background:#fff;z-index:30;padding:22px;overflow:auto;transition:.25s;box-shadow:-8px 0 40px rgba(0,0,0,.15)}
.painel.aberto{right:0}.painel-cab{display:flex;justify-content:space-between;align-items:center;gap:20px}.painel-cab button{border:0;background:none;font-size:32px;cursor:pointer}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:20;display:none}.overlay.ativo{display:block}
.item{border-bottom:1px solid var(--line);padding:14px 0}.linha{display:flex;justify-content:space-between;gap:10px}.remover{border:0;background:none;color:var(--danger);cursor:pointer}
.cliente{display:grid;gap:9px;margin-top:20px}.resumo{position:sticky;bottom:-22px;background:#fff;padding:18px 0 4px;display:grid;gap:14px}
.regra{margin-top:16px;padding:14px;border:1px solid #ead7a8;background:#fff8ea;border-radius:14px;color:var(--warn)}.regra.ok{border-color:#b9d8c3;background:#f1faf4;color:var(--ok)}
.msg{padding:14px 16px;border-radius:14px;margin-bottom:18px;border:1px solid var(--line);background:#fff}.msg.ok{background:#f1faf4;color:var(--ok)}.msg.erro{background:#fff4f4;color:var(--danger)}.oculto{display:none!important}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.52);z-index:50;display:none;align-items:flex-start;justify-content:center;padding:30px 18px;overflow:auto}.modal.aberto{display:flex}
.modal-box{width:min(820px,100%);background:#fff;border-radius:24px;padding:24px}
.etapa{display:flex;gap:16px;border:1px solid var(--line);padding:18px;border-radius:18px;margin-top:16px}.etapa h3{margin:0 0 5px}.etapa p{margin:0 0 14px;color:var(--muted)}
.numero{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:999px;background:#222;color:#fff;font-weight:700;flex:none}
.processo{display:flex;align-items:center;gap:14px;background:#faf8f4;border:1px solid var(--line);border-radius:16px;padding:16px;margin-top:16px}.processo p{margin:4px 0 0;color:var(--muted)}
.spinner{width:26px;height:26px;border:3px solid #ddd;border-top-color:#222;border-radius:50%;animation:gira 1s linear infinite}@keyframes gira{to{transform:rotate(360deg)}}
.preview,.resultado,.syncbox{border:1px solid var(--line);border-radius:18px;padding:18px;margin-top:16px}.preview h3,.resultado h3{margin-top:0}
.preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.preview-grid div{background:#f7f7f7;border-radius:14px;padding:14px;text-align:center}.preview-grid strong{display:block;font-size:24px}.preview-grid span{font-size:12px;color:var(--muted)}
.campo{display:grid;gap:6px;margin-top:16px}.campo span{font-size:13px;font-weight:700}.amostra{margin-top:16px;max-height:240px;overflow:auto;border:1px solid var(--line);border-radius:14px}
.amostra table{width:100%;border-collapse:collapse;font-size:13px}.amostra th,.amostra td{padding:9px;border-bottom:1px solid var(--line);text-align:left}.amostra th{position:sticky;top:0;background:#fafafa}
.linha-status{display:flex;justify-content:space-between;gap:12px;align-items:center}.barra{height:12px;background:#ececec;border-radius:999px;overflow:hidden;margin:12px 0}
.barra-interna{height:100%;width:0;background:#222;transition:width .25s}.syncbox p{margin:0;color:var(--muted)}
@media(max-width:760px){.topo{flex-direction:column;align-items:flex-start}.status{grid-template-columns:repeat(2,1fr)}.filtros{grid-template-columns:1fr}.card img{height:400px}.preview-grid{grid-template-columns:1fr}}

/* V1.7 - catálogo comercial */
.foto-wrap{position:relative;background:#f7f7f7}
.foto-wrap>img{display:block}
.zoom-btn{
  position:absolute;right:16px;top:16px;width:44px;height:44px;border:0;border-radius:999px;
  background:rgba(255,255,255,.94);box-shadow:0 4px 16px rgba(0,0,0,.18);
  font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center
}
.zoom-btn:hover{transform:scale(1.04)}
.lightbox{
  position:fixed;inset:0;background:rgba(0,0,0,.86);z-index:80;display:none;
  align-items:center;justify-content:center;padding:24px
}
.lightbox.aberto{display:flex}
.lightbox-box{position:relative;width:min(1100px,96vw);display:flex;flex-direction:column;align-items:center}
.lightbox img{
  max-width:100%;max-height:82vh;object-fit:contain;background:#fff;border-radius:18px;padding:12px
}
.lightbox-close{
  position:absolute;right:-4px;top:-12px;width:44px;height:44px;border:0;border-radius:999px;
  background:#fff;font-size:30px;cursor:pointer;z-index:2
}
.lightbox-legenda{color:#fff;margin-top:12px;text-align:center;font-size:16px}
.filtros-comerciais select{min-width:0}
@media(max-width:900px){
  .filtros{grid-template-columns:1fr 1fr}
  .filtros #busca{grid-column:1/-1}
}
@media(max-width:620px){
  .filtros{grid-template-columns:1fr}
  .filtros #busca{grid-column:auto}
}

.correcao-foto{
  border:1px solid var(--line);border-radius:18px;padding:18px;margin-top:16px;background:#fff
}
.correcao-foto h3{margin:0 0 6px}.correcao-foto p{margin:0 0 14px;color:var(--muted);font-size:13px}
.correcao-linha{display:grid;grid-template-columns:1fr auto;gap:10px}
.correcao-status{margin-top:10px;font-size:13px;color:var(--muted)}
@media(max-width:620px){.correcao-linha{grid-template-columns:1fr}}

body::after{
  content:"V1.13";
  position:fixed;
  right:10px;
  bottom:8px;
  font-size:10px;
  color:#999;
  background:rgba(255,255,255,.86);
  padding:3px 6px;
  border-radius:6px;
  z-index:5;
  pointer-events:none;
}

.sem-foto{
  min-height:420px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:24px;
  color:#777;
  background:#f2f2f2;
  font-weight:600;
}
