/* /topo-vidro.css */
/* ===================================================================
   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 */
/* 04/10/2026 (a dupla checagem): a altura é a da faixa de verdade (--acao-faixa-h, medida por web/acoes-cliente.js): com
   três chamados ela passa de 80 px e cobria os botões, porque a reserva era fixa em 48 */
body.tem-acao-cliente{--topo-y:calc(var(--acao-faixa-h,48px) + 10px)}
@media (max-width:760px){body{--topo-lado:10px;--topo-gap:6px;--topo-y:8px}body.tem-acao-cliente{--topo-y:calc(var(--acao-faixa-h,48px) + 8px)}}
/* 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,color-mix(in srgb,var(--surface,#FFFFFF) 62%,transparent));border:0;color:var(--label,#2A1C12);
  -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 color-mix(in srgb,light-dark(var(--label,#2A1C12),var(--page,#F7F5F1)) 8%,transparent),0 4px 14px color-mix(in srgb,light-dark(var(--label,#2A1C12),var(--page,#F7F5F1)) 12%,transparent)}
body.dark{--topo-vidro:color-mix(in srgb,var(--surface,#FFFFFF) 62%,transparent)}
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 color-mix(in srgb,var(--page,#F7F5F1) 30%,transparent),0 6px 18px color-mix(in srgb,var(--page,#F7F5F1) 36%,transparent)}
@media (prefers-contrast:more){body{--topo-vidro:color-mix(in srgb,var(--surface,#FFFFFF) 95%,transparent)} body.dark{--topo-vidro:color-mix(in srgb,var(--surface,#FFFFFF) 95%,transparent)}}
@media (prefers-reduced-transparency:reduce){body{--topo-vidro:var(--vidro-solido,var(--surface,#FFFFFF))}
  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(--acao,#1F5FD0) 22%,var(--topo-vidro,color-mix(in srgb,var(--surface,#FFFFFF) 62%,transparent)));color:var(--acao,#1F5FD0)}
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,0.9375rem);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[data-hub-pstat]:is(#hub-esp,*){--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,0.8125rem)}
/* 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,color-mix(in srgb,var(--surface,#FFFFFF) 62%,transparent)) 70%,var(--label,#2A1C12) 10%)}
html:not(.app-nativo) header.top :is(#menubtn,.icon,#unitlabel,#kstate-trigger,#aibtn):active{transform:scale(.95)}
/* No toque a pressão encolhe só o desenho, mantendo o alvo de 44 px.
   A regra global .pressed também usa !important durante 220 ms. */
html.hub-toque:not(.app-nativo) header.top :is(#menubtn,.icon,#unitlabel,#kstate-trigger,#aibtn):is(:active,.pressed){transform:none!important}
@media(prefers-reduced-motion:no-preference){html.hub-toque:not(.app-nativo) header.top :is(#menubtn,.icon,#unitlabel,#kstate-trigger,#aibtn):is(:active,.pressed)>svg{transform:scale(.94)}}
html:not(.app-nativo) header.top :is(#menubtn,.icon,#unitlabel,#kstate-trigger,#curview,#aibtn):focus-visible{outline:3px solid var(--acao,#1F5FD0);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,color-mix(in srgb,var(--surface,#FFFFFF) 62%,transparent)) 60%,var(--label,#2A1C12) 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}
  /* 1.74.0 (03/10/2026): em tela estreita cada lado da barra tem pelo menos a largura dos seus botões (antes as colunas
     eram metades iguais e, com o sino e o Cérebro, os botões da direita invadiam o logo). O logo fica no centro da tela
     quando cabe; quando não cabe, no meio do espaço que sobra (html.topo-logo-solto, web/topo-celular.js). */
  html:not(.app-nativo) header.top{grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr)}
  html.topo-logo-solto:not(.app-nativo) header.top{grid-template-columns:auto minmax(0,1fr) auto}
  html:not(.app-nativo) header.top .left,html:not(.app-nativo) header.top .right{max-width:none}
  html:not(.app-nativo) header.top .ctxbtns:empty{display:none}
  html:not(.app-nativo) header.top>#aibtn{flex:none}
}
@media (max-width:520px){
  /* 1.74.0 (Philippe, 03/10/2026): "O botão de loja ligado também é para ser só o ícone [...] você pode levar todos os
     botões para ficar alinhado com o botão do logo, o botão sanduíche. Assim, a gente cria mais espaço para mostrar o
     conteúdo." Celular no navegador (o app tem os botões nativos): UMA linha só. O menu à esquerda, o logo no meio e, à
     direita, os botões redondos (loja, sino, Cérebro, som, conta), todos iguais: 40 px de vidro com 44 px de alvo (a
     área de toque cresce 2 px para cada lado por um ::before transparente; o ::after do menu é o selo de atualização).
     Eram duas linhas (114 px reservados); agora o conteúdo reserva uma (60 px) e sobe 54 px.
     As colunas da grade são as do bloco de cima (até 760 px): o logo fica no centro da tela quando cabe; quando os
     botões da direita não deixam, ele fica no meio do espaço que sobra (html.topo-logo-solto, decidido por
     web/topo-celular.js, que também leva para o menu sanduíche o que não couber: primeiro o som, depois as ações da
     tela; nunca corta botão nem quebra para a segunda linha). */
  html:not(.app-nativo) body{--topo-h:40px;--topo-btn:40px;--topo-acao:40px;--topo-gap:4px}
  html:not(.app-nativo) header.top{height:var(--topo-h);grid-template-rows:var(--topo-h);row-gap:0;column-gap:6px}
  html:not(.app-nativo) header.top .right{grid-column:3;grid-row:1;justify-self:end}
  html:not(.app-nativo) header.top :is(#menubtn,.icon,#unitlabel){position:relative}
  html:not(.app-nativo) header.top :is(#menubtn,.icon,#unitlabel)::before{content:"";position:absolute;inset:-2px;border-radius:50%}
  /* 04/10/2026 (a dupla checagem): o logo também é botão (abre o Cérebro) e tinha 40 px de alvo na altura; ganha os mesmos 2 px de cada lado */
  html:not(.app-nativo) header.top>#aibtn{position:relative}
  html:not(.app-nativo) header.top>#aibtn::before{content:"";position:absolute;inset:-2px;border-radius:999px}
  html:not(.app-nativo) header.top .icon svg,html.hub-toque:not(.app-nativo) header.top .icon svg{width:20px;height:20px}
  html:not(.app-nativo) header.top>#aibtn{padding:0 10px;min-width:0;flex:none}
  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}
}
/* telas de 363 px para baixo (iPhone SE antigo, Android estreito): o logo encolhe um pouco para os botões caberem */
@media (max-width:363px){
  html:not(.app-nativo) header.top>#aibtn{padding:0 6px}
  html:not(.app-nativo) header.top>#aibtn img.lday{height:16px!important}
}
/* o que não coube na linha foi para o menu sanduíche (web/topo-celular.js marca o botão; o item do menu aciona o mesmo botão) */
html:not(.app-nativo) header.top [data-topo-no-menu]{display:none!important}
html:not(.app-nativo) .menudd .dd-topo-conta{margin-left:auto;min-width:1.375rem;height:1.375rem;padding:0 .375rem;border-radius:999px;background:var(--queda,#E21D3C);color:var(--acao-txt,#FFFFFF);font-size:max(.6875rem, calc(.75rem * var(--dt,1)));line-height:1.375rem;font-weight:700;text-align:center}

/* ---------- 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,color-mix(in srgb,var(--surface,#FFFFFF) 94%,transparent));color:var(--label,#2A1C12);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 color-mix(in srgb,light-dark(var(--label,#2A1C12),var(--page,#F7F5F1)) 10%,transparent),0 18px 46px color-mix(in srgb,light-dark(var(--label,#2A1C12),var(--page,#F7F5F1)) 22%,transparent);transform-origin:0 0;
  animation:topo-menu-abre var(--dur-media,.2s) var(--curva-padrao,ease)}
body.dark{--menu-vidro:color-mix(in srgb,var(--label,#2A1C12) 97%,transparent)}
/* 1.74.0 (Philippe, 04/10/2026, sexta fase, revisão final G1): no tema escuro o menu ficava com 55% de opacidade (a regra
   geral do vidro escuro, body.dark .glass.solid, no index, pesa mais que a regra de cima) e os números e títulos da tela
   de trás apareciam por baixo do texto do menu. O menu carrega texto denso: vale o vidro grosso que a linha de cima
   declara, também no escuro. */
html:not(.app-nativo) body.dark .menudd{background:var(--menu-vidro)}
@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,#2A1C12);font:inherit;font-size:var(--f-subhead,0.9375rem);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,#6B5A4C)}
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(--verde,#11994A) 16%,transparent)}
html:not(.app-nativo) .menudd>button.on .dd-ico svg{color:var(--d-verdeagua-t,#006F5D)}
html.hub-clique:not(.app-nativo) .menudd>button:not(.on):hover{background:var(--fill,color-mix(in srgb,var(--label,#2A1C12) 8%,transparent))}
html:not(.app-nativo) .menudd>button:focus-visible{outline:3px solid var(--acao,#1F5FD0);outline-offset:-2px}
html:not(.app-nativo) .menudd>button.ddsair{color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#2A1C12));margin-top:4px;border-top:0}
html:not(.app-nativo) .menudd>button.ddsair .dd-ico svg{color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#2A1C12))}
html:not(.app-nativo) .menudd .ddlabel{padding:10px 12px 4px;font-size:var(--f-caption1,0.75rem);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--label2,#6B5A4C)}
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,color-mix(in srgb,var(--label,#2A1C12) 8%,transparent))}
html:not(.app-nativo) .menudd .ddstores button{min-height:32px;padding:4px 8px;border:0;border-radius:10px;background:transparent;color:var(--label,#2A1C12);font:inherit;font-size:var(--f-footnote,0.8125rem);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(--queda,#E21D3C);color:var(--acao-txt,#FFFFFF);box-shadow:0 1px 3px color-mix(in srgb,light-dark(var(--label,#2A1C12),var(--page,#F7F5F1)) 15%,transparent)}
html:not(.app-nativo) .menudd .ddstores button[data-ddstore="all"].on{background:var(--verde,#11994A)}
html.hub-clique:not(.app-nativo) .menudd .ddstores button:not(.on):hover{background:var(--surface,#FFFFFF)}
@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:color-mix(in srgb,var(--label,#2A1C12) 46%,transparent);-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html:not(.app-nativo) body.dark .modal:not(.aiexp){background:color-mix(in srgb,var(--surface2,#F7F3EE) 60%,transparent)}
html:not(.app-nativo) .modal:not(.aiexp)>:is(.pc,.lc){background:var(--vidro-solido,var(--surface,#FFFFFF));color:var(--label,#2A1C12);
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:0;
  box-shadow:inset 0 0 0 .5px var(--sep,color-mix(in srgb,light-dark(var(--label,#2A1C12),var(--page,#F7F5F1)) 13%,transparent)),0 18px 60px color-mix(in srgb,light-dark(var(--label,#2A1C12),var(--page,#F7F5F1)) 28%,transparent)}
html:not(.app-nativo) body.dark .modal:not(.aiexp)>:is(.pc,.lc){box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--page,#F7F5F1) 8%,transparent),0 18px 60px color-mix(in srgb,var(--page,#F7F5F1) 55%,transparent)}
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,var(--surface,#FFFFFF));color:var(--label,#2A1C12);-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:color-mix(in srgb,var(--label,#2A1C12) 42%,transparent);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:color-mix(in srgb,var(--surface2,#F7F3EE) 55%,transparent)}
/* 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,var(--surface,#FFFFFF));color:var(--label,#2A1C12);
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:0 8px 40px color-mix(in srgb,light-dark(var(--label,#2A1C12),var(--page,#F7F5F1)) 18%,transparent),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(2.125rem * 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,color-mix(in srgb,var(--label,#2A1C12) 8%,transparent));color:var(--label,#2A1C12);font-size:var(--f-subhead,0.9375rem);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,color-mix(in srgb,var(--label,#2A1C12) 13%,transparent))}
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(2.125rem * 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,color-mix(in srgb,var(--label,#2A1C12) 13%,transparent))}
/* 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. 1.74.0 (03/10/2026): no celular pelo navegador
   também (o bloco do fim deste arquivo); a etiqueta com o nome só continua no monitor de toque largo da loja. */
#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:var(--d-ambar,#C27A00);color:var(--label,#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:var(--verde,#11994A);color:var(--acao-txt,#FFFFFF)}
html.hub-clique:not(.app-nativo) header.top #unitlabel[data-lojas-cor=vermelho]{--lojas-cor:var(--queda,#E21D3C);color:var(--acao-txt,#FFFFFF)}

/* ---------- 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(1rem,var(--f-body,1.0625rem));color:var(--label,#2A1C12);background:var(--surface,#FFFFFF);border:1px solid var(--sep,color-mix(in srgb,var(--label,#2A1C12) 13%,transparent));border-radius:var(--r-ctl,12px)}
html.hub-clique:not(.app-nativo) header.top #unitlabel[data-lojas-cor=fora]{--lojas-cor:var(--label3,#9C8D80);color:var(--acao-txt,#FFFFFF)}/* 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:var(--d-ambar,#C27A00);color:var(--label,#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:var(--verde,#11994A);color:var(--acao-txt,#FFFFFF)}
  html.hub-toque:not(.app-nativo) header.top #unitlabel[data-lojas-cor=vermelho]{--lojas-cor:var(--queda,#E21D3C);color:var(--acao-txt,#FFFFFF)}
  html.hub-toque:not(.app-nativo) header.top #unitlabel[data-lojas-cor=fora]{--lojas-cor:var(--label3,#9C8D80);color:var(--acao-txt,#FFFFFF)}
}

/* ---------- 1.74.0 (Philippe, 03/10/2026): no celular o botão das lojas é SÓ o ícone de ligar ----------
   "O botão de loja ligado também é para ser só o ícone. Não precisa deixar 'loja ligada' nele. É só o ícone de ligar,
   exatamente aquele que a gente colocou no iOS, porque agora o botão está muito grande ainda."
   A chave larga com a palavra ao lado (02/10) saiu: no celular pelo navegador o botão é o mesmo redondo do computador,
   do iPad e do app, do tamanho dos vizinhos, com o círculo e o traço na cor da situação: verde (as lojas recebendo),
   vermelho (pausada), laranja (situação mista, restrição ou alteração pendente) e cinza (fora do horário ou sem sinal).
   A palavra da situação fica no aria-label e no title (web/store-status.js). O toque continua abrindo a Situação das
   lojas, onde cada unidade tem o botão Fechar loja ou Abrir loja e os botões de cada canal (05/10/2026, quinta rodada). */
@media (max-width:760px){
  html:not(.app-nativo) header.top #unitlabel[data-lojas-cor]{width:var(--topo-acao);min-width:var(--topo-acao);height:var(--topo-acao);min-height:var(--topo-acao);max-width:none;padding:0;border-radius:50%;justify-content:center;gap:0;flex:none;
    --lojas-cor:var(--d-ambar,#C27A00);color:var(--label,#2A1C12);background:color-mix(in srgb,var(--lojas-cor) 90%,transparent);border-color:transparent}
  html:not(.app-nativo) header.top #unitlabel[data-lojas-cor]>:not(.ss-ligar){display:none}
  html: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:not(.app-nativo) header.top #unitlabel[data-lojas-cor=verde]{--lojas-cor:var(--verde,#11994A);color:var(--acao-txt,#FFFFFF)}
  html:not(.app-nativo) header.top #unitlabel[data-lojas-cor=vermelho]{--lojas-cor:var(--queda,#E21D3C);color:var(--acao-txt,#FFFFFF)}
  html:not(.app-nativo) header.top #unitlabel[data-lojas-cor=fora],html:not(.app-nativo) header.top #unitlabel[data-lojas-cor][data-lojas-sinal=sem]{--lojas-cor:var(--label3,#9C8D80);color:var(--acao-txt,#FFFFFF)}
}

/* /hub-apple-refinement.css */
/* Apple design review, 01/10/2026. Web adaptation: semantic HTML and system
   fonts remain native to the host. CSS materials do not implement Liquid Glass.
   Load after the existing screen and top bar styles. */
:root{
  --f-largetitle:calc(2.125rem * var(--dt));--lh-largetitle:calc(2.5625rem * var(--dt));
  --f-title1:calc(1.75rem * var(--dt));--lh-title1:calc(2.125rem * var(--dt));
  --f-title2:calc(1.375rem * var(--dt));--lh-title2:calc(1.75rem * var(--dt));
  --f-title3:calc(1.25rem * var(--dt));--lh-title3:calc(1.5625rem * var(--dt));
  --f-headline:calc(1.0625rem * var(--dt));--lh-headline:calc(1.375rem * var(--dt));
  --f-body:calc(1.0625rem * var(--dt));--lh-body:calc(1.375rem * var(--dt));
  --f-callout:calc(1rem * var(--dt));--lh-callout:calc(1.3125rem * var(--dt));
  --f-subhead:calc(.9375rem * var(--dt));--lh-subhead:calc(1.25rem * var(--dt));
  --f-footnote:max(.6875rem,calc(.8125rem * var(--dt)));--lh-footnote:max(1rem,calc(1.125rem * var(--dt)));
  --f-caption1:max(.6875rem,calc(.75rem * var(--dt)));--lh-caption1:max(.875rem,calc(1rem * var(--dt)));
  --f-caption2:max(.6875rem,calc(.6875rem * var(--dt)));--lh-caption2:max(.8125rem,calc(.8125rem * var(--dt)));
}
body{font-optical-sizing:auto}
:where(button,input,select,textarea,summary){font-optical-sizing:inherit}
.hc{min-width:0}
.hc h2{font-size:var(--f-title1);line-height:var(--lh-title1)}
.hc h3{font-size:var(--f-title3);line-height:var(--lh-title3);letter-spacing:normal}
.hc :is(.hc-note,.hc-field,.hc-feedback){font-size:var(--f-subhead);line-height:1.5}
.hc :is(.hc-eyebrow,.hc-status,.hc-onboarding-updated){font-size:var(--f-footnote);line-height:1.5}
.hc :is(p,b,span,label,summary){overflow-wrap:anywhere}
.hc .hc-field :is(input,select,textarea){font-size:var(--f-body);line-height:1.4}
.hc .hc-table table{font-size:var(--f-subhead);line-height:1.5}
.hc .hc-table[tabindex]:focus-visible{outline:3px solid var(--acao,#1F5FD0);outline-offset:3px}
.hc .hc-table-hint{margin-bottom:0}
.hc .hc-onboarding-overview h3{font-size:var(--f-title1);line-height:var(--lh-title1)}
.hc .hc-onboarding-progress{font-size:var(--f-footnote)}
.hc .hc-onboarding-progress strong{font-size:var(--f-title1)}
.hc .hc-onboarding-progress strong span{font-size:var(--f-callout)}
.hc :is(.hc-onboarding-instructions,.hc-onboarding-step-title b){font-size:var(--f-callout)}
.hc :is(.hc-onboarding-step-title>span,.hc-onboarding-number,.hc-preset-preview ul,.hc-preset-choice span,.hc-preset-choice b){font-size:var(--f-subhead)}
.hc .hc-preset-choice strong{font-size:var(--f-headline)}
.hc .hc-availability{border:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));border-radius:16px;padding:16px;min-width:0;margin:12px 0}
.hc .hc-availability-turn{border:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));border-radius:12px;padding:12px;min-width:0;margin:12px 0}
.hc :is(.hc-availability,.hc-availability-turn)>legend{font-size:var(--f-headline);font-weight:600;padding-inline:6px}
.hc .hc-availability-turn .hc-grid{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.hc .hc-availability-turn .hc-check{flex:0 0 auto;min-height:44px;min-width:44px}
.hc .hc-availability-turn .hc-field{flex:1 1 12rem}
.hc .hc-ok,.hc .hc-status.done{color:var(--d-verdeagua-t,#006F5D)}
.hc .hc-status.done{background:var(--surface,#FFFFFF);border:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent))}
.hc .hc-error{color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))}
.hc :is(.hc-flow-ports small,.hc-flow-inlet,.hc-preset-choice b,.hc-flow-link,.coverage-zone [aria-pressed=true]){color:var(--acao,#1F5FD0)!important}
.hc :is(summary,button,a,input,select,textarea):focus-visible{outline:3px solid var(--acao,#1F5FD0);outline-offset:3px}
.hc details>summary{min-height:44px;padding-block:8px}
.hc :is(.hc-card,.hc-dialog,.hc-dialog-top){background:var(--surface,#FFFFFF);-webkit-backdrop-filter:none;backdrop-filter:none}
.hc-dialog{color:var(--label,#323200);background:var(--surface,#FFFFFF);max-height:calc(100dvh - max(32px,env(safe-area-inset-top)) - max(16px,env(safe-area-inset-bottom)));overflow:auto}
.hc-dialog-top{background:var(--surface,#FFFFFF)}
.hc-dialog::backdrop{background:color-mix(in srgb,var(--label,#323200) 46%,transparent);-webkit-backdrop-filter:none;backdrop-filter:none}
.hc-flow-title{min-width:0}
.hc-flow-canvas-tools .hc-actions{flex-wrap:wrap}
.hc-flow-tile [data-fc-source]{color:var(--label,#323200)}
/* Suporte remoto também usa papéis semânticos; o estado inclui texto além da cor. */
body [data-suporte-remoto] .sr-ico{background:var(--verde,#11994A)}
body [data-suporte-remoto] .erro .sr-ico{background:var(--queda,#E21D3C)}
body [data-suporte-remoto] .sr-acesso-estado.ligado{color:var(--d-verdeagua-t,#006F5D)}
body [data-suporte-remoto] .sr-acesso-estado.parado{color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))}
body [data-suporte-remoto] .sr-acesso-id{flex-wrap:wrap}
body [data-suporte-remoto] .sr-acesso-id output{max-width:100%;overflow-wrap:anywhere}
.hc [data-hc-fleet-compensation] fieldset{min-width:0;margin:12px 0;padding:14px;border:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));border-radius:12px}
.hc [data-hc-fleet-compensation] fieldset>legend{font-size:var(--f-headline);font-weight:600;padding-inline:6px}
@media (pointer:coarse),(max-width:700px){
  .hc .hc-field :is(input,select,textarea){font-size:max(1rem,var(--f-body))}
  body [data-suporte-remoto] :is(.sr-sel select,.sr-rt-form input){font-size:max(1rem,var(--f-body));min-height:44px}
  .hc :is(button,summary,input,select){min-height:44px}
  .hc .hc-check{align-items:flex-start;padding-block:9px}
  .hc .hc-check input{flex:none;margin-top:2px;min-height:20px;width:20px;height:20px}
  .hc .hc-header .hc-actions>.btn{flex:1 1 auto;white-space:normal}
  .hc .hc-header .hc-actions>.hc-field{flex:1 1 13rem;min-width:min(100%,13rem)}
  .hc :is(.hc-grid,.hc-inbox){grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-transparency:reduce){
  .hc-dialog::backdrop{background:color-mix(in srgb,var(--label,#323200) 60%,transparent)}
  .hc :is(.hc-dialog,.hc-card,.hc-dialog-top){background:var(--surface,#FFFFFF)}
}
@media (prefers-contrast:more){
  .hc :is(.hc-card,.hc-table,.hc-flow-viewport,.hc-preset-choice){border-color:var(--label2,#6B5A4C)}
  .hc :is(.hc-note,.hc-status,.hc-eyebrow){color:var(--label,#323200)}
}
@media (prefers-reduced-motion:reduce){
  .hc *, .hc *::before,.hc *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media (forced-colors:active){
  .hc :is(.hc-card,.hc-dialog,.hc-field input,.hc-field select,.hc-field textarea,.btn){border:1px solid CanvasText;box-shadow:none}
  .hc :is(.hc-ok,.hc-error,.hc-status.done){color:CanvasText}
  .hc :is(button,summary,input,select,textarea):focus-visible{outline-color:Highlight}
}

/* Preferência opcional de papel dentro das Configurações existentes. */
.hc-print-content{max-width:100%;background:var(--surface,#FFFFFF);font-size:var(--f-callout);line-height:1.5}
.hc-print-content fieldset{min-width:0;margin:14px 0;padding:14px;border:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));border-radius:12px}
.hc-print-content fieldset>legend{font-size:var(--f-headline);font-weight:600;padding-inline:6px}
.hc-print-content .hc-actions>.btn{min-height:44px;white-space:normal}
.hc-split-receipt{min-width:0;overflow-wrap:anywhere}
.hc .hc-split-row{display:flex;flex-direction:column;gap:14px;min-width:0;margin-block:16px;padding:18px}
.hc-split-row legend{font-weight:600;padding-inline:8px}
.hc-split-receipt .btn{min-height:44px;white-space:normal}
.hc-split-receipt [data-split-sum]{font-variant-numeric:tabular-nums;line-height:1.5}
@media(max-width:600px){.hc-split-receipt .hc-actions>.btn{flex:1 1 100%}.hc .hc-split-row{padding:14px}}
@media(max-width:600px){.hc-print-content .hc-actions>.btn{flex:1 1 100%}}

/* Resultados de campanhas são leituras factuais, recolhidas junto ao plano existente. */
.hc .hc-campaign-metrics{width:min(21rem,calc(100vw - 6rem));max-width:100%;white-space:normal;margin-top:12px}
.hc .hc-campaign-metric-values{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:18px 0}
.hc .hc-campaign-metric-values>div{min-width:0;padding-bottom:12px;border-bottom:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent))}
.hc .hc-campaign-metric-values dt{font-size:var(--f-subhead,calc(.9375rem * var(--dt)));color:var(--label2,#6B5A4C);line-height:1.5;overflow-wrap:anywhere}
.hc .hc-campaign-metric-values dd{margin:6px 0 0;font-size:var(--f-title3,calc(1.25rem * var(--dt)));font-weight:600;font-variant-numeric:tabular-nums;color:var(--label,#323200);overflow-wrap:anywhere}
.hc .hc-campaign-metrics .btn{min-height:44px;white-space:normal;max-width:100%}
.hc [data-delivery-links] .btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;white-space:normal;max-width:100%}
.hc [data-delivery-link-options]{min-width:0}
.hc .hc-campaign-metrics summary{white-space:normal;overflow-wrap:anywhere}

.hc .hc-campaign-plan-name{display:block;white-space:normal;max-width:min(21rem,calc(100vw - 6rem));overflow-wrap:anywhere}

.hc .hc-table[data-campaign-plans] td{vertical-align:top}

/* /hub-navigation.css */
/* Controles de navegação usam material; conteúdo de cada tela mantém sua superfície. */
.menudd{width:min(23rem,calc(100vw - 2rem));min-width:0;max-height:calc(100dvh - 7rem);overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;}
.hub-nav-search{display:flex;flex-direction:column;gap:.375rem;padding:.5rem .625rem .875rem;font-size:var(--f-footnote,max(.6875rem,calc(.8125rem * var(--dt,1))));color:var(--label2,#6B5A4C);}
.hub-nav-search input{font:inherit;font-size:max(1rem,var(--f-body,calc(1.0625rem * var(--dt,1))));line-height:1.4;min-height:max(44px,2.75rem);width:100%;box-sizing:border-box;padding:.625rem .75rem;border:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));border-radius:.75rem;background:var(--page,#F7F5F1);color:var(--label,#323200);}
.hub-nav-group{border-top:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));padding:.25rem 0;}
.hub-nav-group>summary{list-style:none;display:flex;align-items:center;gap:.625rem;min-height:max(44px,2.75rem);padding:.375rem .625rem;box-sizing:border-box;cursor:pointer;font-size:var(--f-footnote,max(.6875rem,calc(.8125rem * var(--dt,1))));font-weight:650;color:var(--label2,#6B5A4C);}
.hub-nav-group>summary>span:not(.hub-nav-group-icon):not(.hub-nav-chevron){min-width:0;overflow-wrap:anywhere;}
.hub-nav-group>summary::-webkit-details-marker{display:none;}
.hub-nav-group-icon{display:flex;flex:none;width:1.25rem;height:1.25rem;}
.hub-nav-group-icon svg,.hub-nav-items .dd-ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;}
.hub-nav-chevron{margin-left:auto;flex:none;font-size:calc(1.375rem * var(--dt,1));transition:transform 160ms ease;}
.hub-nav-group[open]>.hub-nav-group-icon+.hub-nav-chevron,.hub-nav-group[open]>summary>.hub-nav-chevron{transform:rotate(90deg);}
.hub-nav-items{display:flex;flex-direction:column;gap:.125rem;padding:0 .25rem .375rem;}
.menudd .hub-nav-items button{display:flex;align-items:center;gap:.625rem;width:100%;min-height:max(44px,2.75rem);line-height:1.35;padding:.625rem .75rem;font-size:var(--f-subhead,max(.6875rem,calc(.9375rem * var(--dt,1))));text-align:left;}
.menudd [hidden],.gaveta [hidden]{display:none!important;}
.hub-nav-items .dd-ico{flex:none;width:1.25rem;height:1.25rem;display:flex;}
.hub-nav-items .dd-txt{min-width:0;overflow-wrap:anywhere;}
.hub-nav-group summary:focus-visible,.hub-nav-search input:focus-visible{outline:3px solid var(--acao,#1F5FD0);outline-offset:2px;border-radius:.625rem;}
.gaveta .hub-nav-group>summary{padding-inline:.875rem;font-size:var(--f-subhead,max(.6875rem,calc(.9375rem * var(--dt,1))));}
.gaveta .hub-nav-search{padding-inline:.875rem;}
.gv-close{margin-left:auto;border:0;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));color:var(--label,#323200);width:2.75rem;height:2.75rem;border-radius:50%;display:grid;place-items:center;flex:none;}
.gv-close svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.8;}
@media(max-width:760px){.menudd{left:1rem;right:1rem;top:calc(env(safe-area-inset-top,0px) + 4.75rem);width:auto;max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 6.5rem);}}
@media(prefers-reduced-motion:reduce){.hub-nav-chevron{transition:none;}}
/* 1.74.0 (Philippe, 04/10/2026, requisito E5): a seção "Mais usados" no topo do menu (até três telas, pelo uso e pelo perfil);
   some enquanto a pessoa busca. Os itens têm o desenho dos itens dos grupos. */
.menudd .dd-usados{padding:0 0 .25rem;}.menudd .dd-usados[hidden]{display:none;}