/* =====================================================================
   MM Pedidos — VISUAL NOVO (proposta v22)
   Só aparência: nenhuma função, botão ou aba muda. Carrega depois do app.css.
   ===================================================================== */
:root{
  --bg:#F3F4F6; --card:#FFFFFF; --soft:#F7F8FA; --soft2:#EEF0F3; --col:#ECEEF1;
  --text:#14161B; --muted:#646A75; --line:#E4E7EB; --line-2:#D5D9DF;
  --ink:#15171C; --ink-2:#22252C;
  --red:#E3141B; --red-2:#C8101A; --red-soft:#FDECEC;
  --ok:#11845A; --ok-soft:#E4F6EE; --warn:#B26A00; --warn-soft:#FFF3DF; --blue:#2563EB; --blue-soft:#E8EFFE;
  --radius:16px;
  --shadow:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.06);
  --shadow-md:0 4px 12px -2px rgba(16,24,40,.08),0 2px 4px -2px rgba(16,24,40,.05);
  --shadow-lg:0 24px 48px -12px rgba(16,24,40,.25);
  --ring:0 0 0 4px rgba(227,20,27,.14);
  --display:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
  --shell:#0E1013; --shell-2:#16191E; --shell-line:rgba(255,255,255,.07); --shell-tx:#A9AFB9;
  --side:236px; --top:62px;
}
html[data-theme="dark"]{
  --bg:#0A0B0E; --card:#13161A; --soft:#191C21; --soft2:#20242A; --col:#0F1115;
  --text:#ECEDF0; --muted:#949AA5; --line:#23272E; --line-2:#2E333B;
  --ink:#ECEDF0; --red-soft:#2E1214; --red-2:#FF5A60;
  --ok:#34D399; --ok-soft:#0E2A1F; --warn:#F5B44A; --warn-soft:#2E2210; --blue:#7AA7FF; --blue-soft:#131F36;
  --shadow:0 1px 2px rgba(0,0,0,.5);
  --shadow-md:0 6px 18px -4px rgba(0,0,0,.55);
  --shadow-lg:0 30px 60px -12px rgba(0,0,0,.7);
  --shell:#08090B; --shell-2:#111317;
}
body{font-size:14px;letter-spacing:-.003em;font-feature-settings:"cv11","ss01"}
::selection{background:rgba(227,20,27,.18)}
*{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}

/* ---------- BOTÕES ---------- */
.btn{border-radius:11px;padding:9px 15px;font-weight:650;font-size:13.5px;letter-spacing:-.005em;box-shadow:0 1px 2px rgba(16,24,40,.08);transition:background .15s,box-shadow .15s,transform .06s,filter .15s}
.btn:hover{filter:brightness(1.08)}
.btn:focus-visible{outline:0;box-shadow:var(--ring)}
.btn.red{background:linear-gradient(180deg,#EE2129 0%,#D8121A 100%);box-shadow:0 1px 2px rgba(200,16,26,.35),inset 0 1px 0 rgba(255,255,255,.18)}
.btn.green{background:linear-gradient(180deg,#16A066,#0F8655);box-shadow:0 1px 2px rgba(15,134,85,.35),inset 0 1px 0 rgba(255,255,255,.18)}
.btn.wa{background:linear-gradient(180deg,#25C063,#1AA352)}
.btn.ghost{background:var(--card);border-color:var(--line-2);color:var(--text)}
.btn.ghost:hover{background:var(--soft);border-color:var(--muted)}
.btn.danger{background:var(--card);border-color:color-mix(in srgb,var(--red) 30%,var(--line))}
.btn.danger:hover{background:var(--red-soft);filter:none}
.btn.sm{padding:6px 11px;font-size:12.5px;border-radius:9px}
.icon-btn{border-radius:10px;transition:background .15s}

/* ---------- CAMPOS ---------- */
label{font-size:11.5px;font-weight:650;letter-spacing:.35px;color:var(--muted)}
input[type=text],input[type=password],input[type=number],input[type=date],input[type=tel],input[type=search],select,textarea{
  border-radius:11px;border-color:var(--line-2);padding:10px 12px;background:var(--card);box-shadow:0 1px 2px rgba(16,24,40,.04)}
input:hover,select:hover,textarea:hover{border-color:color-mix(in srgb,var(--muted) 55%,var(--line-2))}
input:focus,select:focus,textarea:focus{border-color:var(--red);box-shadow:var(--ring)}
input[type=search]{padding-left:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23878D98' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:12px center}
select{appearance:none;-webkit-appearance:none;padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23878D98' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.box{border:1px dashed var(--line-2);border-radius:14px;background:var(--soft)}
.check input,.big-check input{accent-color:var(--red)}

/* ---------- CABEÇALHO ---------- */
.topbar{height:var(--top);padding:0 18px;gap:12px;border-bottom:0;
  background:radial-gradient(420px 120px at 0% 0%,rgba(227,20,27,.22),transparent 70%),var(--shell);box-shadow:inset 0 -1px 0 var(--shell-line)}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--red) 0%,rgba(227,20,27,.35) 30%,transparent 70%)}
.topbar .brand img{height:42px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.topbar .brand b{font-family:var(--display);font-size:16px;font-weight:800;letter-spacing:-.01em}
.topbar .brand small{color:#8B919C}
.topbar select{background-color:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:#fff;border-radius:10px;font-weight:600;box-shadow:none}
.topbar select:hover{background-color:rgba(255,255,255,.1)}
.topbar select option{color:#111;background:#fff}
.user-chip{padding:4px 12px 4px 4px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.user-chip .who{font-weight:650}
.user-chip .who small{color:#8B919C}
.avatar{background:linear-gradient(135deg,#F0353C,#B70E15);box-shadow:0 0 0 2px rgba(255,255,255,.08)}
.topbar .icon-btn{width:38px;height:38px;color:#fff;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.topbar .icon-btn:hover{background:rgba(255,255,255,.12)}

/* ---------- MENU ---------- */
.nav-wrap{background:var(--shell-2);box-shadow:inset 0 -1px 0 var(--shell-line)}
.nav{padding:6px 10px;gap:4px}
.nav a{color:var(--shell-tx);padding:8px 13px;border:0;border-radius:10px;font-weight:600;font-size:13.5px;transition:background .15s,color .15s}
.nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.nav a.active{color:#fff;background:linear-gradient(180deg,rgba(227,20,27,.32),rgba(227,20,27,.18));box-shadow:inset 0 0 0 1px rgba(255,80,86,.35)}
.nav .sep{background:var(--shell-line)}
.nav-arrow.left{background:linear-gradient(90deg,var(--shell-2) 55%,transparent)}
.nav-arrow.right{background:linear-gradient(270deg,var(--shell-2) 55%,transparent)}

main{padding-top:20px}
/* computador: menu vira barra lateral (mesmos itens, mesma ordem) */
@media(min-width:1100px){
  .topbar{position:fixed;left:0;right:0;top:0}
  .nav-wrap{position:fixed;top:var(--top);left:0;bottom:0;width:var(--side);z-index:25;box-shadow:inset -1px 0 0 var(--shell-line);overflow-y:auto}
  .nav{flex-direction:column;overflow:visible;padding:14px 12px 30px;gap:2px;cursor:default!important}
  .nav a{padding:9px 12px;white-space:nowrap}
  .nav a.active{background:linear-gradient(90deg,rgba(227,20,27,.30),rgba(227,20,27,.08));box-shadow:inset 3px 0 0 var(--red)}
  .nav .sep{height:1px;width:auto;margin:10px 6px}
  .nav-arrow{display:none!important}
  main{margin-left:var(--side);padding-top:calc(var(--top) + 22px);padding-left:26px;padding-right:26px}
}

/* ---------- PÁGINA ---------- */
.page-head{margin-bottom:18px;gap:10px}
.page-head h2{font-family:var(--display);font-size:22px;font-weight:800;letter-spacing:-.02em}
.toolbar{gap:8px}

/* ---------- PAINÉIS E INDICADORES ---------- */
.panel{border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow);padding:18px}
.panel h3{font-family:var(--display);font-size:15px;font-weight:750;letter-spacing:-.01em;margin-bottom:14px}
.grid{gap:16px}
.kpis,.cx-kpis{gap:12px}
.kpi{position:relative;border:1px solid var(--line);border-top:1px solid var(--line);border-radius:14px;padding:16px 16px 14px;box-shadow:var(--shadow)}
.kpi::before{content:"";position:absolute;left:16px;top:0;width:32px;height:3px;border-radius:0 0 4px 4px;background:var(--c,var(--red))}
.kpi{background:radial-gradient(180px 80px at 100% 0%,color-mix(in srgb,var(--c,var(--red)) 9%,transparent),transparent 70%),var(--card)}
.kpi .n{font-family:var(--display);font-weight:800;letter-spacing:-.025em;font-variant-numeric:tabular-nums;margin-top:2px}
.kpi .l{font-size:11.5px;font-weight:650;letter-spacing:.4px;margin-top:4px}
.kpi .sub{font-size:12px}
.mini-stats{gap:8px}
.mini-stats div{background:var(--soft);border:1px solid var(--line);border-bottom:3px solid var(--c);border-radius:10px;padding:8px 2px}
.mini-stats b{font-family:var(--display);font-size:18px}
.now-item{border-radius:10px;border:1px solid var(--line);background:var(--soft)}
.feed-item{border-bottom-color:var(--line);padding:10px 4px}
.unit-card .uh h3{font-size:16px}

/* ---------- QUADRO DE PEDIDOS ---------- */
.board{gap:14px}
.col{background:var(--col);border:1px solid var(--line);border-radius:16px;padding:10px}
.col-head{font-size:12px;letter-spacing:.5px;padding:4px 6px 12px}
.col-head .dot{width:9px;height:9px;box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 20%,transparent)}
.col-head .count{background:var(--card);border:1px solid var(--line);font-weight:750}
.col-list{gap:10px}
.card{border-radius:14px;border:1px solid var(--line);border-left:1px solid var(--line);box-shadow:var(--shadow);padding:12px 13px;position:relative;transition:transform .12s,box-shadow .15s,border-color .15s}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--line-2)}
.card.late{border-left:1px solid var(--line)}
.card.late::before{content:"";position:absolute;left:-1px;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:var(--red)}
.card .client{font-weight:750;letter-spacing:-.01em}
.card .code{font-variant-numeric:tabular-nums}
.tag,.paytag,.lvl{border-radius:7px;font-weight:750;letter-spacing:.2px;padding:3px 8px}
.pill{font-weight:650;padding:4px 10px}
.status-tabs button,.subtabs button,.period button{border-radius:10px;font-weight:650;border-color:var(--line-2);background:var(--card);box-shadow:0 1px 2px rgba(16,24,40,.04);transition:background .15s,border-color .15s}
.status-tabs button:hover,.subtabs button:hover,.period button:hover{border-color:var(--muted)}
.status-tabs button.on,.subtabs button.on,.period button.on{background:var(--ink);color:var(--card);border-color:var(--ink);box-shadow:0 2px 6px -1px rgba(16,24,40,.25)}
.seg label{border-radius:10px;font-weight:650;border-color:var(--line-2)}
.seg input:checked+label{background:var(--ink);color:var(--card);border-color:var(--ink)}
html[data-theme="dark"] .seg input:checked+label,html[data-theme="dark"] .status-tabs button.on,html[data-theme="dark"] .period button.on,html[data-theme="dark"] .subtabs button.on{background:#ECEDF0;color:#0E1013;border-color:#ECEDF0}

/* ---------- TABELAS ---------- */
.table-wrap{border-radius:12px}
table{background:transparent}
th,td{padding:11px 12px;border-bottom:1px solid var(--line)}
th{background:var(--soft);font-size:11px;font-weight:700;letter-spacing:.5px;color:var(--muted)}
thead th:first-child{border-top-left-radius:10px}
thead th:last-child{border-top-right-radius:10px}
tbody tr{transition:background .12s}
tbody tr:hover td{background:color-mix(in srgb,var(--soft) 70%,transparent)}
tbody tr:last-child td{border-bottom:0}
td{font-variant-numeric:tabular-nums}

/* ---------- JANELAS ---------- */
.modal-bg{background:rgba(10,12,16,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal{border-radius:20px;border:1px solid var(--line);box-shadow:var(--shadow-lg)}
.modal-head{padding:18px 20px;border-bottom:1px solid var(--line)}
.modal-head h3{font-family:var(--display);font-weight:800;letter-spacing:-.015em;font-size:18px}
.modal-body{padding:20px}
.modal-foot{background:var(--soft);border-top:1px solid var(--line);border-radius:0 0 20px 20px;padding:14px 20px}
.section-t{font-size:11.5px;letter-spacing:.6px;font-weight:750}
.file,.resp-item,.cat-item,.big-check,.aviso{border-radius:12px}
.resp-item{border:1px solid var(--line)}
.timeline{border-left-color:var(--line-2)}
.timeline div::before{box-shadow:0 0 0 3px var(--card),0 0 0 5px color-mix(in srgb,var(--red) 25%,transparent)}
.alert{border-radius:12px;padding:11px 14px}
.drop{border-radius:14px;border-color:var(--line-2);background:var(--soft);transition:border-color .15s,background .15s}
.chip{background:var(--soft2);border:1px solid var(--line)}
.suggest-list{border-radius:12px;box-shadow:var(--shadow-md)}
.item-row,.q-row,.cb-row{border-radius:12px;background:var(--soft)}
.sumbox{border-radius:14px;background:linear-gradient(135deg,#15171C,#262A32);box-shadow:var(--shadow-md)}
.paybox{border-radius:14px}
.paybox .bal div{border-radius:10px;border:1px solid var(--line)}

/* ---------- GRÁFICOS ---------- */
.bar-track{height:10px;border-radius:999px}
.bar-fill{border-radius:999px;background:linear-gradient(90deg,#B90E15,#F0353C)}
.bar-row{gap:12px}
.bar-row .lb{font-weight:600;color:var(--text)}
.cols{gap:4px;border-bottom-color:var(--line-2);background:repeating-linear-gradient(to top,transparent 0,transparent 44px,var(--line) 44px,var(--line) 45px)}
.cols .c .f{border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#F0353C,#C4101A)}
.health{height:10px}

/* ---------- CALCULADORA ---------- */
.calc-tipo{border:1px solid var(--line);border-radius:16px;transition:border-color .15s,box-shadow .15s,transform .1s}
.calc-tipo:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.calc-tipo.on{border-color:var(--red);box-shadow:0 0 0 3px rgba(227,20,27,.12)}
.calc-tipo b{font-family:var(--display);font-weight:750}
.calc-total{border-radius:16px;background:radial-gradient(260px 120px at 100% 0%,rgba(227,20,27,.35),transparent 70%),linear-gradient(135deg,#15171C,#23262D);box-shadow:var(--shadow-md)}
.calc-total b{font-family:var(--display);letter-spacing:-.03em}

/* ---------- AVISOS / ESTOQUE / CAIXA / BANCOS ---------- */
.aviso{border:1px solid var(--line);box-shadow:var(--shadow);padding:14px}
.aviso.r,.aviso.y,.aviso.k,.aviso.b{border-left-width:4px}
.lvl.esgotado{background:#15171C}
html[data-theme="dark"] .lvl.esgotado{background:#ECEDF0;color:#0E1013}
.month-nav b{font-family:var(--display);font-weight:750}
.bk-card{border-top:1px solid var(--line);position:relative;overflow:hidden}
.bk-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--blue)}
.bk-card.dinheiro::before{background:var(--ok)}
.bk-card.total::before{background:linear-gradient(90deg,var(--red),#7A0A0F)}
.bk-bal{letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.bk-name{font-family:var(--display);font-weight:750}

/* ---------- CHAT ---------- */
.wa-wrap{border-radius:18px;border:1px solid var(--line)}

/* ---------- LOGIN ---------- */
.login{background:radial-gradient(900px 520px at 15% -10%,rgba(227,20,27,.55),transparent 60%),radial-gradient(700px 500px at 110% 110%,rgba(122,10,15,.6),transparent 60%),#0B0C0F}
.login-card{border-radius:22px;background:rgba(22,24,29,.82);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 30px 80px rgba(0,0,0,.55);padding:32px 28px}
.login-card h1{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.01em}
.login-card input{border-radius:12px}

/* ---------- AVISOS FLUTUANTES ---------- */
.toast{border-radius:12px;box-shadow:var(--shadow-lg);font-weight:550}
.chat-pop{border-radius:14px;border-left:0;box-shadow:var(--shadow-lg),inset 3px 0 0 var(--red);background:#16191E}

/* ---------- MODO ESCURO: ajustes finos ---------- */
html[data-theme="dark"] .btn:not(.red):not(.green):not(.ghost):not(.danger):not(.wa){background:#252931;color:#F1F2F4;border-color:#323741}
html[data-theme="dark"] .btn.ghost{background:var(--soft);border-color:var(--line-2)}
html[data-theme="dark"] .btn.ghost:hover{background:var(--soft2)}
html[data-theme="dark"] input[type=text],html[data-theme="dark"] input[type=password],html[data-theme="dark"] input[type=number],html[data-theme="dark"] input[type=date],html[data-theme="dark"] input[type=tel],html[data-theme="dark"] input[type=search],html[data-theme="dark"] select,html[data-theme="dark"] textarea{background-color:var(--soft)}
html[data-theme="dark"] .panel,html[data-theme="dark"] .card{background:linear-gradient(180deg,#15181D,#121418)}
html[data-theme="dark"] .card:hover{border-color:#3A404A}
html[data-theme="dark"] .sumbox,html[data-theme="dark"] .calc-total{border:1px solid var(--line-2)}

/* ---------- CELULAR ---------- */
@media(max-width:640px){
  main{padding:14px 12px 60px}
  .topbar{padding:0 12px;gap:8px}
  .topbar .brand img{height:36px}
  .user-chip{padding:3px;background:none;border:0}
  .page-head h2{font-size:20px}
  .panel{padding:14px;border-radius:14px}
  .kpi{padding:14px 12px 12px}
}
@media(max-width:640px){.modal{border-radius:0;border:0}.modal-foot{border-radius:0}}
/* PDF dos relatórios: sem a barra lateral */
@media print{.nav-wrap{display:none!important}main{margin-left:0!important;padding:0!important}.topbar::after{display:none}.panel,.kpi{background:#fff!important}}
/* caixinha preta do total no formulário do pedido: campo de desconto escuro */
.sumbox input[type=number]{background-color:#2A2D34;border-color:#40444D;color:#fff;box-shadow:none}
/* ================= 📢 AVISO DO DESENVOLVEDOR (v24) ================= */
.devn-bg{position:fixed;inset:0;z-index:99990;background:rgba(10,12,16,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:16px;animation:fade .15s}
.devn{width:100%;max-width:480px;background:var(--card);color:var(--text);border-radius:20px;border:1px solid var(--line);box-shadow:var(--shadow-lg),inset 0 4px 0 var(--lv);overflow:hidden;animation:pop .2s}
.devn-top{display:flex;gap:12px;align-items:center;padding:20px 20px 6px}
.devn-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:22px;background:color-mix(in srgb,var(--lv) 14%,var(--card));flex:none}
.devn-top b{display:block;font-family:var(--display);font-size:17px;font-weight:800;letter-spacing:-.01em}
.devn-top small{display:block;color:var(--lv);font-weight:650;font-size:12.5px;margin-top:2px}
.devn-tx{padding:12px 20px 18px;font-size:15px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;max-height:50vh;overflow:auto}
.devn-foot{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:12px 20px;background:var(--soft);border-top:1px solid var(--line)}
.devn-foot .btn{min-width:120px;min-height:42px}
.devn-item{border:1px solid var(--line);border-left:4px solid var(--lv);border-radius:12px;padding:10px 12px;margin-bottom:8px;background:var(--card)}
.devn-item.off{opacity:.6}
.devn-item-h{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:4px}
.devn-item-h .tag{margin-left:auto}
.devn-item-tx{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13.5px;margin-bottom:6px}
@media(max-width:640px){.devn-foot .btn{width:100%}}