/* PAINEL ALMEJO — preto AMOLED, cartões elegantes, celular primeiro */
:root{
  --preto:#000; --card:#0b0b0d; --card2:#121214; --linha:#1d1d21; --linha2:#2a2a30;
  --txt:#f2f0ee; --txt2:#a8a5a2; --txt3:#6f6c69;
  --acc:#ff4d5e; --acc2:rgba(255,77,94,.16); --accg:linear-gradient(135deg,#ff5866,#c0142c);
  --ok:#2ee08a; --alerta:#f3c35a; --erro:#ff5666;
  --r:16px; --rs:12px;
}
[data-nicho="acougue"]{--acc:#ff4d5e;--acc2:rgba(255,77,94,.16);--accg:linear-gradient(135deg,#ff5866,#c0142c)}
[data-nicho="mercadinho"]{--acc:#2ee08a;--acc2:rgba(46,224,138,.15);--accg:linear-gradient(135deg,#2fd08a,#0b8a55)}
[data-nicho="roupas"]{--acc:#f3c35a;--acc2:rgba(243,195,90,.14);--accg:linear-gradient(135deg,#f3c35a,#c48a22)}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--preto);color:var(--txt);font-family:'Inter',system-ui,sans-serif;font-size:15.5px;line-height:1.45;min-height:100vh}
a{color:var(--acc);text-decoration:none}
h1,h2,h3{letter-spacing:-.01em}
img{max-width:100%}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:#232325;border-radius:9px}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* ---------- estrutura ---------- */
.topo{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(0,0,0,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--linha)}
.topo .titulo{font-size:16px;font-weight:800;display:flex;align-items:center;gap:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topo .sp{flex:1}
.burger{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;border:1px solid var(--linha2);background:var(--card);color:var(--txt);font-size:21px;cursor:pointer}
.logo-mini{width:34px;height:34px;border-radius:10px;background:var(--accg);display:grid;place-items:center;color:#fff;font-size:18px;flex:none}
.corpo{padding:14px}
.menu{position:fixed;z-index:60;top:0;left:0;bottom:0;width:264px;background:#050506;border-right:1px solid var(--linha);transform:translateX(-105%);transition:transform .28s cubic-bezier(.2,.8,.2,1);overflow-y:auto;padding:14px 10px}
.menu.aberto{transform:none}
.menu .cab{display:flex;align-items:center;gap:9px;padding:6px 8px 16px;font-weight:800}
.menu .cab .nome{font-size:13px;color:var(--txt2);font-weight:600;display:block;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu a.item{display:flex;align-items:center;gap:12px;padding:12px 12px;border-radius:14px;color:var(--txt2);font-weight:600;font-size:14.5px;margin-bottom:2px}
.menu a.item i{font-size:21px;width:24px;text-align:center}
.menu a.item.ativo{background:var(--acc2);color:var(--acc)}
.menu a.item:active{transform:scale(.98)}
.menu .sec{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--txt3);padding:14px 10px 6px}
.menu .cm{position:absolute;right:10px;top:10px;width:40px;height:40px;border-radius:12px;border:1px solid var(--linha2);background:var(--card);color:var(--txt);font-size:20px;display:grid;place-items:center;cursor:pointer}
.veil{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:50;opacity:0;pointer-events:none;transition:opacity .25s}
.veil.ativo{opacity:1;pointer-events:auto}

@media(min-width:900px){
  body{display:flex}
  .topo{position:relative;border-bottom:none;justify-content:flex-end;padding:18px 26px 0;z-index:41}
  .topo .titulo{display:none}.burger{display:none}
  .principal{flex:1;min-width:0;display:flex;flex-direction:column}
  .corpo{flex:1;padding:20px 26px 40px}
  .menu{position:sticky;top:0;height:100vh;transform:none;flex:none}
  .cm{display:none}
}
@media(min-width:900px) and (max-width:1100px){.menu{width:220px}.menu a.item span{font-size:13.5px}}

/* ---------- blocos ---------- */
.cartao{background:var(--card);border:1px solid var(--linha);border-radius:var(--r);padding:16px;margin-bottom:12px;animation: subir .45s cubic-bezier(.2,.8,.2,1)}
@keyframes subir{from{opacity:0;transform:translateY(14px)}}
.cartao h3{font-size:14px;font-weight:800;color:var(--txt2);text-transform:uppercase;letter-spacing:.08em;display:flex;align-items:center;gap:8px;margin-bottom:12px}
.cartao h3 i{color:var(--acc);font-size:17px}
.secao{font-size:22px;font-weight:850;margin:18px 2px 12px;display:flex;align-items:center;gap:10px}
.secao i{color:var(--acc);font-size:24px}
.dica{font-size:13.5px;color:var(--txt2)}

.grade{display:grid;gap:10px}
.kpi{background:linear-gradient(180deg,var(--card) 0%,#080809 100%);border:1px solid var(--linha);border-radius:var(--r);padding:15px;animation:subir .45s cubic-bezier(.2,.8,.2,1)}
.kpi .rot{font-size:11.5px;font-weight:700;color:var(--txt2);text-transform:uppercase;letter-spacing:.1em;display:flex;gap:7px;align-items:center}
.kpi .rot i{font-size:16px;color:var(--acc)}
.kpi .num{font-size:30px;font-weight:850;margin-top:6px;font-variant-numeric:tabular-nums;word-break:break-word}
.kpi .num.qq{font-size:26px}
.kpi .sub{font-size:12.5px;color:var(--txt3);margin-top:3px}
.grid-kpi{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.grid-2{grid-template-columns:1fr}.grid-3{grid-template-columns:1fr}
@media(min-width:700px){.grid-kpi{grid-template-columns:repeat(4,1fr)}.grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:repeat(3,1fr)}}

/* gráfico de barras CSS */
.grafico{display:flex;align-items:flex-end;gap:6px;height:150px;padding:6px 2px 0}
.grafico .barra{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.grafico .b{width:100%;max-width:34px;border-radius:8px 8px 3px 3px;background:var(--accg);min-height:3px;transition:height .6s cubic-bezier(.2,.8,.2,1)}
.grafico .l{font-size:10px;color:var(--txt3)}
.grafico .v{font-size:9.5px;color:var(--txt2);font-variant-numeric:tabular-nums}
.leg1{color:var(--ok)}.leg2{color:var(--erro)}

/* lista / tabela */
.lista{display:flex;flex-direction:column;gap:8px}
.li{display:flex;align-items:center;gap:12px;background:var(--card2);border:1px solid var(--linha);border-radius:var(--rs);padding:12px 14px;min-width:0}
.li .li-c{flex:1;min-width:0}
.li .t{font-weight:700;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li .s{font-size:12.5px;color:var(--txt2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li .v{font-weight:800;font-size:15.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.li i.ici{font-size:22px;color:var(--acc);flex:none}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:20px;background:var(--acc2);color:var(--acc)}
.badge.ok{background:rgba(46,224,138,.13);color:var(--ok)}
.badge.alerta{background:rgba(243,195,90,.13);color:var(--alerta)}
.badge.err{background:rgba(255,86,102,.14);color:var(--erro)}
.badge.zin{background:rgba(255,255,255,.08);color:var(--txt2)}
.acoes{display:flex;gap:8px;flex-wrap:wrap}

/* formulários */
label.rot{display:block;font-size:12px;font-weight:700;color:var(--txt2);margin:12px 2px 5px;text-transform:uppercase;letter-spacing:.06em}
input,select,textarea{width:100%;height:48px;border-radius:var(--rs);border:1px solid var(--linha2);background:#070708;color:var(--txt);font:inherit;font-size:16px;padding:0 14px;outline:0;transition:border-color .15s}
textarea{height:auto;min-height:84px;padding:12px 14px}
input:focus,select:focus,textarea:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc2)}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--txt3) 50%),linear-gradient(135deg,var(--txt3) 50%,transparent 50%);background-position:calc(100% - 19px) 22px,calc(100% - 13px) 22px;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.camp2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.botao{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:0 20px;border:0;border-radius:14px;font:inherit;font-size:15.5px;font-weight:800;color:#fff;background:var(--accg);cursor:pointer;box-shadow:0 12px 28px rgba(0,0,0,.55);transition:transform .12s,opacity .15s;width:100%}
.botao:active{transform:scale(.97)}
.botao.ld{opacity:.6;pointer-events:none}
.botao .gi{animation:gira 1s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.botao.sec{background:var(--card2);border:1px solid var(--linha2);box-shadow:none;color:var(--txt)}
.botao.mini{min-height:40px;padding:0 14px;font-size:13px;border-radius:11px;width:auto}
.botao.perigo{background:linear-gradient(135deg,#ff5666,#a00f22)}
.botao.zap{background:linear-gradient(135deg,#25d366,#128c7e)}

/* modal */
.modal{position:fixed;inset:0;z-index:80;display:none;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.72);backdrop-filter:blur(4px)}
.modal.aberto{display:flex}
.modal .j{width:min(560px,100%);max-height:92vh;overflow-y:auto;background:#0e0e10;border:1px solid var(--linha2);border-radius:22px 22px 0 0;padding:18px;animation:sobe .3s cubic-bezier(.2,.8,.2,1)}
@keyframes sobe{from{opacity:0;transform:translateY(50px)}}
@media(min-width:700px){.modal .j{border-radius:22px;margin-bottom:8vh}}
.modal .j h2{font-size:18px;font-weight:850;display:flex;align-items:center;gap:9px;margin-bottom:14px}
.modal .j h2 i{color:var(--acc)}
.modal .fim{display:flex;gap:10px;margin-top:16px}

/* estado vazio e telas */
.vazio{text-align:center;padding:38px 18px;color:var(--txt2)}
.vazio i{font-size:52px;color:var(--acc);opacity:.85}
.vazio .t{font-weight:800;color:var(--txt);font-size:16.5px;margin:10px 0 4px}
.vazio p{font-size:13.5px;max-width:340px;margin:0 auto}
.tela-cheia{min-height:100%;display:flex;align-items:center;justify-content:center;padding:18px}

/* toasts */
.toasts{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);z-index:99;display:flex;flex-direction:column;gap:8px;width:min(420px,94vw)}
.toast{background:#101013;border:1px solid var(--linha2);border-left:4px solid var(--ok);border-radius:12px;padding:12px 14px;font-size:14px;box-shadow:0 18px 45px rgba(0,0,0,.65);animation:sobe .3s}
.toast.err{border-left-color:var(--erro)}
.toast.alerta{border-left-color:var(--alerta)}

/* receibo */
#recibo{display:none}
#recibo.area-imprimir{display:block;position:fixed;inset:0;background:#000;z-index:200;overflow:auto;padding:16px}
@media print{
  body{background:#fff!important;color:#000!important}
  body *{visibility:hidden}
  #recibo.area-imprimir, #recibo.area-imprimir *{visibility:visible}
  #recibo.area-imprimir{position:static;background:#fff!important;color:#000!important;padding:8px}
  #recibo .nb{display:none}
}
#recibo .ticket{font-family:'Courier New',monospace;color:#000;background:#fff;max-width:320px;margin:auto;padding:16px;font-size:13px;line-height:1.5;white-space:pre-wrap}

.util{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.bk{background:var(--card2);border:1px solid var(--linha);border-radius:var(--rs);padding:12px 14px;font-family:'Courier New',monospace;color:var(--txt);font-size:12px;word-break:break-all;line-height:1.5}
.copiado{border-color:var(--ok)!important;color:var(--ok)}