/* =====================================================================================
   Produzfy PCP — UI DESIGN SYSTEM (carregado depois de style.css)
   Documentação: docs-pcp/DESIGN-SYSTEM.md. Regras: sem emojis, sem rolagem lateral,
   desktop aproveita a largura, celular reorganiza em blocos um abaixo do outro.
   Pontos de quebra: 1280 (notebook) · 1024 (tablet: menu vira gaveta) · 760 (celular) · 380 (celular pequeno)
   ===================================================================================== */
:root{
  /* cores */
  --primary:#123e35;--primary-hover:#1d5a47;--secondary:#24674e;--secondary-soft:#e6f1e9;
  --background:#f4f6f5;--surface:#fff;--surface-2:#f8faf9;--border:#dfe6e2;--border-soft:#edf1ef;
  --text:#16302a;--text-2:#3d524b;--text-muted:#65766f;
  --success:#1f7a55;--success-bg:#e3f4ea;--warning:#94580f;--warning-bg:#fff3de;--danger:#b0333b;--danger-bg:#fde9e8;--info:#255f8a;--info-bg:#e7f0f8;--neutral-bg:#eef1f0;
  /* nomes antigos (mantidos para as telas existentes) */
  --brand:var(--primary);--brand-2:var(--primary-hover);--accent:var(--secondary);--accent-soft:var(--secondary-soft);--mint:var(--secondary-soft);
  --ink:var(--text);--ink-2:var(--text-2);--muted:var(--text-muted);--line:var(--border);--line-2:var(--border-soft);--bg:var(--background);--card:var(--surface);
  --ok:var(--success);--ok-bg:var(--success-bg);--warn:var(--warning);--warn-bg:var(--warning-bg);--bad:var(--danger);--bad-bg:var(--danger-bg);
  /* tipografia */
  --fs-page:22px;--fs-section:15px;--fs-card:14px;--fs-body:14px;--fs-small:12.5px;--fs-caption:11px;--fs-value:22px;--fs-badge:11px;
  /* espaçamento */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;
  --radius:12px;--radius-sm:8px;--shadow:0 1px 2px #0f2a230f,0 3px 12px #0f2a230a;--shadow-lg:0 20px 60px #0b262040;
  --side:236px;--gutter:24px;
}
html,body{max-width:100%;overflow-x:hidden}
body{background:var(--background);color:var(--text);font-size:var(--fs-body)}
.num,.tnum{font-variant-numeric:tabular-nums}
h1,h2,h3,h4{color:var(--text)}
img,svg,video,canvas{max-width:100%}
input,select,textarea{max-width:100%;min-width:0}

/* ---------- casca: menu lateral e topo ---------- */
.sidebar-sair{display:none;margin-top:10px;background:transparent;border:1px solid #3b6a5a;color:#cfe0d6;width:100%}
#sidebar{width:var(--side);padding:20px 12px;background:var(--primary)}
#sidebar .brand{padding:0 8px}
.nav-grupo-titulo{color:#8fb3a3;font-size:var(--fs-caption);font-weight:700;letter-spacing:1.2px;margin:20px 12px 6px;text-transform:uppercase}
nav{gap:2px}
nav button{border-radius:8px;padding:9px 12px;min-height:40px;font-size:14px;color:#d5e5dc;align-items:center;gap:0}
nav button .nav-icon{display:none}
nav button.active{background:#24594a;color:#fff;font-weight:600;box-shadow:inset 3px 0 0 #9fe0bf}
nav button .nav-badge{margin-left:auto;background:#e8a04f;color:#2b1a05;border-radius:99px;font-size:11px;font-weight:800;padding:1px 7px;min-width:22px;text-align:center}
.workspace{margin-left:var(--side);min-width:0}
.topbar{height:64px;padding:0 var(--gutter);gap:12px;position:sticky;top:0;z-index:20;background:#fffffff2;backdrop-filter:blur(6px)}
.busca-global{position:relative;flex:1;max-width:640px;min-width:0}
.busca-global input{padding-left:14px;background:var(--background);border-color:var(--border);min-height:42px;border-radius:10px}
.busca-resultados{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);max-height:70vh;overflow-y:auto;z-index:50;padding:6px}
.busca-resultados button{display:flex;flex-direction:column;align-items:flex-start;width:100%;border:0;border-radius:8px;text-align:left;padding:9px 12px;min-height:0;font-weight:600;background:transparent}
.busca-resultados button:hover,.busca-resultados button.sel{background:var(--secondary-soft)}
.busca-resultados small{font-weight:400}
.busca-resultados .tipo{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--secondary);font-weight:700}
.top-actions{flex-shrink:0}
.top-actions button .rotulo{display:inline!important}
.top-actions button{min-height:40px;padding:8px 14px}
.top-actions .novo{background:var(--primary);color:#fff;border-color:var(--primary)}
.menu-novo{position:absolute;right:var(--gutter);top:60px;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);padding:6px;z-index:60;min-width:260px}
.menu-novo button{display:flex;width:100%;border:0;justify-content:flex-start;gap:10px;font-weight:600;background:transparent}
.menu-novo button:hover{background:var(--secondary-soft)}
main{padding:var(--sp-6) var(--gutter) 40px;max-width:1920px}

/* ---------- cabeçalho de página ---------- */
.page-head{margin-bottom:var(--sp-5);align-items:flex-start;gap:var(--sp-4)}
.page-head>div:first-child{min-width:0}
.page-head h1{font-size:var(--fs-page);letter-spacing:-.4px;margin-bottom:4px;line-height:1.25;overflow-wrap:anywhere}
.page-head p{font-size:13.5px;line-height:1.5}
.page-head .eyebrow{color:var(--secondary);margin-bottom:4px;font-size:var(--fs-caption)}
.page-head .actions{justify-content:flex-end;max-width:62%}
.voltar{background:none;border:0;color:var(--secondary);padding:0;min-height:28px;font-weight:600;margin-bottom:6px}
.consultas{display:flex;flex-wrap:wrap;gap:8px}
.consultas button{background:var(--info-bg);border-color:#cfe0ee;color:var(--info)}

/* ---------- botões ---------- */
button{font-size:13.5px}
button.primary{background:var(--primary);border-color:var(--primary)}
button.primary:hover{background:var(--primary-hover)}
button.quiet{color:var(--secondary)}
button.excluir{background:#fff;color:var(--danger);border:1px solid #e9c4c8;font-weight:700}
button.excluir:hover{background:var(--danger-bg);border-color:var(--danger)}
#submitModal.perigo{background:var(--danger);border-color:var(--danger);color:#fff}

/* ---------- indicadores ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:var(--sp-5)}
.kpis.quatro{grid-template-columns:repeat(4,minmax(0,1fr))}
.kpis.sec{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-top:-8px}
.kpis.sec .kpi{box-shadow:none;background:var(--surface-2);padding:10px 14px}
.kpis.sec .kpi strong{font-size:18px}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow);min-width:0;text-align:left;display:block;font-weight:400;cursor:default}
button.kpi{cursor:pointer;width:100%}button.kpi:hover{border-color:#b9cdc4;background:#fbfdfb}
.kpi small{display:block;color:var(--text-muted);font-size:12px;font-weight:600}
.kpi strong{display:block;font-size:var(--fs-value);letter-spacing:-.5px;margin:4px 0 2px;font-weight:700;color:var(--text);overflow-wrap:anywhere;line-height:1.2}
.kpi span{font-size:12px;color:var(--text-muted)}
.kpi.destaque{background:var(--primary);border-color:var(--primary)}.kpi.destaque small,.kpi.destaque span{color:#b9d6c9}.kpi.destaque strong{color:#fff}
.kpi.critico strong{color:var(--danger)}.kpi.critico{border-color:#f0c2c4}.kpi.atencao strong{color:var(--warning)}

/* ---------- cartões / painéis / grids ---------- */
.panel{border-radius:var(--radius);box-shadow:var(--shadow);border-color:var(--border);margin-bottom:var(--sp-4);min-width:0}
.panel-head{padding:12px 16px;min-height:50px;flex-wrap:wrap}
.panel-head h3{font-size:var(--fs-section);font-weight:700}
.panel-head .actions button{min-height:34px;padding:5px 12px;font-size:13px}
.panel-body{padding:16px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4);align-items:start}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4);align-items:start}
.grid-main{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--sp-4);align-items:start}
.grid-2>*,.grid-3>*,.grid-main>*{min-width:0}
.kv{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px 20px}
.kv dt{font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:.5px}
.kv dd{font-size:14.5px}
.secao-titulo{font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);font-weight:700;margin:var(--sp-5) 0 var(--sp-2)}
/* grade de áreas da tela do lote: desktop aproveita a largura, celular empilha na ordem do HTML */
.lote-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);grid-template-areas:"pos cus" "rem rem" "tl per" "tl fin" "tl rel";gap:0 var(--sp-4);align-items:start}
.lote-grid>*{min-width:0}
.a-pos{grid-area:pos}.a-cus{grid-area:cus}.a-rem{grid-area:rem}.a-per{grid-area:per}.a-tl{grid-area:tl}.a-fin{grid-area:fin}.a-rel{grid-area:rel}
.painel-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:0 var(--sp-4);align-items:start}
.painel-grid>*{min-width:0}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));gap:0 var(--sp-4);align-items:start}
.grid-auto>*{min-width:0}
@media(min-width:1025px){.lote-grid.sem-custos{grid-template-areas:"pos pos" "rem rem" "tl per" "tl fin" "tl rel"}}

/* ---------- mapa da produção: fluxo e quadro (sem rolagem lateral) ---------- */
.fluxo{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;overflow:visible;padding:2px 0 4px}
.etapa{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;text-align:left;display:flex;flex-direction:column;gap:3px;min-height:108px;min-width:0;box-shadow:var(--shadow);position:relative;font-weight:400}
.etapa:hover{border-color:var(--secondary)}
.etapa .nome{font-size:var(--fs-caption);font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text-2)}
.etapa .pecas{font-size:24px;font-weight:800;letter-spacing:-.8px;color:var(--text);overflow-wrap:anywhere;line-height:1.15}
.etapa .pecas small{font-size:12px;font-weight:600;color:var(--text-muted);letter-spacing:0}
.etapa .det{font-size:12px;color:var(--text-muted)}
.etapa .badge{align-self:flex-start;margin-top:auto}
.etapa.vazia{opacity:.55;box-shadow:none}
.etapa.materia{background:#f3f7f2}.etapa.fim{background:var(--success-bg);border-color:#c5e5d2}
.etapa.tem-atraso{border-color:#f0c2c4}
.quadro{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;align-items:start;padding:2px 0 14px}
.coluna{background:#eef2ef;border-radius:var(--radius);display:flex;flex-direction:column;min-width:0;border-top:4px solid var(--cor)}
.coluna-topo{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:0 8px;text-align:left;background:transparent;border:0;border-radius:0;padding:10px 14px 8px;min-height:0;font-weight:600;width:100%}
.coluna-topo span{font-size:12.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--cor)}
.coluna-topo b{font-size:22px;letter-spacing:-.8px;grid-row:span 2;align-self:center}
.coluna-topo small{font-weight:500;color:var(--text-muted);font-size:12px}.coluna-topo em{color:var(--danger);font-style:normal;font-weight:700}
.coluna-topo:hover{background:#e3eae6}
.coluna-corpo{overflow-y:auto;max-height:560px;padding:4px 10px 12px;display:flex;flex-direction:column;gap:8px}
.coluna-vazia{color:var(--text-muted);font-size:12px;text-align:center;margin:10px 0}
.quadro-vazios{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;border:1px dashed var(--border);border-radius:var(--radius);color:var(--text-muted);font-size:13px}
.quadro-vazios .chip{min-height:32px;padding:4px 12px;font-size:12.5px}
.cartao{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;background:#fff;border:1px solid var(--border);border-left:4px solid var(--cor);border-radius:10px;padding:10px 12px;min-height:0;font-weight:400;box-shadow:0 1px 2px #0f2a2312;width:100%;min-width:0}
.cartao:hover{border-color:var(--cor);box-shadow:0 4px 14px #0f2a231a}
.cartao .codigo{font-size:12px}
.cartao-selos{position:absolute;top:8px;right:8px;display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.cartao b{font-size:13.5px;line-height:1.25;overflow-wrap:anywhere}
.cartao-num{font-size:19px;font-weight:800;letter-spacing:-.5px}.cartao-num small{font-size:11px;font-weight:600;color:var(--text-muted)}
.cartao small{color:var(--text-muted);font-size:12px}
.cartao.atrasado{background:#fff8f7}

/* ---------- status (badges) ---------- */
.badge{border-radius:6px;padding:3px 8px;font-size:var(--fs-badge);font-weight:700;letter-spacing:.3px;text-transform:uppercase;white-space:nowrap;display:inline-block;line-height:1.4}
.badge.ok{background:var(--success-bg);color:var(--success)}.badge.warn{background:var(--warning-bg);color:var(--warning)}.badge.bad{background:var(--danger-bg);color:var(--danger)}.badge.info{background:var(--info-bg);color:var(--info)}.badge.neutral{background:var(--neutral-bg);color:var(--text-2)}

/* ---------- tabelas: no desktop são tabelas; quando o espaço fica estreito viram cartões (sem rolagem lateral) ---------- */
.table-wrap{overflow:visible;container-type:inline-size;width:100%}
.tabela{width:100%;border-collapse:collapse;font-size:13px}
.tabela th{background:var(--surface-2);color:var(--text-muted);font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:.5px;padding:9px 12px;text-align:left;white-space:normal;vertical-align:bottom}
.tabela td{padding:10px 12px;border-top:1px solid var(--border-soft);vertical-align:middle;overflow-wrap:break-word}
.tabela td.num,.tabela th.num{text-align:right}
.tabela td.num{white-space:nowrap}
.tabela tr.clicavel{cursor:pointer}.tabela tr.clicavel:hover td{background:#f5faf7}
.tabela td small{display:block;color:var(--text-muted);margin-top:2px;white-space:normal}
.tabela tfoot td{font-weight:700;background:var(--surface-2);border-top:2px solid var(--border)}
.tabela td button{min-height:32px;padding:4px 10px;font-size:12.5px;margin:2px 2px 2px 0}
.tabela.larga th,.tabela.larga td{padding:8px 8px;font-size:12.5px}
.tabela.larga td.num{white-space:normal}
@container (max-width:640px){
  .tabela:not(.poucas) thead{display:none}
  .tabela:not(.poucas),.tabela:not(.poucas) tbody,.tabela:not(.poucas) tfoot{display:block;width:100%}
  .tabela:not(.poucas) tbody,.tabela:not(.poucas) tfoot{display:grid;gap:10px;padding:10px}
  .tabela:not(.poucas) tfoot{padding-top:0}
  .tabela:not(.poucas) tr{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px 16px;border:1px solid var(--border);border-radius:10px;padding:12px 14px;background:#fff}
  .tabela:not(.poucas) tfoot tr{background:var(--surface-2)}
  .tabela:not(.poucas) td,.tabela:not(.poucas) td.num{display:block;border:0;padding:0;text-align:left;white-space:normal;background:none!important;font-size:13.5px}
  .tabela:not(.poucas) td:before{content:attr(data-label);display:block;font-size:var(--fs-caption);color:var(--text-muted);font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-bottom:2px}
  .tabela:not(.poucas) td[data-label=""]:before{display:none}
  .tabela:not(.poucas) td.principal{grid-column:1/-1;font-size:14.5px;border-bottom:1px solid var(--border-soft);padding-bottom:8px}
  .tabela:not(.poucas) td.principal:before{display:none}
  .tabela:not(.poucas) td[data-label=""]{grid-column:1/-1}
  .tabela:not(.poucas) td:empty{display:none}
  .tabela:not(.poucas) tr.clicavel:hover{border-color:var(--secondary)}

  .tabela:not(.poucas) tfoot td:first-child{grid-column:1/-1}.tabela:not(.poucas) tfoot td:first-child:before{display:none}
}
@container (max-width:380px){
  .tabela.poucas thead{display:none}
  .tabela.poucas,.tabela.poucas tbody,.tabela.poucas tfoot{display:block;width:100%}
  .tabela.poucas tbody,.tabela.poucas tfoot{display:grid;gap:10px;padding:10px}
  .tabela.poucas tfoot{padding-top:0}
  .tabela.poucas tr{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px 16px;border:1px solid var(--border);border-radius:10px;padding:12px 14px;background:#fff}
  .tabela.poucas tfoot tr{background:var(--surface-2)}
  .tabela.poucas td,.tabela.poucas td.num{display:block;border:0;padding:0;text-align:left;white-space:normal;background:none!important;font-size:13.5px}
  .tabela.poucas td:before{content:attr(data-label);display:block;font-size:var(--fs-caption);color:var(--text-muted);font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-bottom:2px}
  .tabela.poucas td[data-label=""]:before{display:none}
  .tabela.poucas td.principal{grid-column:1/-1;font-size:14.5px;border-bottom:1px solid var(--border-soft);padding-bottom:8px}
  .tabela.poucas td.principal:before{display:none}
  .tabela.poucas td[data-label=""]{grid-column:1/-1}
  .tabela.poucas td:empty{display:none}
  .tabela.poucas tr.clicavel:hover{border-color:var(--secondary)}

  .tabela.poucas tfoot td:first-child{grid-column:1/-1}.tabela.poucas tfoot td:first-child:before{display:none}
}
@container (max-width:980px){
  .tabela.larga thead{display:none}
  .tabela.larga,.tabela.larga tbody,.tabela.larga tfoot{display:block;width:100%}
  .tabela.larga tbody,.tabela.larga tfoot{display:grid;gap:10px;padding:10px}
  .tabela.larga tr{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px 16px;border:1px solid var(--border);border-radius:10px;padding:12px 14px;background:#fff}
  .tabela.larga td,.tabela.larga td.num{display:block;border:0;padding:0;text-align:left;white-space:normal;background:none!important}
  .tabela.larga td:before{content:attr(data-label);display:block;font-size:var(--fs-caption);color:var(--text-muted);font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-bottom:2px}
  .tabela.larga td[data-label=""]:before,.tabela.larga td.principal:before{display:none}
  .tabela.larga td.principal,.tabela.larga td[data-label=""]{grid-column:1/-1}
  .tabela.larga td.principal{font-size:14.5px;border-bottom:1px solid var(--border-soft);padding-bottom:8px}
  .tabela.larga td:empty{display:none}
  .tabela.larga tfoot td:first-child{grid-column:1/-1}.tabela.larga tfoot td:first-child:before{display:none}
}
@container (max-width:1280px){
  .tabela.muito-larga thead{display:none}
  .tabela.muito-larga,.tabela.muito-larga tbody,.tabela.muito-larga tfoot{display:block;width:100%}
  .tabela.muito-larga tbody,.tabela.muito-larga tfoot{display:grid;gap:10px;padding:10px}
  .tabela.muito-larga tr{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px 16px;border:1px solid var(--border);border-radius:10px;padding:12px 14px;background:#fff}
  .tabela.muito-larga td,.tabela.muito-larga td.num{display:block;border:0;padding:0;text-align:left;white-space:normal;background:none!important}
  .tabela.muito-larga td:before{content:attr(data-label);display:block;font-size:var(--fs-caption);color:var(--text-muted);font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-bottom:2px}
  .tabela.muito-larga td[data-label=""]:before,.tabela.muito-larga td.principal:before{display:none}
  .tabela.muito-larga td.principal,.tabela.muito-larga td[data-label=""]{grid-column:1/-1}
  .tabela.muito-larga td.principal{font-size:14.5px;border-bottom:1px solid var(--border-soft);padding-bottom:8px}
  .tabela.muito-larga td:empty{display:none}
  .tabela.muito-larga tfoot td:first-child{grid-column:1/-1}.tabela.muito-larga tfoot td:first-child:before{display:none}
}
.codigo{font-weight:800;color:var(--secondary);font-variant-numeric:tabular-nums;letter-spacing:.2px}
.paginacao{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;padding:12px 16px;border-top:1px solid var(--border-soft);font-size:12px;color:var(--text-muted);gap:10px}
.filtros{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:var(--sp-4)}
.filtros input[type=search]{max-width:340px;flex:1 1 220px}
.filtros select{width:auto;min-width:160px;flex:0 1 auto}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--border);background:#fff;border-radius:99px;padding:6px 14px;min-height:36px;font-size:13px;font-weight:600;color:var(--text-2)}
.chip.on{background:var(--primary);border-color:var(--primary);color:#fff}
.chip b{margin-left:6px;font-size:11px;opacity:.8}
.tabs{overflow:visible;flex-wrap:wrap}

/* ---------- grade de tamanhos ---------- */
.grade-mini{display:flex;flex-wrap:wrap;gap:4px}
.grade-mini span{background:var(--border-soft);border-radius:6px;padding:2px 7px;font-size:11px;white-space:nowrap}
.grade-mini span b{margin-left:3px}
.matriz-wrap{container-type:inline-size;overflow:visible}
.matriz{border-collapse:collapse;font-size:13px;width:100%}
.matriz th,.matriz td{border:1px solid var(--border);padding:7px 8px;text-align:center}
.matriz th{background:var(--surface-2);font-size:11px;color:var(--text-muted)}
.matriz td:first-child,.matriz th:first-child{text-align:left}
.matriz tr.total td{font-weight:800;background:var(--surface-2)}
.matriz td button{min-height:32px;padding:4px 10px;font-size:12.5px}
@container (max-width:430px){
  .matriz thead{display:none}
  .matriz,.matriz tbody{display:block}
  .matriz tbody{display:grid;gap:10px}
  .matriz tr{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:6px;border:1px solid var(--border);border-radius:10px;padding:10px 12px;background:#fff}
  .matriz tr.total{background:var(--surface-2)}
  .matriz td{border:0;padding:0;text-align:left;background:none!important}
  .matriz td:before{content:attr(data-label);display:block;font-size:10.5px;color:var(--text-muted);font-weight:700;text-transform:uppercase}
  .matriz td:first-child{grid-column:1/-1}.matriz td:first-child:before{display:none}
  .matriz td.acao{grid-column:1/-1}.matriz td.acao:before{display:none}
  .matriz td:empty{display:none}
}
.grade-input{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:8px}
.grade-input label{font-size:11px;gap:4px;text-align:center}
.grade-input label span{color:var(--text-muted);font-weight:500}
.grade-input input{text-align:center;padding:8px 4px;min-height:42px;font-size:15px;font-weight:700}
.grade-input input:invalid{border-color:var(--danger);background:var(--danger-bg)}
.grade-rodape{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:8px}.grade-total{font-size:13px;background:var(--secondary-soft);color:#1b4d3c;border-radius:99px;padding:4px 12px}.grade-dica{color:var(--text-muted);font-size:11px;flex-basis:100%}.grade-acoes{display:flex;gap:6px;flex-wrap:wrap}
.grade-acoes button{min-height:32px;padding:4px 10px;font-size:12px}

/* ---------- linha do tempo ---------- */
.linha-tempo{list-style:none;margin:0;padding:0 0 0 18px;border-left:2px solid #cfe0d6}
.linha-tempo li{position:relative;padding:0 0 16px 16px}
.linha-tempo li:before{content:"";position:absolute;left:-26px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--secondary);border:3px solid #fff;box-shadow:0 0 0 1px #cfe0d6}
.linha-tempo li.perda:before{background:var(--danger)}.linha-tempo li.estorno:before{background:#999}.linha-tempo li.estornado{opacity:.55}
.linha-tempo .quando{font-size:var(--fs-caption);color:var(--text-muted)}
.linha-tempo .oque{font-weight:600;margin:2px 0}
.linha-tempo .detalhe{font-size:12.5px;color:var(--text-2);overflow-wrap:anywhere}
.linha-tempo .acoes-doc{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.linha-tempo .acoes-doc button{min-height:30px;padding:3px 10px;font-size:12px}

/* ---------- barras e custo ---------- */
.barra{height:8px;background:var(--border-soft);border-radius:99px;overflow:hidden}
.barra span{display:block;height:100%;background:var(--secondary);border-radius:99px}
.barra.bad span{background:var(--danger)}
.lista-barras{display:grid;gap:12px}
.lista-barras .linha{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center;font-size:13px}
.lista-barras .linha>span{overflow-wrap:anywhere}
.lista-barras .linha .barra{grid-column:1/-1}
.custo-quadro{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.custo-quadro div{background:var(--background);border-radius:10px;padding:12px;min-width:0}
.custo-quadro small{display:block;color:var(--text-muted);font-size:var(--fs-caption);font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.custo-quadro strong{font-size:19px;display:block;overflow-wrap:anywhere}
.custo-quadro span{font-size:12px;display:block}
.custo-quadro .dif-mais{color:var(--danger)}.custo-quadro .dif-menos{color:var(--success)}

/* ---------- alertas ---------- */
.alertas{display:grid;gap:8px}
.alerta{display:flex;gap:10px;align-items:flex-start;text-align:left;border:1px solid var(--border);border-left:4px solid var(--warning);border-radius:10px;padding:10px 12px;background:#fff;font-weight:400;min-height:0;width:100%}
.alerta.alta{border-left-color:var(--danger)}.alerta.baixa{border-left-color:var(--info)}
.alerta:hover{background:#fbfcfb}
.alerta i{display:none}

/* ---------- formulários e modais ---------- */
.form-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin-bottom:14px}
.form-grid>*{min-width:0}
label{font-size:13px}
.bloco{border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin:12px 0;background:#fcfdfc}
.bloco-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.bloco-head h4{margin:0;font-size:14px}
.bloco-head button{min-height:34px;padding:4px 12px;font-size:12.5px}
.resumo{background:var(--secondary-soft);border-radius:10px;padding:12px 14px;font-size:13px;color:#1b4d3c;display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px}
.resumo b{font-weight:800}
.resumo.aviso{background:var(--warning-bg);color:var(--warning)}
.resumo.erro{background:var(--danger-bg);color:var(--danger)}
.opcoes-destino{display:flex;gap:8px;flex-wrap:wrap}
.opcoes-destino label{flex-direction:row;align-items:center;gap:8px;border:1px solid var(--border);border-radius:10px;padding:10px 14px;cursor:pointer;font-weight:600}
.opcoes-destino label:has(input:checked){border-color:var(--secondary);background:var(--secondary-soft)}
.opcoes-destino input{width:18px;min-height:18px}
.rolos-lista{max-height:260px;overflow-y:auto;border:1px solid var(--border);border-radius:10px}
.rolos-lista label{flex-direction:row;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--border-soft);font-weight:500;cursor:pointer}
.rolos-lista label:last-child{border-bottom:0}
.rolos-lista input{width:18px;min-height:18px}
.sucesso{text-align:center;padding:10px 0}
.sucesso h3{margin:6px 0 4px;font-size:18px}
.sucesso .actions{justify-content:center;margin-top:14px}
.linhas-editor{display:grid;gap:8px}
.linha-editor{display:grid;gap:8px;align-items:end;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) 40px}
.linha-editor>*{min-width:0}
.linha-editor button.x{min-height:44px;padding:0;font-size:18px}
dialog{border-radius:14px;width:min(860px,calc(100vw - 32px))}
dialog.wide{width:min(1180px,calc(100vw - 32px))}
.modal-head{padding:16px 22px}.modal-head h2{font-size:19px}#modalBody{padding:16px 22px}.modal-footer{padding:12px 22px;flex-wrap:wrap}
.modal-footer .primary{min-width:170px}
#modalError{padding:0 22px 12px}
.etapa-form{display:flex;gap:12px;align-items:flex-start;margin:18px 0 10px}
.etapa-form:first-child{margin-top:0}
.etapa-form>span{flex:0 0 28px;height:28px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px}
.etapa-form b{display:block;font-size:15px}.etapa-form small{color:var(--text-muted);font-size:12.5px}
.tecido-bloco{border:1.5px solid var(--border);background:#fff;border-radius:14px}
.tecido-bloco.inativo{background:#f7f9f8;border-style:dashed}
.num-tecido{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--secondary-soft);color:var(--secondary);font-weight:800;font-size:12px;margin-right:8px;flex-shrink:0}
.tecido-volta{flex-direction:row;align-items:center;gap:10px;cursor:pointer;font-weight:500}
.tecido-volta input{width:20px;min-height:20px;flex-shrink:0}
.tecido-volta small{display:block;color:var(--text-muted);font-weight:400;margin-top:2px}
.tecido-corpo{margin-top:12px;padding-left:34px}
.produto-volta{border:1px solid var(--border-soft);background:#fbfcfb;border-radius:12px;padding:12px;margin-bottom:10px}
.fecho{margin-top:12px;padding-top:12px;border-top:1px dashed var(--border)}
.pesos{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.peso{display:inline-flex;align-items:center;gap:4px;background:var(--secondary-soft);border-radius:99px;padding:3px 4px 3px 12px;font-size:13px}
.peso button{min-height:24px;width:24px;padding:0;border-radius:50%;font-size:15px}
button.link{background:none;border:0;padding:0;min-height:28px;color:var(--secondary);font-weight:600;text-decoration:underline;font-size:13px}
.total-tecido{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;background:var(--background);border-radius:10px;padding:8px 12px;margin:10px 0 0}
.total-tecido b{font-size:18px}.total-tecido small{color:var(--text-muted)}
.resumo-envio{margin-top:10px;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.lista-sucesso{display:grid;gap:6px;max-width:460px;margin:10px auto;text-align:left}
.lista-sucesso a{display:block;border:1px solid var(--border);border-radius:10px;padding:10px 14px;text-decoration:none;color:var(--text)}
.lista-sucesso a:hover{border-color:var(--secondary);background:var(--secondary-soft)}
.escolha-romaneio{text-align:left;font-weight:400}
.lista-acoes{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.lista-acoes button{text-align:left;justify-content:flex-start;min-height:48px}

/* ---------- vazio / carregando ---------- */
.carregando{padding:40px;text-align:center;color:var(--text-muted)}
.carregando:before{content:"";display:block;width:26px;height:26px;margin:0 auto 12px;border:3px solid var(--border);border-top-color:var(--secondary);border-radius:50%;animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.vazio{text-align:center;padding:30px 16px;color:var(--text-muted)}.vazio b{display:block;color:var(--text);font-size:15px;margin-bottom:6px}

/* ---------- barra inferior (celular e tablet) ---------- */
.barra-inferior{display:none;flex-direction:row;position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--border);z-index:25;padding:6px 6px calc(6px + env(safe-area-inset-bottom));gap:4px}
.barra-inferior button{border:0;background:none;display:flex;flex:1;justify-content:center;align-items:center;font-size:13px;padding:6px 2px;min-height:46px;color:var(--text-muted);font-weight:700;border-radius:10px;min-width:0}
.barra-inferior button.active{background:var(--success-bg);color:var(--primary)}

/* ---------- prévia de documentos e etiquetas (encolhe para caber na tela) ---------- */
/* exceção documentada: a folha A4 aparece no tamanho real e pode rolar/ampliar dentro da prévia */
.doc-previa{background:#e7ebe8;padding:14px;border-radius:10px;overflow:auto;max-height:70vh;touch-action:pan-x pan-y pinch-zoom}
.doc-previa.etq-previa{overflow-x:hidden}

/* ---------- impressão (A4 / PDF) ---------- */
#printArea{display:none}
.doc{font:10.5pt/1.4 "Segoe UI",Arial,sans-serif;color:#111;background:#fff;width:190mm;margin:0 auto;padding:0}
.doc-topo{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid #111;padding-bottom:8px;margin-bottom:10px;gap:12px}
.doc-topo .empresa{font-size:9pt;color:#444}
.doc-topo h1{font-size:16pt;margin:0;letter-spacing:-.3px}
.doc-topo .numero{text-align:right;font-weight:800;font-size:13pt}
.doc-topo .numero img{display:block;width:62mm;height:12mm;margin-top:3px;object-fit:fill}
.doc h2{font-size:11pt;margin:12px 0 5px;text-transform:uppercase;letter-spacing:.6px;border-bottom:1px solid #999;padding-bottom:2px}
.doc table{width:100%;border-collapse:collapse;margin:4px 0 8px;font-size:9.5pt}
.doc th,.doc td{border:1px solid #888;padding:3px 5px;text-align:left;vertical-align:top}
.doc th{background:#eee;font-size:8.5pt}
.doc th,.doc td{overflow-wrap:anywhere;word-break:normal;hyphens:auto}
.doc table{max-width:100%}
.doc.doc-compacto table{font-size:8pt}.doc.doc-compacto th{font-size:7.5pt}
.doc.doc-mini table{font-size:7pt}.doc.doc-mini th{font-size:6.5pt}.doc.doc-mini th,.doc.doc-mini td{padding:2px 3px}
.doc td.num,.doc th.num{text-align:right}
.doc .campos{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 12px;margin:6px 0}
.doc .campos div{border-bottom:1px dotted #999;padding:2px 0}.doc .campos small{display:block;font-size:7.5pt;color:#555;text-transform:uppercase}
.doc .assinaturas{display:grid;grid-template-columns:1fr 1fr;gap:18mm;margin-top:14mm}
.doc .assinaturas div{border-top:1px solid #111;padding-top:3px;font-size:9pt;text-align:center}
.doc .nota{font-size:8.5pt;color:#444;margin-top:6px}
.doc .rodape{margin-top:8mm;font-size:8pt;color:#666;display:flex;justify-content:space-between;border-top:1px solid #ccc;padding-top:3px}
.doc .total{font-weight:800;background:#f3f3f3}
.doc .receber{display:grid;grid-template-columns:1fr auto;gap:0 12px;align-items:center;border:1.5px solid #111;border-radius:6px;padding:6px 10px;margin:6px 0 10px}.doc .receber span{font-weight:700}.doc .receber b{font-size:13pt;grid-row:span 2}.doc .receber small{font-size:8pt;color:#444}
.doc tr.conferir td{height:9mm;background:#fafafa;font-size:8.5pt;color:#555}
.doc-tela .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:6px 0}.doc-tela .kpi{border:1px solid #999;border-radius:6px;padding:5px 8px;box-shadow:none;background:#fff}.doc-tela .kpi strong{font-size:14pt;color:#111}.doc-tela .kpi small,.doc-tela .kpi span{color:#444;font-size:8pt}
.doc-tela .panel{border:0;box-shadow:none;margin:8px 0}.doc-tela .panel-head{padding:4px 0;border-bottom:1px solid #999;min-height:0}.doc-tela .panel-head h3{font-size:11pt}.doc-tela .panel-body{padding:4px 0}
.doc-tela .tabela th{position:static;background:#eee;color:#111}.doc-tela .tabela td,.doc-tela .tabela th{border:1px solid #bbb;padding:3px 5px;font-size:9pt}
.doc-tela .grid-main,.doc-tela .grid-2,.doc-tela .grid-3{display:block}.doc-tela .badge{border:1px solid #999;background:#fff;color:#111}
.doc-tela .fluxo,.doc-tela .quadro{flex-wrap:wrap;overflow:visible}.doc-tela .etapa,.doc-tela .coluna{box-shadow:none;border:1px solid #999;max-height:none;flex:1 0 40mm}.doc-tela .etapa:after{display:none}.doc-tela .cartao{box-shadow:none;border:1px solid #bbb;border-left:3px solid #555}
.doc-tela .matriz th,.doc-tela .matriz td{border:1px solid #bbb;padding:2px 4px}
.doc-previa .doc{box-shadow:0 2px 10px #0003;padding:12mm 10mm;width:210mm;max-width:none;box-sizing:border-box}
.doc-previa .doc.doc-paisagem{width:297mm}
.etq{box-sizing:border-box;background:#fff;color:#000;font-family:Arial,Helvetica,sans-serif;padding:calc(var(--e)*4mm);display:flex;flex-direction:column;gap:calc(var(--e)*1.6mm);overflow:hidden;margin:0 auto 8px;border:1px dashed #999;page-break-after:always}
.etq-cab{display:flex;justify-content:space-between;align-items:baseline;gap:6px;border-bottom:calc(var(--e)*.6mm) solid #000;padding-bottom:calc(var(--e)*1.2mm)}
.etq-cab span{font-size:calc(var(--e)*9pt);font-weight:700;text-transform:uppercase;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.etq-cab b{font-size:calc(var(--e)*10pt);letter-spacing:.5px;white-space:nowrap}
.etq-destaque{font-size:calc(var(--e)*18pt);font-weight:800;line-height:1.1;overflow-wrap:anywhere}
.etq-linha{font-size:calc(var(--e)*11.5pt);line-height:1.2;overflow-wrap:anywhere}
.etq-grade{width:100%;border-collapse:collapse;margin-top:calc(var(--e)*1mm)}
.etq-grade th,.etq-grade td{border:calc(var(--e)*.4mm) solid #000;text-align:center;padding:calc(var(--e)*1mm) 0}
.etq-grade th{font-size:calc(var(--e)*10pt);background:#e6e6e6}.etq-grade td{font-size:calc(var(--e)*14pt);font-weight:800}
.etq-total{display:flex;align-items:baseline;justify-content:space-between;border:calc(var(--e)*.6mm) solid #000;border-radius:calc(var(--e)*2mm);padding:calc(var(--e)*1mm) calc(var(--e)*3mm)}
.etq-total small{font-size:calc(var(--e)*11pt);font-weight:700}.etq-total b{font-size:calc(var(--e)*26pt);font-weight:900}
.etq-codigo{margin-top:auto;text-align:center}
.etq-codigo img{display:block;width:100%;height:calc(var(--e)*16mm);object-fit:fill}
.etq-codigo b{font-size:calc(var(--e)*16pt);letter-spacing:2px;font-family:'Courier New',monospace}
.etq-rodape{font-size:calc(var(--e)*10pt);text-align:center;border-top:calc(var(--e)*.3mm) solid #000;padding-top:calc(var(--e)*1mm)}
.etq-previa{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.etiqueta{box-sizing:border-box;border:1px dashed #999;padding:3mm;overflow:hidden;font:9pt/1.25 Arial;background:#fff;color:#000;margin:0 auto 6px}
.etiqueta img{display:block;width:100%;height:12mm;object-fit:fill}
.etiqueta b{font-size:12pt}
@media print{
  html,body{background:#fff!important;margin:0!important;padding:0!important;min-height:0!important;height:auto!important}
  body>*:not(#printArea){display:none!important}
  #printArea{display:block!important;position:static;width:100%;background:#fff}
  #printArea .doc{width:auto;max-width:100%;padding:0}
  #printArea table{width:100%}
  #printArea .etiqueta,#printArea .etq{border:0;margin:0;page-break-after:always}
  .doc table{page-break-inside:auto}.doc tr{page-break-inside:avoid}
}

/* =====================================================================================
   RESPONSIVO — reorganiza, não esconde. Nada pode passar da largura da tela.
   ===================================================================================== */
@media(min-width:1600px){:root{--gutter:32px}.kpis{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}}
/* notebook */
@media(max-width:1280px){
  :root{--side:216px;--gutter:20px}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lote-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
}
/* tablet: menu vira gaveta, barra inferior aparece, conteúdo usa a largura toda */
@media(max-width:1024px){
  :root{--gutter:16px}
  #sidebar{transform:translateX(-100%);width:260px;transition:transform .2s;z-index:40}
  .nav-open #sidebar{transform:translateX(0);box-shadow:0 0 0 100vmax #123e3566}
  .nav-open .nav-backdrop{display:block;position:fixed;inset:0;width:100%;height:100%;z-index:39;background:#123e3566;border:0;border-radius:0;padding:0}
  body.nav-open{overflow:hidden}
  .workspace{margin-left:0}
  .sidebar-sair{display:block!important}
  #menuToggle{display:inline-flex!important}
  .barra-inferior{display:none!important}
  main{padding:var(--sp-4) var(--gutter) 28px}
  .grid-main,.painel-grid{grid-template-columns:1fr}
  .lote-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"pos pos" "cus cus" "rem rem" "per fin" "tl tl" "rel rel"}
  .page-head .actions{max-width:none}
  .linha-editor{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))!important}
  .linha-editor>button.x{justify-self:start}
  .kpis.quatro{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* celular */
@media(max-width:760px){
  :root{--fs-page:19px;--fs-value:20px;--gutter:12px}
  .topbar{height:58px;padding:0 10px;gap:6px;flex-wrap:nowrap}
  .top-actions{gap:4px}
  .top-actions button{min-height:38px;padding:6px 10px;font-size:13px}
  #btnImprimirTela,#logout{display:none!important}
  .busca-global input{min-height:40px;font-size:16px}
  .busca-global input::placeholder{font-size:13px}
  main{padding:12px var(--gutter) 24px}
  .page-head{flex-direction:column;gap:10px;margin-bottom:14px}
  .page-head p{font-size:13px}
  .page-head .actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
  .page-head .actions>button,.page-head .actions>a{width:100%;min-height:42px;padding:8px 10px}
  .page-head .actions>.primary{grid-column:1/-1}
  .page-head .actions>.consultas{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .page-head .actions>.consultas button{min-height:40px}
  .consultas button{flex:1 1 140px}
  .kpis,.kpis.sec{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:12px}
  .kpis.sec{margin-top:0}
  .kpi{padding:10px 12px}
  .kpi small,.kpi span{white-space:normal}
  .grid-2,.grid-3,.lote-grid{grid-template-columns:1fr}
  .lote-grid{grid-template-areas:"pos" "rem" "cus" "per" "tl" "fin" "rel"}
  .panel{margin-bottom:12px}
  .panel-head{padding:10px 12px;min-height:44px}.panel-body{padding:12px}
  .quadro{grid-template-columns:1fr}
  .coluna-corpo{max-height:none}
  .fluxo{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .etapa{padding:10px;min-height:92px}
  .etapa .pecas{font-size:21px}
  .filtros input[type=search],.filtros select{max-width:none;width:100%;flex:1 1 100%}
  .form-grid{grid-template-columns:minmax(0,1fr)}
  .form-grid>*,.form-grid label,.form-grid input,.form-grid select,.form-grid textarea{min-width:0;max-width:100%}
  #modalBody,#modalBody .bloco,#modalBody .tecido-bloco,#modalBody .produto-volta{max-width:100%;min-width:0}
  /* linhas de edição (preços, roteiro, aviamentos, perdas): um campo por linha */
  .linha-editor{grid-template-columns:1fr!important;border:1px solid var(--border-soft);border-radius:10px;padding:10px;background:#fff}
  .linha-editor>*{grid-column:1/-1}
  .linha-editor>label.check{margin-top:0!important}
  .linha-editor>button.x{justify-self:end;width:auto;min-width:44px;padding:0 14px}
  /* campo + botão: o botão desce para baixo do campo */
  .inline-entry{flex-wrap:wrap;align-items:stretch}
  .inline-entry>label{flex:1 1 100%;min-width:0}
  .inline-entry>button{flex:1 1 100%}
  /* opções (destino, responsável pela perda): uma por linha */
  .opcoes-destino label{flex:1 1 100%}
  .form-grid>label>input,.form-grid>label>select,.form-grid>label>textarea{width:100%}
  .tecido-corpo{padding-left:0}
  .menu-novo{right:10px;left:10px;top:54px;min-width:0}
  /* janelas em tela cheia no celular */
  dialog,dialog.wide{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0}
  dialog form{max-height:100dvh;height:100%}
  #modalBody{flex:1;padding:14px 14px}
  .modal-head{padding:12px 14px}.modal-head h2{font-size:17px}
  .modal-footer{position:sticky;bottom:0;background:#fff;padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
  .modal-footer button{flex:1;min-width:0}
  .modal-footer .primary{min-width:0}
  #modalError{padding:0 14px 10px}
  .doc-previa{padding:8px;max-height:none}
  .lista-acoes{grid-template-columns:1fr}
}
@media(max-width:380px){
  .kpis,.kpis.sec{grid-template-columns:1fr}
  .fluxo{grid-template-columns:1fr 1fr}
  .top-actions button{padding:6px 8px}
}

/* ---------- painel administrativo ---------- */
.adm-scroll{overflow:visible;container-type:inline-size}
.adm-table td,.adm-table th{overflow-wrap:break-word}
.adm-table td button{margin:2px 4px 2px 0}
@container (max-width:760px){
  .adm-table thead{display:none}
  .adm-table,.adm-table tbody{display:block;width:100%}
  .adm-table tbody{display:grid;gap:10px;padding:10px}
  .adm-table tr{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px 16px;border:1px solid var(--border);border-radius:10px;padding:12px 14px;background:#fff}
  .adm-table td{display:block;border:0;padding:0;text-align:left;min-width:0}
  .adm-table td:before{content:attr(data-label);display:block;font-size:var(--fs-caption);color:var(--text-muted);font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-bottom:2px}
  .adm-table td[data-label=""]:before,.adm-table td:first-child:before{display:none}
  .adm-table td:first-child,.adm-table td[data-label=""]{grid-column:1/-1}
  .adm-table td:first-child{border-bottom:1px solid var(--border-soft);padding-bottom:8px}
  .adm-table td:empty{display:none}
}
@media(max-width:900px){
  .adm-nav{overflow:visible;flex-direction:row;flex-wrap:wrap}
  .adm-nav button{flex:1 1 auto;white-space:nowrap}
}
@media(max-width:760px){.adm-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.adm-filter>*{flex:1 1 100%}}

/* ---------- recibo (contas a pagar): largura de celular ---------- */
.recibo{max-width:400px;margin:0 auto;background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px 18px;box-shadow:var(--shadow);font-size:13.5px}
.recibo hr{border:0;border-top:1px solid var(--border-soft);margin:10px 0}
.rec-topo{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;border-bottom:2px solid var(--text);padding-bottom:8px;margin-bottom:6px}
.rec-topo b{font-size:15px;display:block;text-transform:uppercase;letter-spacing:.4px}.rec-topo small{color:var(--text-muted);font-size:11.5px}
.rec-num{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:4px}.rec-num b{font-size:14px;text-transform:none;letter-spacing:0}
.rec-campo{margin:7px 0}.rec-campo small{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted)}.rec-campo span{overflow-wrap:anywhere}
.rec-valor{background:var(--background);border-radius:10px;padding:10px 12px;margin:12px 0}.rec-valor small{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;color:var(--text-muted)}.rec-valor b{font-size:22px}
.rec-pagtos>small{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px}
.rec-pagtos div,.rec-total div{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid var(--border-soft)}
.rec-pagtos em{display:block;font-style:normal;color:var(--text-muted);font-size:12px}
.rec-total{margin-top:8px}.rec-total .saldo{border-bottom:0;font-size:14.5px}.rec-total .saldo span{font-weight:700}
.rec-declara{font-size:12.5px;color:var(--text-2);margin:12px 0 0}
.rec-assina{margin-top:34px;display:flex;flex-direction:column}.rec-assina span{border-top:1px solid var(--text);margin-bottom:4px}.rec-assina small{color:var(--text-muted)}
.rec-acoes{justify-content:center;margin-bottom:12px}
@media(max-width:760px){.recibo{padding:14px}.rec-acoes button{flex:1 1 140px}}

/* ---------- menu nos 3 tracinhos, à esquerda (celular e tablet) ---------- */
#menuToggle{order:-1;align-items:center;justify-content:center;width:44px;min-width:44px;height:42px;padding:0;border:1px solid var(--border);border-radius:10px;background:#fff;color:var(--text);flex-shrink:0}
.tres-tracos{display:flex;flex-direction:column;gap:4px}
.tres-tracos i{display:block;width:20px;height:2.5px;border-radius:2px;background:currentColor}
/* ---------- a página só rola para cima e para baixo ---------- */
html,body{overflow-x:hidden;overflow-x:clip;overscroll-behavior-x:none}
.workspace{overflow-x:clip}
#modalBody{overflow-x:hidden}
@media(max-width:1024px){
  .workspace{touch-action:pan-y pinch-zoom}
  /* campos de data: no celular o navegador impõe largura mínima própria; aqui ocupam só a coluna */
  input[type=date],input[type=time],input[type=datetime-local],input[type=month]{-webkit-appearance:none;appearance:none;display:block;width:100%;min-width:0;max-width:100%;box-sizing:border-box;min-height:44px;background:#fff;text-align:left}
  input[type=date]::-webkit-date-and-time-value{text-align:left;margin:0}
  input[type=date]::-webkit-calendar-picker-indicator{margin-left:auto}
  .filtros input[type=date]{flex:1 1 140px;width:auto}
  label{min-width:0;max-width:100%}
}

/* gaveta do menu (celular/tablet): compacta e rola inteira, todos os itens à vista */
@media(max-width:1024px){
  #sidebar{overflow-y:auto;overscroll-behavior:contain;padding:14px 10px calc(14px + env(safe-area-inset-bottom))}
  #sidebar nav{overflow:visible;flex:none}
  #sidebar nav button{min-height:40px;padding:8px 12px}
  #sidebar .nav-grupo-titulo{margin:14px 12px 4px}
  #sidebar .sidebar-bottom{margin-top:16px;padding-top:12px}
}

/* celular pequeno: a busca ganha a linha dela no topo (nunca espremida) */
@media(max-width:400px){
  .topbar{flex-wrap:wrap!important;height:auto!important;padding:8px 10px!important;row-gap:8px}
  .top-actions{margin-left:auto}
  .busca-global{order:20;flex:1 1 100%;max-width:none}
}

.rec-credito{background:var(--success-bg);border-radius:10px;padding:10px 12px;margin-top:12px}.rec-credito small{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;color:var(--success);margin-bottom:4px}.rec-credito div{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}

/* estado das peças no armazém (Cortado, Costurado…) */
.estados{display:block;color:var(--secondary);font-size:12px;margin-top:2px}.estados b{color:var(--text)}

/* grade por cor */
.grade-caixa{display:grid;gap:10px}
.grade-cor{border:1px solid var(--border-soft);border-radius:10px;padding:8px 10px;background:#fff}
.grade-cor-nome{font-weight:700;font-size:13px;margin-bottom:6px}
label.grade-cor-nome{flex-direction:row;align-items:center;gap:8px;cursor:pointer}
label.grade-cor-nome small{font-weight:400}
.grade-cor.travada{background:var(--surface-2)}
.grade-cor.travada .grade-input{opacity:.45}
.grade-todas{margin:4px 0 2px;font-weight:700}
.grade-dica-cor{display:block;margin-bottom:8px}
.grade-mini em{font-style:normal;font-weight:700;font-size:11px;margin-right:4px;color:var(--text-2)}
.grade-mini+.grade-mini{margin-top:3px}
/* formulário em 3 colunas fixas (sem buracos); campos alinhados pela base mesmo se um rótulo quebrar linha */
.form-grid.form-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.form-grid.form-3>.col-3,.form-grid.form-3>.full{grid-column:1/-1}
.form-grid>label:not(.check){justify-content:flex-end}
.form-grid>label:not(.check)>input,.form-grid>label>select{height:44px;min-height:44px}
.cores-lista{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.cor-item{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--border);border-radius:99px;padding:2px 4px 2px 12px;background:#fff;font-weight:600;font-size:13px}
.cor-item button{min-height:30px;padding:2px 10px;font-size:12px;color:var(--danger)}
@media (max-width:760px){.form-grid.form-3{grid-template-columns:minmax(0,1fr)}}
.cor-chip{display:inline-block;border:1px solid var(--border);border-radius:99px;padding:1px 8px;font-size:11.5px;font-weight:600;margin:1px 3px 1px 0;background:#fff}

/* ficha técnica pelo lote (página do produto) */
.ficha-lote{width:100%;table-layout:fixed}
.ficha-lote th,.ficha-lote td{white-space:normal;overflow-wrap:anywhere}
.ficha-lote th:first-child{width:34%}
@media (max-width:640px){.ficha-lote th,.ficha-lote td{padding:8px 6px;font-size:12px}.ficha-lote th:first-child{width:46%}}
.ficha-lote td small{display:block;color:var(--text-muted);font-size:var(--fs-caption);margin-top:2px}
.ficha-lote tr.grupo td{background:var(--surface-2);padding-top:8px;padding-bottom:8px}
@media (max-width:640px){.ficha-lote th:nth-child(2),.ficha-lote td:nth-child(2):not([colspan]),.ficha-lote th:nth-child(4),.ficha-lote td:nth-child(4){display:none}}
/* editor de variações dos acessórios */
.var-linha{align-items:end}
.var-linha>button.x{color:var(--danger);font-size:13px;font-weight:600;min-height:44px;padding:0 12px}

/* estoque de acessórios por variação */
.est-linha{align-items:end;border:1px solid var(--border-soft);border-radius:10px;padding:8px 12px;margin-bottom:8px;background:#fff}
.est-linha .est-nome{align-self:center}
.est-atual{display:block;font-size:13px;padding-bottom:12px}
.est-atual small{display:block;margin-bottom:2px}
.est-atual small{color:var(--text-muted)}
.est-atual b.neg{color:var(--danger)}

/* campos só de leitura (estoque na edição do acessório) */
input.so-leitura{background:var(--neutral-bg);color:var(--ink-2);cursor:default}

/* de-para cor do tecido -> cor do produto */
.mapa-cores{display:grid;gap:8px;margin-top:12px}
.mapa-linha{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.4fr);gap:10px;align-items:center}
.mapa-linha .cor-chip{justify-self:start;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mapa-titulo small{color:var(--muted)}
.mapa-seta{color:var(--muted)}

/* gerador de variações combinando atributos (acessórios) */
.comb-box{border:1px dashed var(--border);border-radius:var(--radius-sm);padding:10px 14px;margin-bottom:12px}
.comb-box summary{cursor:pointer;font-weight:600}
.comb-box[open] summary{margin-bottom:8px}
.comb-linha{display:grid;grid-template-columns:minmax(110px,180px) minmax(0,1fr);gap:10px;align-items:center;margin-bottom:8px}
@media (max-width:560px){.comb-linha{grid-template-columns:1fr}}