/* 1.48.0: O QUE VALE NOS DOIS APLICATIVOS (iOS e Android), em cima do site. Carregado sempre; só age quando
   web/app-nativo.js marca <html> com `app-nativo`. Três assuntos: rolagem leve (sem vidro nas peças que
   rolam), a gaveta do menu (esquerda, ~90% da tela) e o Cérebro ancorado no rodapé, no estilo da Siri. */
/* ---------- rolagem sem engasgo (vale para iOS e Android) ----------
   Medido no iPhone: cada card era uma camada de backdrop-filter (vidro) rolando sobre um <main> que também
   era vidro, e os cronômetros atrasados pulsavam a sombra a cada quadro. No app o vidro fica só nas peças
   nativas; o conteúdo vira superfície sólida e as animações contínuas param. */
html.app-nativo .k,html.app-nativo .e,html.app-nativo .timer,html.app-nativo .ready,html.app-nativo .lane .col,html.app-nativo .kpi,html.app-nativo .op,html.app-nativo .qbox,html.app-nativo .rv,html.app-nativo .rlist,html.app-nativo .list,html.app-nativo .dcard,html.app-nativo .btn,html.app-nativo .pmt,html.app-nativo .kbar .subseg,html.app-nativo .menuv .list,html.app-nativo .pill,html.app-nativo .search{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.app-nativo .k.glass,html.app-nativo .k.glass.solid,html.app-nativo .e.glass,html.app-nativo .dcard.glass,html.app-nativo .list.glass,html.app-nativo .rv{background:rgba(255,255,255,.90)}
html.app-nativo body.dark .k.glass,html.app-nativo body.dark .k.glass.solid,html.app-nativo body.dark .e.glass,html.app-nativo body.dark .dcard.glass,html.app-nativo body.dark .list.glass,html.app-nativo body.dark .rv{background:rgba(44,34,26,.94)}
html.app-nativo .lane .col{background:rgba(255,255,255,.55)} html.app-nativo body.dark .lane .col{background:rgba(44,34,26,.6)}
html.app-nativo .k{will-change:auto}
html.app-nativo .k.late .timer{animation:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--sys-red,#E0342E) 55%,transparent)}
html.app-nativo .latetag,html.app-nativo .live i,html.app-nativo .k .drv .ds.hot,html.app-nativo .sysitem.bad i,html.app-nativo .lc .ring i{animation:none}
/* o encaixe de card (scroll-snap) briga com a inércia nativa do iOS: no app a rolagem é livre */
html.app-nativo.rolagem-encaixe body{scroll-snap-type:none}
html.app-nativo.rolagem-encaixe #kds>.k,html.app-nativo.rolagem-encaixe #ges .dcard,html.app-nativo.rolagem-encaixe #rev .dcard,html.app-nativo.rolagem-encaixe #rev .rv{scroll-snap-align:none}
html.app-nativo #lanes .lane .col{-webkit-overflow-scrolling:touch;overscroll-behavior-y:auto}

/* ---------- gaveta (menu da esquerda, ~90% da tela) ---------- */
.gaveta-scrim{position:fixed;inset:0;background:rgba(20,15,10,.35);opacity:0;pointer-events:none;transition:opacity .3s;z-index:1300}
.gaveta{position:fixed;top:0;bottom:0;left:0;width:min(90vw,380px);transform:translateX(-104%);transition:transform var(--dur-lenta,.34s) var(--curva-padrao,cubic-bezier(.2,.8,.2,1));z-index:1301;background:var(--vidro-grosso,rgba(250,247,242,.88));-webkit-backdrop-filter:blur(30px) saturate(var(--vidro-saturacao,180%));backdrop-filter:blur(30px) saturate(var(--vidro-saturacao,180%));box-shadow:var(--vidro-brilho,none),8px 0 40px rgba(0,0,0,.18);padding:calc(env(safe-area-inset-top) + 8px) 12px calc(env(safe-area-inset-bottom) + 16px);overflow:auto;display:flex;flex-direction:column;gap:2px;box-sizing:border-box;border-right:1px solid rgba(255,255,255,.7)}
body.dark .gaveta{border-right-color:rgba(255,255,255,.08)}
html.gaveta-aberta .gaveta{transform:none} html.gaveta-aberta .gaveta-scrim{opacity:1;pointer-events:auto}
.gaveta .gv-marca{display:flex;align-items:center;gap:10px;padding:6px 12px 12px} .gaveta .gv-marca img{height:36px} .gaveta .gv-marca span{font-size:calc(13px * var(--dt));color:var(--sub);margin-left:auto}
.gaveta .gv-sec{font-size:max(11px, calc(12px * var(--dt)));font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--sub);padding:14px 12px 4px}
.gaveta .gv-lojas{display:flex;gap:6px;padding:0 4px 4px} .gaveta .gv-lojas button{flex:1;min-height:44px;padding:12px 8px;border-radius:12px;border:0;background:var(--fill,rgba(255,255,255,.55));font-weight:600;font-size:calc(15px * var(--dt));color:var(--text)} .gaveta .gv-lojas button.on{background:var(--on-red,#E0342E);color:#fff;border-color:transparent} .gaveta .gv-lojas button[data-gvloja="all"].on{background:var(--on-green,#22B14C)}

.gaveta .gv-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;font-size:calc(17px * var(--dt));font-weight:600;color:var(--text);background:transparent;border:0;width:100%;text-align:left;font-family:inherit;min-height:50px}
.gaveta .gv-item:active{background:var(--fill2,rgba(58,42,30,.08))}
.gaveta .gv-item.on{background:var(--fill2,rgba(58,42,30,.10))}
.gaveta .gv-item svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.gaveta .gv-item .gv-dot{width:9px;height:9px;border-radius:50%;background:var(--red,#E0342E);margin-left:auto;display:none} .gaveta .gv-item .gv-dot.show{display:block}
.gaveta .gv-toggle{margin-left:auto;width:51px;height:31px;border-radius:16px;background:rgba(120,120,128,.32);position:relative;flex:none;transition:background .2s} .gaveta .gv-toggle::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.15);transition:transform .2s} .gaveta .gv-toggle.on{background:var(--sys-green,#34C759)} .gaveta .gv-toggle.on::after{transform:translateX(20px)}
.gaveta .gv-item.sair{color:var(--red,#E0342E)}
.gaveta .gv-rodape{margin-top:auto;padding:14px 12px 0;font-size:max(11px, calc(12px * var(--dt)));color:var(--sub)}

/* ---------- 1.51.0: só a EXPEDIÇÃO é travada; o resto rola a tela inteira, por baixo do vidro ----------
   Pedido do Philippe (21/09/2026): "a única tela que precisa ficar travada para não passar de baixo do menu e
   dos botões é a tela de expedição, porque ela tem as colunas... As outras telas, todas elas, a rolagem pode
   ser até no final da tela e passar por debaixo dos botões de menu e da barra de menu."
   Medidas: env(safe-area-inset-top) já inclui a faixa dos botões (inset nativo). Embaixo, o iOS manda a
   altura da cápsula em --app-barra (HubBarraPlugin.enviarMedidas), somada ao indicador de início. */
:root{--app-barra:56px;--rodape-app:calc(env(safe-area-inset-bottom) + var(--app-barra));--topo-app:calc(env(safe-area-inset-top) + 8px)}
html.app-nativo body{padding:var(--topo-app) 0 var(--rodape-app)!important;margin:0}
html.app-nativo main{position:static;margin:0!important;padding:0 0 12px!important;width:auto;min-height:0;border:0;border-radius:0;box-shadow:none;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
html.app-nativo .ges,html.app-nativo .menuv{padding-bottom:16px}
html.app-nativo #view-kds .grid{padding-top:4px}
/* expedição: caixa fixa entre os botões e a barra; a fita de colunas arrasta para o lado e só a lista de cards rola */
html.app-nativo body:has(#view-exp.on){overflow:hidden;height:100dvh;box-sizing:border-box}
html.app-nativo body:has(#view-exp.on) main{position:fixed;top:var(--topo-app);bottom:var(--rodape-app);left:0;right:0;padding:0!important;overflow:hidden;display:flex;flex-direction:column}
html.app-nativo #view-exp.on{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding-bottom:0}
html.app-nativo #view-exp.on>*{flex:none}
html.app-nativo #view-exp.on .lanes{flex:1 1 auto;min-height:0;padding:4px 0 0;align-items:stretch}
html.app-nativo #view-exp.on .lane{display:flex;flex-direction:column;min-height:0;height:100%;padding:0 10px 4px}
@media (max-width:760px){html.app-nativo #view-exp.on .lane{padding-left:var(--margem);padding-right:var(--margem)}} /* 1.72.0 (pente fino): no iPhone a coluna começa na margem de 16 pt, como os cartões das outras telas (era 10) */
html.app-nativo #view-exp.on .lane h3{flex:none}
html.app-nativo #view-exp.on .lane .col{flex:1 1 auto;min-height:0!important;max-height:none!important;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}
html.app-nativo #view-exp .tools{padding-top:2px}
html.app-nativo #view-exp.on .alerts,html.app-nativo #view-exp.on .selbar{flex:none}

/* ---------- Cérebro no rodapé, estilo Siri ----------
   No app o Cérebro é a aba do meio da barra nativa. A "área de trabalho" (ai-workspace) vira de cabeça para
   baixo: os cards em cima; embaixo, centralizados, o ícone do Cérebro (pulsando com a voz) e, logo abaixo dele,
   o campo de escrita; e um brilho que respira na borda inferior da tela, como a Siri.
   1.51.0 (pedido do Philippe): ícone em cima do campo, os dois centralizados com um respiro; abrir o Cérebro
   não sobe o teclado; a fala preenche o campo; ao tocar no campo o teclado sobe e SÓ o ícone e o campo sobem
   com ele (translateY pela altura do teclado, --ws-viewport-inset), os cards ficam onde estão. */
html.app-nativo body.ai-on::after{display:none!important}
html.app-nativo body.ai-on main,html.app-nativo body.ai-on .top{transform:none}
html.app-nativo body.ai-on .aiframe{display:block!important;inset:auto 0 0 0;height:220px;border-radius:0;box-shadow:none;pointer-events:none;z-index:1049;background:radial-gradient(72% 100% at 50% 100%,rgba(224,52,46,.58),rgba(255,200,0,.34) 40%,rgba(34,177,76,.16) 60%,transparent 76%);animation:aisiri 2.4s ease-in-out infinite;transform-origin:50% 100%}
html.app-nativo body.ai-on:has(#ws-hero.capturing) .aiframe,html.app-nativo body.ai-on:has(#ws-hero.hearing) .aiframe{animation-duration:1.1s;background:radial-gradient(78% 100% at 50% 100%,rgba(224,52,46,.72),rgba(255,200,0,.42) 40%,rgba(90,160,255,.22) 60%,transparent 80%)}
@keyframes aisiri{50%{opacity:.55;transform:scaleX(1.06) scaleY(.9)}}
html.app-nativo body.ws-hero-mode #aiz.ws-root,html.app-nativo #aiz.ws-root{inset:var(--topo-app) 10px calc(var(--rodape-app) + 6px);display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto;gap:0;align-content:stretch;justify-items:center}
html.app-nativo body.ws-hero-mode #aiz.ws-root.ws-empty,html.app-nativo #aiz.ws-root.ws-empty{grid-template-rows:auto auto;align-content:end}
html.app-nativo #aiz.ws-root .ws-board{grid-row:1;order:0;width:100%;justify-self:stretch}
html.app-nativo #aiz.ws-root.ws-empty .ws-board{display:none}
html.app-nativo body.ws-hero-mode #aiz.ws-root .ws-hero,html.app-nativo #aiz.ws-root .ws-hero{display:flex!important;grid-row:2;order:1;min-height:0;position:relative;pointer-events:none;justify-self:center;margin:0 0 10px;transform:translateY(calc(-1 * max(0px, var(--ws-viewport-inset,0px) - var(--rodape-app))));transition:transform .2s ease-out}
html.app-nativo #aiz.ws-root.ws-empty .ws-hero{grid-row:1}
html.app-nativo #aiz.ws-root .ws-hero .ws-hero-close{display:none!important}
html.app-nativo .ws-hero-brain{width:64px;height:64px}
html.app-nativo .ws-hero-brain .philippe-brain{width:42px;height:46px}
html.app-nativo body.ws-hero-mode #aiz.ws-root .ws-controls,html.app-nativo #aiz.ws-root .ws-controls{grid-row:3;order:2;padding:0;margin:0;min-height:0;width:100%;justify-self:stretch;transform:translateY(calc(-1 * max(0px, var(--ws-viewport-inset,0px) - var(--rodape-app))));transition:transform .2s ease-out}
html.app-nativo #aiz.ws-root.ws-empty .ws-controls{grid-row:2}
html.app-nativo body.ws-hero-mode #aiz.ws-root #ws-composer-home,html.app-nativo body.ws-hero-mode #aiz.ws-root:not(.ws-speaking) #ws-composer-home{position:static;left:auto;opacity:1;pointer-events:auto;width:100%}
html.app-nativo body.ws-hero-mode #aiz.ws-root .ws-composer{width:100%;justify-content:center}
html.app-nativo body.ws-hero-mode #aiz.ws-root .ws-composer .ws-close{display:inline-grid}
html.app-nativo #aiz.ws-root .ws-composer .ws-input{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(255,253,249,.94)!important;min-height:52px}
html.app-nativo body.dark #aiz.ws-root .ws-composer .ws-input{background:rgba(52,49,47,.96)!important}
html.app-nativo body.ai-workspace-on main{filter:none!important;will-change:auto;contain:none}
html.app-nativo #aikdsbar{display:none!important}
/* o botão de chamada por voz saiu da tela: vive na gaveta (Configurações) */
html.app-nativo #voice-wake{display:none!important}

/* ---------- 1.61.7: botão das lojas no topo (verde aberta, laranja restrição, vermelho fechada) ----------
   No app novo o botão é nativo (HubBarraPlugin, id "lojas"). No app instalado antes desta versão ele aparece em HTML,
   logo abaixo dos botões de vidro, à direita. O painel de situação abre no topo, na largura da tela. */
#app-lojas-web{position:fixed;top:var(--topo-app);right:14px;z-index:1240;width:44px;height:44px;border-radius:50%;border:0;display:grid;place-items:center;color:#fff;padding:0;
  --lojas-cor:#E08A1E;background:color-mix(in srgb,var(--lojas-cor) 88%,transparent);
  -webkit-backdrop-filter:blur(20px) saturate(var(--vidro-saturacao,180%));backdrop-filter:blur(20px) saturate(var(--vidro-saturacao,180%));
  box-shadow:var(--vidro-brilho,inset 0 1px 0 rgba(255,255,255,.5)),0 4px 14px rgba(0,0,0,.18);transition:transform var(--dur-rapida,.12s),filter var(--dur-rapida,.12s)}
#app-lojas-web:active{transform:scale(.94);filter:brightness(.92)}
#app-lojas-web:focus-visible{outline:3px solid var(--foco-cor,#1861A0);outline-offset:3px}
#app-lojas-web svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
/* 1.62.0: as tres cores da situacao, no tom em que o icone passa de 3:1 (regra da Apple para icone):
   verde e vermelho com icone branco; laranja com icone cafe escuro (branco no laranja dava 2,4:1). */
#app-lojas-web.app-lojas-verde{--lojas-cor:#1E8E3E} #app-lojas-web.app-lojas-laranja{--lojas-cor:#F5901B;color:#2A1C12} #app-lojas-web.app-lojas-vermelho{--lojas-cor:#D22D27} #app-lojas-web.app-lojas-cinza{--lojas-cor:#8E8E93}
html.app-lojas-web body.tem-acao-cliente #app-lojas-web{top:calc(var(--topo-app) + 64px)}
/* 1.70.0 (auditoria, 29/09/2026): com o botão HTML das lojas (app antigo e ?nativo= no navegador), o botão do canto direito do
   cabeçalho de Negociações (atualizar), Equipe (ajustes) e Manutenção remota (Atualizar) ficava embaixo dele e não recebia o
   toque (medido pela varredura, tools/auditoria/varredura.py). Mesma folga que o cabeçalho dos Relatórios já tinha. */
html.app-lojas-web #neg-raiz .neg-topo,html.app-lojas-web #view-equ .eq-cab,html.app-lojas-web #view-man .man-topo{padding-right:54px}
/* 1.62.0: o pedido do Philippe era o botao das lojas na mesma linha dos botoes de vidro do topo. No app NOVO ele ja
   e nativo e fica nessa linha (HubBarraPlugin, id "lojas", a esquerda do filtro). Este botao HTML so aparece no app
   ANTIGO do iPhone, e nele NAO pode subir para a linha nativa: a faixa do topo do app antigo e uma UIView nativa por
   cima da pagina que recebe todo toque naquela altura, entao o botao ficaria alinhado mas morto. Fica logo abaixo,
   alinhado a margem de 16 pt dos botoes nativos, ate o app novo ser instalado (ai ele some sozinho). */
html.app-ios #app-lojas-web{right:16px}
@media (prefers-reduced-transparency:reduce){#app-lojas-web{background:var(--lojas-cor)}}

/* 1.62.0: avisos no app do iPhone. Moravam a 78 px do topo, que no aparelho e EMBAIXO dos botoes de vidro nativos
   (a faixa do topo vai ate env(safe-area-inset-top)). Agora descem logo abaixo dos botoes, centralizados, como a
   notificacao do sistema; com a faixa vermelha da acao do cliente, descem abaixo dela. No Android o aviso ja e o
   snackbar do rodape (app-android.css). */
html.app-ios .toasts{top:calc(var(--topo-app) + 4px);left:12px;right:12px;align-items:center}
html.app-ios body.tem-acao-cliente .toasts{top:calc(var(--topo-app) + 64px)}
html.app-ios .toasts .toast{max-width:min(440px,100%)}
html.app-nativo #store-status-popover{position:fixed!important;top:var(--topo-app)!important;left:10px!important;right:10px!important;width:auto!important;max-height:calc(100dvh - var(--topo-app) - var(--rodape-app) - 12px)!important;overflow:auto;z-index:1260}

/* ---------- 1.62.1: a FICHA DO PEDIDO sobe como folha do iOS (web/app-nativo.js, ligarFicha) ----------
   Pedido do Philippe (27/09/2026): "quando eu clico em um card de pedido... tem que fazer a animação do card subindo. Pode
   esconder os botões de menu superiores e deixar somente o card aberto... até o usuário fechar o card, puxando para baixo".
   - Aberta, as peças nativas somem (HubBarra.ocultar) e a folha ocupa a tela, parando logo abaixo da barra de status (a ilha
     e o relógio). --app-status é essa altura: no iPhone o inset de cima inclui a faixa dos botões nativos (44 do botão + 6 + 6
     de folga, HubBarraPlugin.swift), que aqui é descontada. Se o nativo um dia mandar --app-status, vale o dele.
   - Subir e descer são TRANSIÇÕES (e não animação de entrada), para que fechar por qualquer caminho também desça: a ficha
     "fechada" é a folha fora da tela, invisível. A classe .hidden global (display:none!important) é trocada só aqui.
   - Curva: a das folhas do iOS (rápida no começo, assenta sem quicar), 0,38 s. Com "reduzir movimento" o sistema inteiro
     já zera as transições (index.html), e a ficha aparece e some sem deslizar. */
:root{--app-status:env(safe-area-inset-top,0px);--curva-folha:cubic-bezier(.32,.72,0,1);--dur-folha:.38s}
html.app-ios{--app-status:max(0px, calc(env(safe-area-inset-top) - 56px))}
/* 1.72.0: sem sessão (tela de entrada) não há a faixa dos botões nativos no inset: a barra de status é o inset inteiro */
html.app-ios.app-sem-topo{--app-status:env(safe-area-inset-top,0px)}
html.app-ios #omodal{--veu:1;--folha-topo:calc(var(--app-status) + 10px);align-items:flex-end;padding:0;
  background:rgba(20,15,10,calc(.42 * var(--veu)));-webkit-backdrop-filter:none;backdrop-filter:none;
  transition:background-color .3s var(--curva-padrao,ease),visibility 0s linear 0s}
html.app-ios body.dark #omodal{background:rgba(0,0,0,calc(.55 * var(--veu)))}
html.app-ios #omodal.hidden{display:flex!important;visibility:hidden;pointer-events:none;--veu:0;
  transition:background-color .3s var(--curva-padrao,ease),visibility 0s linear var(--dur-folha)}
/* a folha na altura toda é chapa (--vidro-solido, o mesmo token do bloco apple-vidro-1620), sem desfoque: é o que o iOS 26
   faz com a folha que cresce até o topo (o vidro fica para a folha pela metade), e desfoque em camada que ROLA é o que
   engasgava a rolagem no iPhone (1.48.0, topo deste arquivo); com o vidro, o texto dos cards de trás aparecia na ficha */
html.app-ios #omodal>.oc{height:calc(100dvh - var(--folha-topo));max-height:none;box-sizing:border-box;transform:translate3d(0,0,0);
  transition:transform var(--dur-folha) var(--curva-folha);background:var(--vidro-solido,#FBF8F4);-webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:0 -8px 40px rgba(0,0,0,.18),var(--vidro-brilho,none);overscroll-behavior-y:contain}
html.app-ios #omodal.hidden>.oc{transform:translate3d(0,100%,0)}
html.app-ios #omodal.arrastando,html.app-ios #omodal.arrastando>.oc{transition:none}
/* com a ficha aberta, só ela: a faixa vermelha e o botão das lojas (HTML do app antigo) saem de cena até fechar */
html.app-nativo.ficha-aberta #acao-faixa,html.app-nativo.ficha-aberta #app-lojas-web{visibility:hidden}

/* ---------- 1.62.1: VOLTA DO SEGUNDO PLANO (web/live.js "retomada" e app-nativo.js ligarRetomada) ----------
   A lista da última sessão esmaece e não aceita toque enquanto o estado novo não chega; no meio, o vidro "Atualizando
   pedidos" (entra em 0,2 s com a mola, sai em 0,14 s). Se a conexão falhar, uma pílula discreta acima da barra. */
html.hub-retomando main,html.hub-retomando #acao-faixa{opacity:.22;pointer-events:none;transition:opacity var(--dur-rapida,.12s) linear}
#hub-retomada{position:fixed;left:50%;top:50%;z-index:1500;display:flex;align-items:center;gap:12px;box-sizing:border-box;min-height:56px;width:max-content;max-width:calc(100vw - 48px);white-space:nowrap;padding:14px 22px;border-radius:20px;
  background:var(--vidro-grosso,rgba(252,250,247,.86));color:var(--label,#3A2A1E);font-weight:600;font-size:var(--f-body,17px);line-height:1.2;
  -webkit-backdrop-filter:blur(var(--vidro-desfoque,24px)) saturate(var(--vidro-saturacao,180%));backdrop-filter:blur(var(--vidro-desfoque,24px)) saturate(var(--vidro-saturacao,180%));
  box-shadow:var(--vidro-brilho,none),var(--vidro-sombra-alta,0 18px 46px rgba(0,0,0,.2));
  opacity:0;transform:translate(-50%,-50%) scale(.9);transition:opacity .14s linear,transform .2s var(--curva-mola,cubic-bezier(.2,1.25,.35,1));pointer-events:none}
#hub-retomada.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
#hub-retomada[hidden]{display:none}
#hub-retomada .hr-roda{flex:none;width:22px;height:22px;box-sizing:border-box;border-radius:50%;border:2.5px solid color-mix(in srgb,currentColor 18%,transparent);border-top-color:var(--sys-red,#E0342E);animation:hr-gira .7s linear infinite}
@keyframes hr-gira{to{transform:rotate(360deg)}}
#hub-sem-conexao{position:fixed;left:50%;bottom:calc(var(--rodape-app) + 10px);transform:translateX(-50%);z-index:1240;display:flex;align-items:center;gap:8px;box-sizing:border-box;min-height:44px;width:max-content;max-width:calc(100vw - 32px);padding:8px 16px;border:0;border-radius:999px;
  background:var(--vidro-regular,rgba(255,255,255,.66));color:var(--label,#3A2A1E);font:inherit;font-size:var(--f-footnote,13px);font-weight:600;text-align:left;cursor:pointer;
  -webkit-backdrop-filter:blur(var(--vidro-desfoque,24px)) saturate(var(--vidro-saturacao,180%));backdrop-filter:blur(var(--vidro-desfoque,24px)) saturate(var(--vidro-saturacao,180%));
  box-shadow:var(--vidro-brilho,none),var(--vidro-sombra,0 8px 28px rgba(0,0,0,.14));transition:transform var(--dur-rapida,.12s),opacity var(--dur-rapida,.12s)}
#hub-sem-conexao[hidden]{display:none}
#hub-sem-conexao:active{transform:translateX(-50%) scale(.97);opacity:.7}
#hub-sem-conexao:focus-visible{outline:3px solid var(--foco-cor,#1861A0);outline-offset:3px}
#hub-sem-conexao i{flex:none;width:9px;height:9px;border-radius:50%;background:var(--sys-orange,#F5901B)}
@media (prefers-reduced-transparency:reduce){#hub-retomada,#hub-sem-conexao{-webkit-backdrop-filter:none;backdrop-filter:none}}

/* 1.66.0: toque na notificação traz o cartão certo para a vista (web/app-nativo.js, destacar) sem mexer no filtro de loja.
   Anel de 3 px (sombra, porque o cartão da cozinha já usa o contorno para a seleção) por 3 s; sem movimento para quem
   pediu menos movimento. */
html.app-nativo .app-destaque{box-shadow:0 0 0 3px rgba(224,52,46,.95),0 10px 30px rgba(224,52,46,.18)!important;animation:app-destaque-pulso 1s ease-in-out 3}
@keyframes app-destaque-pulso{0%,100%{box-shadow:0 0 0 3px rgba(224,52,46,.95),0 10px 30px rgba(224,52,46,.18)}50%{box-shadow:0 0 0 3px rgba(224,52,46,.35),0 10px 30px rgba(224,52,46,.08)}}
@media (prefers-reduced-motion:reduce){html.app-nativo .app-destaque{animation:none}}

/* 1.66.0: no iPhone (app e Safari), campo de texto com letra menor que 16 px faz o iOS aproximar a página ao digitar e
   não voltar (web/campos-celular.js marca esses campos). 16 px é o mínimo do iOS; campo maior fica como está. */
html.campos-16 .campo-16{font-size:max(16px,calc(16px * var(--dt,1)))!important}

/* ---------- 1.72.0 (auditoria de design 1720): MARGENS DA APPLE NO APP ----------
   No app o <main> não tem margem (a tela vai de ponta a ponta, como no iOS) e cada tela somava a própria folga: o título do
   Cardápio começava a 10 pt da borda, o das Negociações e dos Relatórios a 12, o da Manutenção a 14 e, no iPad, todas a 16.
   A HIG pede 16 pt no iPhone e 20 pt no iPad: uma medida só, --margem, para todas as telas. */
html.app-nativo{--margem:16px}
@media (min-width:700px){html.app-nativo{--margem:20px}}
html.app-nativo :is(.ges.dash,.menuv,.sim,.eq,.rel){padding-left:var(--margem);padding-right:var(--margem)}
html.app-nativo #neg-raiz.neg-tela,html.app-nativo #view-man .man-tela{padding-left:var(--margem);padding-right:var(--margem)}
/* 1.72.0 (pente fino final): no navegador do celular a margem era a soma da folga do <main> (8 px) com a de cada tela (10 a
   16): o Dashboard começava a 24 pt da borda, os Relatórios e as Negociações a 20, o Cardápio a 18. A mesma medida do app,
   16 pt, em todas as telas */
@media (max-width:640px){
  html:not(.app-nativo){--margem:16px}
  html:not(.app-nativo) main{margin-left:0;margin-right:0}
  html:not(.app-nativo) :is(.ges.dash,.menuv,.sim,.eq,.rel){padding-left:var(--margem);padding-right:var(--margem)}
  html:not(.app-nativo) #neg-raiz.neg-tela,html:not(.app-nativo) #view-man .man-tela{padding-left:var(--margem);padding-right:var(--margem)}
}