:root{
  --ink:#1c1b19; --ink-soft:#5f5c56; --ink-faint:#767268;
  --paper:#f4f2ed; --card:#ffffff; --surface:#ffffff; --hover:#faf9f6;
  --line:#e7e3da; --line-soft:#f0ede6;
  --accent:#2f6b57; --accent-strong:#20513f; --accent-soft:#e9f2ee;
  /* fundo dos botões que levam texto BRANCO (≥4.5:1 nos dois temas/marcas) */
  --accent-btn:#2f6b57;
  --gold:#b98a4b; --danger:#bf4a34; --danger-soft:#fbe6df; --danger-forte:#bf4a34;
  --warn:#a9791f; --warn-soft:#fbeecd; --info:#3c6791; --info-soft:#e6eef7;
  --plum:#6b4b9a; --plum-soft:#efe9f8;
  /* bordas suaves por tema (risco/loja/hovers destrutivos) */
  --danger-borda:#e6c9c0; --info-borda:#c9d9ea; --warn-borda:#e5cf95;
  --toast-bg:#1c1b19; --scrim:rgba(244,242,237,.96);
  --sh-sm:0 1px 2px rgba(28,27,25,.06);
  --sh:0 1px 3px rgba(28,27,25,.06),0 8px 24px rgba(28,27,25,.05);
  --sh-lg:0 12px 40px rgba(28,27,25,.10);
  --r:14px; --r-sm:9px;
}
/* ============ TEMA ESCURO ============ */
body.dark{
  --ink:#eceae4; --ink-soft:#a7a299; --ink-faint:#7c766c;
  --paper:#141310; --card:#211f1b; --surface:#2a2823; --hover:#302d27;
  --line:#3a372f; --line-soft:#2c2a24;
  --accent:#3f9578; --accent-strong:#77c4a6; --accent-soft:#213029;
  --accent-btn:#2b6e55;
  --gold:#c99a58; --danger:#e07a63; --danger-soft:#3a221c; --danger-forte:#a04530;
  --warn:#d7a94e; --warn-soft:#352a17; --info:#6fa3d6; --info-soft:#1e2a37;
  --plum:#ab90da; --plum-soft:#2a2438;
  --danger-borda:#5a3a30; --info-borda:#324a63; --warn-borda:#4a3a1a;
  --toast-bg:#332f28; --scrim:rgba(15,14,11,.96);
  --sh-sm:0 1px 2px rgba(0,0,0,.35);
  --sh:0 1px 3px rgba(0,0,0,.4),0 10px 26px rgba(0,0,0,.35);
  --sh-lg:0 14px 44px rgba(0,0,0,.5);
}
/* ---- Marca New Look = AZUL (Naguirre = verde) ----
   troca o accent inteiro por azul; assim tudo que é verde no resto do app
   fica automaticamente azul quando a marca é New Look. */
body.nl{ --accent:#3c6791; --accent-strong:#2b4d70; --accent-soft:#e3ecf6; --accent-btn:#345e85; }
body.dark.nl{ --accent:#5f9bd4; --accent-strong:#93c0e8; --accent-soft:#1d2938; --accent-btn:#2f5f8a; }
*{box-sizing:border-box}
/* o atributo hidden SEMPRE esconde (senão um display:flex do autor o vence) */
[hidden]{display:none !important}
html,body{margin:0;height:100%}
body{
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif; color:var(--ink);
  background:var(--paper); font-size:14px; line-height:1.45;
  display:flex; flex-direction:column; min-height:100vh;
  -webkit-font-smoothing:antialiased; color-scheme:light;
}
body.dark{color-scheme:dark}
/* campos herdam a cor do tema (senão o texto fica preto no escuro) */
input,select,textarea{color:var(--ink); font-family:inherit}
input::placeholder{color:var(--ink-faint); opacity:1}
select option{background:var(--surface); color:var(--ink)}

/* ============ TOPO ============ */
.topo{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 26px; background:linear-gradient(120deg,#1b1a18 0%,#2a2825 100%);
  color:#fff; border-bottom:3px solid var(--accent);
}
.marca{display:flex; align-items:center; gap:15px}
.logo{
  width:46px; height:46px; border-radius:11px; background:var(--surface); object-fit:contain;
  padding:5px; box-shadow:0 4px 14px rgba(0,0,0,.28); display:block;
}
.topo h1{margin:0; font-size:19px; font-weight:600; letter-spacing:.3px}
.topo .sub{margin:2px 0 0; font-size:11.5px; color:#b9b4a8; letter-spacing:1.2px; text-transform:uppercase}
.topo-dir{display:flex; align-items:center; gap:14px; font-size:12.5px}
.resp b{font-weight:600}
.badge{padding:5px 12px; border-radius:20px; font-size:10.5px; font-weight:700; letter-spacing:.5px}
.badge-teste{background:var(--gold); color:#2b1e08}
/* switch de marca (Naguirre / New Look) */
.marca-switch{display:flex; gap:3px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  border-radius:11px; padding:3px; margin:0 auto 0 28px}
.marca-btn{border:none; background:none; color:#c9c4b8; padding:7px 16px; border-radius:8px; font-size:12.5px;
  font-weight:700; cursor:pointer; letter-spacing:.3px; transition:all .15s}
.marca-btn:hover{color:#fff}
.marca-btn.ativo{background:var(--accent-btn); color:#fff; box-shadow:0 2px 8px rgba(47,107,87,.35)}
body.nl .marca-btn.ativo{background:var(--info); box-shadow:0 2px 8px rgba(60,103,145,.4)}
.marca-chip{font-size:12px; font-weight:700; color:var(--accent-strong); background:var(--accent-soft);
  padding:3px 11px; border-radius:20px; vertical-align:middle; margin-left:6px; letter-spacing:.3px}
body.nl .marca-chip{color:var(--info); background:var(--info-soft)}

.btn-topo{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); color:#e8e5dd;
  border-radius:9px; padding:8px 14px; font-size:12px; font-weight:600; cursor:pointer; transition:all .15s}
.btn-topo:hover{background:rgba(255,255,255,.17); color:#fff}
.btn-topo:disabled{opacity:.5; cursor:default}

/* ============ NAV ============ */
.abas-nav{display:flex; gap:2px; padding:0 20px; background:var(--card); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20; box-shadow:var(--sh-sm)}
.aba-btn{
  border:none; background:none; padding:15px 18px 13px; font-size:13.5px; cursor:pointer;
  color:var(--ink-soft); border-bottom:2.5px solid transparent; font-weight:600; letter-spacing:.2px;
  transition:color .15s, border-color .15s;
}
.aba-btn:hover{color:var(--ink)}
.aba-btn.ativo{color:var(--accent-strong); border-bottom-color:var(--accent)}
.mini-badge{background:var(--danger); color:#fff; border-radius:20px; padding:1px 7px; font-size:11px; font-weight:700; margin-left:5px}

main{flex:1; padding:24px 26px 48px; overflow:auto; max-width:1500px; width:100%; margin:0 auto}
.view{display:none; animation:fade .22s ease}
.view.ativo{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1}}

.card{background:var(--card); border-radius:var(--r); box-shadow:var(--sh); padding:20px 22px; border:1px solid var(--line-soft)}

/* Cabeçalho de seção */
.secao-cab{margin-bottom:14px}
.secao-cab h2{margin:0; font-size:18px; font-weight:600; letter-spacing:.2px}
.secao-cab p{margin:3px 0 0; font-size:13px; color:var(--ink-soft)}

/* ============ NOVA CHEGADA ============ */
.passos{display:flex; gap:8px; align-items:center; margin-bottom:14px; flex-wrap:wrap; color:var(--ink-faint); font-size:12px}
.passos b{color:var(--accent-strong)}
.passos .seta{opacity:.5}

.corte-cab{display:flex; gap:20px; align-items:flex-end; margin-bottom:16px; flex-wrap:wrap}
.campo{display:flex; flex-direction:column; gap:6px}
.campo label{font-size:11.5px; font-weight:600; color:var(--ink-soft); letter-spacing:.2px}
.campo input,.campo select{
  padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-sm); font-size:14px; background:var(--surface);
  transition:border-color .15s, box-shadow .15s;
}
.campo input:focus,.campo select:focus,.cores input:focus,.cores select:focus,.add-linha input:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
#corte-nome{min-width:300px}
#corte-prop{width:120px}
#corte-prop.invalido{border-color:var(--danger); box-shadow:0 0 0 3px var(--danger-soft)}
.campo-aviso{font-size:10.5px; color:var(--danger); font-weight:600; margin-top:2px}
.dica{font-weight:400; color:var(--ink-faint); font-size:10.5px}

/* campo de camadas (soma ao vivo) */
.c-folhas{position:relative}
.c-folhas .in-folhas{width:100%}
.camadas-soma{display:block; font-size:10px; color:var(--accent-strong); font-weight:700; margin-top:2px; height:12px}

/* Botões */
.btn{padding:10px 18px; border-radius:var(--r-sm); border:1px solid transparent; font-size:13.5px; font-weight:600; cursor:pointer; transition:all .15s}
.btn-primario{background:var(--accent-btn); color:#fff; box-shadow:0 2px 8px rgba(0,0,0,.18)}
.btn-primario:hover{background:var(--accent-btn); filter:brightness(1.08); transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,0,0,.22)}
.btn-primario:disabled{background:var(--line); color:var(--ink-faint); box-shadow:none; cursor:not-allowed; transform:none; filter:none}
.btn-sec{background:var(--surface); border-color:var(--line); color:var(--ink)}
.btn-sec:hover{border-color:var(--accent); color:var(--accent-strong); background:var(--accent-soft)}
.btn-mix{display:inline-flex; align-items:center; margin:2px 0 10px; border-style:dashed}

/* Blocos de modelo */
.modelo-bloco{margin-bottom:14px; padding:18px 20px; position:relative}
.modelo-bloco::before{content:""; position:absolute; left:0; top:16px; bottom:16px; width:3px;
  background:var(--accent); border-radius:3px; opacity:.5}
.modelo-cab{display:flex; align-items:flex-end; gap:16px; margin-bottom:12px; flex-wrap:wrap}
.modelo-cab .in-modelo{min-width:240px}
.campo-anca .in-anca2{width:120px}
.modelo-status{padding-bottom:10px}
.btn-remove-modelo{margin-left:auto; margin-bottom:2px; border:1px solid var(--line);
  background:var(--surface); color:var(--danger); border-radius:var(--r-sm); padding:8px 13px; cursor:pointer; font-size:12.5px; font-weight:600}
.btn-remove-modelo:hover{background:var(--danger-soft); border-color:var(--danger-borda)}

/* Tabela de cores */
table.cores{width:1120px; max-width:100%; border-collapse:collapse; font-size:13.5px; margin-top:6px; table-layout:fixed}
.cores thead th{background:var(--accent-soft); color:var(--accent-strong); text-align:left;
  padding:10px 11px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px}
.cores thead th:first-child{border-top-left-radius:8px} .cores thead th:last-child{border-top-right-radius:8px}
.cores tbody td{padding:8px 11px; border-top:1px solid var(--line-soft); vertical-align:middle}
.cores tbody tr:hover{background:var(--hover)}
.cores input,.cores select{width:100%; padding:8px 9px; border:1px solid var(--line); border-radius:8px; font-size:13px; background:var(--surface)}
.c-cor{width:388px} .c-folhas{width:120px} .c-tipo{width:158px} .c-calc{width:184px} .c-x{width:36px}
.c-folhas input{text-align:center}
/* New Look: tamanho único, sem Tipo/Plus — tabela mais estreita */
body.nl table.cores{width:auto; min-width:660px; table-layout:auto}
/* Ordens de corte: tabela cor / rolos (tecido é do corte todo) */
table.cores-ord{width:auto; min-width:420px; table-layout:auto}
.cores-ord .c-cor{width:320px} .cores-ord .c-rolos{width:110px}
.cores-ord .c-rolos input{text-align:center}
#ord-metros{width:130px} #ord-tecido{width:180px}
.ord-tecido-line{font-size:12px;color:var(--ink-soft);font-weight:600;margin-top:3px}
.ord-tecido-chip{display:inline-block;background:var(--accent-soft);color:var(--accent-strong);border-radius:20px;
  padding:2px 12px;font-size:12.5px;font-weight:800;letter-spacing:.02em}
.ord-lista-tit{font-size:15px;font-weight:800;margin:26px 0 12px;color:var(--ink)}
.ord-card .corte-body{padding:12px 14px 14px}
.ord-mod{margin-bottom:10px}
.ord-mod:last-child{margin-bottom:0}
.ord-mod-nome{font-size:13px;font-weight:800;color:var(--accent-strong);margin-bottom:5px}
.ord-cor-linha{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 0;border-top:1px solid var(--line-soft);font-size:13.5px}
.ord-c-cor{font-weight:700;min-width:110px}
.ord-c-tec{color:var(--accent-strong);background:var(--accent-soft);border-radius:20px;padding:2px 11px;font-size:12px;font-weight:600}
.ord-c-rolos{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--ink-soft);font-weight:700}
.btn-add-cor{margin-top:12px; padding:8px 15px; font-size:12.5px}

/* célula de cálculo (Padrão / Plus) */
.calc-box{display:grid; grid-template-columns:auto auto; gap:1px 14px; line-height:1.4}
.calc-linha{display:contents}
.calc-rot{color:var(--ink-faint); font-size:11px}
.calc-val{font-weight:700; text-align:right; font-variant-numeric:tabular-nums}
.calc-lanc{color:var(--accent-strong)}
.calc-risco{color:var(--danger)}
.calc-loja{color:var(--info)}
.calc-vazio{color:var(--ink-faint)}

.btn-x{border:none;background:none;color:var(--danger);cursor:pointer;font-size:16px;line-height:1;opacity:.7}
.btn-x:hover{opacity:1}

/* Tags */
.tag{display:inline-block; padding:3px 9px; border-radius:20px; font-size:10px; font-weight:700; white-space:nowrap; letter-spacing:.4px; text-transform:uppercase}
.tag-sug{background:var(--warn-soft); color:var(--warn)}
.tag-ok{background:var(--accent-soft); color:var(--accent-strong)}
.tag-erro{background:var(--danger-soft); color:var(--danger)}
.tag-lanc{background:var(--info-soft); color:var(--info)}
.tag-repo{background:var(--plum-soft); color:var(--plum)}

/* Rodapé de ações */
.acoes-rodape{display:flex; justify-content:space-between; align-items:center; margin-top:18px; gap:16px; flex-wrap:wrap}
.resumo{font-size:13px; color:var(--ink-soft)}
.resumo b{color:var(--ink)}
.botoes{display:flex; gap:10px}

/* Preview */
.preview{margin-top:16px}
.preview-cab{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:10px}
.preview h3{margin:4px 0; font-size:15px; color:var(--accent-strong)}
.preview-bloco{margin-bottom:18px}
.preview-bloco h4{margin:0 0 8px; font-size:12px; color:var(--info); text-transform:uppercase; letter-spacing:.5px; font-weight:700}
.preview table{width:100%; border-collapse:collapse; font-size:12.5px}
.preview th,.preview td{padding:7px 10px; border:1px solid var(--line); text-align:left}
.preview th{background:var(--hover); font-size:11px; text-transform:uppercase; letter-spacing:.3px}

/* ============ FUTUROS / MAPA / PRODUTOS ============ */
.mapa-topo,.fut-topo{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap}
.mapa-topo h2,.fut-topo h2{margin:0; font-size:18px; font-weight:600}
#mapa-busca,#prod-busca{padding:9px 13px; border:1px solid var(--line); border-radius:var(--r-sm); min-width:240px; background:var(--surface)}
.ajuda{font-size:12.5px; color:var(--ink-soft); margin:8px 0 14px; line-height:1.6}

.fut-filtros{display:flex; gap:6px}
.filtro-btn{border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); border-radius:20px;
  padding:7px 15px; font-size:12.5px; font-weight:600; cursor:pointer; transition:all .15s}
.filtro-btn:hover{background:var(--accent-soft); color:var(--accent-strong)}
.filtro-btn.ativo{background:var(--accent-btn); border-color:var(--accent-btn); color:#fff}
.filtro-btn span{opacity:.85; font-weight:700; margin-left:4px}
.fut-barra{display:flex; align-items:flex-end; gap:16px; margin:14px 0 6px; flex-wrap:wrap}
.campo-inline label{font-size:11.5px; font-weight:600; color:var(--ink-soft); display:block; margin-bottom:5px}
#fut-responsavel{padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-sm); font-size:14px; width:200px; background:var(--surface)}
#fut-busca{padding:10px 13px; border:1px solid var(--line); border-radius:var(--r-sm); min-width:240px; flex:1; max-width:340px; margin-left:auto; background:var(--surface)}

/* filtro de período (calendário) */
.fut-periodo{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:2px 0 6px; font-size:12.5px; color:var(--ink-soft)}
.periodo-rot{font-weight:600}
.fut-periodo label{display:inline-flex; align-items:center; gap:6px}
.fut-periodo input[type=date]{padding:7px 10px; border:1px solid var(--line); border-radius:8px; background:var(--surface); font-size:13px}
.fut-periodo input[type=date]:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.btn-mini-limpar{border:1px solid var(--line); background:var(--surface); color:var(--danger); border-radius:8px;
  padding:6px 12px; font-size:12px; font-weight:600; cursor:pointer}
.btn-mini-limpar:hover{background:var(--danger-soft); border-color:var(--danger-borda)}

/* Tabelas simples */
table.grade{width:100%; border-collapse:collapse; font-size:13.5px}
.grade thead th{background:var(--accent-soft); color:var(--accent-strong); text-align:left;
  padding:11px 12px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px}
.grade tbody td{padding:9px 12px; border-top:1px solid var(--line-soft); vertical-align:middle}
.grade tbody tr:hover{background:var(--hover)}

.th-sub{font-weight:400; font-size:10px; opacity:.85; text-transform:none; letter-spacing:0}
.anca-mini{font-size:11px; color:var(--ink-faint)}

/* alerta de pendências antigas */
.fut-alerta{display:flex; align-items:center; gap:12px; margin:10px 0 4px; padding:12px 16px;
  background:var(--danger-soft); border:1px solid var(--danger); border-radius:10px; font-size:13px; color:var(--ink)}
.fut-alerta .alerta-ico{font-size:18px}
.fut-alerta b{color:var(--danger)}
.alerta-btn{margin-left:auto; border:1px solid var(--danger); background:transparent; color:var(--danger);
  border-radius:8px; padding:6px 14px; font-size:12.5px; font-weight:700; cursor:pointer; white-space:nowrap}
.alerta-btn:hover{background:var(--danger); color:#fff}
.var-atraso{background:var(--danger); color:#fff; border-radius:20px; padding:3px 10px; font-size:10.5px; font-weight:700; white-space:nowrap}
.var-bloco.atrasada{border-left-color:var(--danger)}

/* ---- Futuros: cards por corte ---- */
#fut-lista{margin-top:6px}
.mes-cab{display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none;
  margin:18px 0 8px; padding:9px 12px; border-radius:10px; background:var(--accent-soft);
  border:1px solid transparent; transition:background .12s}
.mes-cab:hover{border-color:var(--accent)}
.mes-cab:first-child{margin-top:4px}
.mes-chevron{color:var(--accent); font-size:13px; width:14px; flex:none}
.mes-nome{font-size:13.5px; font-weight:800; text-transform:uppercase; letter-spacing:.6px; color:var(--accent-strong)}
.mes-info{margin-left:auto; font-size:12px; font-weight:600; color:var(--ink-soft); font-variant-numeric:tabular-nums}
.mes-info b{color:var(--accent-strong)}

.corte-card{border:1px solid var(--line); border-radius:var(--r); margin-bottom:12px; background:var(--surface);
  box-shadow:var(--sh-sm); overflow:hidden}
.corte-card.tudo-ok{opacity:.82}
.corte-head{display:flex; align-items:center; gap:12px; padding:13px 16px; cursor:pointer; user-select:none;
  transition:background .12s}
.corte-head:hover{background:var(--accent-soft)}
.corte-chevron{color:var(--accent); font-size:13px; width:14px; flex:none}
.corte-ident{display:flex; flex-direction:column; gap:3px; min-width:0}
.corte-modelos{font-weight:800; font-size:15.5px; color:var(--ink); line-height:1.2}
.anca-forte{color:var(--accent-strong); font-weight:800}
body.nl .anca-forte{color:var(--info)}
.mix-mais{color:var(--ink-faint); font-weight:700; margin:0 8px}
.corte-sub{display:flex; flex-direction:column; gap:1px; margin-top:1px}
.corte-quando{font-size:12.5px; color:var(--ink-soft)}
.corte-quando b{color:var(--ink); font-weight:700}
.corte-nome-sec{font-size:11px; color:var(--ink-faint)}
.corte-tot{margin-left:auto; display:flex; align-items:center; gap:12px; flex:none}
.corte-pecas{font-size:12px; color:var(--ink-soft); font-variant-numeric:tabular-nums}
.corte-pecas b{color:var(--accent-strong)}
.corte-body{border-top:1px solid var(--line-soft); padding:6px 10px 10px}
.modelo-grupo-cab{font-size:13px; font-weight:800; color:var(--accent-strong); margin:12px 3px 2px;
  padding-bottom:4px; border-bottom:1px dashed var(--line)}
.corte-acoes{display:flex; gap:8px; flex-wrap:wrap; padding:8px 3px 2px}
.btn-corte{border:1px solid var(--accent); background:var(--accent-soft); color:var(--accent-strong);
  border-radius:8px; padding:7px 14px; font-size:12.5px; font-weight:700; cursor:pointer; transition:all .12s}
.btn-corte:hover{background:var(--accent-btn); color:#fff}
.btn-corte.desfazer-todo{border-color:var(--warn); background:var(--warn-soft); color:var(--warn)}
.btn-corte.desfazer-todo:hover{background:var(--warn); color:#fff}

/* variante (cor) dentro do corte */
.var-bloco{border:1px solid var(--line-soft); border-left:4px solid var(--plum); border-radius:10px;
  padding:11px 13px; margin-top:8px; background:var(--surface)}
.var-bloco.is-lanc{border-left-color:var(--info); background:var(--info-soft)}
.var-bloco.is-repo{border-left-color:var(--plum)}
.var-bloco.is-nl{border-left-color:var(--accent)}
.var-bloco.is-done{opacity:.66}
.var-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px}
.var-cor{font-weight:700; font-size:14px; color:var(--ink); background:none; border:none; cursor:pointer;
  padding:2px 4px; border-radius:6px}
.var-cor:hover{background:var(--accent-soft); color:var(--accent-strong)}
.var-tipo{padding:4px 8px; border:1px solid var(--line); border-radius:7px; font-size:12px; background:var(--surface)}
.var-skus{display:flex; gap:6px}
.sku-tag{border:1px dashed var(--info); background:var(--surface); color:var(--info); border-radius:20px;
  padding:4px 11px; font-size:11px; font-weight:700; cursor:pointer; transition:all .12s; white-space:nowrap}
.sku-tag:hover{background:var(--info-soft)}
.sku-tag.on{background:var(--accent-btn); border:1px solid var(--accent-btn); color:#fff}
.var-acoes{margin-left:auto; display:flex; align-items:center; gap:8px}
.var-quando{font-size:12.5px; color:var(--accent-strong); font-weight:600;
  background:var(--accent-soft); padding:3px 10px; border-radius:20px}
.var-quando b{color:var(--accent-strong); font-weight:800}
.btn-lancar-var{background:var(--accent-btn); color:#fff; border:none; border-radius:8px; padding:7px 14px;
  font-size:12.5px; font-weight:700; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.18); transition:all .12s}
.btn-lancar-var:hover{background:var(--accent-btn); filter:brightness(1.08); transform:translateY(-1px)}

/* linhas de tamanho (Padrão / Plus) com risco/loja editáveis */
.var-nums{display:flex; flex-direction:column; gap:6px}
.tl{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.tl-tam{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--ink-soft); width:56px; flex:none}
.tl-cell{display:flex; align-items:center; gap:5px; font-variant-numeric:tabular-nums}
.tl-rot{font-size:10.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.3px}
.tl-cell b{font-size:15px; font-weight:800}
.tl-lanc{color:var(--accent-strong)}
.tl-in{width:52px; padding:5px 7px; border:1px solid var(--line); border-radius:7px; font-size:13px;
  text-align:center; -moz-appearance:textfield; font-variant-numeric:tabular-nums}
.tl-in::-webkit-outer-spin-button,.tl-in::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.tl-in:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.tl-cell:nth-child(4) .tl-in{border-color:var(--danger-borda)} /* risco */
.tl-cell:nth-child(5) .tl-in{border-color:var(--info-borda)} /* loja */

/* Ações em tabelas */
.c-acoes{width:70px}
.acoes-cel{white-space:nowrap; text-align:right}
.mini-btn{border:1px solid var(--line); background:var(--surface); border-radius:7px; width:28px; height:28px;
  cursor:pointer; font-size:13px; line-height:1; margin-left:4px; color:var(--ink-soft); transition:all .12s}
.mini-btn:hover{background:var(--accent-soft); color:var(--accent-strong); border-color:var(--accent)}
.mini-btn.del:hover{background:var(--danger-soft); color:var(--danger); border-color:var(--danger-borda)}
.mini-btn.ok{color:#fff; background:var(--accent-btn); border-color:var(--accent-btn)}
.mini-btn.ok:hover{background:var(--accent-btn); filter:brightness(1.08)}
.mini-btn.undo:hover{background:var(--warn-soft); color:var(--warn); border-color:var(--warn-borda)}

/* Formulário adicionar */
.add-linha{display:flex; gap:10px; margin:8px 0 4px; flex-wrap:wrap; align-items:center;
  background:var(--accent-soft); border:1px solid var(--line); border-radius:var(--r-sm); padding:12px}
.add-linha input{padding:9px 12px; border:1px solid var(--line); border-radius:8px; font-size:13.5px; background:var(--surface)}
.add-linha #nova-anca-num{width:150px} .add-linha #nova-anca-texto{flex:1; min-width:220px}
.add-linha #nova-anca-aba{width:200px} .add-linha #novo-produto{flex:1; min-width:260px}
.grade-mapa .m-texto,.grade-mapa .m-aba{width:100%; padding:7px 9px; border:1px solid var(--line); border-radius:8px; font-size:13px; background:var(--surface)}
.grade-mapa td:nth-child(2){width:34%} .grade-mapa td:nth-child(3){width:22%}
.grade-prod td:nth-child(1){width:40%}

/* ============ CATÁLOGO ============ */
.cat-form{display:flex; gap:18px; align-items:flex-end; flex-wrap:wrap}
.cat-form-btns{display:flex; gap:8px; align-items:flex-end}
.cat-barra{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin:16px 0 12px}
#cat-busca{padding:10px 13px; border:1px solid var(--line); border-radius:var(--r-sm); min-width:240px; flex:1; max-width:320px; background:var(--surface); color:var(--ink)}
.grade-cat td:nth-child(1){width:38%}
.cat-comp{font-size:13px; color:var(--ink-soft)}
.cat-preco{font-weight:800; color:var(--accent-strong); font-variant-numeric:tabular-nums}

/* sugestões aprendidas (remover cor/tecido/costureira errada) */
.sug-gestao{display:flex; flex-direction:column; gap:16px}
.sug-grupo h3{margin:0 0 8px; font-size:12px; font-weight:800; color:var(--ink-soft);
  text-transform:uppercase; letter-spacing:.5px}
.sug-chips{display:flex; flex-wrap:wrap; gap:8px}
.sug-chip{display:inline-flex; align-items:center; gap:4px; background:var(--accent-soft);
  color:var(--accent-strong); border-radius:20px; padding:5px 6px 5px 13px; font-size:12.5px; font-weight:700}
.sug-x{border:none; background:none; color:var(--danger); cursor:pointer; font-size:12px;
  padding:4px 7px; border-radius:50%; line-height:1}
.sug-x:hover{background:var(--danger-soft)}

/* ============ PAGAMENTO (Manu) ============ */
.pag-sub-btn{border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); border-radius:11px;
  padding:11px 20px; font-size:14.5px; font-weight:800; cursor:pointer; transition:all .15s; margin-right:6px}
.pag-sub-btn:hover{background:var(--accent-soft); color:var(--accent-strong)}
.pag-sub-btn.ativo{background:var(--accent-btn); border-color:var(--accent-btn); color:#fff}
.pl-acao{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin:6px 0 8px}
.pl-preview{font-size:14px; color:var(--accent-strong); font-weight:700}
.pl-filtro-data{padding:6px 9px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); font-size:13px; margin-left:6px}
.grade-pag,.grade-fech{font-size:13.5px}
.grade-pag tfoot td{border-top:2px solid var(--line); padding-top:10px}
.fech-periodo{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:4px 0 14px; font-size:13px; color:var(--ink-soft)}
.fech-periodo input[type=date]{padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); font-size:13px}
.fech-nome{background:none; border:none; color:var(--ink); font-weight:700; font-size:14px; cursor:pointer; text-align:left; padding:0}
.fech-nome:hover{color:var(--accent-strong)}
.fech-detalhe td{background:var(--hover); padding:8px 12px}
.pix{font-family:var(--mono, ui-monospace,Consolas,monospace); background:var(--card-2,var(--hover)); padding:2px 8px; border-radius:6px; font-size:12.5px; color:var(--ink)}
.grade-fech [data-pagar]{padding:7px 12px; font-size:12.5px}

/* ============ CORTE: sub-nav Cortar / Distribuir ============ */
.corte-subnav{display:flex; gap:6px; margin-bottom:18px}
.corte-sub-btn{border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); border-radius:11px;
  padding:11px 20px; font-size:14.5px; font-weight:800; cursor:pointer; transition:all .15s}
.corte-sub-btn:hover{background:var(--accent-soft); color:var(--accent-strong)}
.corte-sub-btn.ativo{background:var(--accent-btn); border-color:var(--accent-btn); color:#fff}

/* distribuição (Rose) */
.dist-form{display:flex; gap:20px; align-items:flex-end; flex-wrap:wrap; margin-bottom:14px}
#dist-cost{min-width:220px}
.seg-tam{display:flex; gap:6px}
.seg-btn{border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); border-radius:9px;
  padding:10px 16px; font-size:14px; font-weight:700; cursor:pointer}
.seg-btn.ativo{background:var(--accent-btn); border-color:var(--accent-btn); color:#fff}
.dist-mod-bloco{margin-bottom:14px; padding:16px 18px}
.dist-mod-bloco .dist-mod-nome{min-width:280px}
table.cores-dist{width:auto; min-width:340px; table-layout:auto; margin-top:4px}
.cores-dist .c-qtd{width:90px} .cores-dist .c-cor{width:280px}
.cores-dist .c-qtd input{text-align:center; font-size:16px; font-weight:700}
.dist-add-cor{margin-top:10px}
.dist-mod-grupo{margin-bottom:8px}
.dist-mod-grupo:last-child{margin-bottom:0}
.dist-mod-nome-lista{font-size:12.5px; font-weight:800; color:var(--accent-strong); margin-bottom:3px}
.dist-resumo{display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin:16px 0 6px;
  background:var(--accent-soft); border-radius:12px; padding:14px 18px}
.dt-total{font-size:15px; color:var(--ink)}
.dt-total b{font-size:20px; font-weight:800}
.dt-etq{font-size:15px; color:var(--ink)}
.dt-etq b{font-size:24px; font-weight:800; color:var(--accent-strong)}
.dt-etq small{color:var(--ink-soft); font-weight:500}
#dist-salvar{margin-left:auto}
.dist-dia-cab{display:flex; justify-content:space-between; align-items:center; gap:12px; margin:16px 0 8px;
  padding:8px 12px; background:var(--card-2, var(--hover)); border-radius:9px; font-weight:800; font-size:13px}
.dist-dia-tot{font-size:12.5px; color:var(--ink-soft); font-weight:600; font-variant-numeric:tabular-nums}
.dist-dia-tot b{color:var(--accent-strong)}
.dist-card{border:1px solid var(--line); border-radius:12px; padding:13px 15px; margin-bottom:9px; background:var(--card); box-shadow:var(--sh-sm)}
.dist-card-cab{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:8px}
.dist-cost-nome{font-size:16px; font-weight:800; margin-right:8px}
.dist-card-nums{display:flex; align-items:center; gap:12px; font-variant-numeric:tabular-nums}
.dcn-total{font-size:13px; color:var(--ink-soft)}
.dcn-etq{font-size:14px; font-weight:800; color:var(--accent-strong); background:var(--accent-soft); border-radius:20px; padding:3px 12px}
.dist-itens-lista{display:flex; flex-direction:column; gap:3px}
.dist-item-linha{display:flex; align-items:center; gap:10px; font-size:13.5px; padding:3px 0; border-top:1px solid var(--line-soft)}
.di-qtd{font-family:var(--mono, ui-monospace,Consolas,monospace); font-weight:800; background:var(--accent-soft); color:var(--accent-strong); border-radius:6px; padding:2px 9px; min-width:34px; text-align:center}
.di-mod{font-weight:600; flex:1}
.di-cor{color:var(--ink-soft)}

/* ============ ATELIÊ (cortadora) — grande e simples ============ */
#atelie-lista{display:flex; flex-direction:column; gap:14px; max-width:620px}
.atelie-card{background:var(--card); border:1px solid var(--line); border-left:5px solid var(--ink-faint);
  border-radius:16px; padding:18px 20px; box-shadow:var(--sh)}
.atelie-card.andando{border-left-color:var(--info); background:var(--info-soft)}
.atc-topo{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.atc-modelos{font-size:19px; font-weight:800; line-height:1.15}
.atc-info{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:10px 0 6px}
.atc-metros{font-size:14px; color:var(--ink)}
.atc-metros b{font-size:16px; color:var(--accent-strong)}
.atc-cores{font-size:12.5px; color:var(--ink-soft)}
.atc-nome{font-size:13px; color:var(--ink-soft)}
.atc-btn{margin-top:14px; width:100%; padding:16px; border:none; border-radius:12px; background:var(--accent-btn);
  color:#fff; font-size:16px; font-weight:800; cursor:pointer; box-shadow:0 3px 10px rgba(0,0,0,.16); transition:transform .1s, filter .15s}
.atc-btn:hover{background:var(--accent-btn); filter:brightness(1.08)}
.atc-btn:active{transform:scale(.99)}
.atelie-card.andando .atc-btn{background:var(--info)}

/* aviso de cortes pendentes na OUTRA marca (senão ficam invisíveis p/ a cortadora) */
.atelie-outra{display:flex; align-items:center; gap:12px; flex-wrap:wrap; max-width:620px;
  margin:0 0 14px; padding:12px 16px; background:var(--warn-soft); border:1px solid var(--warn);
  border-radius:12px; font-size:14px; color:var(--ink)}
.atelie-outra b{color:var(--warn)}
.atelie-outra .atelie-trocar{padding:8px 14px; font-size:13px}

/* painel de contagem */
.contagem-wrap{max-width:620px}
.ct-voltar{background:none; border:none; color:var(--accent-strong); font-size:15px; font-weight:700; cursor:pointer; padding:6px 0 12px}
.ct-cab{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px 20px; box-shadow:var(--sh-sm); margin-bottom:16px}
.ct-modelos{font-size:21px; font-weight:800; line-height:1.15}
.ct-corte{font-size:13px; color:var(--ink-soft); margin-top:4px}
.ct-estilar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:12px;
  background:var(--accent-soft); border-radius:11px; padding:12px 14px}
.ct-metros{font-size:15px; color:var(--ink)}
.ct-metros b{font-size:19px; color:var(--accent-strong)}
/* ordem enviada sem tecido/metragem: avisa em vez de sumir com a informação */
.ct-falta{font-size:13.5px; font-weight:700; color:var(--danger)}
.ct-quem{margin-bottom:16px}
.ct-quem label{display:block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-soft); margin-bottom:6px}
#ct-cortadora{width:100%; max-width:320px; padding:13px 14px; border:1px solid var(--line); border-radius:11px; font-size:16px; background:var(--surface); color:var(--ink)}
.ct-titulo{font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--accent-strong); margin-bottom:10px}
.ct-lista{display:flex; flex-direction:column; gap:9px}
.ct-modelo{font-size:13px; font-weight:800; color:var(--ink-soft); margin:8px 0 2px; text-transform:uppercase; letter-spacing:.03em}
.ct-cor{display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 14px; flex-wrap:wrap}
.ct-cor-nome{flex:1; min-width:110px; display:flex; flex-direction:column; gap:2px}
.ct-cor-nome b{font-size:16px}
.ct-camadas{width:130px; padding:13px 12px; border:1.5px solid var(--line); border-radius:11px; font-size:18px;
  text-align:center; background:var(--surface); color:var(--ink); font-family:var(--mono, ui-monospace,Consolas,monospace)}
.ct-camadas:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.ct-soma{font-size:13px; font-weight:800; color:var(--accent-strong); min-width:74px}
.ct-finalizar{margin-top:20px; width:100%; padding:18px; border:none; border-radius:14px; background:var(--accent-btn);
  color:#fff; font-size:18px; font-weight:800; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.18)}
.ct-finalizar:hover{background:var(--accent-btn); filter:brightness(1.08)}
.ct-finalizar:active{transform:scale(.99)}

/* ============ RELATÓRIOS ============ */
.rel-topo{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:12px}
.rel-topo h2{margin:0; font-size:18px; font-weight:600}
.rel-periodos{display:flex; gap:6px; flex-wrap:wrap}
.rel-per-btn{border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); border-radius:20px;
  padding:7px 15px; font-size:12.5px; font-weight:600; cursor:pointer; transition:all .15s}
.rel-per-btn:hover{background:var(--accent-soft); color:var(--accent-strong)}
.rel-per-btn.ativo{background:var(--accent-btn); border-color:var(--accent-btn); color:#fff}
.rel-custom{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin:2px 0 8px; font-size:12.5px; color:var(--ink-soft)}
.rel-custom input[type=date]{padding:7px 10px; border:1px solid var(--line); border-radius:8px; background:var(--surface); font-size:13px; color:var(--ink)}
.rel-opcoes{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin:4px 0 8px}
.rel-check{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink-soft); font-weight:600; cursor:pointer}
.rel-check input{width:16px; height:16px; accent-color:var(--accent); cursor:pointer}
#rel-copiar{margin-left:auto; padding:8px 14px; font-size:12.5px}

.rel-kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin:6px 0 18px}
.kpi{background:var(--surface); border:1px solid var(--line-soft); border-radius:12px; padding:14px 16px;
  display:flex; flex-direction:column; gap:3px; box-shadow:var(--sh-sm)}
.kpi-val{font-size:26px; font-weight:800; color:var(--accent-strong); line-height:1; font-variant-numeric:tabular-nums}
.kpi-rot{font-size:11px; color:var(--ink-soft); font-weight:600; text-transform:uppercase; letter-spacing:.3px}
.kpi-delta{font-size:11px; font-weight:800; margin-top:2px}
.kpi-delta.up{color:var(--accent-strong)}
.kpi-delta.down{color:var(--danger)}

.rel-sec{margin:22px 0 12px; font-size:15px; font-weight:800; color:var(--ink);
  padding-bottom:6px; border-bottom:2px solid var(--accent-soft)}
.rel-sec-dica{font-size:11.5px; font-weight:500; color:var(--ink-faint); text-transform:none; letter-spacing:0}
.rel-bloco{margin-bottom:20px}
.rel-bloco h3{margin:0 0 12px; font-size:14px; color:var(--ink); font-weight:700}
.rel-cols{display:grid; grid-template-columns:1fr 1fr; gap:24px}
@media (max-width:820px){ .rel-cols{grid-template-columns:1fr} }
.rel-vazio-mini{color:var(--ink-faint); font-size:12.5px}

/* gráfico de barras vertical */
.barras-v{display:flex; align-items:flex-end; gap:8px; height:190px; padding:6px 2px 0;
  border-bottom:1px solid var(--line); overflow-x:auto}
.barv-col{display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:4px; min-width:34px; flex:1; height:100%}
.barv-val{font-size:10.5px; font-weight:700; color:var(--ink-soft); font-variant-numeric:tabular-nums}
.barv{width:100%; max-width:38px; min-height:2px; background:linear-gradient(180deg,var(--accent) 0%,var(--accent-strong) 100%);
  border-radius:6px 6px 0 0; transition:height .3s}
.barv-lab{font-size:10px; color:var(--ink-faint); white-space:nowrap}

/* gráfico de barras horizontal */
.barh{display:flex; align-items:center; gap:10px; margin-bottom:7px}
.barh-lab{width:150px; font-size:12.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:none}
.barh-track{flex:1; background:var(--line-soft); border-radius:20px; height:14px; overflow:hidden}
.barh-fill{height:100%; background:linear-gradient(90deg,var(--accent) 0%,var(--accent-strong) 100%); border-radius:20px; min-width:2px}
.barh-val{width:52px; text-align:right; font-size:12.5px; font-weight:700; color:var(--accent-strong); font-variant-numeric:tabular-nums; flex:none}
body.nl .barv{background:linear-gradient(180deg,var(--info) 0%,#2f5f8a 100%)}
body.nl .barh-fill{background:linear-gradient(90deg,var(--info) 0%,#2f5f8a 100%)}
body.nl .kpi-val,body.nl .barh-val{color:var(--info)}

/* Estados vazios */
.vazio-estado{text-align:center; padding:54px 20px; color:var(--ink-soft)}
.vazio-estado .logo{width:auto; height:auto; box-shadow:none; background:none; padding:0; font-size:42px; display:block; margin:0 auto 12px}
.vazio-estado h2{margin:0 0 6px; color:var(--ink)}
.vazio-estado p{max-width:440px; margin:0 auto; line-height:1.6}

/* Carregando + Toast */
.carregando{position:fixed; inset:0; background:var(--scrim); display:flex; flex-direction:column; gap:14px;
  align-items:center; justify-content:center; font-size:14px; color:var(--accent-strong); font-weight:600; z-index:50}
.carregando::before{content:""; width:34px; height:34px; border:3px solid var(--accent-soft);
  border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.carregando.oculto{display:none}
.carregando.erro::before{display:none}
.erro-box{background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-lg);
  padding:30px 36px; max-width:520px; text-align:center}
.erro-box h2{margin:0 0 10px; font-size:17px; color:var(--danger)}
.erro-box .erro-msg{margin:0 0 10px; font-size:13px; color:var(--ink); font-weight:400; word-break:break-word;
  background:var(--danger-soft); border-radius:8px; padding:10px 12px}
.erro-box .erro-dica{margin:0 0 18px; font-size:12.5px; color:var(--ink-soft); font-weight:400; line-height:1.6}

.toast{position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--toast-bg); color:#fff; padding:13px 22px; border-radius:11px; font-size:13.5px; font-weight:600;
  box-shadow:var(--sh-lg); opacity:0; transition:all .3s cubic-bezier(.2,.8,.2,1); z-index:60; max-width:80%;
  display:flex; align-items:center; gap:9px}
.toast::before{content:"✓"; color:#8fd3b6; font-weight:800}
/* toast de ERRO: vermelho (via variável, com tom forte p/ texto branco legível
   nos DOIS temas) e prefixo ✕ — nunca parece sucesso */
.toast.erro{background:var(--danger-forte)}
.toast.erro::before{content:"✕"; color:#fff}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* tabelas largas rolam dentro do próprio bloco (o body nunca rola na horizontal) */
.scrollx{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* ============ MOBILE (celular da cortadora / tablet da Rose) ============ */
@media (max-width:700px){
  /* topo empilha: logo em cima, switch de marca numa linha própria */
  .topo{flex-wrap:wrap; gap:10px; padding:10px 14px}
  .topo h1{font-size:16px}
  .topo-dir{gap:8px; margin-left:auto; flex-wrap:wrap; justify-content:flex-end}
  .marca-switch{order:3; width:100%; margin:0; justify-content:center}
  .marca-btn{flex:1}
  /* nav das 9 abas vira faixa rolável, sem quebrar em várias linhas */
  .abas-nav{overflow-x:auto; -webkit-overflow-scrolling:touch; padding:0 10px; scrollbar-width:none}
  .abas-nav::-webkit-scrollbar{display:none}
  .aba-btn{flex:none; white-space:nowrap; padding:14px 12px 12px}
  main{padding:14px 12px 40px}
  .card{padding:14px 14px}
  /* formulários empilham e ocupam a largura toda */
  .corte-cab .campo,.dist-form .campo,.cat-form .campo{width:100%}
  .corte-cab .campo input,.corte-cab .campo select,.dist-form .campo input{width:100%}
  #corte-nome,#ord-nome{min-width:0}
  .modelo-bloco,.dist-mod-bloco{overflow-x:auto}  /* tabela de cores rola dentro do card */
  /* iOS dá zoom automático em campo <16px — teclado abre sem "pular" a tela */
  input[type=text],input[type=number],input[type=date],input[type=password],input:not([type]),select,textarea,
  .cores input,.cores select,.fut-periodo input[type=date],.fech-periodo input[type=date],
  .rel-custom input[type=date]{font-size:16px}
  /* alvos de toque ≥44px nas ações pequenas (✕ destrutivo, ✎, ↩) */
  .mini-btn{width:44px; height:44px; font-size:16px}
  .btn-x{font-size:18px; padding:13px}
  .tl-in{width:64px; padding:10px 7px}
  .sug-x{padding:10px 12px}
  .ct-camadas{width:150px}
  #atelie-lista,.contagem-wrap,.atelie-outra{max-width:none}
}

/* ============ WEBAPP — LOGIN, CASCA, VITRINE (Fase 1) ============ */

/* tela de login (centralizada, tema-aware; usa as MESMAS variáveis) */
.tela-login{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; background:var(--paper)}
.login-card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-lg);
  padding:34px 32px; width:100%; max-width:380px; display:flex; flex-direction:column; gap:12px; text-align:center}
.login-logo{width:72px; height:72px; border-radius:16px; object-fit:contain; padding:6px; margin:0 auto 4px;
  background:var(--surface); box-shadow:var(--sh-sm)}
.login-card h1{margin:0; font-size:20px; font-weight:700; letter-spacing:.3px; color:var(--ink)}
.login-sub{margin:0 0 8px; font-size:12.5px; color:var(--ink-soft)}
.login-campo{display:flex; flex-direction:column; gap:6px; text-align:left}
.login-campo span{font-size:11.5px; font-weight:600; color:var(--ink-soft); letter-spacing:.2px}
.login-campo input{padding:12px 13px; border:1px solid var(--line); border-radius:var(--r-sm); font-size:16px;
  background:var(--surface); color:var(--ink)}
.login-campo input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.login-erro{margin:0; font-size:12.5px; font-weight:600; color:var(--danger-forte); background:var(--danger-soft);
  border-radius:8px; padding:9px 11px; text-align:left}
.login-ok{margin:0; font-size:12.5px; font-weight:600; color:var(--accent-strong); background:var(--accent-soft);
  border-radius:8px; padding:9px 11px; text-align:left}
.login-btn{width:100%; margin-top:6px; padding:13px; font-size:15px}
/* campo de senha com o "olho" (mostrar/ocultar) */
.senha-wrap{position:relative; display:block}
.senha-wrap input{width:100%; padding-right:46px}   /* espaço p/ o botão do olho */
.olho-btn{position:absolute; top:0; right:0; height:100%; width:44px; min-height:44px;
  display:flex; align-items:center; justify-content:center; background:transparent;
  border:none; cursor:pointer; font-size:17px; line-height:1; padding:0; color:var(--ink-soft);
  border-radius:var(--r-sm)}
.olho-btn:hover{color:var(--ink)}
.olho-btn:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
#troca-campos{display:flex; flex-direction:column; gap:12px}
.login-link{background:none; border:none; color:var(--accent-strong); font-size:12.5px;
  font-weight:600; cursor:pointer; padding:8px; align-self:center; text-decoration:underline}
.login-link:hover{color:var(--accent)}
.login-link:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}

/* chip do usuário + badge "somente leitura" no topo */
.usuario-chip{display:inline-flex; flex-direction:column; align-items:flex-end; line-height:1.15; margin-right:2px}
.usuario-chip b{font-size:13px; color:#fff; font-weight:700}
.usuario-papel{font-size:10.5px; color:#b9b4a8; text-transform:uppercase; letter-spacing:.5px}
.badge-leitura{background:rgba(255,255,255,.12); color:#e8e5dd; border:1px solid rgba(255,255,255,.2);
  font-size:10.5px; font-weight:700; letter-spacing:.3px}

/* banner de conexão (5xx / rede) — persistente, no topo do conteúdo */
.banner-conexao{background:var(--danger-soft); color:var(--ink); border:1px solid var(--danger);
  border-radius:10px; padding:11px 15px; margin-bottom:14px; font-size:13px; font-weight:600}
.banner-conexao::before{content:"⚠ "; color:var(--danger); font-weight:800}
/* banner no topo do body (aparece no login e acima do app) */
.banner-conexao-topo{margin:12px 16px 0; max-width:1500px; margin-left:auto; margin-right:auto}

/* valores estáticos de risco/loja na vitrine (read-only, no lugar dos inputs) */
.tl-risco{color:var(--danger)}
.tl-loja{color:var(--info)}
/* SKU estática (read-only): sem cursor de clique */
.var-bloco .sku-tag{cursor:default}
.var-cor{cursor:default}

/* views "em construção" (abas ainda não portadas) */
.placeholder-view{text-align:center; padding:60px 24px; color:var(--ink-soft); background:var(--card);
  border:1px dashed var(--line); border-radius:var(--r); max-width:520px; margin:20px auto}
.placeholder-view .ph-ico{font-size:44px; display:block; margin-bottom:12px}
.placeholder-view h2{margin:0 0 8px; font-size:18px; color:var(--ink)}
.placeholder-view p{max-width:420px; margin:0 auto; line-height:1.6; font-size:13.5px}

@media (max-width:700px){
  .login-card{padding:26px 20px}
  .usuario-chip{display:none}          /* no celular o nome sai; sobram os botões */
  .badge-leitura{display:none}
  /* alvos de toque ≥44px no cabeçalho e nas abas (WCAG 2.5.5) */
  .btn-topo,.marca-btn,.aba-btn,.filtro-btn,.corte-sub-btn,.pag-sub-btn,.seg-btn{min-height:44px}
}

/* ============ A11Y (foco, "não salvo", movimento reduzido) ============ */
/* anel de foco visível e consistente nos interativos customizados (vira azul no
   New Look automaticamente por usar a variável de accent) */
.aba-btn:focus-visible,.filtro-btn:focus-visible,.btn:focus-visible,.seg-btn:focus-visible,
.marca-btn:focus-visible,.mini-btn:focus-visible,.corte-sub-btn:focus-visible,.pag-sub-btn:focus-visible,
.rel-per-btn:focus-visible,.btn-topo:focus-visible,.btn-corte:focus-visible,.sku-tag:focus-visible,
.btn-lancar-var:focus-visible,.atc-btn:focus-visible,.ct-finalizar:focus-visible,.alerta-btn:focus-visible,
.btn-x:focus-visible,.btn-mini-limpar:focus-visible{
  outline:2px solid var(--accent-strong); outline-offset:2px;
}
/* marcador "não salvo" (edição com versao que não persistiu) — tema-aware, âmbar */
.nao-salvo{border-color:var(--warn) !important; box-shadow:0 0 0 3px var(--warn-soft)}
.nao-salvo::placeholder{color:var(--warn)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important}
}