/* 1.64.2: A FOLHA ÚNICA (web/folha.js, HubFolha). Mesma mecânica da ficha do pedido da 1.62.1 em todas as folhas do Hub:
   sobe de baixo com a curva de mola das folhas do iOS (0,38 s), fecha puxando para baixo, e o véu clareia junto.
   html.hub-folha-celular vale no app (iPhone e Android) e no navegador até 640 px; html.hub-folha diz que o folha.js
   carregou (ele é quem anima a entrada; sem ele, as animações antigas continuam). No computador, as janelas que abrem
   por cima entram com a mesma curva, curta, e nada arrasta. "Reduzir movimento" zera tudo (index.html). */
:root{--curva-folha:cubic-bezier(.32,.72,0,1);--dur-folha:.38s;--folha-alca:rgba(60,60,67,.3)}
body.dark{--folha-alca:rgba(235,235,245,.3)}
@keyframes hub-folha-sobe{from{transform:translate3d(0,100%,0)}to{transform:translate3d(0,0,0)}}
@keyframes hub-folha-veu{from{opacity:0}to{opacity:1}}

/* quem entra pela HubFolha.entrar não repete a animação de CSS antiga */
html.hub-folha .usu-painel,html.hub-folha .conta-folha{animation:none}

/* ---------- a alça (a mesma das folhas .modal do app) ---------- */
html.hub-folha-celular #atu-raiz .atu-painel::before,html.hub-folha-celular #suporte-raiz .sup-painel::before,
html.hub-folha-celular .usu-painel::before,html.hub-folha-celular .conta-folha::before{content:"";display:block;flex:none;width:36px;height:5px;border-radius:3px;background:var(--folha-alca);margin:8px auto 0}

/* ---------- as folhas .modal de index.html no navegador do celular (no app, app-ios.css e app-android.css já fazem) ---------- */
html.hub-folha-celular:not(.app-nativo) .modal:has(>.oc,>.pc,>.lc){align-items:flex-end;padding:0}
html.hub-folha-celular:not(.app-nativo) .modal>.oc,html.hub-folha-celular:not(.app-nativo) .modal>.pc,html.hub-folha-celular:not(.app-nativo) .modal>.lc{width:100%;max-width:100%;box-sizing:border-box;border-radius:22px 22px 0 0;max-height:var(--folha-grande);overflow:auto;padding-bottom:var(--folha-base);touch-action:pan-y;overscroll-behavior-y:contain}
html.hub-folha-celular:not(.app-nativo) .modal>.oc::before,html.hub-folha-celular:not(.app-nativo) .modal>.pc::before,html.hub-folha-celular:not(.app-nativo) .modal>.lc::before{content:"";display:block;width:36px;height:5px;border-radius:3px;background:var(--folha-alca);margin:0 auto 10px}

/* ---------- central de negociações: desde a 1.64.3 é uma tela do Hub, e a ficha de 95% está em web/negociacoes.css ---------- */

/* ---------- atualizações e suporte: folhas logo abaixo da barra de status (as peças nativas somem com elas) ---------- */
html.hub-folha-celular #atu-raiz .atu-painel{top:calc(var(--app-status,env(safe-area-inset-top,0px)) + 10px);left:0;right:0;bottom:0;width:auto;border-radius:22px 22px 0 0;padding-top:0;
  opacity:1;transform:translate3d(0,100%,0);transition:transform var(--dur-folha) var(--curva-folha);box-shadow:0 -8px 40px rgba(0,0,0,.18)}
html.hub-folha-celular #atu-raiz.aberto .atu-painel{transform:none}
html.hub-folha-celular #atu-raiz.aberto .atu-veu{opacity:var(--veu,1)}
html.hub-folha-celular #atu-raiz.hub-folha-arrastando .atu-veu{transition:none}
html.hub-folha-celular #suporte-raiz .sup-painel{opacity:1;transform:translate3d(0,100%,0);transition:transform var(--dur-folha) var(--curva-folha)}
html.hub-folha-celular #suporte-raiz.aberto .sup-painel{transform:none}
html.hub-folha-celular #suporte-raiz.aberto .sup-veu{opacity:var(--veu,1)}
html.hub-folha-celular #suporte-raiz.hub-folha-arrastando .sup-veu{transition:none}

/* ---------- usuários: folha grande abaixo da barra de status (1.72.0: no app as peças nativas somem com ela) ---------- */
html.hub-folha-celular .usu-fundo{align-items:stretch;padding:var(--folha-topo) 0 0}
html.hub-folha-celular .usu-painel{width:100%;height:100%;max-height:none;border-radius:22px 22px 0 0;padding-top:0}

/* ---------- card de resposta ao cliente: no navegador do celular, folha de baixo; no app fica entre as barras nativas ---------- */
html.hub-folha-celular:not(.app-nativo) #acao-card-fundo{align-items:flex-end;padding:calc(env(safe-area-inset-top,0px) + 10px) 0 0}
html.hub-folha-celular:not(.app-nativo) #acao-card{width:100%;border-radius:22px 22px 0 0;padding-bottom:env(safe-area-inset-bottom,0px)}

/* ---------- cartão de aprovação: entra com a mesma mola ---------- */
html.hub-folha-celular .aprov-card.entra{animation:hub-folha-sobe var(--dur-folha) var(--curva-folha)}

@media (prefers-reduced-motion:reduce){html.hub-folha-celular #atu-raiz .atu-painel,html.hub-folha-celular #suporte-raiz .sup-painel{transition:none;animation:none}}

/* ---------- 1.72.0 (auditoria de design 1720): AS ALTURAS DAS FOLHAS DO SISTEMA ----------
   Pedido do Philippe (29/09/2026): "muitos cards que sobem ficam cobertos pelos botões superiores e pela barra de menu
   inferior [...] alguns cards sobem pela metade da tela e, quando você puxa para baixo, ele não obedece". Toda folha do
   celular (app, ou navegador até 640 px) segue as mesmas medidas:
   - começa abaixo da barra de status e da ilha: --folha-topo (5% da tela no mínimo, a ficha de 95%; no app, a barra de
     status mais 10 px, porque as peças nativas somem enquanto qualquer folha está aberta: web/folha.js, sincronizar);
   - a folha grande (ficha, listas, formulários longos) tem --folha-grande (95%);
   - o diálogo curto tem a altura do conteúdo, com o mínimo de uma folha média (--folha-media) e o máximo da grande;
   - os botões de ação ficam acima do indicador de início (--folha-base);
   - tem a alça de 36 x 5 e sobe com a mola (HubFolha.entrar).
   Os módulos usam os tokens na folha deles (relatorios.css, fiscal.css, contas.css, calendario.css, usuarios.css,
   acoes-cliente.css); aqui ficam os tokens, as .modal de index.html e o filtro de pedidos. Para quem desenha folha nova:
   as classes .hub-folha-grande e .hub-folha-dialogo aplicam as duas alturas. */
:root{--folha-topo:max(5dvh, calc(env(safe-area-inset-top,0px) + 10px));--folha-grande:calc(100dvh - var(--folha-topo));
  --folha-media:min(var(--folha-grande), max(50dvh, 340px));--folha-base:calc(env(safe-area-inset-bottom,0px) + 16px)}
html.app-nativo{--folha-topo:max(5dvh, calc(var(--app-status,env(safe-area-inset-top,0px)) + 10px))}
html.hub-folha-celular .hub-folha-grande{height:var(--folha-grande);max-height:var(--folha-grande);box-sizing:border-box}
html.hub-folha-celular .hub-folha-dialogo{min-height:var(--folha-media);max-height:var(--folha-grande);box-sizing:border-box}

/* as .modal de index.html (no app e no navegador do celular): a ficha e o detalhe do Dashboard são folhas grandes; os
   diálogos (senha para cancelar, confirmações, lembrete do cardápio) têm o mínimo de uma folha média */
html.hub-folha-celular .modal>.oc,html.hub-folha-celular .modal>.pc,html.hub-folha-celular .modal>.lc{max-height:var(--folha-grande);padding-bottom:var(--folha-base);box-sizing:border-box}
/* a folha grande é chapa, sem desfoque (como a ficha do app, app-nativo.css): o vidro por cima do véu deixava o cabeçalho da
   tabela do detalhe do Dashboard com 4,4:1 e o texto dos cards de trás aparecia na folha */
html.hub-folha-celular .modal>.oc{height:var(--folha-grande);background:var(--vidro-solido,#FBF8F4);-webkit-backdrop-filter:none;backdrop-filter:none}
html.hub-folha-celular .modal>.pc,html.hub-folha-celular .modal>.lc{min-height:var(--folha-media)}

/* filtro de pedidos: no celular e no app deixa de ser o cartão centralizado de 801 pt (título na faixa da ilha, X sob o
   botão nativo, "Limpar" e "Concluir" sob a barra) e vira folha de baixo com véu, alça e arrasto (registrada em
   index.html, junto do toggleOrderFilterPanel) */
.of-veu{display:none}
html.hub-folha-celular .of-veu:has(+ #order-filter-panel:not(.hidden)){display:block;position:fixed;inset:0;z-index:1249;background:rgba(20,15,10,.42)}
html.hub-folha-celular body.dark .of-veu:has(+ #order-filter-panel:not(.hidden)){background:rgba(0,0,0,.55)}
html.hub-folha-celular #order-filter-panel{top:auto;left:0;right:0;bottom:0;transform:none;width:100%;max-width:100%;max-height:var(--folha-grande);min-height:var(--folha-media);
  overflow-x:hidden;overflow-y:auto;box-sizing:border-box;border-radius:22px 22px 0 0;padding:0 16px var(--folha-base);touch-action:pan-y;overscroll-behavior-y:contain;
  box-shadow:0 -8px 40px rgba(0,0,0,.18)}
@media (min-width:641px){html.hub-folha-celular #order-filter-panel{padding-left:20px;padding-right:20px}} /* 20 pt de margem no iPad */
html.hub-folha-celular #order-filter-panel::before{content:"";display:block;width:36px;height:5px;border-radius:3px;background:var(--folha-alca);margin:8px auto 4px}
/* 1.72.0 (pente fino): no toque o foco entra na folha do filtro (não no primeiro seletor); a folha não ganha anel */
#order-filter-panel:focus{outline:none}
/* 1.72.0 (pente fino final): SITUAÇÃO DAS LOJAS no celular e no app é folha de baixo (no iPhone o popover vira folha), com o
   véu irmão (#store-status-veu), a alça e o arrasto (registrada em web/store-status.js); antes descia do topo e não fechava
   puxando. As medidas são as das folhas do sistema. No computador segue o popover preso ao botão. */
.ss-veu{display:none}
html.hub-folha-celular .ss-veu:has(+ #store-status-popover:not(.hidden)){display:block;position:fixed;inset:0;z-index:1399;background:rgba(20,15,10,.42)}
html.hub-folha-celular body.dark .ss-veu:has(+ #store-status-popover:not(.hidden)){background:rgba(0,0,0,.55)}
html.hub-folha-celular #store-status-popover{top:auto!important;bottom:0!important;left:0!important;right:0!important;width:100%!important;max-width:100%!important;max-height:var(--folha-grande)!important;
  box-sizing:border-box;border-radius:22px 22px 0 0;padding:0 16px var(--folha-base);overflow-x:hidden;overflow-y:auto;touch-action:pan-y;overscroll-behavior-y:contain;
  background:var(--vidro-solido,#FBF8F4);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 -8px 40px rgba(0,0,0,.18);z-index:1400}
@media (min-width:641px){html.hub-folha-celular #store-status-popover{padding-left:20px;padding-right:20px}} /* 20 pt de margem no iPad */
html.hub-folha-celular #store-status-popover::before{content:"";display:block;width:36px;height:5px;border-radius:3px;background:var(--folha-alca);margin:8px auto 4px}