/* ══════════════════════════════════════════════════════════════
   MULTILAVE ESTOFADOS — painel de atendimento
   Reciclado do painel do Atacadão dos Móveis (que veio do da
   Vitalora): menu em cartão, topo em cartão, conteúdo em cartões,
   com a paleta e as fontes do site da Multilave:

     --prim   azul do site/logo — botões, abas, chaves, gráfico
     --verm   laranja escuro — o que pede atenção, selos
     --ouro   laranja da logo — destaque, filtros, modo demonstração
   ══════════════════════════════════════════════════════════════ */
:root{
 --prim:#264EA0; --prim-esc:#1A3A7E; --prim-mid:#264EA0; --prim-2:#4F78CF;
 --prim-claro:#EBF0FA; --prim-claro-2:#D6E1F5;
 --verm:#E2671A; --verm-esc:#C2550F; --verm-claro:#FFEEE0;
 --ouro:#FA8C38; --ouro-esc:#9A4A0C; --ouro-claro:#FFF1E4; --ouro-txt:#2B1503;
 --tinta:#132A4B; --corpo:#47546A; --suave:#7F8A9C;
 --fundo:#EFF0EC; --cartao:#FFFFFF; --foto:#F3F4F1; --campo:#F6F7F4;
 --linha:#E1E4E6; --linha-2:#ECEEEE;
 --azul:#2E62C9; --azul-bg:#EAF0FC;
 --ambar:#A66A0E; --ambar-bg:#FCF1DF;
 --roxo:#6A4BC4; --roxo-bg:#F0ECFB;
 --vermelho:#C4231F; --vermelho-bg:#FDEAE8;
 --ok:#127A47; --ok-bg:#E2F5EA;
 --sombra:0 1px 2px rgba(19,42,75,.04),0 6px 20px -12px rgba(19,42,75,.16);
 --sombra-alta:0 2px 6px rgba(19,42,75,.06),0 28px 60px -24px rgba(19,42,75,.32);
 --mola:cubic-bezier(.16,1,.3,1);
 --suave-in:cubic-bezier(.65,0,.35,1);
 --r:18px; --r-p:12px;
 --menu:264px;
 --titulo:'Bricolage Grotesque','Plus Jakarta Sans',sans-serif;
}
:root[data-tema="escuro"]{
 --tinta:#EEF1F8; --corpo:#BAC2D4; --suave:#8790A6;
 --fundo:#08101D; --cartao:#111B2E; --foto:#18233A; --campo:#162137;
 --linha:#243251; --linha-2:#1B2741;
 --prim:#3561C4; --prim-esc:#2A4FA6; --prim-mid:#9DB6F5; --prim-2:#6F8FE0;
 --prim-claro:#17244A; --prim-claro-2:#1F3062;
 --verm:#F07B2E; --verm-claro:#3A2010; --ouro-claro:#34210F; --ouro-esc:#FFB27A;
 --azul:#8BB0F5; --azul-bg:#18243B; --ambar:#E9B25A; --ambar-bg:#2E2413;
 --roxo:#B8A5F2; --roxo-bg:#241E38; --vermelho:#F58A7E; --vermelho-bg:#381A1A;
 --ok:#6FD6A0; --ok-bg:#12301F;
 --sombra:0 1px 2px rgba(0,0,0,.3),0 8px 22px -14px rgba(0,0,0,.6);
 --sombra-alta:0 2px 6px rgba(0,0,0,.35),0 28px 60px -24px rgba(0,0,0,.8);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--fundo);color:var(--corpo);
 font:400 14px/1.5 'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;-webkit-font-smoothing:antialiased;
 transition:background .5s ease,color .5s ease}
img{display:block;max-width:100%}
svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;
 stroke-linecap:round;stroke-linejoin:round}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;color:var(--tinta);font-family:var(--titulo);letter-spacing:-.02em;line-height:1.15}
p{margin:0}
.num{font-variant-numeric:tabular-nums}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--linha);border-radius:8px}
::-webkit-scrollbar-track{background:transparent}


/* ══ ESTRUTURA ═════════════════════════════════════════════════ */
.app{display:grid;grid-template-columns:var(--menu) 1fr;gap:18px;padding:18px;height:100vh}
.cartao{background:var(--cartao);border-radius:var(--r);box-shadow:var(--sombra);
 transition:background .5s ease,box-shadow .5s ease}

/* menu lateral */
.menu{display:flex;flex-direction:column;padding:20px 16px 18px;overflow:auto}
.marca{display:flex;align-items:center;gap:10px;padding:0 10px 18px}
.marca img{height:64px;width:auto}
.rot-menu{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
 color:var(--suave);padding:14px 12px 8px}
.nav{display:flex;flex-direction:column;gap:3px}
.nav-i{position:relative;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;
 font-weight:500;color:var(--corpo);transition:background .25s ease,color .25s ease}
.nav-i svg{width:19px;height:19px;color:var(--suave);transition:color .25s ease}
.nav-i:hover{background:var(--campo);color:var(--tinta)}
.nav-i.on{background:var(--prim-claro);color:var(--prim-mid);font-weight:700}
.nav-i.on svg{color:var(--prim-mid)}
.nav-i .seta{margin-left:auto;width:15px;height:15px;transition:transform .4s var(--mola)}
.nav-g.aberto .nav-i .seta{transform:rotate(180deg)}
.nav-i .bdg{margin-left:auto;min-width:22px;height:20px;padding:0 7px;border-radius:99px;background:var(--verm);
 color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center}
.nav-i .bdg.pulso{animation:pulso .9s var(--mola)}
@keyframes pulso{0%{transform:scale(1)}35%{transform:scale(1.35)}100%{transform:scale(1)}}
.sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--mola)}
.nav-g.aberto .sub{grid-template-rows:1fr}
.sub>div{overflow:hidden;display:flex;flex-direction:column;gap:2px;padding-left:42px}
.sub a{position:relative;padding:8px 12px;border-radius:10px;color:var(--corpo);font-size:13.5px;
 transition:background .25s ease,color .25s ease}
.sub a:first-child{margin-top:4px}
.sub a:hover{color:var(--tinta);background:var(--campo)}
.sub a.on{background:var(--ouro-claro);color:var(--ouro-esc);font-weight:700}
.menu-pe{margin-top:auto;display:flex;flex-direction:column;gap:3px;padding-top:18px}
.menu-pe .sair{color:var(--vermelho)}
.menu-pe .sair svg{color:var(--vermelho)}
.loja-ao-vivo{margin:14px 4px 6px;padding:14px;border-radius:14px;background:var(--prim-claro);
 display:flex;gap:11px;align-items:center;min-width:0}
.loja-ao-vivo>div{min-width:0}
.loja-ao-vivo .ponto{width:9px;height:9px;border-radius:50%;background:#22A35A;flex:none;
 box-shadow:0 0 0 0 rgba(34,163,90,.5);animation:vivo 2s infinite}
@keyframes vivo{0%{box-shadow:0 0 0 0 rgba(34,163,90,.5)}70%{box-shadow:0 0 0 9px rgba(34,163,90,0)}100%{box-shadow:0 0 0 0 rgba(34,163,90,0)}}
.loja-ao-vivo b{display:block;color:var(--tinta);font-size:13px}
.loja-ao-vivo span{font-size:11.5px;color:var(--suave);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* coluna principal */
.principal{display:flex;flex-direction:column;gap:18px;min-width:0;min-height:0}
.topo{display:flex;align-items:center;gap:18px;padding:16px 20px 16px 26px}
.topo-t{min-width:0}
.topo-t h1{font-size:24px;font-weight:800;display:flex;align-items:center;gap:10px;white-space:nowrap}
.topo-t p{font-size:13px;color:var(--suave);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.busca{position:relative;margin-left:auto;width:clamp(200px,22vw,360px)}
.busca svg{position:absolute;left:15px;top:50%;translate:0 -50%;color:var(--suave);width:17px;height:17px}
.busca input{width:100%;height:44px;border-radius:99px;border:1px solid transparent;background:var(--campo);
 padding:0 16px 0 42px;outline:0;transition:border-color .25s ease,background .25s ease,box-shadow .25s ease}
.busca input:focus{border-color:var(--prim);background:var(--cartao);box-shadow:0 0 0 4px var(--prim-claro)}
.icone-bt{position:relative;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
 border:1px solid var(--linha);color:var(--corpo);transition:all .25s ease}
.icone-bt:hover{background:var(--campo);color:var(--tinta)}
.icone-bt .ponto{position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;
 background:var(--verm);border:2px solid var(--cartao);transform:scale(0);transition:transform .4s var(--mola)}
.icone-bt.tem .ponto{transform:scale(1)}
.icone-bt.toca svg{animation:sino 1s ease}
@keyframes sino{0%,100%{rotate:0}15%{rotate:16deg}30%{rotate:-14deg}45%{rotate:10deg}60%{rotate:-6deg}75%{rotate:3deg}}
.icones{display:flex;gap:10px}
.usuario{display:flex;align-items:center;gap:11px;padding:5px 16px 5px 5px;border-radius:99px;border:1px solid var(--linha)}
.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;
 background:var(--prim);color:#fff;font-weight:700;font-size:13px;letter-spacing:.02em}
.usuario b{display:block;color:var(--tinta);font-size:13px;line-height:1.2;white-space:nowrap}
.usuario span{font-size:11.5px;color:var(--suave);white-space:nowrap}

.palco{position:relative;flex:1;min-height:0}
.vista{position:absolute;inset:0;overflow:auto;padding-bottom:10px;visibility:hidden;opacity:0;
 transform:translateY(14px);transition:opacity .45s var(--mola),transform .6s var(--mola),visibility 0s .45s}
.vista.on{visibility:visible;opacity:1;transform:none;transition:opacity .5s var(--mola) .08s,transform .7s var(--mola) .08s,visibility 0s}
.vista.saindo{visibility:visible}
.vista.saindo [data-rv]{opacity:1;transform:none}
[data-rv]{opacity:0;transform:translateY(18px)}
.vista.on [data-rv]{animation:sobe .8s var(--mola) forwards;animation-delay:calc(var(--i,0) * 70ms + 120ms)}
@keyframes sobe{to{opacity:1;transform:none}}

/* ══ PEÇAS COMUNS ══════════════════════════════════════════════ */
.bt{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 20px;border-radius:99px;
 background:var(--prim);color:#fff;font-weight:700;font-size:13.5px;white-space:nowrap;
 box-shadow:0 10px 22px -14px rgba(29,63,148,.9);transition:transform .4s var(--mola),background .25s ease,box-shadow .4s var(--mola)}
.bt:hover{background:var(--prim-esc);transform:translateY(-2px);box-shadow:0 16px 28px -16px rgba(38,78,160,.8)}
.bt:active,.bt.aperta{transform:scale(.96)}
.bt svg{width:17px;height:17px}
.bt-o{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 18px;border-radius:99px;
 border:1px solid var(--linha);background:var(--cartao);color:var(--tinta);font-weight:600;font-size:13.5px;white-space:nowrap;
 transition:border-color .25s ease,background .25s ease,transform .4s var(--mola)}
.bt-o:hover{border-color:var(--prim);color:var(--prim-mid)}
.bt-o svg{width:16px;height:16px}
.bt-o.pq,.bt.pq{height:36px;padding:0 14px;font-size:12.5px}
.pilula{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:99px;font-size:12px;font-weight:600;
 white-space:nowrap;transition:background .4s ease,color .4s ease}
.pilula i{width:7px;height:7px;border-radius:50%;background:currentColor}
.st-novo{background:var(--azul-bg);color:var(--azul)}
.st-pago{background:var(--ok-bg);color:var(--ok)}
.st-separando{background:var(--ambar-bg);color:var(--ambar)}
.st-enviado{background:var(--roxo-bg);color:var(--roxo)}
.st-entregue{background:var(--campo);color:var(--corpo)}
.st-cancelado{background:var(--vermelho-bg);color:var(--vermelho)}
.pilula.troca{animation:troca .7s var(--mola)}
@keyframes troca{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
.cab{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:20px 22px 0}
.tabela-rolo{overflow-x:auto}
.cab h3{font-size:17px;font-weight:700}
.cab p{font-size:12.5px;color:var(--suave)}
.cab .dir{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.seg{display:inline-flex;padding:4px;border-radius:99px;background:var(--campo);gap:2px}
.seg button{height:30px;padding:0 13px;border-radius:99px;font-size:12.5px;font-weight:600;color:var(--suave);
 transition:background .3s ease,color .3s ease,box-shadow .3s ease}
.seg button.on{background:var(--cartao);color:var(--tinta);box-shadow:var(--sombra)}
.mini-thumb{width:40px;height:40px;border-radius:10px;background:var(--foto);display:grid;place-items:center;flex:none;overflow:hidden}
.mini-thumb img{width:100%;height:100%;object-fit:cover}
.link{color:var(--prim-mid);font-weight:700;font-size:12.5px;display:inline-flex;gap:5px;align-items:center}
.link svg{width:14px;height:14px;transition:transform .4s var(--mola)}
.link:hover svg{transform:translateX(3px)}

/* tabela */
.tabela{width:100%;border-collapse:separate;border-spacing:0}
.tabela th{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--suave);text-align:left;
 padding:12px 14px;border-bottom:1px solid var(--linha);white-space:nowrap}
.tabela td{padding:12px 14px;border-bottom:1px solid var(--linha-2);vertical-align:middle;white-space:nowrap}
.tabela tbody tr{transition:background .25s ease}
.tabela tbody tr.clica{cursor:pointer}
.tabela tbody tr.clica:hover{background:var(--campo)}
.tabela tr:last-child td{border-bottom:0}
.tabela .dir{text-align:right}
.tabela tr.chegou td{animation:chegou 2.6s ease}
@keyframes chegou{0%{background:var(--ouro-claro)}70%{background:var(--prim-claro)}100%{background:transparent}}
.tabela tr.entra{animation:entraLinha .7s var(--mola) both}
@keyframes entraLinha{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.cli{display:flex;align-items:center;gap:11px}
.cli .avatar{width:34px;height:34px;font-size:12px}
.cli b{display:block;color:var(--tinta);font-weight:600;font-size:13.5px}
.cli span{font-size:12px;color:var(--suave)}
.pilha{display:flex;align-items:center}
.pilha .mini-thumb{width:34px;height:34px;border-radius:50%;border:2px solid var(--cartao);margin-left:-9px}
.pilha .mini-thumb:first-child{margin-left:0}
.pilha em{font-style:normal;font-size:12px;color:var(--suave);margin-left:8px}
.cod{font-weight:700;color:var(--tinta)}
.canal{display:block;font-size:11.5px;color:var(--suave)}
.canal.site{color:var(--prim-mid);font-weight:600}

/* ══ VISÃO GERAL ═══════════════════════════════════════════════ */
.grade-kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.kpi{padding:20px 22px 18px;position:relative;overflow:hidden}
.kpi-top{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--suave);font-weight:500}
.kpi-ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--prim-claro);color:var(--prim-mid)}
.kpi-ic svg{width:18px;height:18px}
.kpi-v{font:800 28px/1.1 var(--titulo);color:var(--tinta);letter-spacing:-.02em;margin-top:16px}
.kpi-pe{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12px;color:var(--suave)}
.var{display:inline-flex;align-items:center;gap:3px;height:22px;padding:0 8px;border-radius:99px;font-weight:700;font-size:11.5px;
 background:var(--ok-bg);color:var(--ok)}
.var svg{width:12px;height:12px;stroke-width:2.4}
.kpi .spark{position:absolute;right:18px;top:22px;width:72px;height:34px}
.grade-kpi .kpi-top{padding-right:94px;white-space:nowrap}
.kpi-top{min-width:0}
.kpi.pisca .kpi-v{animation:pisca 1.2s ease}
@keyframes pisca{0%{color:var(--tinta)}30%{color:var(--verm)}100%{color:var(--tinta)}}

.linha-2{display:grid;grid-template-columns:1.75fr 1fr;gap:18px;margin-top:18px}
.grafico{position:relative;padding:8px 22px 18px}
.grafico svg{width:100%;height:280px;overflow:visible}
.grafico .eixo text{font-size:11px;fill:var(--suave);font-family:'Plus Jakarta Sans',sans-serif}
.grafico .grade line{stroke:var(--linha-2);stroke-width:1}
.grafico rect,.grafico text{stroke:none}
.grafico .curva{stroke:var(--prim);stroke-width:2.4;fill:none}
:root[data-tema="escuro"] .grafico .curva{stroke:var(--prim-2)}
.grafico .area{fill:url(#g-area)}
.grafico .ref{stroke:var(--suave);stroke-width:1.5;stroke-dasharray:3 5;fill:none;opacity:.55}
.dica{position:absolute;pointer-events:none;background:var(--tinta);color:var(--cartao);border-radius:10px;padding:8px 12px;font-size:12px;
 line-height:1.35;white-space:nowrap;opacity:0;transform:translate(-50%,calc(-100% - 14px));transition:opacity .2s ease}
.dica b{display:block;font-size:14px}
.dica.on{opacity:1}
.legenda{display:flex;gap:16px;font-size:12px;color:var(--suave);align-items:center}
.legenda span{display:inline-flex;align-items:center;gap:7px}
.legenda i{width:18px;height:2px;border-radius:2px;background:var(--prim)}
.legenda i.tr{background:none;border-top:2px dashed var(--suave);height:0;opacity:.7}
.top-lista{padding:6px 22px 18px;display:flex;flex-direction:column}
.top-i{display:grid;grid-template-columns:48px 1fr auto;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--linha-2)}
.top-i:last-child{border-bottom:0}
.top-i .mini-thumb{width:48px;height:48px;border-radius:12px}
.top-i b{color:var(--tinta);font-weight:600;font-size:13.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-i>div{min-width:0}
.top-i .barra{height:6px;border-radius:6px;background:var(--campo);margin-top:7px;overflow:hidden}
.top-i .barra i{display:block;height:100%;border-radius:6px;background:var(--prim);width:0;transition:width 1.4s var(--mola)}
.top-i:first-child .barra i{background:var(--verm)}
.top-i .q{text-align:right;font-size:12px;color:var(--suave)}
.top-i .q b{font-size:14px}
.obj-lista{padding:10px 22px 20px;display:flex;flex-direction:column;gap:13px}
.obj{display:grid;grid-template-columns:150px 1fr 48px;align-items:center;gap:12px;font-size:13px}
.obj span{display:flex;align-items:center;gap:8px;color:var(--tinta);font-weight:500;white-space:nowrap}
.obj span svg{width:16px;height:16px;color:var(--prim-mid)}
.obj .barra{height:10px;border-radius:0 5px 5px 0;background:var(--campo);overflow:hidden}
.obj .barra i{display:block;height:100%;border-radius:0 5px 5px 0;background:var(--prim);width:0;transition:width 1.4s var(--mola)}
.obj:first-child .barra i{background:var(--verm)}
.obj em{font-style:normal;text-align:right;color:var(--corpo);font-weight:700}
.lojas-mini{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 22px 20px}
.lojas-mini div{border:1px solid var(--linha);border-radius:14px;padding:12px 14px}
.lojas-mini b{display:block;color:var(--tinta);font:800 18px/1.2 var(--titulo);margin-top:2px}
.lojas-mini span{font-size:12px;color:var(--suave)}

/* ══ PEDIDOS ═══════════════════════════════════════════════════ */
.resumo-ped{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:18px}
.resumo-ped .kpi{padding:16px 20px}
.resumo-ped .kpi-v{font-size:24px;margin-top:10px}
.abas{display:flex;gap:4px;padding:14px 18px 0;border-bottom:1px solid var(--linha);overflow:auto}
.aba{position:relative;display:flex;align-items:center;gap:8px;padding:10px 12px 14px;font-weight:600;font-size:13.5px;color:var(--suave);
 white-space:nowrap;transition:color .25s ease}
.aba em{font-style:normal;font-size:11.5px;min-width:24px;height:20px;padding:0 7px;border-radius:99px;background:var(--campo);color:var(--corpo);
 display:grid;place-items:center;transition:background .3s ease,color .3s ease}
.aba::after{content:'';position:absolute;left:10px;right:10px;bottom:-1px;height:2.5px;border-radius:3px;background:var(--prim);
 transform:scaleX(0);transition:transform .45s var(--mola)}
.aba:hover{color:var(--tinta)}
.aba.on{color:var(--tinta)}
.aba.on em{background:var(--prim);color:#fff}
.aba.on::after{transform:scaleX(1)}
.barra-ferr{display:flex;gap:10px;align-items:center;padding:14px 18px}
.barra-ferr .busca{margin-left:0;width:280px}
.barra-ferr .busca input{height:38px}
.barra-ferr .dir{margin-left:auto;display:flex;gap:8px}
.pagina{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-top:1px solid var(--linha);font-size:12.5px;color:var(--suave)}
.pags{display:flex;gap:6px}
.pags button{width:32px;height:32px;border-radius:10px;border:1px solid var(--linha);font-weight:600;font-size:12.5px}
.pags button.on{background:var(--prim);color:#fff;border-color:var(--prim)}

/* gaveta do pedido */
.veu{position:fixed;inset:0;background:rgba(10,16,34,.3);backdrop-filter:blur(2px);opacity:0;visibility:hidden;z-index:50;
 transition:opacity .45s ease,visibility 0s .45s}
.veu.on{opacity:1;visibility:visible;transition:opacity .45s ease}
.gaveta{position:fixed;top:18px;right:18px;bottom:18px;width:min(560px,calc(100vw - 36px));z-index:60;display:flex;flex-direction:column;
 background:var(--cartao);border-radius:22px;box-shadow:var(--sombra-alta);transform:translateX(calc(100% + 40px));
 transition:transform .7s var(--mola)}
.gaveta.on{transform:none}
.gav-cab{display:flex;align-items:flex-start;gap:12px;padding:22px 24px 18px;border-bottom:1px solid var(--linha)}
.gav-cab h2{font-size:22px}
.gav-cab p{font-size:12.5px;color:var(--suave);margin-top:4px}
.gav-cab .icone-bt{margin-left:auto}
.gav-corpo{flex:1;overflow:auto;padding:18px 24px}
.gav-pe{display:flex;gap:10px;padding:16px 24px;border-top:1px solid var(--linha);flex-wrap:wrap}
.gav-pe .bt{flex:1}
.bloco{border:1px solid var(--linha);border-radius:16px;padding:16px;margin-bottom:14px}
.bloco h4{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--suave);margin-bottom:12px;
 font-family:'Plus Jakarta Sans',sans-serif}
.bloco .cli .avatar{width:42px;height:42px;font-size:14px}
.bloco .cli b{font-size:15px}
.contato-l{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.bt-wa{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-radius:99px;background:#E4F6EA;color:#137A3A;
 font-weight:700;font-size:12.5px;white-space:nowrap}
.bt-wa svg{width:16px;height:16px}
:root[data-tema="escuro"] .bt-wa{background:#153222;color:#7FD39A}
.end{font-size:13px;line-height:1.55;color:var(--corpo);margin-top:12px;padding-top:12px;border-top:1px dashed var(--linha);display:flex;gap:10px}
.end svg{color:var(--verm);margin-top:2px}
.item-p{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;padding:8px 0}
.item-p .mini-thumb{width:56px;height:56px;border-radius:12px}
.item-p b{display:block;color:var(--tinta);font-weight:600;font-size:13.5px}
.item-p span{font-size:12px;color:var(--suave)}
.totais{margin-top:8px;padding-top:12px;border-top:1px dashed var(--linha);display:flex;flex-direction:column;gap:6px;font-size:13px}
.totais div{display:flex;justify-content:space-between}
.totais .t{font-size:17px;font-weight:800;color:var(--tinta);padding-top:6px;font-family:var(--titulo)}
.totais .gratis{color:var(--ok);font-weight:700}
.totais .desc{color:var(--ok)}
.totais .parc{font-size:12px;color:var(--suave);justify-content:flex-end!important}
.linha-tempo{position:relative;display:flex;flex-direction:column;gap:0}
.lt{position:relative;display:grid;grid-template-columns:28px 1fr auto;gap:12px;padding-bottom:16px}
.lt:last-child{padding-bottom:0}
.lt::before{content:'';position:absolute;left:13px;top:26px;bottom:-2px;width:2px;background:var(--linha)}
.lt:last-child::before{display:none}
.lt::after{content:'';position:absolute;left:13px;top:26px;width:2px;height:0;background:var(--prim);transition:height .7s var(--mola)}
.lt.feito::after{height:calc(100% - 26px)}
.lt:last-child::after{display:none}
.lt .bola{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--linha);background:var(--cartao);
 color:var(--suave);position:relative;z-index:1;transition:all .5s var(--mola)}
.lt .bola svg{width:14px;height:14px;stroke-width:2.2}
.lt.feito .bola{background:var(--prim);border-color:var(--prim);color:#fff}
.lt.atual .bola{border-color:var(--prim);color:var(--prim-mid);box-shadow:0 0 0 5px var(--prim-claro)}
.lt b{display:block;color:var(--tinta);font-size:13.5px;font-weight:600;padding-top:3px}
.lt span{font-size:12px;color:var(--suave)}
.lt time{font-size:12px;color:var(--suave);padding-top:4px}
/* agendamento da entrega (abre no pé da gaveta) */
.agenda-ent{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--mola);flex-basis:100%}
.agenda-ent.on{grid-template-rows:1fr}
.agenda-ent>div{overflow:hidden}
.ag-t{font-size:12px;font-weight:700;color:var(--corpo);margin:2px 0 8px}
.ag-l{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.ag-l .chip{height:auto;min-height:38px;padding:7px 13px;flex-direction:column;align-items:flex-start;gap:0;line-height:1.25;border-radius:12px}
.ag-l .chip small{font-size:11px;color:var(--suave);font-weight:500}
.ag-l .chip.on small{color:rgba(255,255,255,.75)}

/* ══ ENTREGAS ══════════════════════════════════════════════════ */
.quadro-c{padding:6px 18px 18px}
.quadro{display:grid;grid-template-columns:repeat(5,minmax(186px,1fr));gap:12px;overflow-x:auto;padding:12px 4px 4px}
.col-d{background:var(--campo);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:10px;min-height:380px}
.col-d header{display:flex;align-items:baseline;gap:8px;padding:2px 4px 4px}
.col-d header b{color:var(--tinta);font:800 15px/1.2 var(--titulo)}
.col-d header span{font-size:12px;color:var(--suave)}
.col-d header em{margin-left:auto;font-style:normal;font-size:11.5px;font-weight:700;min-width:24px;height:20px;padding:0 7px;border-radius:99px;
 background:var(--cartao);color:var(--corpo);display:grid;place-items:center}
.col-d.hoje{background:var(--prim-claro)}
.col-d.hoje header em{background:var(--prim);color:#fff}
.ent{position:relative;background:var(--cartao);border-radius:14px;padding:12px;box-shadow:var(--sombra);border:1px solid transparent;
 transition:transform .5s var(--mola),box-shadow .5s var(--mola),border-color .3s ease,opacity .4s ease;animation:entraLinha .6s var(--mola) both}
.ent:hover,.ent.h{transform:translateY(-2px);box-shadow:var(--sombra-alta)}
.ent.esc{display:none}
.ent-top{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.ent-top .hora{font:800 13px/1 var(--titulo);color:var(--tinta);display:inline-flex;align-items:center;gap:5px}
.ent-top .hora svg{width:14px;height:14px;color:var(--suave)}
.ent-top .pilula{margin-left:auto;height:22px;font-size:11px;padding:0 9px}
.ent>b{display:block;color:var(--tinta);font-size:13.5px;font-weight:700}
.ent .bairro{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--suave);margin-top:2px}
.ent .bairro svg{width:13px;height:13px;color:var(--verm)}
.ent-item{display:flex;align-items:center;gap:9px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--linha)}
.ent-item .mini-thumb{width:38px;height:38px}
.ent-item span{font-size:12px;color:var(--corpo);line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ent-pe{display:flex;align-items:center;gap:6px;margin-top:10px;flex-wrap:wrap}
.eq{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:99px;font-size:11px;font-weight:700}
.eq1{background:var(--prim-claro);color:var(--prim-mid)}
.eq2{background:var(--ouro-claro);color:var(--ouro-esc)}
.tag-m{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--suave);font-weight:600}
.tag-m svg{width:13px;height:13px}
.ent .concluir{margin-left:auto;height:28px;padding:0 11px;font-size:11.5px}
.ent .concluir svg{width:14px;height:14px}
.ent.feita{opacity:.62}
.ent.feita>b{text-decoration:line-through;text-decoration-color:var(--suave)}
.ent.rota{border-color:var(--roxo)}
.ent.chegou{border-color:var(--ouro);box-shadow:0 0 0 3px var(--ouro-claro),var(--sombra-alta)}
.ent.vira{animation:vira .7s var(--mola)}
@keyframes vira{0%{transform:scale(1)}40%{transform:scale(1.04)}100%{transform:scale(1)}}
.st-rota{background:var(--roxo-bg);color:var(--roxo)}
.st-feita{background:var(--ok-bg);color:var(--ok)}
.st-agendada{background:var(--campo);color:var(--corpo)}
.col-d.hoje .st-agendada{background:var(--cartao)}

/* ══ PRODUTOS ══════════════════════════════════════════════════ */
.prod-lay{display:grid;grid-template-columns:268px 1fr;gap:18px;align-items:start}
.filtros{padding:18px;position:sticky;top:0}
.drop{display:flex;align-items:center;justify-content:space-between;width:100%;height:44px;padding:0 16px;border-radius:12px;
 background:var(--campo);color:var(--tinta);font-weight:700;font-size:13.5px;margin-bottom:10px;transition:background .25s ease}
.drop svg{width:16px;height:16px;color:var(--suave);transition:transform .4s var(--mola)}
.drop.aberto svg{transform:rotate(180deg)}
.drop:hover{background:var(--linha-2)}
.fgrp{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--mola)}
.fgrp.aberto{grid-template-rows:1fr}
.fgrp>div{overflow:hidden}
.fgrp .ck-l{padding:4px 4px 14px;display:flex;flex-direction:column;gap:4px}
.ck{display:flex;align-items:center;gap:10px;padding:6px 6px;border-radius:9px;cursor:pointer;font-size:13.5px;color:var(--corpo);
 transition:background .2s ease}
.ck:hover{background:var(--campo)}
.ck input{display:none}
.ck .cx{width:19px;height:19px;border-radius:6px;border:1.5px solid var(--linha);display:grid;place-items:center;flex:none;
 background:var(--cartao);transition:all .3s var(--mola)}
.ck .cx svg{width:12px;height:12px;stroke-width:3;color:var(--ouro-txt);transform:scale(0);transition:transform .35s var(--mola)}
.ck input:checked+.cx{background:var(--ouro);border-color:var(--ouro)}
.ck input:checked+.cx svg{transform:scale(1)}
.ck input:checked~.tx{color:var(--tinta);font-weight:600}
.ck em{font-style:normal;color:var(--suave);font-size:12px;margin-left:auto}
.ck .tx{white-space:nowrap}
.ck .tx svg{width:15px;height:15px;color:var(--prim-mid);vertical-align:-3px;margin-right:5px}
.faixa-t{font-weight:700;color:var(--tinta);font-size:13.5px;margin:4px 4px 0}
.faixa{position:relative;height:74px;margin:0 24px 0 10px}
.faixa .trilho{position:absolute;left:0;right:0;top:44px;height:4px;border-radius:4px;background:var(--linha)}
.faixa .ativo{position:absolute;top:44px;height:4px;border-radius:4px;background:var(--ouro)}
.faixa .pino{position:absolute;top:37px;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:var(--cartao);
 border:4px solid var(--ouro);cursor:grab;box-shadow:0 2px 6px rgba(0,0,0,.15);touch-action:none}
.faixa .balao{position:absolute;top:4px;translate:-50% 0;background:var(--ouro);color:var(--ouro-txt);font-weight:700;font-size:11.5px;
 padding:4px 9px;border-radius:99px;white-space:nowrap}
.faixa .balao::after{content:'';position:absolute;left:50%;bottom:-4px;translate:-50% 0;border:5px solid transparent;border-bottom:0;border-top-color:var(--ouro)}
.faixa-v{display:grid;grid-template-columns:1fr 14px 1fr;gap:6px;align-items:center;margin:0 4px 16px;color:var(--suave)}
.faixa-v input{height:38px;border-radius:10px;border:1px solid var(--linha);background:var(--cartao);padding:0 10px;width:100%;
 font-size:13px;outline:0;color:var(--tinta)}
.filtros .bt{width:100%;margin-top:6px;height:46px}
.filtros .limpar{display:block;text-align:center;margin-top:10px;font-size:12.5px;color:var(--suave);width:100%}

.vitrine{padding:16px 18px 20px}
.vit-cab{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.migalha{font-size:12px;color:var(--suave);display:flex;align-items:center;gap:6px}
.migalha svg{width:12px;height:12px;rotate:-90deg}
.migalha b{color:var(--tinta);font-weight:600}
.vit-cab .qtd{font-size:12.5px;color:var(--suave);margin-top:2px}
.vit-cab .qtd b{color:var(--tinta)}
.vit-cab .dir{margin-left:auto;display:flex;gap:10px;align-items:center}
.vit-cab .busca{margin:0;width:230px}
.vit-cab .busca input{height:40px}
.chips-ativos{display:flex;gap:8px;flex-wrap:wrap;margin:-4px 0 14px}
.chip-f{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 8px 0 12px;border-radius:99px;background:var(--ouro-claro);
 color:var(--ouro-esc);font-size:12px;font-weight:700;animation:entraLinha .5s var(--mola)}
.chip-f svg{width:13px;height:13px}
.grade-p{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;position:relative}
.card-p{position:relative;border:1px solid var(--linha);border-radius:16px;padding:10px 10px 12px;background:var(--cartao);
 transition:border-color .3s ease,box-shadow .5s var(--mola),transform .5s var(--mola),opacity .45s ease}
.card-p:hover{border-color:transparent;box-shadow:var(--sombra-alta);transform:translateY(-4px)}
.card-p .foto{position:relative;height:184px;border-radius:12px;background:var(--foto);display:grid;place-items:center;overflow:hidden}
.card-p .foto img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--mola)}
.card-p:hover .foto img{transform:scale(1.06)}
.selo{position:absolute;top:10px;left:10px;height:22px;padding:0 9px;border-radius:99px;background:var(--verm);color:#fff;font-size:10px;
 font-weight:800;letter-spacing:.06em;text-transform:uppercase;display:grid;place-items:center;z-index:3;box-shadow:0 4px 10px -4px rgba(0,0,0,.35)}
.selo.ouro{background:var(--ouro);color:var(--ouro-txt)}
.selo.azul{background:var(--prim);color:#fff}
.oculto-tag{position:absolute;top:10px;right:10px;height:22px;padding:0 9px;border-radius:99px;background:var(--tinta);color:var(--cartao);font-size:10.5px;
 font-weight:700;display:flex;align-items:center;gap:5px;z-index:3}
.oculto-tag svg{width:12px;height:12px}
.card-p.oculto .foto img{opacity:.45;filter:grayscale(.7)}
.card-p .amb{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--suave);margin:12px 4px 2px}
.card-p h4{font-size:14px;font-weight:700;margin:0 4px 0;font-family:'Plus Jakarta Sans',sans-serif;letter-spacing:-.01em;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-p .parc{font-size:12px;color:var(--suave);margin:3px 4px 0}
.card-p .parc b{color:var(--tinta)}
.card-p .pe{display:flex;align-items:center;gap:6px;margin:10px 4px 0;white-space:nowrap}
.card-p .preco{font:800 16px/1 var(--titulo);color:var(--verm);font-variant-numeric:tabular-nums}
.card-p .de{font-size:11.5px;color:var(--suave);text-decoration:line-through;margin-left:2px}
.card-p .acoes{margin-left:auto;display:flex;gap:6px}
.card-p .acoes button{width:32px;height:32px;border-radius:9px;border:1px solid var(--linha);display:grid;place-items:center;color:var(--corpo);
 transition:all .25s ease}
.card-p .acoes button:hover{border-color:var(--prim);color:var(--prim-mid);background:var(--prim-claro)}
.card-p .acoes svg{width:15px;height:15px}
.estoque{display:flex;align-items:center;gap:8px;margin:10px 4px 0;font-size:11.5px;color:var(--suave)}
.estoque .b{flex:1;height:5px;border-radius:5px;background:var(--campo);overflow:hidden}
.estoque .b i{display:block;height:100%;background:var(--prim-2);border-radius:5px;transition:width 1s var(--mola)}
.estoque.baixo{color:var(--vermelho);font-weight:700}
.estoque.baixo .b i{background:var(--vermelho)}
.card-p.sai{opacity:0;transform:scale(.9)}
.card-p.novo{animation:novoCard 1.2s var(--mola)}
@keyframes novoCard{0%{opacity:0;transform:scale(.85) translateY(20px)}60%{opacity:1}100%{transform:none}}
.card-p.brilha{box-shadow:0 0 0 3px var(--ouro),var(--sombra-alta)}
.vazio{grid-column:1/-1;padding:60px 0;text-align:center;color:var(--suave)}

/* lista de produtos */
.lista-p .tabela td{padding:10px 14px}
.lista-p .nome-p{display:flex;align-items:center;gap:12px}
.lista-p .nome-p .mini-thumb{width:46px;height:46px}
.lista-p .nome-p b{display:block;color:var(--tinta);font-weight:600;max-width:250px;overflow:hidden;text-overflow:ellipsis}
.lista-p .tabela td,.lista-p .tabela th{padding-left:11px;padding-right:11px}
.lista-p .nome-p span{font-size:12px;color:var(--suave)}
.est-c{display:flex;align-items:center;gap:10px;min-width:140px}
.est-c .b{width:80px;height:6px;border-radius:6px;background:var(--campo);overflow:hidden}
.est-c .b i{display:block;height:100%;background:var(--prim-2);border-radius:6px;transition:width 1s var(--mola)}
.est-c.baixo{color:var(--vermelho);font-weight:700}
.est-c.baixo .b i{background:var(--vermelho)}
.tabela tr.sel-l td{animation:chegou 2.6s ease}
.alerta{display:flex;align-items:center;gap:14px;padding:14px 18px;margin-bottom:18px;border-radius:16px;background:var(--vermelho-bg);color:var(--vermelho)}
.alerta svg{width:20px;height:20px}
.alerta b{color:var(--vermelho)}
.alerta span{color:var(--corpo);font-size:13px}
.alerta .bt-o{margin-left:auto;height:36px}

/* chave liga/desliga */
.chave{position:relative;width:40px;height:23px;border-radius:99px;background:var(--linha);transition:background .35s ease;flex:none;display:inline-block;vertical-align:middle}
.chave::after{content:'';position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);
 transition:transform .45s var(--mola)}
.chave.on{background:var(--prim)}
.chave.on::after{transform:translateX(17px)}

/* ══ EDITAR / NOVO ═════════════════════════════════════════════ */
.editor{display:grid;grid-template-columns:1fr 380px;gap:18px;align-items:start}
.form-c{padding:22px 24px}
.form-c+.form-c{margin-top:18px}
.form-c h3{font-size:17px;font-weight:700;margin-bottom:4px}
.form-c .sub-t{font-size:12.5px;color:var(--suave);margin-bottom:18px}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.campos .inteiro{grid-column:1/-1}
.campos.tres{grid-template-columns:1fr 1fr 1fr}
.campo label{display:block;font-size:12px;font-weight:700;color:var(--corpo);margin-bottom:7px}
.campo .ctl{position:relative}
.campo input,.campo textarea{width:100%;height:44px;border-radius:12px;border:1px solid var(--linha);background:var(--campo);
 padding:0 14px;outline:0;color:var(--tinta);transition:border-color .25s ease,box-shadow .25s ease,background .25s ease}
.campo textarea{height:78px;padding:11px 14px;resize:none;line-height:1.5}
.campo input:focus,.campo textarea:focus{border-color:var(--prim);background:var(--cartao);box-shadow:0 0 0 4px var(--prim-claro)}
.campo .pref{position:absolute;left:14px;top:50%;translate:0 -50%;color:var(--suave);font-weight:600;font-size:13px}
.campo .pref+input{padding-left:40px}
.campo .ajuda{font-size:11.5px;color:var(--suave);margin-top:6px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:99px;border:1px solid var(--linha);font-size:13px;font-weight:500;
 color:var(--corpo);background:var(--cartao);transition:all .3s var(--mola)}
.chip svg{width:15px;height:15px}
.chip:hover{border-color:var(--prim)}
.chip.on{background:var(--prim);border-color:var(--prim);color:#fff}
.chip.on.ouro{background:var(--ouro);border-color:var(--ouro);color:var(--ouro-txt)}
.chip.on.verm{background:var(--verm);border-color:var(--verm);color:#fff}
.linha-chave{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;background:var(--campo)}
.linha-chave b{display:block;color:var(--tinta);font-size:13.5px}
.linha-chave span{font-size:12px;color:var(--suave)}
.linha-chave .chave{margin-left:auto}
.galeria{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:10px}
.galeria .g{height:120px;border-radius:14px;background:var(--foto);display:grid;place-items:center;overflow:hidden;border:1px solid var(--linha);position:relative}
.galeria .g img{width:100%;height:100%;object-fit:cover}
.galeria .g:first-child{grid-row:span 2;height:250px}
.solta{border:1.5px dashed var(--linha);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
 color:var(--suave);font-size:12px;text-align:center;padding:10px;transition:border-color .3s ease,background .3s ease;position:relative;overflow:hidden}
.solta svg{width:22px;height:22px;color:var(--prim-mid)}
.solta b{color:var(--tinta);font-size:12.5px}
.solta.sobre{border-color:var(--prim);background:var(--prim-claro)}
.solta .prog{position:absolute;left:14px;right:14px;bottom:12px;height:5px;border-radius:5px;background:var(--linha);overflow:hidden;opacity:0;transition:opacity .3s}
.solta .prog i{display:block;height:100%;width:0;background:var(--prim);border-radius:5px}
.solta.subindo .prog{opacity:1}
.solta .sub-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.solta.pronto{border-style:solid;border-color:var(--linha);background:var(--foto)}
.solta.pronto>*:not(.sub-img){opacity:0}
/* galeria de fotos de verdade (escolher, arrastar, colar) */
.galeria{border-radius:16px;transition:outline-color .25s ease;outline:2px dashed transparent;outline-offset:6px}
.galeria.sobre{outline-color:var(--prim)}
.galeria.sobre .solta{border-color:var(--prim);background:var(--prim-claro)}
.galeria .solta{cursor:pointer}
.galeria .solta:hover{border-color:var(--prim);background:var(--prim-claro)}
.galeria .solta.subindo{border-color:var(--prim)}
.g.cheia{cursor:default}
.g.cheia.nova{animation:novoCard .8s var(--mola)}
.g-bt{position:absolute;top:8px;width:30px;height:30px;border-radius:9px;background:rgba(14,21,48,.74);color:#fff;display:grid;place-items:center;
 opacity:0;transform:scale(.85);transition:opacity .25s ease,transform .3s var(--mola),background .2s ease}
.g-bt svg{width:15px;height:15px}
.g-tira{right:8px}
.g-tira:hover{background:var(--verm)}
.g-capa{right:44px}
.g-capa:hover{background:var(--ouro);color:var(--ouro-txt)}
.g.cheia:hover .g-bt{opacity:1;transform:none}
@media (hover:none){.g-bt{opacity:1;transform:none}}
.capa-tag{position:absolute;left:8px;bottom:8px;display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 9px;border-radius:99px;
 background:var(--ouro);color:var(--ouro-txt);font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.capa-tag svg{width:11px;height:11px;fill:currentColor;stroke:none}
.fotos-n{position:absolute;right:10px;bottom:10px;z-index:3;display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:99px;
 background:rgba(14,21,48,.72);color:#fff;font-size:11px;font-weight:700}
.fotos-n svg{width:13px;height:13px}
.previa{position:sticky;top:0}
.previa .cab{padding:18px 20px 0}
.previa-site{margin:16px 20px 20px;border-radius:18px;background:var(--bg-site,#F5F7FB);padding:16px;border:1px solid var(--linha)}
:root[data-tema="escuro"] .previa-site{--bg-site:#0F1626}
.previa-site .card-p{box-shadow:var(--sombra)}
.previa-site .card-p:hover{transform:none}
.previa-site .card-p .foto{height:220px}
.previa-site .card-p h4{white-space:normal;font-size:15px}
.previa-site .card-p .resumo{font-size:12px;color:var(--suave);margin:6px 4px 0;line-height:1.45;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.previa-site .vista-p{font-size:12px;color:var(--ok);font-weight:700;margin:6px 4px 0}
.previa-site .bt-site{display:flex;align-items:center;justify-content:center;gap:8px;height:42px;margin:14px 4px 2px;border-radius:99px;background:#148345;color:#fff;
 font-weight:700;font-size:13px}
.previa-site .bt-site svg{width:17px;height:17px}
.url-site{display:flex;align-items:center;gap:8px;margin:0 20px;padding:9px 12px;border-radius:10px;background:var(--campo);font-size:12px;color:var(--suave);white-space:nowrap;overflow:hidden}
.url-site svg{width:14px;height:14px}
.url-site i{width:7px;height:7px;border-radius:50%;background:#22A35A;margin-left:auto;animation:vivo 2s infinite;flex:none}
.barra-salvar{position:sticky;bottom:0;display:flex;align-items:center;gap:10px;padding:14px 20px;margin-top:18px;z-index:5}
.barra-salvar span{font-size:12.5px;color:var(--suave);display:flex;align-items:center;gap:8px}
.barra-salvar span i{width:8px;height:8px;border-radius:50%;background:var(--ambar);opacity:0;transition:opacity .3s}
.barra-salvar.sujo span i{opacity:1}
.barra-salvar .dir{margin-left:auto;display:flex;gap:10px}
.valor-muda{animation:pisca 1s ease}

/* ══ CLIENTES / CONFIG ═════════════════════════════════════════ */
.tag-obj{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:99px;background:var(--prim-claro);color:var(--prim-mid);
 font-size:11.5px;font-weight:700}
.tag-obj svg{width:13px;height:13px}
.config{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.loja-c{border:1px solid var(--linha);border-radius:16px;padding:16px;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:start}
.loja-c+.loja-c{margin-top:12px}
.loja-c .n{grid-row:span 3;width:42px;height:42px;border-radius:12px;background:var(--verm);color:#fff;display:grid;place-items:center;font:800 17px/1 var(--titulo)}
.loja-c b{color:var(--tinta);font-size:14px}
.loja-c span{font-size:12.5px;color:var(--suave);display:flex;align-items:center;gap:6px}
.loja-c span svg{width:14px;height:14px}

/* ══ TOAST ═════════════════════════════════════════════════════ */
.toasts{position:fixed;top:24px;left:50%;translate:-50% 0;z-index:90;display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:12px;padding:12px 16px 12px 12px;border-radius:16px;background:var(--tinta);color:var(--cartao);
 box-shadow:var(--sombra-alta);min-width:320px;max-width:480px;animation:toastIn .7s var(--mola) both;cursor:pointer}
.toast.sai{animation:toastOut .45s var(--suave-in) forwards}
.toast .ti{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.12);flex:none;overflow:hidden}
.toast .ti.v{background:var(--prim);color:#fff}
.toast .ti.o{background:var(--ouro);color:var(--ouro-txt)}
.toast .ti.w{background:#1FA855;color:#fff}
.toast .ti img{width:100%;height:100%;object-fit:cover}
.toast b{display:block;font-size:13.5px}
.toast span{font-size:12px;opacity:.72}
.toast em{font-style:normal;margin-left:auto;font-weight:800;font-size:14px;padding-left:10px;white-space:nowrap}
@keyframes toastIn{from{opacity:0;transform:translateY(-24px) scale(.94)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(-16px) scale(.96)}}

/* ══ MODO DEMONSTRAÇÃO ═════════════════════════════════════════ */
.demo-bt{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px 0 12px;border-radius:99px;background:var(--tinta);color:var(--cartao);
 font-weight:700;font-size:13px;transition:transform .4s var(--mola)}
.demo-bt:hover{transform:translateY(-2px)}
.demo-bt i{width:24px;height:24px;border-radius:50%;background:var(--ouro);color:var(--ouro-txt);display:grid;place-items:center}
.demo-bt i svg{width:11px;height:11px;fill:currentColor;stroke:none;margin-left:2px}
html.em-demo,html.em-demo *{cursor:none!important}
html.em-demo .demo-bt{display:none}
.cursor{position:fixed;left:0;top:0;z-index:200;pointer-events:none;width:26px;height:26px;opacity:0;
 transition:opacity .4s ease;will-change:transform}
html.em-demo .cursor{opacity:1}
.cursor svg{width:26px;height:26px;fill:#12172B;stroke:#fff;stroke-width:1.6;filter:drop-shadow(0 3px 6px rgba(0,0,0,.28));
 transform-origin:4px 3px;transition:transform .18s ease}
.cursor.aperta svg{transform:scale(.82)}
.onda{position:fixed;z-index:199;pointer-events:none;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;
 background:rgba(255,199,44,.45);border:2px solid rgba(255,199,44,.95);animation:onda .6s var(--mola) forwards}
@keyframes onda{from{transform:scale(.2);opacity:1}to{transform:scale(1.5);opacity:0}}
.foco-anel{position:fixed;z-index:150;pointer-events:none;border-radius:16px;border:2px solid var(--ouro);opacity:0;
 box-shadow:0 0 0 6px rgba(255,199,44,.2),0 0 40px rgba(255,199,44,.25);
 transition:top .7s var(--mola),left .7s var(--mola),width .7s var(--mola),height .7s var(--mola),opacity .4s ease,border-radius .5s ease}
.foco-anel.on{opacity:1}
.legenda-demo{position:fixed;left:50%;bottom:30px;z-index:160;translate:-50% 0;display:flex;align-items:center;gap:16px;
 padding:14px 22px 14px 14px;border-radius:20px;background:rgba(14,21,48,.93);backdrop-filter:blur(12px);color:#fff;
 box-shadow:0 30px 60px -20px rgba(0,0,0,.5);max-width:min(740px,calc(100vw - 40px));opacity:0;transform:translateY(20px) scale(.97);
 transition:opacity .5s var(--mola),transform .6s var(--mola);pointer-events:none}
.legenda-demo.on{opacity:1;transform:none}
.legenda-demo .n{width:46px;height:46px;border-radius:14px;background:var(--ouro);color:var(--ouro-txt);display:grid;place-items:center;
 font:800 18px/1 var(--titulo);flex:none}
.legenda-demo b{display:block;font:700 17px/1.3 var(--titulo);letter-spacing:-.01em}
.legenda-demo span{display:block;font-size:13px;opacity:.74;margin-top:2px}
.legenda-demo .txt{transition:opacity .3s ease}
.legenda-demo .txt.troca{opacity:0}
.legenda-demo .prog{position:absolute;left:18px;right:18px;bottom:0;height:3px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.legenda-demo .prog i{display:block;height:100%;width:0;background:var(--ouro);transition:width .8s var(--mola)}
html.sem-legenda .legenda-demo{display:none}
.ctl-demo{position:fixed;right:24px;bottom:30px;z-index:170;display:flex;gap:6px;padding:6px;border-radius:99px;background:rgba(14,21,48,.92);
 opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .5s var(--mola);pointer-events:none}
html.em-demo.mexeu .ctl-demo{opacity:1;transform:none;pointer-events:auto}
html.em-demo.mexeu,html.em-demo.mexeu .ctl-demo *{cursor:default!important}
.ctl-demo button{height:34px;padding:0 13px;border-radius:99px;color:#fff;font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px}
.ctl-demo button:hover{background:rgba(255,255,255,.12)}
.ctl-demo svg{width:14px;height:14px}
.abertura{position:fixed;inset:0;z-index:180;display:grid;place-items:center;background:var(--fundo);opacity:0;visibility:hidden;
 transition:opacity .9s var(--suave-in),visibility 0s .9s}
.abertura.on{opacity:1;visibility:visible;transition:opacity .6s ease}
.abertura .in{text-align:center}
.abertura img{height:150px;width:auto;margin:0 auto;opacity:0;transform:translateY(16px);transition:all 1s var(--mola) .1s}
.abertura p{margin-top:22px;font-size:13px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--suave);opacity:0;
 transform:translateY(10px);transition:all 1s var(--mola) .35s}
.abertura .ln{width:0;height:3px;margin:22px auto 0;background:linear-gradient(90deg,var(--verm),var(--ouro),var(--prim));border-radius:3px;transition:width 1.4s var(--mola) .5s}
.abertura.mostra img,.abertura.mostra p{opacity:1;transform:none}
.abertura.mostra .ln{width:140px}

/* ══ RESPONSIVO ════════════════════════════════════════════════ */
@media (max-width:1280px){
 :root{--menu:236px}
 .grade-kpi,.resumo-ped{grid-template-columns:repeat(2,1fr)}
 .linha-2{grid-template-columns:1fr}
 .editor{grid-template-columns:1fr}
 .previa{position:static}
 .usuario div{display:none}
 .usuario{padding:4px}
}
@media (max-width:1000px){
 .app{grid-template-columns:1fr;height:auto;min-height:100vh}
  .palco{min-height:80vh}
 .vista{position:relative;display:none}
 .vista.on{display:block}
 .linha-2,.prod-lay,.config{grid-template-columns:1fr}
 .filtros{position:static}
 .topo .busca{display:none}
}
@media (max-width:640px){
 .app{padding:10px;gap:10px}
  .resumo-ped{grid-template-columns:1fr 1fr;gap:10px}
 .resumo-ped .kpi{padding:14px}
 .resumo-ped .kpi-top{font-size:11.5px;line-height:1.25;gap:8px}
 .resumo-ped .kpi-ic{width:28px;height:28px;border-radius:9px;flex:none}
 .resumo-ped .kpi-ic svg{width:15px;height:15px}
 .resumo-ped .kpi-pe{display:none}
 .topo{padding:12px 14px;gap:10px}
 .topo-t{flex:1}
 .topo-t h1{font-size:19px;overflow:hidden;text-overflow:ellipsis;display:block}
 .usuario{display:none}
 .icones .bt-ajuda{display:none}
 .demo-bt span{display:none}
 .campos,.campos.tres{grid-template-columns:1fr}
}

/* ── estados de hover que a demonstração aplica (.h) ── */
svg.r90,svg.r-90{rotate:-90deg;width:16px;height:16px}
.tabela tbody tr.sel{background:var(--prim-claro)}
.nav-i.h{background:var(--campo);color:var(--tinta)}
.nav-i.on.h{background:var(--prim-claro);color:var(--prim-mid)}
.sub a.h{color:var(--tinta);background:var(--campo)}
.sub a.on.h{background:var(--ouro-claro);color:var(--ouro-esc)}
.bt.h{background:var(--prim-esc);transform:translateY(-2px);box-shadow:0 16px 28px -16px rgba(38,78,160,.8)}
.bt-o.h{border-color:var(--prim);color:var(--prim-mid)}
.card-p.h{border-color:transparent;box-shadow:var(--sombra-alta);transform:translateY(-4px)}
.card-p.h .foto img{transform:scale(1.06)}
.card-p .acoes button.h{border-color:var(--prim);color:var(--prim-mid);background:var(--prim-claro)}
.tabela tbody tr.clica.h{background:var(--campo)}
.ck.h,.drop.h{background:var(--campo)}
.drop.h{background:var(--linha-2)}
.chip.h{border-color:var(--prim)}
.icone-bt.h{background:var(--campo);color:var(--tinta)}
.aba.h{color:var(--tinta)}
.link.h svg{transform:translateX(3px)}
.toast.h{transform:scale(1.02)}
.top-i.h b{color:var(--prim-mid)}
.kpi.h{box-shadow:var(--sombra-alta)}
.bt-wa.h{filter:brightness(.96)}
.seg button.h{color:var(--tinta)}
/* na demonstração o mouse de verdade não interfere: o cursor falso clica via script */
html.em-demo .app,html.em-demo .gaveta,html.em-demo .veu,html.em-demo .toasts{pointer-events:none}
html.em-demo:not(.sem-legenda) .app{padding-bottom:118px;transition:padding .6s var(--mola)}

/* ══ MULTILAVE ═════════════════════════════════════════════════ */
.card-p .preco{color:var(--prim-mid)}
.preco.consulta{font-size:13.5px!important;color:var(--suave)!important}
.st-novo{background:var(--azul-bg);color:var(--azul)}
.st-orcado{background:var(--ambar-bg);color:var(--ambar)}
.st-aprovado{background:var(--ok-bg);color:var(--ok)}
.st-agendado{background:var(--roxo-bg);color:var(--roxo)}
.st-oficina{background:var(--ouro-claro);color:var(--ouro-esc)}
.st-concluido{background:var(--campo);color:var(--corpo)}
.a-orcar{font-size:12.5px;font-weight:700;color:var(--azul)}
/* tipo de atendimento */
.tp{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:99px;font-size:11px;font-weight:700;white-space:nowrap}
.tp svg{width:12px;height:12px}
.tp-hig{background:var(--azul-bg);color:var(--azul)}
.tp-ref{background:var(--ouro-claro);color:var(--ouro-esc)}
.tp-med{background:var(--roxo-bg);color:var(--roxo)}
.tp-loja{background:var(--ok-bg);color:var(--ok)}
.cod-l{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
/* recado e fotos que o cliente mandou pelo site */
.recado{margin-top:12px;padding:12px 14px;border-radius:12px;background:var(--campo);font-size:13px;color:var(--corpo);line-height:1.5;position:relative}
.recado::before{content:'C';position:absolute;left:10px;top:-6px;font:800 34px/1 var(--titulo);color:var(--ouro)}
.recado p{padding-left:12px}
.fotos-cli{display:flex;gap:8px;margin-top:10px}
.fotos-cli img{width:68px;height:68px;border-radius:10px;object-fit:cover;background:var(--foto)}
.fotos-cli span{align-self:center;font-size:12px;color:var(--suave)}
.orc-v{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.orc-v .ctl{flex:1;max-width:220px}
.orc-v input{font-weight:700}
.orc-v small{font-size:12px;color:var(--suave)}
/* oficina */
.ofi .ent-top .cod{font:800 12.5px/1 var(--titulo);color:var(--tinta)}
.ofi .prazo{margin-left:auto;font-size:11px;font-weight:700;height:22px;padding:0 9px;border-radius:99px;display:inline-flex;align-items:center;background:var(--campo);color:var(--corpo)}
.ofi .prazo.perto{background:var(--ambar-bg);color:var(--ambar)}
.ofi .prazo.atraso{background:var(--vermelho-bg);color:var(--vermelho)}
.ofi .cli-l{display:block;font-size:12px;color:var(--suave);margin-top:2px}
.etapas{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;margin-top:10px}
.etapas i{height:4px;border-radius:4px;background:var(--linha);transition:background .5s ease}
.etapas i.f{background:var(--ouro)}
.ofi .avanca{margin-left:auto;height:28px;padding:0 11px;font-size:11.5px}
.ofi .avanca svg{width:14px;height:14px}
.ofi .bt-wa{height:28px;font-size:11.5px;margin-left:auto}
.col-d.pronto{background:var(--ok-bg)}
.col-d.pronto header em{background:var(--ok);color:#fff}
.ent.chega{animation:chegaCol .8s var(--mola) both}
@keyframes chegaCol{0%{opacity:0;transform:translateX(-30px) scale(.96)}100%{opacity:1;transform:none}}
/* lembrete de higienização */
.lemb{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:99px;font-size:11.5px;font-weight:700;white-space:nowrap;background:var(--campo);color:var(--corpo)}
.lemb svg{width:13px;height:13px}
.lemb.vencida{background:var(--vermelho-bg);color:var(--vermelho)}
.lemb.perto{background:var(--ambar-bg);color:var(--ambar)}
.lemb.enviado{background:var(--ok-bg);color:var(--ok)}
.alerta.azul{background:var(--prim-claro);color:var(--prim-mid)}
.alerta.azul b{color:var(--prim-mid)}
.consulta-t{font-size:11.5px;color:var(--suave);font-weight:600}
.encomenda{display:flex;align-items:center;gap:6px;margin:10px 4px 0;font-size:11.5px;color:var(--ouro-esc);font-weight:700}
.encomenda svg{width:14px;height:14px}
/* prévia: cartão como o do site da Multilave */
.previa-site .acoes-site{display:flex;gap:8px;margin:14px 4px 2px}
.previa-site .acoes-site .bt-site{flex:1;margin:0}
.previa-site .mais-site{width:42px;height:42px;border-radius:50%;border:1px solid var(--linha);display:grid;place-items:center;font:700 20px/1 var(--titulo);color:var(--tinta);background:var(--cartao)}
.previa-site .card-p .de{font-size:12.5px}
.servicos-c{display:flex;flex-wrap:wrap;gap:8px}
.serv-c{display:flex;align-items:center;gap:10px;min-width:0}
.serv-c .mini-thumb{width:38px;height:38px}
.serv-c>div{min-width:0}
.serv-c b{display:block;color:var(--tinta);font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.serv-c b em{font-style:normal;color:var(--suave)}
.serv-c span{display:block;font-size:12px;color:var(--suave);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.ofi .ent-top{gap:6px}
.ofi .ent-top .cod,.ofi .prazo{white-space:nowrap}
.ofi .ent-item .ofi-d{display:flex;flex-direction:column;gap:2px;min-width:0;-webkit-line-clamp:unset}
.ofi .ofi-d em{font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ofi .ofi-d b{display:flex;align-items:center;gap:4px;color:var(--tinta);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ofi .ofi-d b svg{width:12px;height:12px;color:var(--ouro-esc);flex:none}

/* ══ CELULAR ═══════════════════════════════════════════════════
   Até 1000 px: o menu lateral vira gaveta (botão "Mais"), a
   navegação principal fica numa barra fixa embaixo, a página rola
   inteira. Até 760 px: tabelas viram cartões, quadros rolam de lado,
   a gaveta do atendimento ocupa a tela toda. */
.barra-cel,.veu-menu,.marca-cel,.so-cel{display:none}
@media (max-width:1000px){
 .app{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
 .menu{display:flex;position:fixed;top:0;left:0;bottom:0;z-index:96;width:min(300px,84vw);border-radius:0 22px 22px 0;
  transform:translateX(-105%);transition:transform .55s var(--mola);box-shadow:var(--sombra-alta)}
 html.menu-aberto .menu{transform:none}
 .veu-menu{display:block;position:fixed;inset:0;z-index:95;background:rgba(8,16,29,.42);backdrop-filter:blur(3px);opacity:0;visibility:hidden;
  transition:opacity .4s ease,visibility 0s .4s}
 html.menu-aberto .veu-menu{opacity:1;visibility:visible;transition:opacity .4s ease}
 .barra-cel{display:flex;position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:80;height:66px;padding:6px;gap:2px;
  border-radius:22px;background:var(--cartao);box-shadow:0 2px 6px rgba(19,42,75,.08),0 18px 40px -12px rgba(19,42,75,.35);border:1px solid var(--linha)}
 .barra-cel button{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:16px;
  color:var(--suave);font-size:10px;letter-spacing:-.01em;font-weight:600;transition:background .3s ease,color .3s ease}
 .barra-cel button svg{width:21px;height:21px}
 .barra-cel button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
 .barra-cel button.on{background:var(--prim-claro);color:var(--prim-mid);font-weight:800}
 .barra-cel .bdg{position:absolute;top:5px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--verm);
  color:#fff;font-size:10.5px;font-weight:700;line-height:14px;font-style:normal;text-align:center;border:2px solid var(--cartao)}
 .barra-cel .bdg.pulso{animation:pulso .9s var(--mola)}
 .marca-cel{display:block;flex:none}
 .marca-cel img{height:40px;width:auto}
 .topo{position:sticky;top:10px;z-index:30}
 .prod-lay .filtros{display:none}
 .prod-lay.filtros-on .filtros{display:block;animation:entraLinha .5s var(--mola)}
 .so-cel{display:inline-flex}
 .vit-cab .seg{display:none}

 .barra-salvar{bottom:calc(86px + env(safe-area-inset-bottom))}
 html.em-demo .barra-cel{pointer-events:none}
 html.em-demo:not(.sem-legenda) .app{padding-bottom:230px}
}
@media (max-width:760px){
 /* tabelas viram cartões */
 .tabela thead{display:none}
 .tabela,.tabela tbody{display:block}
 .tabela tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:center;padding:14px 12px;border-bottom:1px solid var(--linha-2)}
 .tabela tbody tr:last-child{border-bottom:0}
 .tabela td{display:block;padding:0;border:0;white-space:normal;min-width:0}
 .tabela td[colspan]{grid-column:1/-1}
 .tabela td.dir{text-align:right}
 .tabela .cli{min-width:0}
 .tabela .cli>div{min-width:0}
 .tabela .cli b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
 .serv-c b,.serv-c span{max-width:none}
 .t-ped tr,.t-rec tr{grid-template-areas:"cli st" "serv val" "cod tipo"}
 .t-ped td:nth-child(1),.t-rec td:nth-child(1){grid-area:cod}
 .t-ped td:nth-child(1) .cod,.t-rec td:nth-child(1) .cod{display:inline;font-size:12px}
 .t-ped td:nth-child(1) .canal,.t-rec td:nth-child(1) .canal{display:inline;margin-left:6px}
 .t-ped td:nth-child(2),.t-rec td:nth-child(2){grid-area:cli}
 .t-ped td:nth-child(3),.t-rec td:nth-child(3){grid-area:serv}
 .t-ped td:nth-child(4){grid-area:tipo;justify-self:end}
 .t-ped td:nth-child(5),.t-rec td:nth-child(4){grid-area:val}
 .t-ped td:nth-child(6),.t-rec td:nth-child(5){grid-area:st;justify-self:end}
 .t-ped td:nth-child(7){display:none}
 .t-lista tr{grid-template-areas:"nome chave" "preco edit" "est est"}
 .t-lista td:nth-child(1){grid-area:nome}
 .t-lista td:nth-child(2),.t-lista td:nth-child(5){display:none}
 .t-lista td:nth-child(3){grid-area:preco}
 .t-lista td:nth-child(4){grid-area:est}
 .t-lista td:nth-child(6){grid-area:chave;justify-self:end}
 .t-lista td:nth-child(7){grid-area:edit;justify-self:end}
 .t-cli tr{grid-template-areas:"cli gasto" "lemb wa"}
 .t-cli td:nth-child(1){grid-area:cli}
 .t-cli td:nth-child(2),.t-cli td:nth-child(4),.t-cli td:nth-child(5){display:none}
 .t-cli td:nth-child(3){grid-area:gasto}
 .t-cli td:nth-child(6){grid-area:lemb}
 .t-cli td:nth-child(7){grid-area:wa;justify-self:end}
 .tabela-rolo{padding:0 4px!important}
 .barra-ferr{flex-wrap:wrap;padding:12px 14px}
 .barra-ferr .busca{width:100%}
 .barra-ferr .dir{display:none}
 .pagina{padding:12px 14px}
 .pagina .pags{display:none}
 .abas{padding:10px 10px 0;scrollbar-width:none}
 .abas::-webkit-scrollbar{display:none}
 .aba{flex:none}
 /* quadros (agenda e oficina) rolam de lado, uma coluna por vez */
 .quadro-c{padding:4px 12px 14px}
 .quadro{grid-template-columns:repeat(5,82%);scroll-snap-type:x mandatory;scroll-padding:0 12px;margin:0 -12px;padding:12px 12px 6px;scrollbar-width:none}
 .quadro::-webkit-scrollbar{display:none}
 .col-d{scroll-snap-align:start;min-height:0}
 /* gaveta do atendimento em tela cheia */
 .gaveta{top:0;right:0;bottom:0;width:100vw;border-radius:0;z-index:97}
 .veu{z-index:96}
 .toasts{z-index:99}
 .gav-cab{padding:16px 16px 14px}
 .gav-cab h2{font-size:19px}
 .gav-corpo{padding:14px}
 .gav-pe{padding:12px 14px calc(12px + env(safe-area-inset-bottom))}
 .gav-pe #gav-imp{display:none}
 .bloco{padding:14px}
 .item-p{grid-template-columns:48px 1fr;gap:10px}
 .item-p .mini-thumb{width:48px;height:48px}
 .item-p>span:last-child{grid-column:2}
 .orc-v{flex-wrap:wrap}
 .orc-v .ctl{max-width:none;flex-basis:100%}
 .ag-l .chip{flex:1 1 calc(50% - 7px)}
}
@media (max-width:640px){
 .app{gap:10px}
 .topo{padding:10px 12px;gap:8px;top:6px}
 .topo-t h1{font-size:18px}
 .topo-t p{font-size:11.5px}
 .icones{gap:6px}
 .icone-bt{width:38px;height:38px}
 .demo-bt{height:38px;padding:0 7px}
 .marca-cel img{height:34px}
 .cab{padding:16px 16px 0}
 .cab .dir{margin-left:0}
 .linha-2{gap:10px;margin-top:10px}
 .grade-kpi,.resumo-ped{gap:10px}
 .grade-kpi{grid-template-columns:1fr 1fr}
 .kpi{padding:14px}
 .grade-kpi .kpi-top{padding-right:0;white-space:normal;font-size:12px;align-items:flex-start;flex-direction:column;gap:8px}
 .kpi .spark{top:14px;right:12px;width:48px;height:26px}
 .kpi-v{font-size:20px;margin-top:10px}
 .resumo-ped .kpi-v{font-size:20px}
 .grade-kpi .kpi-pe{font-size:0}
 .grade-kpi .kpi-pe .var{font-size:11px}
 .grafico{padding:4px 8px 12px}
 #c-graf .legenda{display:none}
 .obj{grid-template-columns:136px 1fr 36px;font-size:12px;gap:8px}
 .top-i{grid-template-columns:44px 1fr auto}
 .lojas-mini{padding:0 16px 16px}
 .vitrine{padding:12px}
 .vit-cab .dir{margin-left:0;width:100%;flex-wrap:wrap}
 .vit-cab .busca{flex:1;width:auto;min-width:0}
 .vit-cab .dir>a.bt{flex-basis:100%;justify-content:center}
 .grade-p{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .card-p{min-width:0}
 .card-p .pe{white-space:normal}
 .card-p .de{margin-left:0}
 .card-p{padding:8px 8px 10px;border-radius:14px}
 .card-p .foto{height:128px;border-radius:10px}
 .card-p .amb{font-size:9.5px;margin:9px 2px 2px}
 .card-p h4{font-size:13px;margin:0 2px}
 .card-p .parc{display:none}
 .card-p .estoque,.card-p .encomenda{margin:8px 2px 0;font-size:11px}
 .card-p .pe{flex-wrap:wrap;margin:8px 2px 0;row-gap:8px}
 .card-p .preco{font-size:14.5px}
 .card-p .acoes button{width:30px;height:30px}
 .selo{top:7px;left:7px;font-size:9px;height:20px;padding:0 7px}
 .form-c{padding:18px 16px}
 .form-c+.form-c{margin-top:10px}
 .galeria{grid-template-columns:1fr 1fr}
 .galeria .g{height:96px}
 .galeria .g:first-child{grid-column:1/-1;grid-row:auto;height:170px}
 .barra-salvar{padding:12px 14px;flex-wrap:wrap}
 .barra-salvar .dir{margin-left:0;width:100%}
 .barra-salvar .dir .bt{flex:1}
 .previa-site{margin:12px 14px 14px}
 .previa-site .card-p .foto{height:190px}
 .alerta{flex-wrap:wrap;padding:14px}
 .alerta .bt,.alerta .bt-o{width:100%;justify-content:center}
 .config{gap:10px}
 .toasts{top:10px;left:10px;right:10px;translate:none}
 .toast{min-width:0;width:100%;max-width:none}
 /* demonstração no celular */
 .legenda-demo{left:10px;right:10px;translate:none;bottom:calc(86px + env(safe-area-inset-bottom));max-width:none;gap:12px;padding:11px 14px 13px 11px;border-radius:16px}
 .legenda-demo .n{width:36px;height:36px;border-radius:11px;font-size:15px}
 .legenda-demo b{font-size:14.5px}
 .legenda-demo span{font-size:12px}
 .ctl-demo{right:10px;bottom:calc(170px + env(safe-area-inset-bottom))}
 .abertura img{height:110px}
}
/* no celular o cursor da demonstração vira a marca de um dedo */
@media (max-width:760px){
 .cursor svg{display:none}
 .cursor::after{content:'';position:absolute;left:-9px;top:-11px;width:30px;height:30px;border-radius:50%;background:rgba(19,42,75,.3);
  border:2px solid rgba(255,255,255,.95);box-shadow:0 4px 14px rgba(0,0,0,.25);transition:transform .18s ease}
 .cursor.aperta::after{transform:scale(.78);background:rgba(250,140,56,.55)}
}
.vista.on.rv-ok [data-rv]{opacity:1;transform:none;animation:none}