:root{
  --rosa:#fde4e6; --rosa2:#f9c9cf; --rosa3:#f0a3ae; --vinho:#8b1e2d; --vinho2:#6d1522;
  --tinta:#2b1a1d; --suave:#6f5a5e; --fundo:#f7f1f1; --card:#fff; --linha:#eddcde;
  --ok:#2f7d4f; --ok-bg:#e3f3e8; --alerta:#a15c00; --alerta-bg:#fff1dc; --erro:#b3261e; --erro-bg:#fde8e7;
  --azul:#2457a6; --azul-bg:#e6eefb; --roxo:#6b3fa0; --roxo-bg:#f0e8fa;
  --r:16px; --sombra:0 10px 30px -14px rgba(139,30,45,.28);
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{font-family:Nunito,system-ui,sans-serif;background:var(--fundo);color:var(--tinta);line-height:1.45;font-size:15px}
h1,h2,h3,.serif{font-family:"EB Garamond",Georgia,serif;font-weight:600;letter-spacing:-.01em}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:var(--vinho)}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* estrutura */
.app{display:grid;grid-template-columns:232px 1fr;min-height:100dvh}
.lado{background:var(--tinta);color:#f4e6e8;padding:18px 12px;position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;gap:4px}
.marca{display:flex;align-items:center;gap:10px;padding:4px 8px 18px}
.marca .selo{width:38px;height:38px;border-radius:50%;background:var(--rosa2);color:var(--vinho);display:grid;place-items:center;font:italic 600 19px "EB Garamond"}
.marca b{font:600 19px "EB Garamond";display:block;line-height:1}
.marca small{font-size:11px;opacity:.65;letter-spacing:.06em;text-transform:uppercase}
.nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;color:inherit;text-decoration:none;font-weight:700;opacity:.82}
.nav a:hover{background:rgba(255,255,255,.07);opacity:1}
.nav a[aria-current=page]{background:var(--vinho);opacity:1}
.nav svg{width:19px;height:19px;flex:none}
.nav .bdg{margin-left:auto;background:var(--rosa2);color:var(--vinho);border-radius:99px;font-size:11px;min-width:20px;height:20px;display:grid;place-items:center;padding:0 6px}
.lado .rodape{margin-top:auto;font-size:13px;opacity:.75;padding:8px}
.lado .rodape a{color:#fff}
main{padding:24px 28px 90px;min-width:0}
.topo{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.topo h1{font-size:34px;color:var(--vinho);line-height:1.05}
.topo p{color:var(--suave)}
.acoes{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.demo-faixa{background:var(--alerta-bg);color:var(--alerta);font-weight:700;font-size:13px;padding:8px 14px;border-radius:12px;margin-bottom:16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.demo-faixa button{margin-left:auto}

/* barra inferior (celular) */
.baixo{display:none}
@media(max-width:900px){
  .app{grid-template-columns:1fr}
  .lado{display:none}
  main{padding:16px 16px 96px}
  .topo h1{font-size:28px}
  .baixo{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--tinta);padding:6px 6px calc(6px + env(safe-area-inset-bottom));overflow-x:auto;scrollbar-width:none;gap:2px}
  .baixo a{flex:1 0 64px;display:flex;flex-direction:column;align-items:center;gap:2px;color:#f4e6e8;text-decoration:none;font-size:11px;font-weight:700;padding:6px 4px;border-radius:10px;opacity:.75;position:relative}
  .baixo a[aria-current=page]{background:var(--vinho);opacity:1}
  .baixo svg{width:20px;height:20px}
  .baixo .bdg{position:absolute;top:2px;right:10px;background:var(--rosa2);color:var(--vinho);border-radius:99px;font-size:10px;min-width:16px;height:16px;display:grid;place-items:center;padding:0 4px}
}

/* componentes */
.btn{border:0;background:var(--vinho);color:#fff;border-radius:99px;padding:10px 16px;font-weight:800;display:inline-flex;align-items:center;gap:6px;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--vinho2)}
.btn.sec{background:#fff;color:var(--vinho);box-shadow:inset 0 0 0 1.5px var(--linha)}
.btn.sec:hover{box-shadow:inset 0 0 0 1.5px var(--vinho)}
.btn.peq{padding:7px 12px;font-size:13px}
.btn.perigo{background:var(--erro-bg);color:var(--erro);box-shadow:none}
.btn.wa{background:#1f8f4e}
.btn:disabled{opacity:.45;cursor:not-allowed}
.card{background:var(--card);border:1px solid var(--linha);border-radius:var(--r);padding:18px}
.card h2{font-size:22px;margin-bottom:10px}
.card h2 small{font:600 13px Nunito;color:var(--suave);margin-left:6px}
.grade{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.g2,.g3{grid-template-columns:1fr}.g4{grid-template-columns:1fr 1fr}}
.kpi{background:var(--card);border:1px solid var(--linha);border-radius:var(--r);padding:16px}
.kpi small{display:block;color:var(--suave);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.kpi b{display:block;font-size:26px;margin-top:4px;font-variant-numeric:tabular-nums}
.kpi span{font-size:13px;color:var(--suave)}
.kpi .sobe{color:var(--ok);font-weight:700}
.kpi .desce{color:var(--erro);font-weight:700}
.vazio{text-align:center;color:var(--suave);padding:28px 10px}
.nota{color:var(--suave);font-size:13px}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}

.st{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800;padding:3px 10px;border-radius:99px;white-space:nowrap}
.st::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.st.novo{background:var(--rosa);color:var(--vinho)}
.st.conf{background:var(--azul-bg);color:var(--azul)}
.st.prod{background:var(--alerta-bg);color:var(--alerta)}
.st.pronto{background:var(--roxo-bg);color:var(--roxo)}
.st.ok{background:var(--ok-bg);color:var(--ok)}
.st.canc{background:#eee;color:#666}
.pag{font-size:12px;font-weight:800;padding:3px 9px;border-radius:99px;white-space:nowrap}
.pag.quitado{background:var(--ok-bg);color:var(--ok)}
.pag.parcial{background:var(--alerta-bg);color:var(--alerta)}
.pag.aberto{background:var(--erro-bg);color:var(--erro)}

/* listas e tabelas */
.lista{background:var(--card);border:1px solid var(--linha);border-radius:var(--r);overflow:hidden}
.lin{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--linha)}
.lin:last-child{border-bottom:0}
.lin.click{cursor:pointer}
.lin.click:hover{background:#fffafa}
.lin .t{flex:1;min-width:0}
.lin .t b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lin .t small{color:var(--suave);display:block;font-size:13px}
.mini{width:48px;height:48px;border-radius:12px;background:var(--rosa);overflow:hidden;display:grid;place-items:center;font:italic 600 22px "EB Garamond";color:var(--rosa3);flex:none}
.mini img{width:100%;height:100%;object-fit:cover}
.tabela{width:100%;border-collapse:collapse;font-size:14px}
.tabela th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--suave);padding:10px 12px;border-bottom:1px solid var(--linha);background:#fffafa}
.tabela td{padding:10px 12px;border-bottom:1px solid var(--linha);vertical-align:middle}
.tabela tr:last-child td{border-bottom:0}
.tabela .dir{text-align:right}
.rolar{overflow-x:auto}

/* filtros */
.filtros{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.chip{border:1px solid var(--linha);background:#fff;border-radius:99px;padding:7px 13px;font-weight:700;font-size:13px}
.chip[aria-pressed=true]{background:var(--vinho);color:#fff;border-color:var(--vinho)}
.chip .c{opacity:.7;margin-left:4px}
.busca{flex:1;min-width:180px;max-width:320px;border:1px solid var(--linha);border-radius:99px;padding:9px 14px;background:#fff}
.sel{border:1px solid var(--linha);border-radius:99px;padding:8px 12px;background:#fff;font-weight:700;font-size:13px}

/* quadro (kanban) */
.quadro{display:grid;grid-template-columns:repeat(5,minmax(220px,1fr));gap:12px;overflow-x:auto;padding-bottom:8px}
.col{background:#efe5e6;border-radius:var(--r);padding:10px;min-height:120px}
.col h3{font:800 13px Nunito;text-transform:uppercase;letter-spacing:.05em;color:var(--suave);padding:4px 6px 10px;display:flex;justify-content:space-between}
.pc{background:#fff;border-radius:12px;padding:11px 12px;margin-bottom:8px;border:1px solid var(--linha);cursor:pointer;display:block;width:100%;text-align:left}
.pc:hover{border-color:var(--rosa3)}
.pc b{display:block}
.pc small{display:block;color:var(--suave);font-size:12px}
.pc .r{display:flex;justify-content:space-between;align-items:center;margin-top:6px;gap:6px}

/* formulários e modal */
.ov{position:fixed;inset:0;background:rgba(43,26,29,.45);z-index:50;display:none;align-items:flex-end;justify-content:center}
.ov.on{display:flex}
.folha{background:var(--fundo);width:100%;max-width:640px;max-height:92dvh;overflow:auto;border-radius:20px 20px 0 0;padding:20px 20px calc(20px + env(safe-area-inset-bottom));overscroll-behavior:contain;animation:sobe .25s cubic-bezier(.2,.8,.2,1)}
.folha.larga{max-width:860px}
@media(min-width:700px){.ov{align-items:center}.folha{border-radius:20px}}
@keyframes sobe{from{transform:translateY(24px);opacity:0}}
.folha .hd{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.folha h2{font-size:28px;color:var(--vinho);line-height:1.1}
.x{border:0;background:var(--rosa);width:36px;height:36px;border-radius:50%;font-size:17px;flex:none}
.form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form .full{grid-column:1/-1}
@media(max-width:560px){.form{grid-template-columns:1fr}}
label.cp{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:700}
.in{width:100%;border:1px solid var(--linha);border-radius:12px;padding:10px 12px;background:#fff;font-size:16px;font-weight:400}
.in:focus,.busca:focus{outline:2px solid var(--rosa3);outline-offset:1px}
.erro{color:var(--erro);font-size:13px;font-weight:700}
.rodape-form{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:16px;flex-wrap:wrap}
.check{display:flex;gap:8px;align-items:center;font-weight:700;font-size:14px}
.check input{accent-color:var(--vinho);width:18px;height:18px}
.sw{position:relative;width:44px;height:25px;flex:none;display:inline-block}
.sw input{opacity:0;position:absolute;inset:0;z-index:1;cursor:pointer;margin:0}
.sw i{position:absolute;inset:0;background:#d9c9cb;border-radius:99px;transition:.2s}
.sw i::after{content:"";position:absolute;width:19px;height:19px;left:3px;top:3px;border-radius:50%;background:#fff;transition:.2s}
.sw input:checked+i{background:var(--ok)}
.sw input:checked+i::after{transform:translateX(19px)}
.sw input:focus-visible+i{outline:2px solid var(--vinho);outline-offset:2px}

/* detalhe do pedido */
.etapas{display:flex;gap:4px;margin:4px 0 14px;flex-wrap:wrap}
.etapas button{flex:1 1 90px;border:1px solid var(--linha);background:#fff;border-radius:10px;padding:8px 6px;font-size:12px;font-weight:800;color:var(--suave)}
.etapas button.feito{background:var(--rosa);color:var(--vinho);border-color:var(--rosa2)}
.etapas button.atual{background:var(--vinho);color:#fff;border-color:var(--vinho)}
.itens-ped{list-style:none;padding:0}
.itens-ped li{padding:9px 0;border-bottom:1px dashed var(--linha);display:flex;justify-content:space-between;gap:10px}
.itens-ped small{display:block;color:var(--suave);font-size:12px}
.resumo{display:grid;grid-template-columns:1fr auto;gap:4px 16px;font-size:14px;margin-top:10px}
.resumo b{font-variant-numeric:tabular-nums;text-align:right}

/* agenda */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal .dsem{font-size:12px;font-weight:800;color:var(--suave);text-align:center;padding:4px 0;text-transform:uppercase}
.dia{background:#fff;border:1px solid var(--linha);border-radius:12px;min-height:96px;padding:6px;text-align:left;display:flex;flex-direction:column;gap:3px;font-size:12px;cursor:pointer;width:100%}
.dia .n{font-weight:800;font-size:13px;display:flex;justify-content:space-between}
.dia.fora{opacity:.35}
.dia.fechado{background:#f3ecec}
.dia.bloq{background:repeating-linear-gradient(135deg,#f6eaea 0 6px,#fff 6px 12px)}
.dia.hoje{outline:2px solid var(--vinho)}
.dia .ev{background:var(--rosa);color:var(--vinho);border-radius:6px;padding:2px 5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dia .cap{margin-top:auto;height:4px;border-radius:4px;background:#f0e3e4;overflow:hidden}
.dia .cap i{display:block;height:100%;background:var(--vinho)}
.dia .cap i.cheio{background:var(--erro)}
@media(max-width:680px){.dia{min-height:58px}.dia .ev{display:none}.dia .qt{font-weight:800;color:var(--vinho)}}
@media(min-width:681px){.dia .qt{display:none}}

/* gráfico */
.grafico{position:relative}
.grafico svg{width:100%;height:auto;display:block;overflow:visible}
.grafico .eixo{font:12px Nunito;fill:var(--suave)}
.grafico .grade-l{stroke:#efe2e3;stroke-width:1}
.grafico .barra{fill:var(--vinho);pointer-events:none}
.grafico .barra.atual{fill:var(--rosa3)}
.grafico .alvo{fill:transparent;cursor:pointer}
.grafico .alvo:hover+.barra,.grafico .barra.hover{fill:var(--vinho2)}
.dica{position:absolute;pointer-events:none;background:var(--tinta);color:#fff;font-size:13px;padding:8px 10px;border-radius:10px;white-space:nowrap;transform:translate(-50%,-110%);opacity:0;transition:opacity .12s}
.dica.on{opacity:1}
.barras-h .b{display:grid;grid-template-columns:130px 1fr auto;gap:10px;align-items:center;font-size:14px;padding:5px 0}
.barras-h .trilho{height:10px;background:#f3e8e9;border-radius:6px;overflow:hidden}
.barras-h .trilho i{display:block;height:100%;background:var(--vinho);border-radius:0 4px 4px 0}
@media(max-width:560px){.barras-h .b{grid-template-columns:96px 1fr auto}}

/* login */
.login{max-width:380px;margin:12vh auto;background:#fff;padding:28px;border-radius:var(--r);box-shadow:var(--sombra)}
.login h1{color:var(--vinho);font-size:30px}

.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(16px);background:var(--tinta);color:#fff;padding:11px 18px;border-radius:99px;font-weight:700;opacity:0;transition:.22s;z-index:80;pointer-events:none;max-width:calc(100vw - 32px)}
.toast.on{opacity:1;transform:translateX(-50%)}

/* comanda para imprimir */
#impressao{display:none}
@media print{
  body *{visibility:hidden}
  #impressao,#impressao *{visibility:visible}
  #impressao{display:block;position:absolute;inset:0;padding:12mm;font-size:13pt;color:#000}
  #impressao h1{font-size:22pt}
  #impressao li{margin:6px 0}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* celular: nada pode alargar a tela */
.grade>*{min-width:0}
.kpi b{font-size:clamp(19px,5.2vw,26px);overflow-wrap:anywhere}
@media(max-width:680px){
  .g2,.g3{grid-template-columns:minmax(0,1fr)}
  .lin{flex-wrap:wrap;gap:6px 10px;padding:11px 14px}
  .lin .t{flex:1 1 100%}
  .lin .t b{white-space:normal}
  .card{padding:14px}
  .kpi{padding:13px}
  .topo .acoes{width:100%}
  .filtros .busca{max-width:none;flex:1 1 100%;order:-1}
}