:root{
  --ink:#0F1B2D; --ink2:#1B2A44; --gold:#C79A3C; --paper:#E9ECEF; --card:#fff;
  --line:#D3D8DE; --repor:#B8392F; --zero:#8E2A22; --quase:#C98A2E; --emdia:#2F6B54;
  --muted:#6B7683; --vence:#B8392F; --perto:#C98A2E; --ok:#2F6B54;
  --madeira:#3A2E24; --madeira2:#54422F;
  --cong:#4A5B8C; --frio:#3E6E9E; --gel:#3E8E8E; --sec:#8A6A3A; --lim:#5E7F52; --emb:#8A5A5A;
  --disp:"Saira Condensed",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:14px;
  -webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input{font:inherit;color:inherit}

/* ---------------- topo ---------------- */
.top{background:var(--ink);color:#fff;padding:13px 16px 0;position:sticky;top:0;z-index:40;
  border-bottom:2px solid var(--gold)}
.hd{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
.hd h1{font-family:var(--disp);font-size:23px;letter-spacing:.08em;margin:0;text-transform:uppercase}
.hd span{font-family:var(--disp);font-size:13px;letter-spacing:.2em;color:var(--gold);
  text-transform:uppercase}
.kpis{display:flex;gap:18px;flex-wrap:wrap;margin:10px 0 0}
.kpi{display:flex;align-items:baseline;gap:6px}
.kpi b{font-family:var(--mono);font-size:18px;font-weight:600}
.kpi i{font-style:normal;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#93A1B5}
.kpi.a b{color:#F09287} .kpi.b b{color:#7FC0A4} .kpi.c b{color:#E8B963} .kpi.d b{color:#fff}
.navs{display:flex;gap:2px;margin-top:12px;overflow-x:auto}
.nav{font-family:var(--disp);font-size:14px;letter-spacing:.1em;text-transform:uppercase;
  padding:9px 14px;color:#93A1B5;border-radius:5px 5px 0 0;white-space:nowrap}
.nav[aria-selected=true]{background:var(--paper);color:var(--ink);font-weight:700}

.wrap{max-width:1140px;margin:0 auto;padding:18px 14px 90px}
.bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:15px}
.busca{flex:1;min-width:160px;background:var(--card);border:1px solid var(--line);
  border-radius:6px;padding:9px 12px}
.busca:focus{outline:2px solid var(--gold);outline-offset:-1px}
.chip{border:1px solid var(--line);background:var(--card);border-radius:20px;padding:6px 12px;
  font-size:12px;color:var(--muted);white-space:nowrap}
.chip[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip.al[aria-pressed=true]{background:var(--repor);border-color:var(--repor)}
.chip.z[aria-pressed=true]{background:var(--zero);border-color:var(--zero)}
.pr{margin-left:auto;font-size:11.5px;color:var(--muted);font-family:var(--mono)}

/* ---------------- mapa ---------------- */
.mapa{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:16px}
.sala{border-radius:9px;padding:11px 10px;color:#fff;text-align:left;position:relative;
  min-height:78px;transition:transform .12s}
.sala:hover{transform:translateY(-2px)}
.sala[aria-pressed=true]{outline:3px solid var(--gold);outline-offset:2px}
.sala h2{font-family:var(--disp);font-size:12.5px;letter-spacing:.06em;margin:0 0 3px;
  text-transform:uppercase;line-height:1.15}
.sala .q{font-family:var(--mono);font-size:10px;opacity:.85}
.sala .pip{position:absolute;right:9px;bottom:9px;display:flex;gap:2px}
.sala .pip i{width:6px;height:6px;border-radius:50%}
.pip .r{background:#F09287} .pip .v{background:#F5D08A}
.s-cong{background:var(--cong)} .s-frio{background:var(--frio)} .s-gel{background:var(--gel)}
.s-sec{background:var(--sec)} .s-lim{background:var(--lim)} .s-emb{background:var(--emb)}

/* ---------------- corredor ---------------- */
.corr{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;
  margin-bottom:14px}
.chead{display:flex;align-items:center;gap:10px;padding:12px 15px;background:var(--ink2);color:#fff}
.chead h2{font-family:var(--disp);font-size:18px;letter-spacing:.08em;margin:0;flex:1;
  text-transform:uppercase}
.chead .n{font-family:var(--mono);font-size:11.5px;color:var(--gold)}
.gold{height:2px;background:var(--gold)}
.plabel{display:flex;align-items:center;gap:8px;padding:8px 15px;background:#F4F6F8;
  border-top:1px solid var(--line)}
.plabel b{font-family:var(--disp);font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted)}
.plabel .c{font-family:var(--mono);font-size:10px;color:var(--muted);margin-left:auto}

/* ---------------- caixa operável ---------------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:10px;
  padding:12px 15px 15px}
.box{border:1px solid var(--line);border-left:4px solid var(--emdia);border-radius:8px;
  background:#fff;padding:11px 12px}
.box.baixo{border-left-color:var(--repor);background:#FDF8F7}
.box .h{display:flex;align-items:flex-start;gap:6px;margin-bottom:8px}
.box .h b{font-size:13.5px;font-weight:600;line-height:1.25;flex:1}
.tag{font-family:var(--disp);font-size:9px;font-weight:700;letter-spacing:.08em;color:#fff;
  padding:2px 5px;border-radius:3px;flex-shrink:0}
.t-cr{background:var(--repor)} .t-vc{background:var(--vence)} .t-pt{background:var(--perto)}
.g{position:relative;height:18px;background:#EDEFF2;border-radius:3px;overflow:hidden;margin-bottom:7px}
.g .f{position:absolute;inset:0 auto 0 0;background:var(--emdia);opacity:.82}
.box.baixo .g .f{background:var(--repor)}
.g .m{position:absolute;top:0;bottom:0;width:2px;background:var(--ink);opacity:.6}
.g .lab{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;
  padding-right:6px;font-family:var(--mono);font-size:10.5px;font-weight:600}
.acoes{display:grid;grid-template-columns:auto 1fr auto;gap:5px;align-items:center;margin-bottom:7px}
.step{width:30px;height:30px;border:1px solid var(--line);border-radius:6px;font-size:16px;
  font-weight:600;color:var(--muted);display:grid;place-items:center;background:#FAFBFC}
.step:hover{border-color:var(--ink);color:var(--ink)}
.acoes input{width:100%;text-align:center;font-family:var(--mono);font-size:15px;font-weight:600;
  padding:6px;border:1px solid var(--line);border-radius:6px;background:#FBFBFC}
.acoes input:focus{outline:2px solid var(--gold);outline-offset:-1px;background:#fff}
.linha{display:flex;justify-content:space-between;align-items:center;gap:6px;
  font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:5px}
.linha .fa{color:var(--repor);font-weight:600}
.repor{width:100%;margin-top:7px;background:var(--ink);color:#fff;border-radius:6px;padding:7px;
  font-family:var(--disp);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase}
.repor:hover{background:var(--ink2)}
/* caixa de entrada de mercadoria */
.chegou{margin-top:9px;border:1px solid var(--line);border-radius:8px;background:#F7F9FA;
  padding:10px 11px}
.chegou .tt{display:flex;align-items:baseline;gap:7px;margin-bottom:8px}
.chegou .tt b{font-family:var(--disp);font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink)}
.chegou .tt span{font-size:10.5px;color:var(--muted);margin-left:auto;font-family:var(--mono)}
.chegou .campo{display:flex;gap:6px;align-items:stretch}
.chegou .campo input{flex:1;min-width:0;text-align:center;font-family:var(--mono);font-size:19px;
  font-weight:600;padding:9px 8px;border:1.5px solid var(--line);border-radius:7px;background:#fff}
.chegou .campo input:focus{outline:2px solid var(--gold);outline-offset:-1px;border-color:var(--gold)}
.chegou .campo .un{display:grid;place-items:center;padding:0 10px;font-family:var(--mono);
  font-size:12px;color:var(--muted);background:#EDF0F2;border-radius:7px;white-space:nowrap}
.chegou .ok{width:100%;margin-top:7px;background:var(--emdia);color:#fff;border-radius:7px;
  padding:10px;font-family:var(--disp);font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700}
.chegou .ok:hover{background:#25543F}
.chegou .ok[disabled]{background:#B6BEC6;cursor:not-allowed}
.chegou .prev{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:7px;
  text-align:center;line-height:1.5}
.chegou .prev em{font-style:normal;color:var(--emdia);font-weight:600}
.chegou .rap{display:flex;gap:5px;margin-top:7px;flex-wrap:wrap}
.chegou .rap button{flex:1;min-width:52px;border:1px solid var(--line);background:#fff;
  border-radius:6px;padding:6px 4px;font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.chegou .rap button:hover{border-color:var(--ink);color:var(--ink)}
.chegou .quem{background:none;padding:0;margin:8px 0 0;border-top:1px dashed var(--line);
  padding-top:8px}
.chegou .quem span{font-size:10.5px;color:var(--muted)}
.chegou .quem span em{font-style:normal;color:var(--ink);font-weight:600}
.chegou .quem span.falta{color:var(--repor);font-weight:600}
.val{display:flex;align-items:center;gap:6px;margin-top:7px;padding-top:7px;
  border-top:1px dashed var(--line)}
.val label{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.val input{flex:1;font-family:var(--mono);font-size:12px;padding:5px 7px;border:1px solid var(--line);
  border-radius:5px;background:#FBFBFC;min-width:0}
.val .dias{font-family:var(--mono);font-size:10.5px;font-weight:600;white-space:nowrap}
.d-vc{color:var(--vence)} .d-pt{color:var(--perto)} .d-ok{color:var(--ok)}

/* ---------------- estante de reposição ---------------- */
.estante{background:var(--madeira);border-radius:12px;padding:14px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.05)}
.nivel{margin-bottom:16px} .nivel:last-child{margin-bottom:0}
.ntag{display:flex;align-items:center;gap:10px;padding:0 4px 8px}
.ntag h2{font-family:var(--disp);font-size:16px;letter-spacing:.11em;margin:0;
  text-transform:uppercase;color:#F0E4CE}
.ntag .n{font-family:var(--mono);font-size:11px;color:#B39B6E;margin-left:auto}
.potes{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:8px}
.pote{background:var(--card);border-radius:7px 7px 3px 3px;padding:10px 11px 9px;
  border-bottom:4px solid var(--repor);position:relative;min-height:126px;
  display:flex;flex-direction:column;text-align:left;width:100%}
.pote:hover{outline:2px solid var(--gold);outline-offset:2px}
.pote.zerado{border-bottom-color:var(--zero);background:#FCF4F3}
.pote.quase{border-bottom-color:var(--quase)}
.pote .cr{position:absolute;top:8px;right:9px;font-family:var(--disp);font-size:8.5px;
  font-weight:700;letter-spacing:.07em;background:var(--repor);color:#fff;padding:1px 5px;
  border-radius:3px}
.pote b{font-size:13px;font-weight:600;line-height:1.25;padding-right:34px;margin-bottom:auto}
.pote .tem{font-family:var(--mono);font-size:11px;color:var(--muted);margin:7px 0 5px}
.pote .tem s{text-decoration:none;color:var(--ink);font-weight:600}
.pote .cp{font-family:var(--mono);font-size:15px;font-weight:600;color:var(--repor);line-height:1.15}
.pote.zerado .cp{color:var(--zero)}
.pote .cp small{display:block;font-family:var(--body);font-size:9.5px;font-weight:400;
  color:var(--muted);letter-spacing:.04em;text-transform:uppercase;margin-top:2px}
.pote .ond{font-family:var(--mono);font-size:9.5px;color:var(--muted);margin-top:6px;
  padding-top:6px;border-top:1px dashed var(--line)}
.tabua{height:9px;background:linear-gradient(180deg,var(--madeira2),#2A2018);
  border-radius:2px;margin-top:7px;box-shadow:0 3px 7px rgba(0,0,0,.3)}

.vazio{background:var(--card);border:1px dashed var(--line);border-radius:10px;padding:36px;
  text-align:center;color:var(--muted)}
.vazio b{display:block;font-family:var(--disp);font-size:18px;letter-spacing:.07em;color:var(--ink);
  text-transform:uppercase;margin-bottom:4px}
.aviso{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--repor);
  color:#fff;padding:11px 16px;border-radius:10px;font-size:13px;z-index:65;max-width:min(560px,92vw);
  box-shadow:0 6px 22px rgba(0,0,0,.3);display:none;align-items:center;gap:12px;line-height:1.45}
.aviso.on{display:flex}
.aviso b{font-family:var(--disp);font-size:13px;letter-spacing:.09em;text-transform:uppercase;
  display:block;margin-bottom:2px}
.aviso button{background:#fff;color:var(--repor);border-radius:6px;padding:7px 12px;
  font-family:var(--disp);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  white-space:nowrap;font-weight:700}
.salvo{position:fixed;right:14px;top:calc(100% - 100vh + 14px);z-index:50}
.exp{border:1px solid var(--line);background:var(--card);border-radius:20px;padding:6px 12px;
  font-size:12px;color:var(--muted);white-space:nowrap}
.exp:hover{color:var(--ink);border-color:var(--muted)}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--ink);
  color:#fff;padding:10px 18px;border-radius:24px;font-size:13px;z-index:60;
  box-shadow:0 6px 22px rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:opacity .2s}
.toast.on{opacity:1}
.rod{text-align:center;color:var(--muted);font-size:11.5px;margin-top:20px;line-height:1.7}

/* ---------------- painel lateral ---------------- */
.sombra{position:fixed;inset:0;background:rgba(15,27,45,.5);z-index:70;opacity:0;
  pointer-events:none;transition:opacity .18s}
.sombra.on{opacity:1;pointer-events:auto}
.painel{position:fixed;top:0;right:0;bottom:0;width:min(380px,92vw);background:var(--paper);
  z-index:71;transform:translateX(100%);transition:transform .22s;overflow-y:auto;
  box-shadow:-8px 0 30px rgba(0,0,0,.25)}
.painel.on{transform:none}
.painel .ph{background:var(--ink);color:#fff;padding:15px 16px;display:flex;
  align-items:flex-start;gap:10px}
.painel .ph h3{font-family:var(--disp);font-size:19px;letter-spacing:.06em;margin:0;flex:1;
  text-transform:uppercase;line-height:1.15}
.painel .ph .x{font-size:22px;line-height:1;color:#93A1B5}
.painel .pc{padding:14px}
.painel .meta{font-family:var(--mono);font-size:11px;color:var(--muted);margin:0 0 12px;
  line-height:1.7}

/* quem está repondo */
.quem{background:var(--ink);color:#fff;border-radius:8px;padding:11px 13px;margin-bottom:14px}
.quem label{display:block;font-family:var(--disp);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.quem input{width:100%;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
  border-radius:6px;padding:8px 10px;color:#fff;font-size:14px}
.quem input:focus{outline:2px solid var(--gold);outline-offset:-1px}
.quem input::placeholder{color:#7C8BA1}
.quem .av{font-size:10.5px;color:#F09287;margin:6px 0 0;line-height:1.5}

/* resumo do topo das entradas */
.resumo{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:9px;
  margin-bottom:14px}
.rc{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:11px 13px}
.rc b{display:block;font-family:var(--mono);font-size:21px;font-weight:600;line-height:1.1}
.rc i{font-style:normal;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted)}

/* recibo de entrada */
.entrada{display:grid;grid-template-columns:52px 1fr auto auto;gap:11px;align-items:center;
  padding:9px 15px;border-top:1px solid var(--line)}
.entrada:hover{background:#FAFBFC}
.entrada .hr{font-family:var(--mono);font-size:11px;color:var(--muted)}
.entrada .it{min-width:0}
.entrada .it b{display:block;font-size:13.5px;font-weight:600;line-height:1.3}
.entrada .it span{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.entrada .qt{font-family:var(--mono);font-size:15px;font-weight:600;color:var(--emdia);
  white-space:nowrap;text-align:right}
.entrada .qt small{display:block;font-family:var(--mono);font-size:9.5px;font-weight:400;
  color:var(--muted)}
.entrada .un{width:28px;height:28px;border:1px solid var(--line);border-radius:6px;
  color:var(--muted);font-size:13px;display:grid;place-items:center}
.entrada .un:hover{border-color:var(--repor);color:var(--repor)}

/* bloco de uma pessoa dentro do dia */
.pessoa{display:flex;align-items:center;gap:9px;padding:9px 15px;background:#F4F6F8;
  border-top:1px solid var(--line)}
.pessoa b{font-family:var(--disp);font-size:14px;letter-spacing:.1em;text-transform:uppercase}
.pessoa .c{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-left:auto;
  text-align:right;line-height:1.5}
.hist{margin-top:12px;border-top:1px dashed var(--line);padding-top:10px}
.hist h4{font-family:var(--disp);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 7px}
.hist .l{font-family:var(--mono);font-size:10.5px;color:var(--muted);line-height:1.75}
.hist .l em{font-style:normal;color:var(--ink);font-weight:600}
.dia{display:flex;align-items:center;gap:9px;padding:9px 15px;background:#F4F6F8;
  border-top:1px solid var(--line)}
.dia b{font-family:var(--disp);font-size:13px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted)}
.dia .c{font-family:var(--mono);font-size:10px;color:var(--muted);margin-left:auto}
/* ---------------- entrada com preço ---------------- */
.entrar{display:grid;grid-template-columns:auto 1fr auto 1fr auto;gap:5px;align-items:center;
  margin:7px 0 0}
.entrar .et{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap}
.entrar input{width:100%;min-width:0;text-align:center;font-family:var(--mono);font-size:14px;
  font-weight:600;padding:6px 4px;border:1px solid var(--line);border-radius:6px;background:#FBFBFC}
.entrar input:focus{outline:2px solid var(--gold);outline-offset:-1px;background:#fff}
.val input[data-cbase]{text-align:right;font-weight:600}

/* ---------------- semana ---------------- */
.seta{width:32px;height:32px;border:1px solid var(--line);background:var(--card);border-radius:6px;
  font-size:19px;line-height:1;color:var(--muted);display:grid;place-items:center}
.seta:hover:not([disabled]){border-color:var(--ink);color:var(--ink)}
.seta[disabled]{opacity:.35;cursor:default}
.stit{font-family:var(--mono);font-size:13px;font-weight:600;min-width:104px;text-align:center}
.semana{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;margin-bottom:14px;
  padding-bottom:10px;border-bottom:2px solid var(--gold)}
.semana b{font-family:var(--disp);font-size:22px;letter-spacing:.07em;text-transform:uppercase}
.semana span{font-family:var(--mono);font-size:11.5px;color:var(--muted)}

.semana .prog{font-family:var(--mono);font-size:11px;margin-left:auto;background:#FDF6E9;
  border:1px solid #E4CFA0;color:#8A6A2E;border-radius:20px;padding:3px 11px}
.semana .prog.ok{background:#EAF3EE;border-color:#B6D4C5;color:var(--emdia)}
.obs{font-size:11.5px;color:var(--muted);margin:0 0 13px;line-height:1.6}

/* ---------------- fechamento da semana ---------------- */
.conta-item{display:grid;grid-template-columns:1fr auto 96px auto 74px;gap:13px;align-items:center;
  padding:10px 15px;border-top:1px solid var(--line)}
.conta-item:hover{background:#FAFBFC}
.conta-item.pronto{background:#F6FAF8}
.conta-item .it{min-width:0}
.conta-item .it b{display:block;font-size:13.5px;font-weight:600;line-height:1.3}
.conta-item .it span{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.conta-item .ent{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--emdia);
  text-align:right;white-space:nowrap}
.conta-item .campo input{width:100%;text-align:center;font-family:var(--mono);font-size:16px;
  font-weight:600;padding:7px 5px;border:1.5px solid var(--line);border-radius:7px;background:#fff}
.conta-item .campo input:focus{outline:2px solid var(--gold);outline-offset:-1px;
  border-color:var(--gold)}
.conta-item.pronto .campo input{border-color:#B6D4C5;background:#FCFEFD}
.conta-item .usou{font-family:var(--mono);font-size:17px;font-weight:600;color:var(--repor);
  text-align:right;white-space:nowrap}
.conta-item .usou.neg{color:var(--emdia)}
.conta-item .ent small,.conta-item .campo small,.conta-item .usou small{display:block;
  font-family:var(--body);font-size:9.5px;font-weight:400;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);margin-top:2px}
.conta-item .campo small{text-align:center}
.conta-item .carimbo{font-family:var(--mono);font-size:9.5px;color:var(--emdia);
  text-align:right;line-height:1.5}
.conta-item .carimbo em{font-style:normal;color:var(--muted)}

/* ---------------- cartões do CMV ---------------- */
.cmv{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:10px;
  margin-bottom:13px}
.cx{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--ink2);
  border-radius:9px;padding:12px 14px}
.cx i{display:block;font-style:normal;font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin-bottom:5px}
.cx b{display:block;font-family:var(--mono);font-size:21px;font-weight:600;line-height:1.15}
.cx u{display:block;text-decoration:none;font-size:10.5px;color:var(--muted);margin-top:4px;
  line-height:1.45}
.cx.grande{grid-column:span 2}
.cx.grande b{font-size:31px}
.cx.bom{border-top-color:var(--emdia)}      .cx.bom b{color:var(--emdia)}
.cx.atencao{border-top-color:var(--quase)}  .cx.atencao b{color:#9A6712}
.cx.ruim{border-top-color:var(--repor)}     .cx.ruim b{color:var(--repor)}
.leitura{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--muted);
  border-radius:9px;padding:11px 14px;margin:0 0 13px;font-size:13px;line-height:1.6}
.leitura.bom{border-left-color:var(--emdia)}
.leitura.atencao{border-left-color:var(--quase)}
.leitura.ruim{border-left-color:var(--repor)}

/* a conta na horizontal: inicial + compras − final = CMV */
.conta{display:flex;align-items:stretch;gap:9px;flex-wrap:wrap;background:var(--card);
  border:1px solid var(--line);border-radius:9px;padding:13px 15px;margin-bottom:13px}
.conta span{flex:1;min-width:112px}
.conta i{display:block;font-style:normal;font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.conta b{font-family:var(--mono);font-size:15px;font-weight:600}
.conta em{font-style:normal;font-family:var(--mono);font-size:17px;color:var(--muted);
  display:grid;place-items:center}
.conta .fim b{color:var(--repor);font-size:17px}

/* faturamento */
.fatura{background:var(--ink);color:#fff;border-radius:9px;padding:14px 15px;margin-bottom:13px}
.fatura label{display:block;font-family:var(--disp);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin-bottom:7px}
.fatura .campo{display:flex;align-items:stretch;gap:0;max-width:340px}
.fatura .campo span{display:grid;place-items:center;padding:0 11px;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.16);border-right:none;border-radius:7px 0 0 7px;
  font-family:var(--mono);font-size:13px;color:var(--gold)}
.fatura input{flex:1;min-width:0;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.16);border-radius:0 7px 7px 0;padding:10px 12px;color:#fff;
  font-family:var(--mono);font-size:17px;font-weight:600}
.fatura input:focus{outline:2px solid var(--gold);outline-offset:-1px}
.fatura input::placeholder{color:#7C8BA1;font-size:12px;font-weight:400}
.fatura p{font-size:11px;color:#93A1B5;margin:9px 0 0;line-height:1.6;max-width:56ch}

/* ---------------- linha de consumo ---------------- */
.uso{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;
  padding:10px 15px;border-top:1px solid var(--line)}
.uso:hover{background:#FAFBFC}
.uso .it{min-width:0}
.uso .it b{display:block;font-size:13.5px;font-weight:600;line-height:1.3}
.uso .it span{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.uso .qt{font-family:var(--mono);font-size:19px;font-weight:600;text-align:right;
  white-space:nowrap;color:var(--repor)}
.uso .qt small{display:block;font-family:var(--body);font-size:9.5px;font-weight:400;
  letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.uso .vl{font-family:var(--mono);font-size:14px;font-weight:600;text-align:right;
  white-space:nowrap;min-width:88px}
.uso .vl small{display:block;font-size:9.5px;font-weight:400;color:var(--muted)}

/* fatia por setor */
.fatia{display:grid;grid-template-columns:minmax(120px,1fr) 2fr auto;gap:12px;align-items:center;
  padding:9px 15px;border-top:1px solid var(--line)}
.fatia .nm{font-size:12.5px;font-weight:600;line-height:1.3}
.fatia .br{height:12px;background:#EDEFF2;border-radius:3px;overflow:hidden}
.fatia .br i{display:block;height:100%;background:var(--gold);opacity:.85}
.fatia .vv{font-family:var(--mono);font-size:13px;font-weight:600;text-align:right;
  white-space:nowrap}
.fatia .vv small{display:block;font-size:9.5px;font-weight:400;color:var(--muted)}

.alerta{background:#FDF6E9;border:1px solid #E4CFA0;border-left:4px solid var(--quase);
  border-radius:9px;padding:11px 14px;margin-bottom:13px;font-size:12.5px;line-height:1.65}
.alerta b{display:block;font-family:var(--disp);font-size:13px;letter-spacing:.09em;
  text-transform:uppercase;margin-bottom:3px}
.alerta b + b{display:inline;font-family:var(--body);font-size:inherit;letter-spacing:0;
  text-transform:none}

@media(max-width:900px){.mapa{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){
  .cx.grande{grid-column:span 2}
  .conta{display:grid;grid-template-columns:1fr auto}
  .conta span{min-width:0}
  .conta em{grid-column:2;grid-row:auto}
  .uso{grid-template-columns:1fr auto;gap:8px}
  .uso .vl{grid-column:2;text-align:right}
  /* no celular a linha vira duas: nome em cima, os números embaixo */
  .conta-item{grid-template-columns:1fr 72px 88px;gap:9px}
  .conta-item .it{grid-column:1/-1}
  .conta-item .carimbo{grid-column:1;text-align:left}
  .fatia{grid-template-columns:1fr auto}
  .fatia .br{grid-column:1/-1;order:3}
}
@media(max-width:520px){.mapa{grid-template-columns:repeat(2,1fr)}.hd h1{font-size:19px}
  /* quantidade em cima, preço embaixo, o botão de confirmar ao lado das duas */
  .entrar{grid-template-columns:auto 1fr auto;row-gap:6px}
  .entrar>*:nth-child(1){grid-area:1/1} .entrar>*:nth-child(2){grid-area:1/2}
  .entrar>*:nth-child(3){grid-area:2/1} .entrar>*:nth-child(4){grid-area:2/2}
  .entrar>*:nth-child(5){grid-area:1/3/3/4;height:auto}}
@media print{
  .top,.bar,.repor,.step,.painel,.sombra{display:none!important}
  body{background:#fff} .estante{background:#fff;padding:0}
  .tabua{background:#000;height:2px} .ntag h2{color:#000} .ntag .n{color:#555}
  .pote{border:1px solid #999;border-bottom:3px solid #000}
  .nivel,.corr{break-inside:avoid}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ===================== LOGIN ===================== */
.login{position:fixed;inset:0;background:var(--ink);display:grid;place-items:center;
  padding:22px;z-index:100;overflow-y:auto}
.login .cartao{width:min(390px,100%);background:var(--card);border-radius:14px;padding:26px 24px;
  box-shadow:0 18px 50px rgba(0,0,0,.35)}
.login .marca{text-align:center;margin-bottom:22px;padding-bottom:18px;
  border-bottom:2px solid var(--gold)}
.login .marca h1{font-family:var(--disp);font-size:29px;letter-spacing:.07em;margin:0;
  text-transform:uppercase;line-height:1.05}
.login .marca span{font-family:var(--disp);font-size:12px;letter-spacing:.24em;color:var(--gold);
  text-transform:uppercase}
.login label{display:block;font-family:var(--disp);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:13px 0 5px}
.login input{width:100%;border:1px solid var(--line);border-radius:7px;padding:11px 12px;
  font-size:15px;background:#FBFBFC}
.login input:focus{outline:2px solid var(--gold);outline-offset:-1px;background:#fff}
.login .principal{width:100%;margin-top:19px;background:var(--ink);color:#fff;border-radius:7px;
  padding:13px;font-family:var(--disp);font-size:15px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700}
.login .principal:hover{background:var(--ink2)}
.login .principal:disabled{opacity:.55;cursor:wait}
.login .secundario{width:100%;margin-top:9px;padding:11px;color:var(--muted);font-size:13px;
  border-radius:7px}
.login .secundario:hover{color:var(--ink);background:#F4F6F8}
.login .erro{color:var(--repor);font-size:12.5px;margin:13px 0 0;line-height:1.5;min-height:1px}
.login .erro:empty{margin:0}
.login .rodape-login{text-align:center;color:var(--muted);font-size:11.5px;margin:18px 0 0;
  line-height:1.6}

/* ============== QUEM ESTÁ OPERANDO ============== */
.quemtela{position:fixed;inset:0;background:var(--ink);display:grid;place-items:center;
  padding:22px;z-index:99;overflow-y:auto}
.quemtela[hidden]{display:none}
.quemtela .cartao{width:min(460px,100%);background:var(--card);border-radius:14px;
  padding:26px 24px;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.quemtela .marca{text-align:center;margin-bottom:16px;padding-bottom:16px;
  border-bottom:2px solid var(--gold)}
.quemtela .marca h1{font-family:var(--disp);font-size:24px;letter-spacing:.05em;margin:0;
  text-transform:uppercase;line-height:1.1}
.quemtela .marca span{font-family:var(--disp);font-size:12px;letter-spacing:.24em;
  color:var(--gold);text-transform:uppercase}
.quemtela .expl{font-size:12.5px;color:var(--muted);line-height:1.6;margin:0 0 16px;
  text-align:center}
.vaziaq{font-size:12.5px;color:var(--muted);text-align:center;line-height:1.6;
  border:1px dashed var(--line);border-radius:9px;padding:18px;margin:0}

.grupop{margin-bottom:15px}
.titp{display:flex;align-items:baseline;gap:8px;margin-bottom:7px;flex-wrap:wrap}
.pap{font-family:var(--disp);font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;padding:3px 8px;border-radius:4px}
.p-dono{background:var(--gold)} .p-ger{background:var(--ink2)} .p-lid{background:var(--ok)}
.titp span{font-size:10.5px;color:var(--muted);line-height:1.4}
.pes{display:flex;gap:6px;margin-bottom:6px}
.nomep{flex:1;text-align:left;background:#F7F9FA;border:1px solid var(--line);
  border-radius:8px;padding:13px 14px;font-size:15px;font-weight:600;transition:transform .1s}
.nomep:hover{background:var(--ink);color:#fff;border-color:var(--ink);transform:translateX(2px)}
.tirap{width:40px;border:1px solid var(--line);border-radius:8px;color:var(--muted);
  font-size:17px;background:#fff}
.tirap:hover{border-color:var(--repor);color:var(--repor)}

.addp{border-top:1px dashed var(--line);padding-top:14px;margin-top:4px}
.addp label{display:block;font-family:var(--disp);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.addp .linha{display:flex;gap:6px}
.addp input{flex:1;min-width:0;border:1px solid var(--line);border-radius:7px;
  padding:10px 11px;font-size:14px;background:#FBFBFC}
.addp select{border:1px solid var(--line);border-radius:7px;padding:10px 6px;
  font-size:13px;background:#FBFBFC;color:inherit}
.addp input:focus,.addp select:focus{outline:2px solid var(--gold);outline-offset:-1px}
.addp button{background:var(--ink);color:#fff;border-radius:7px;padding:10px 15px;
  font-family:var(--disp);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:700;white-space:nowrap}
.addp button:hover{background:var(--ink2)}
.addp .erro{color:var(--repor);font-size:12px;margin:9px 0 0;line-height:1.5;min-height:1px}
.addp .erro:empty{margin:0}
.sairq{width:100%;margin-top:14px;padding:10px;color:var(--muted);font-size:12.5px;
  border-radius:7px}
.sairq:hover{color:var(--ink);background:#F4F6F8}

/* caixa em modo leitura (dono) */
.box.leitura{border-left-color:var(--gold)}
.box.leitura.baixo{border-left-color:var(--repor)}

/* usuário no topo */
.usuario{margin-left:auto;display:flex;align-items:center;gap:10px}
.usuario b{font-family:var(--mono);font-size:12px;color:var(--gold);font-weight:500}
.trocar{display:flex;flex-direction:column;align-items:flex-start;gap:1px;line-height:1.15;
  border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:4px 11px}
.trocar:hover{border-color:var(--gold)}
.trocar i{font-style:normal;font-family:var(--disp);font-size:8.5px;letter-spacing:.13em;
  text-transform:uppercase;color:#93A1B5}
.trocar.p-dono{background:none} .trocar.p-dono i{color:var(--gold)}
.trocar.p-ger i{color:#7FC0A4}  .trocar.p-lid i{color:#8FB3E0}
.sair{font-size:11.5px;color:#93A1B5;border:1px solid rgba(255,255,255,.2);border-radius:16px;
  padding:4px 11px}
.sair:hover{color:#fff;border-color:#fff}

/* carregando */
.carregando{position:fixed;inset:0;background:var(--paper);display:none;place-items:center;
  z-index:90;gap:12px;font-family:var(--disp);font-size:15px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);grid-auto-flow:column}
.carregando.on{display:grid}
.carregando span{width:17px;height:17px;border:2.5px solid var(--line);border-top-color:var(--gold);
  border-radius:50%;animation:gira .7s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.carregando span{animation-duration:2s}}

@media(max-width:520px){
  .usuario{width:100%;margin:8px 0 0;order:3}
  .hd{flex-wrap:wrap}
}