/* ===================================================================
   1.66.0 (onda G): O TOPO DO COMPUTADOR E DO PROGRAMA DO WINDOWS VIRA BOTÕES DE VIDRO FLUTUANTES, IGUAL AO iOS.

   Pedido do Philippe (28/09/2026): "Nós vamos transformar ou retirar a barra de menu que nós criamos no desktop e no
   programa do Windows e vamos substituir apenas por botões flutuantes estilo vidro no design do iOS. [...] vai ficar
   somente com os botões redondinhos flutuantes e os botões estilo vidro menores, para que assim a gente ganhe um pouco
   mais de espaço para mostrar o conteúdo [...] Vamos deixar o logo da Philippe's Pizza também como um botão flutuante
   centralizado no topo da página, menor. Quando clicar nele, ele vira o cérebro [...] No menu sanduíche, nós também
   vamos trazer, ao lado do nome de cada item do menu ou de cada tela, os ícones que significam o item do menu."

   O que muda (fora do app; no app o cabeçalho web já some e os botões são nativos, app-ios.css e app-android.css):
   - header.top deixa de ser uma barra: é uma faixa TRANSPARENTE e fixa, que não recebe clique (pointer-events:none).
     Só as peças recebem clique, e cada peça é vidro (Liquid Glass na camada funcional, HIG): o menu à esquerda (redondo),
     o nome da tela ou o seletor da cozinha ao lado (pílula), o logo no centro (pílula menor), e à direita o seletor de
     lojas (pílula) e as ações (redondos menores: filtro, cancelados, selecionar, microfone, som, conta).
   - O conteúdo sobe: reserva só a altura dos botões (--topo-reserva, 60 px no computador contra os 92 px da barra) e,
     rolando, passa POR BAIXO dos botões de vidro. A expedição continua a caixa fixa da 1.22.0 (colunas até o fim).
   - Tamanhos pelo jeito de usar (web/entrada.js): com mouse, 40 px o menu e o logo e 36 px as ações (o tamanho de
     botão de barra do macOS); com o dedo (monitor de toque da loja, tablet, celular no navegador), 44 px em tudo.
   - O menu sanduíche ganha o ícone de cada tela (os mesmos desenhos da gaveta do app, HubIcones em web/entrada.js),
     vira um vidro grosso quase opaco (o fundo colorido da página vazava atrás dos nomes) e tem linhas do tamanho do
     computador (36 px) ou do dedo (44 px).

   A FICHA DO PEDIDO E AS OUTRAS JANELAS (.modal) ficam na linguagem da central de negociações: chapa sólida
   (--vidro-solido, o mesmo token da folha de negociações) sobre um véu escuro SEM desfoque. Antes: vidro grosso a 86% com
   desfoque, por cima de um fundo desfocado leitoso; era a única peça do sistema que não conversava com o resto.

   Carrega por último (depois do bloco apple-vidro-1620 do index.html): é a palavra final da cascata sobre o topo.
   =================================================================== */

/* ---------- 1. medidas ---------- */
body{--topo-y:10px;--topo-h:40px;--topo-btn:40px;--topo-acao:36px;--topo-gap:8px;--topo-lado:20px;
  --topo-respiro:12px;--topo-reserva:calc(var(--topo-y) + var(--topo-h) + var(--topo-respiro))}
html.hub-toque body{--topo-h:44px;--topo-btn:44px;--topo-acao:44px}
/* com a faixa vermelha da ação do cliente (web/acoes-cliente.css) os botões descem logo abaixo dela */
body.tem-acao-cliente{--topo-y:58px}
@media (max-width:760px){body{--topo-lado:10px;--topo-gap:6px;--topo-y:8px}body.tem-acao-cliente{--topo-y:56px}}
/* 1.72.0 (pente fino final): no celular os botões do topo ficam na margem de 16 pt do conteúdo (como os botões nativos do app);
   estavam a 10 e o título da tela a 16, desalinhados */
@media (max-width:640px){body{--topo-lado:16px}}
/* o monitor de toque da loja com mouse ligado se apresenta como pointer:fine; o primeiro toque de dedo marca hub-toque
   (web/entrada.js) e os controles voltam para 44 px, como no 1.44.0 */
html.hub-toque{--tap-desk:44px}

/* ---------- 2. a faixa: transparente, fixa, só as peças recebem clique ---------- */
html:not(.app-nativo) header.top{position:fixed;top:var(--topo-y);left:var(--topo-lado);right:var(--topo-lado);width:auto;
  margin:0!important;height:var(--topo-h);min-height:0;padding:0;box-sizing:border-box;
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:12px;row-gap:0;
  background:transparent!important;border:0!important;border-radius:0;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;pointer-events:none;z-index:45;overflow:visible;
  transition:top var(--dur-media,.2s) var(--curva-padrao,ease)}
html:not(.app-nativo) header.top .left,html:not(.app-nativo) header.top .right{pointer-events:none;display:flex;align-items:center;
  gap:var(--topo-gap);min-width:0;overflow:visible;flex-wrap:nowrap;margin:0;padding:0}
html:not(.app-nativo) header.top .left{grid-column:1;grid-row:1;justify-self:start;max-width:100%}
html:not(.app-nativo) header.top .right{grid-column:3;grid-row:1;justify-self:end;max-width:100%}
html:not(.app-nativo) header.top .left>*,html:not(.app-nativo) header.top .right>*,html:not(.app-nativo) header.top .ctxbtns>*,
html:not(.app-nativo) header.top .kdsbar>*,html:not(.app-nativo) header.top>#aibtn,html:not(.app-nativo) header.top>#aikdsbar{pointer-events:auto}
html:not(.app-nativo) header.top .ctxbtns,html:not(.app-nativo) header.top .kdsbar{pointer-events:none;gap:var(--topo-gap)}
html:not(.app-nativo) header.top .environment-title{pointer-events:none}
html:not(.app-nativo) header.top .environment-title>*{pointer-events:auto}

/* o conteúdo sobe e ganha a altura que a barra ocupava */
html:not(.app-nativo) body{padding-top:var(--topo-reserva)}
html:not(.app-nativo) body.view-exp{box-sizing:border-box}
html:not(.app-nativo) body.view-kds .grid{padding-top:0}
/* no escuro o <main> ainda tinha um painel café translúcido que parava onde o conteúdo acabava: sem a barra, a tela é uma folha só */
html:not(.app-nativo) body.dark main{background:transparent;border-color:transparent;box-shadow:none}

/* ---------- 3. a receita do vidro dos botões (a mesma do iOS: desfoque com saturação, fio de luz, sombra curta) ---------- */
html:not(.app-nativo) header.top :is(#menubtn,.icon,#unitlabel,#kstate-trigger,#curview,.pstat.inbar .pst,#aibtn){
  background:var(--topo-vidro,rgba(255,255,255,.62));border:0;color:var(--label);
  -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%)); /* 1.72.0: a receita única do vidro */
  box-shadow:var(--vidro-brilho),0 1px 2px rgba(40,25,12,.08),0 4px 14px rgba(40,25,12,.12)}
body.dark{--topo-vidro:rgba(44,38,34,.62)}
html:not(.app-nativo) body.dark header.top :is(#menubtn,.icon,#unitlabel,#kstate-trigger,#curview,.pstat.inbar .pst,#aibtn){
  box-shadow:var(--vidro-brilho),0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.36)}
@media (prefers-contrast:more){body{--topo-vidro:rgba(255,255,255,.95)} body.dark{--topo-vidro:rgba(20,18,16,.95)}}
@media (prefers-reduced-transparency:reduce){body{--topo-vidro:var(--vidro-solido,#FBF8F4)}
  html:not(.app-nativo) header.top :is(#menubtn,.icon,#unitlabel,#kstate-trigger,#curview,.pstat.inbar .pst,#aibtn){-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}

/* redondos: o menu (40) e as ações (36; 44 no toque) */
html:not(.app-nativo) header.top #menubtn{width:var(--topo-btn);height:var(--topo-btn);min-width:var(--topo-btn);min-height:var(--topo-btn);border-radius:50%;padding:0;display:grid;place-items:center;flex:none}
html:not(.app-nativo) header.top .right .icon,html:not(.app-nativo) header.top .ctxbtns .icon{width:var(--topo-acao);height:var(--topo-acao);min-width:var(--topo-acao);min-height:var(--topo-acao);border-radius:50%;padding:0;display:grid;place-items:center;flex:none}
html:not(.app-nativo) header.top .icon svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
html:not(.app-nativo) header.top #menubtn svg{width:20px;height:20px}
html.hub-toque:not(.app-nativo) header.top .icon svg{width:20px;height:20px}
html:not(.app-nativo) header.top .icon.hidden,html:not(.app-nativo) header.top .hidden{display:none!important}
/* estado ligado (filtro com filtro, cancelados à mostra, seleção): o vidro ganha a tinta azul do sistema */
html:not(.app-nativo) header.top .ctxbtns .icon.on,html:not(.app-nativo) header.top .ctxbtns .icon.active{background:color-mix(in srgb,var(--sys-blue,#0088FF) 22%,var(--topo-vidro,rgba(255,255,255,.62)));color:var(--ink-blue,#0066CC)}
html:not(.app-nativo) header.top .ctxbtns .nb{top:-3px;right:-3px}
html:not(.app-nativo) header.top .conta-iniciais{width:calc(var(--topo-acao) - 8px);height:calc(var(--topo-acao) - 8px)}

/* pílulas: o nome da tela, o seletor da cozinha e o seletor de lojas */
html:not(.app-nativo) header.top :is(#curview,#kstate-trigger,#unitlabel,.pstat.inbar .pst){height:var(--topo-h);min-height:var(--topo-h);border-radius:999px;padding:0 16px;
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-size:var(--f-subhead,15px);font-weight:600;line-height:1.2}
html:not(.app-nativo) header.top #curview{max-width:min(34vw,320px);overflow:hidden;text-overflow:ellipsis;display:inline-block;line-height:var(--topo-h);cursor:default}
html:not(.app-nativo) header.top #curview:empty{display:none}
html:not(.app-nativo) body.view-kds header.top #curview{display:none}
html:not(.app-nativo) header.top #unitlabel{max-width:230px;overflow:hidden;text-overflow:ellipsis}
html:not(.app-nativo) header.top #kstate-control{min-width:0}

/* a situação das plataformas (#pstatbar: "Sem conexão com o servidor...", plataforma fora do ar) morava dentro da barra, à
   direita, e empurrava os botões; agora flutua logo abaixo do logo, centralizada, com o texto inteiro (é aviso importante) */
html:not(.app-nativo) header.top .right{position:static}
html:not(.app-nativo) header.top .pstat.inbar{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;
  width:max-content;max-width:min(760px,calc(100vw - 2 * var(--topo-lado)));pointer-events:none}
html:not(.app-nativo) header.top .pstat.inbar:empty{display:none}
/* com o aviso à vista, o conteúdo desce a altura dele: o número do pedido no card nunca fica embaixo do aviso */
html:not(.app-nativo) body:has(#pstatbar .pst){--topo-reserva:calc(var(--topo-y) + var(--topo-h) + 40px + var(--topo-respiro))}
html:not(.app-nativo) header.top #pstatbar .pst{pointer-events:auto;height:auto;min-height:32px;padding:6px 14px;white-space:normal;text-align:center;font-size:var(--f-footnote,13px)}
/* o logo: pílula de vidro menor, no centro */
html:not(.app-nativo) header.top>#aibtn{grid-column:2;grid-row:1;justify-self:center;height:var(--topo-btn);min-height:var(--topo-btn);padding:0 16px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative}
html:not(.app-nativo) header.top>#aibtn img.lday,html:not(.app-nativo) body.dark header.top>#aibtn img.lnight{height:22px!important;width:auto}
html:not(.app-nativo) header.top>#aibtn .philippe-brain{width:28px;height:30px}
/* no escuro o logo é o selo da fatia (mais alto que largo): ele ocupa a altura da pílula, como na barra de antes */
html:not(.app-nativo) body.dark header.top>#aibtn{padding:0 14px}
html:not(.app-nativo) body.dark header.top>#aibtn img.lnight{height:calc(var(--topo-btn) - 8px)!important}
/* aberto o Cérebro o logo some e a esfera fica (a animação é a de sempre, philippe-orb.css); a pílula fica sem vidro */
html:not(.app-nativo) body.ai-on header.top>#aibtn{background:transparent;box-shadow:none;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
/* a barra de escrever da cozinha (modo antigo do Cérebro) nasce no lugar do logo e estica a coluna do meio */
html:not(.app-nativo) body.ai-kds header.top{grid-template-columns:auto minmax(0,1fr) auto}
html:not(.app-nativo) header.top>#aikdsbar{grid-column:2;grid-row:1}

/* ---------- 4. mouse: hover, apertado, cursor e foco ---------- */
html:not(.app-nativo) header.top :is(#menubtn,.icon,#unitlabel,#kstate-trigger,#aibtn){cursor:pointer;
  transition:background-color var(--dur-rapida,.12s),transform var(--dur-rapida,.12s),box-shadow var(--dur-media,.2s),top var(--dur-media,.2s)}
html.hub-clique:not(.app-nativo) header.top :is(#menubtn,.icon,#unitlabel,#kstate-trigger,#aibtn):hover{background:color-mix(in srgb,var(--topo-vidro,rgba(255,255,255,.62)) 70%,var(--label,#3A2A1E) 10%)}
html:not(.app-nativo) header.top :is(#menubtn,.icon,#unitlabel,#kstate-trigger,#aibtn):active{transform:scale(.95)}
html:not(.app-nativo) header.top :is(#menubtn,.icon,#unitlabel,#kstate-trigger,#curview,#aibtn):focus-visible{outline:3px solid var(--foco-cor,#1861A0);outline-offset:2px}
html:not(.app-nativo) body.role-loja header.top #unitlabel{cursor:default}
html:not(.app-nativo) header.top #menubtn[aria-expanded="true"]{background:color-mix(in srgb,var(--topo-vidro,rgba(255,255,255,.62)) 60%,var(--label,#3A2A1E) 16%)}

/* ---------- 5. telas estreitas (celular no navegador e janela pequena) ---------- */
@media (max-width:760px){
  html:not(.app-nativo) header.top{column-gap:6px}
  html:not(.app-nativo) header.top #curview{display:none}
  html:not(.app-nativo) header.top>#aibtn{padding:0 12px}
  html:not(.app-nativo) header.top>#aibtn img.lday,html:not(.app-nativo) body.dark header.top>#aibtn img.lnight{height:18px!important}
  html:not(.app-nativo) header.top #unitlabel{max-width:38vw;padding:0 12px}
  html:not(.app-nativo) header.top #voice-wake{display:none}
}
@media (max-width:520px){
  /* celular no navegador (o app tem os botões nativos): duas linhas de botões. Em cima o menu, a tela e o logo no centro;
     embaixo, à direita, as lojas e as ações. O conteúdo reserva as duas linhas. */
  body{--topo-reserva:calc(var(--topo-y) + 2 * var(--topo-h) + 6px + var(--topo-respiro))}
  html:not(.app-nativo) header.top{height:auto;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-rows:var(--topo-h) var(--topo-h);row-gap:6px}
  html:not(.app-nativo) header.top .right{grid-column:1 / -1;grid-row:2;justify-self:end}
  html:not(.app-nativo) header.top #kstate-trigger{padding:0 12px}
  html:not(.app-nativo) header.top #kstate-trigger>span:not([aria-hidden]),html:not(.app-nativo) header.top #kstate-trigger .kst-nome{display:none}
}

/* ---------- 6. o que ficava ancorado embaixo da barra sobe junto ---------- */
html:not(.app-nativo) .menudd{top:calc(var(--topo-y) + var(--topo-h) + 8px);left:var(--topo-lado)}
html:not(.app-nativo) .order-filter-panel{top:calc(var(--topo-y) + var(--topo-h) + 8px);right:var(--topo-lado);max-height:calc(100dvh - var(--topo-y) - var(--topo-h) - 24px)}
html:not(.app-nativo) .store-status-popover{top:calc(var(--topo-y) + var(--topo-h) + 8px)}
html:not(.app-nativo) .toasts{top:calc(var(--topo-y) + var(--topo-h) + 10px)}
html:not(.app-nativo) body.tem-acao-cliente .toasts{top:calc(var(--topo-y) + var(--topo-h) + 10px)}
html:not(.app-nativo) .kfilter{top:calc(var(--topo-y) + var(--topo-h) + 10px)}
html:not(.app-nativo) body.tem-acao-cliente{padding-top:var(--topo-reserva)}

/* ---------- 7. o MENU SANDUÍCHE com o ícone de cada tela ---------- */
html:not(.app-nativo) .menudd{min-width:290px;max-width:min(360px,calc(100vw - 2 * var(--topo-lado)));max-height:calc(100dvh - var(--topo-y) - var(--topo-h) - 24px);overflow:auto;
  padding:8px;gap:1px;background:var(--menu-vidro,rgba(252,250,247,.94));color:var(--label);border-radius:20px;
  -webkit-backdrop-filter:blur(30px) saturate(var(--vidro-saturacao,180%));backdrop-filter:blur(30px) saturate(var(--vidro-saturacao,180%));
  box-shadow:var(--vidro-brilho),0 2px 6px rgba(40,25,12,.10),0 18px 46px rgba(40,25,12,.22);transform-origin:0 0;
  animation:topo-menu-abre var(--dur-media,.2s) var(--curva-padrao,ease)}
body.dark{--menu-vidro:rgba(38,34,31,.97)}
@keyframes topo-menu-abre{from{opacity:0;transform:scale(.96) translateY(-4px)}to{opacity:1;transform:none}}
html:not(.app-nativo) .menudd>button,html:not(.app-nativo) .menudd .ddmenu-item{display:flex;align-items:center;gap:12px;width:100%;min-height:36px;padding:7px 12px;border:0;border-radius:10px;background:transparent;
  color:var(--label);font:inherit;font-size:var(--f-subhead,15px);font-weight:600;text-align:left;cursor:pointer;box-sizing:border-box}
html.hub-toque:not(.app-nativo) .menudd>button{min-height:44px;padding:10px 12px}
html:not(.app-nativo) .menudd>button>svg,html:not(.app-nativo) .menudd .dd-ico svg{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;color:var(--label2)}
html:not(.app-nativo) .menudd .dd-ico{display:grid;place-items:center;width:22px;flex:none}
html:not(.app-nativo) .menudd>button>.dd-txt{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;white-space:nowrap}
html:not(.app-nativo) .menudd>button.on{background:color-mix(in srgb,var(--sys-green,#34C759) 16%,transparent)}
html:not(.app-nativo) .menudd>button.on .dd-ico svg{color:var(--ink-green,#1E7B34)}
html.hub-clique:not(.app-nativo) .menudd>button:not(.on):hover{background:var(--fill,rgba(90,65,45,.08))}
html:not(.app-nativo) .menudd>button:focus-visible{outline:3px solid var(--foco-cor,#1861A0);outline-offset:-2px}
html:not(.app-nativo) .menudd>button.ddsair{color:var(--ink-red,#B42318);margin-top:4px;border-top:0}
html:not(.app-nativo) .menudd>button.ddsair .dd-ico svg{color:var(--ink-red,#B42318)}
html:not(.app-nativo) .menudd .ddlabel{padding:10px 12px 4px;font-size:var(--f-caption1,12px);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--label2)}
html:not(.app-nativo) .menudd .ddstores{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;margin:0 4px 2px;border-radius:14px;background:var(--fill,rgba(90,65,45,.08))}
html:not(.app-nativo) .menudd .ddstores button{min-height:32px;padding:4px 8px;border:0;border-radius:10px;background:transparent;color:var(--label);font:inherit;font-size:var(--f-footnote,13px);font-weight:650;cursor:pointer;line-height:1.15}
html.hub-toque:not(.app-nativo) .menudd .ddstores button{min-height:40px}
html:not(.app-nativo) .menudd .ddstores button.on{background:var(--on-red,#E0342E);color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.15)}
html:not(.app-nativo) .menudd .ddstores button[data-ddstore="all"].on{background:var(--on-green,#22B14C)}
html.hub-clique:not(.app-nativo) .menudd .ddstores button:not(.on):hover{background:var(--surface,#fff)}
@media (prefers-reduced-motion:reduce){html:not(.app-nativo) .menudd{animation:none}}

/* ---------- 8. A FICHA DO PEDIDO E AS OUTRAS JANELAS ----------
   Fora do app (computador, programa do Windows e navegador): chapa sólida sobre véu sem desfoque, a linguagem da central
   de negociações. NO APP NADA MUDA (html.app-nativo fica de fora): a ficha do iPhone é a da 1.65.0, pixel por pixel
   (tests/qa_ficha_1660.py confere). */
html:not(.app-nativo) .modal:not(.aiexp){background:rgba(20,15,10,.46);-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html:not(.app-nativo) body.dark .modal:not(.aiexp){background:rgba(0,0,0,.6)}
html:not(.app-nativo) .modal:not(.aiexp)>:is(.pc,.lc){background:var(--vidro-solido,#FBF8F4);color:var(--label,#3A2A1E);
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:0;
  box-shadow:inset 0 0 0 .5px var(--sep,rgba(58,42,30,.14)),0 18px 60px rgba(20,12,6,.28)}
html:not(.app-nativo) body.dark .modal:not(.aiexp)>:is(.pc,.lc){box-shadow:inset 0 0 0 .5px rgba(255,255,255,.08),0 18px 60px rgba(0,0,0,.55)}
html:not(.app-nativo) .modal:not(.aiexp)>:is(.oc,.pc,.lc){border-radius:22px}
/* as outras fichas .oc (histórico, detalhe) seguem a chapa sólida */
html:not(.app-nativo) .modal:not(.aiexp):not(#omodal)>.oc{background:var(--vidro-solido,#FBF8F4);color:var(--label,#3A2A1E);-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* ---------- 8b. A FICHA DO PEDIDO NO COMPUTADOR É A FOLHA DO iOS ----------
   Philippe (28/09/2026): "O design do card com mais informações no iOS já está ótimo. Temos que trazer esse design para o
   desktop e programa do Windows". Medido lado a lado (estilos calculados de cada peça da ficha, iPhone 390 px x computador
   1440 px, mesma ficha): o conteúdo é o MESMO markup (overlayHTML) e as diferenças eram só estas, agora iguais ao iOS:
   - uma coluna só (no computador eram duas: pedido e entrega à esquerda, linha do tempo à direita), na ordem do iOS:
     cabeçalho (plataforma, número, etapa, cronômetro), cliente, itens, entregador, etapas, linha do tempo, extrato,
     endereço e cliente, e os botões;
   - respiro da folha 14 px nos lados e em cima e 12 px embaixo (eram 18 e 20);
   - número do pedido no tamanho do iOS (28 pt vezes o tamanho do texto; era 36);
   - chapa --vidro-solido com a borda fina de vidro e o fio de luz por dentro, a sombra da folha do iOS, véu de 42% (55% no
     escuro) sem desfoque;
   - botões de ação com 44 px de altura, como no iOS.
   O que é do computador: a folha abre centralizada (460 px, até a altura da janela menos 48 px, rolando por dentro), com
   o X redondo no canto superior direito (Esc também fecha; o foco entra no primeiro botão e o Tab anda pela folha, preso
   nela pelo modal-foco.js), sem alça e sem puxar para baixo. Fora do celular do navegador (lá vale a folha de baixo do
   folha.css) e fora do app (lá é a própria folha do iOS). */
html:not(.app-nativo):not(.hub-folha-celular) #omodal{background:rgba(20,15,10,.42);padding:24px;align-items:center;justify-content:center;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html:not(.app-nativo):not(.hub-folha-celular) body.dark #omodal{background:rgba(0,0,0,.55)}
/* 1.72.0 (pente fino final): 20 pt dos lados, a margem da Apple no iPad (o texto da ficha começava a 15 pt da borda) */
html:not(.app-nativo):not(.hub-folha-celular) #omodal>.oc{width:min(460px,100%);max-width:100%;max-height:calc(100dvh - 48px);box-sizing:border-box;overflow:auto;overscroll-behavior:contain;
  padding:14px 20px 12px;border-radius:22px;background:var(--vidro-solido,#FBF8F4);color:var(--label,#3A2A1E);
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:0 8px 40px rgba(0,0,0,.18),var(--vidro-brilho,none)}
html:not(.app-nativo):not(.hub-folha-celular) #omodal>.oc :is(.glass,.extrato){-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html:not(.app-nativo):not(.hub-folha-celular) #omodal>.oc .ocols{grid-template-columns:minmax(0,1fr)}
html:not(.app-nativo):not(.hub-folha-celular) #omodal>.oc .oh .n{font-size:var(--f-largetitle,calc(34px * var(--dt)))} /* 1.72.0 (pente fino): o número da ficha é o Large Title, em todo tamanho (era 28, 32 ou 36) */
html:not(.app-nativo):not(.hub-folha-celular) #omodal>.oc .btn{min-height:44px}
html:not(.app-nativo):not(.hub-folha-celular) #omodal>.oc .oh .x{display:grid;place-items:center;flex:none;margin-left:auto;width:32px;height:32px;min-width:32px;min-height:32px;padding:0;border-radius:50%;
  background:var(--fill,rgba(90,65,45,.08));color:var(--label,#3A2A1E);font-size:var(--f-subhead,15px);line-height:1;cursor:pointer} /* 1.72.0: o X é o símbolo em SVG, igual em todas as janelas */
html.hub-clique:not(.app-nativo) #omodal>.oc .oh .x:hover{background:var(--fill2,rgba(58,42,30,.16))}
html.hub-toque:not(.app-nativo):not(.hub-folha-celular) #omodal>.oc .oh .x{width:44px;height:44px}
/* 1.69.1 (Philippe, 28/09/2026): "Na versão desktop, quando clicar em um mini card do pedido na expedição, não pode abrir mais
   informações em um formato que parece o do telefone. Tem que ser um card mais largo para usar o recurso da tela maior do
   computador. Lembre: versão celular, touchscreen, tela pequena x versão desktop, clique, tela grande."
   Computador com mouse (hub-clique) e janela larga: a ficha abre larga, até 1120 px, com duas colunas (pedido, entregador e
   etapas à esquerda; linha do tempo à direita) e endereço, cliente e botões na largura toda. Toque e tela pequena seguem com
   a folha de 460 px (e o celular com a folha de baixo). */
@media (min-width:1000px){
  html.hub-clique:not(.app-nativo):not(.hub-folha-celular) #omodal>.oc{width:min(1120px,calc(100vw - 64px));padding:18px 22px 16px;border-radius:24px}
  html.hub-clique:not(.app-nativo):not(.hub-folha-celular) #omodal>.oc .ocols{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px}
  html.hub-clique:not(.app-nativo):not(.hub-folha-celular) #omodal>.oc .oh .n{font-size:var(--f-largetitle,calc(34px * var(--dt)))}
  html.hub-clique:not(.app-nativo):not(.hub-folha-celular) #omodal>.oc .oinfo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 24px}
}

/* ---------- 9. COMPUTADOR x TOQUE nas peças comuns (o inventário está em docs/design/REVISAO-TOQUE-CLIQUE-1660.md) ---------- */
/* clique: tudo que é clicável tem a mãozinha; o que é arrastável mostra que arrasta */
html.hub-clique :where(button,[role=button],summary,select,label[for],.btn,.pill,.chip,.k[data-card],.e[data-card]):not(:disabled){cursor:pointer}
html.hub-clique :where(input[type=text],input[type=search],input[type=password],input:not([type]),textarea){cursor:text}
/* clique: hover visível nos controles que não tinham (o apertado continua) */
html.hub-clique :where(.btn,.icon,.pill,.chip):not(:disabled):not(.on):not(.primary):not(.danger):hover{filter:brightness(.96)}
html.hub-clique body.dark :where(.btn,.icon,.pill,.chip):not(:disabled):not(.on):not(.primary):not(.danger):hover{filter:brightness(1.18)}
/* clique: o X das janelas é um botão redondo do tamanho do computador, com hover */
html.hub-clique:not(.app-nativo) .oh .x{border-radius:50%;width:32px;height:32px;min-width:32px;min-height:32px}
html.hub-clique:not(.app-nativo) .oh .x:hover{background:var(--fill2,rgba(58,42,30,.14))}
/* toque: nada depende de hover; alça das folhas só no toque */
html.hub-toque :where(.btn,.icon,.pill,.chip):hover{filter:none}
/* o botão de fechar (X) visível da ficha da central de negociações: computador sim, celular não (fecha puxando) */
.neg-ficha-x{display:none}
html:not(.hub-folha-celular) .neg-ficha-x{display:grid}
html:not(.hub-folha-celular) #neg-folha-raiz .neg-so-leitor[data-neg-voltar]{display:none}
/* o visualizador de fotos já tinha as duas dicas (toque e mouse) pela media query; agora segue o jeito de usar de verdade */
html.hub-toque .hub-fotos .hf-dica-mouse{display:none} html.hub-toque .hub-fotos .hf-dica-toque{display:inline}
html.hub-clique .hub-fotos .hf-dica-toque{display:none} html.hub-clique .hub-fotos .hf-dica-mouse{display:inline}

/* 1.69.1 (Philippe): no computador o botão das lojas é só o ícone de ligar, redondo e na cor da situação, igual ao do app
   do iPhone: verde (todas abertas), laranja (restrição, situação mista ou sem confirmação) e vermelho (fechadas). O nome da
   loja e a situação ficam no aviso ao parar o mouse e no leitor de tela. No celular pelo navegador continua a etiqueta. */
#unitlabel .ss-ligar{display:none}
html.hub-clique:not(.app-nativo) header.top #unitlabel[data-lojas-cor]{width:var(--topo-h);min-width:var(--topo-h);max-width:none;padding:0;border-radius:50%;justify-content:center;gap:0;
  --lojas-cor:#F5901B;color:#2A1C12;background:color-mix(in srgb,var(--lojas-cor) 90%,transparent);border-color:transparent}
html.hub-clique:not(.app-nativo) header.top #unitlabel[data-lojas-cor]:hover{background:var(--lojas-cor);filter:brightness(1.06)}
html.hub-clique:not(.app-nativo) header.top #unitlabel[data-lojas-cor]>:not(.ss-ligar){display:none}
html.hub-clique:not(.app-nativo) header.top #unitlabel[data-lojas-cor] .ss-ligar{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
html.hub-clique:not(.app-nativo) header.top #unitlabel[data-lojas-cor=verde]{--lojas-cor:#1E8E3E;color:#fff}
html.hub-clique:not(.app-nativo) header.top #unitlabel[data-lojas-cor=vermelho]{--lojas-cor:#D22D27;color:#fff}

/* ---------- 1.69.1 (Philippe): o conteúdo sobe e encosta nos botões do topo ----------
   "Como diminuímos a barra do menu superior, vc tem que chegar o conteúdo mais para cima, perto dos botões [...] O mesmo
   espaço que vc deu para os botões do menu inferior, vai ser o mesmo espaço para o botões de menu superior. Tanto na
   versão desktop, como na versão móbile."
   Cada tela somava a sua própria folga (12 a 14 px de padding, 10 px de margem do título, 10 px da faixa de avisos vazia)
   em cima da reserva dos botões: o conteúdo começava 22 a 49 px abaixo deles. Agora a folga é uma só:
   - computador e celular pelo navegador: 12 px (--topo-respiro, seção 1), a mesma que sobra embaixo das colunas da expedição;
   - app: 8 px, a mesma entre o conteúdo e a cápsula de abas (4 px do --rodape-app e 4 px da coluna). O nativo reserva
     44 pt do botão e 6 pt de folga dos dois lados (HubBarraPlugin.swift); o CSS soma só mais 2 px. */
:root{--topo-app:calc(env(safe-area-inset-top) + 2px)}
main>.view>:is(.ges,.eq,.rel,.menuv,.sim){padding-top:0}
main>.view>#neg-raiz.neg-tela,#neg-raiz .neg-topo,#view-man .man-tela,#view-man .man-topo{padding-top:0}
#neg-raiz #neg-titulo{margin-top:0}
main>.view>.ges>.dhead:first-child .h1,main>.view>.ges>.settings-head:first-child,main>.view>.sim>.h1:first-child{margin-top:0}
#view-exp .alerts:empty{margin-top:0}
html #view-exp .lanes,html.app-nativo #view-exp.on .lanes{padding-top:0}
#view-exp .lane h3{margin-top:0}
html.app-nativo #view-kds .grid{padding-top:0}
html:not(.app-nativo) .rel-nav{top:var(--topo-reserva)}

/* 1.69.1: a barra da seleção em massa ganhou o X para sair (o botão Selecionar do topo saiu). O X fica no fim da linha do
   "N selecionados", em cima das ações; no celular também (antes o contador ocupava a linha inteira). */
#selbar #selcount{order:1}
#selbar .selsair{order:2;width:36px;height:36px;min-width:36px;min-height:36px;border-radius:50%;padding:0;display:grid;place-items:center}
#selbar .selsair svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
html.hub-toque #selbar .selsair{width:44px;height:44px;min-width:44px;min-height:44px}
#selbar .bulk-actions{order:3}
#selbar .bulk-target-note{order:4}
@media (max-width:560px){#selbar #selcount{flex:1 1 0;flex-basis:auto;min-width:0}}

/* 1.70.0 (auditoria, 29/09/2026): ALVOS DE TOQUE que a varredura mediu abaixo de 44 px (tools/auditoria/varredura.py, celular
   390 e 375 px, app simulado). O desenho não muda: onde o botão é pequeno de propósito (número da coluna da expedição), a área
   de toque cresce por um ::after transparente, como o .adv.sm já fazia. */
html.hub-toque:not(.app-nativo) header.top>#aibtn{min-width:44px}
html.hub-toque .lane h3 .lane-conta{position:relative}
html.hub-toque .lane h3 .lane-conta::after{content:"";position:absolute;inset:-7px -3px}
html.hub-toque:not(.app-nativo) .menudd .ddstores button{min-height:44px}
html.hub-toque .store-test-kind select{min-height:44px}
/* o PIN das Configurações da loja era um campo de 22 px sem estilo, colado no rótulo; 16 px ou mais evita o zoom do iPhone */
#local-settings-pin{display:block;width:100%;min-height:44px;box-sizing:border-box;margin-top:6px;padding:10px 12px;font:inherit;font-size:max(16px,var(--f-body,17px));color:var(--label);background:var(--surface,#fff);border:1px solid var(--hair,rgba(60,40,20,.18));border-radius:var(--r-ctl,12px)}
html.hub-clique:not(.app-nativo) header.top #unitlabel[data-lojas-cor=fora]{--lojas-cor:#8E8E93;color:#fff}/* 1.70.1: fora do horário de funcionamento, sem alarme */

/* 1.72.0 (auditoria de design 1720): no iPad pelo navegador (toque, de 761 a 1100 px) o topo fica cheio e a etiqueta das
   lojas cortava em "T…" (100 px de texto numa caixa de 21 px). Nessa largura ela vira o botão redondo com o ícone de ligar,
   na cor da situação, o mesmo do computador e do app; o nome da loja fica no leitor de tela e no painel que abre. */
@media (min-width:761px) and (max-width:1100px){
  html.hub-toque:not(.app-nativo) header.top #unitlabel[data-lojas-cor]{width:var(--topo-h);min-width:var(--topo-h);max-width:none;padding:0;border-radius:50%;justify-content:center;gap:0;
    --lojas-cor:#F5901B;color:#2A1C12;background:color-mix(in srgb,var(--lojas-cor) 90%,transparent);border-color:transparent}
  html.hub-toque:not(.app-nativo) header.top #unitlabel[data-lojas-cor]>:not(.ss-ligar){display:none}
  html.hub-toque:not(.app-nativo) header.top #unitlabel[data-lojas-cor] .ss-ligar{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
  html.hub-toque:not(.app-nativo) header.top #unitlabel[data-lojas-cor=verde]{--lojas-cor:#1E8E3E;color:#fff}
  html.hub-toque:not(.app-nativo) header.top #unitlabel[data-lojas-cor=vermelho]{--lojas-cor:#D22D27;color:#fff}
  html.hub-toque:not(.app-nativo) header.top #unitlabel[data-lojas-cor=fora]{--lojas-cor:#8E8E93;color:#fff}
}