/* /cerebro-pecas.css */
/* V8 (Philippe, 09/10/2026): as peças do Cérebro em chat (web/cerebro-pecas.js). Usa os tokens do tema do Hub
   (--surface, --label*, --sep, --fill, --sys-*), que mudam sozinhos no escuro (body.dark). Os gráficos herdam o
   desenho de web/cerebro-portal.css (.gr, .gr-barras, .gr-leg). Cartão nunca rola para baixo por dentro (B6); uma
   tabela larga demais rola só para o lado, dentro dela, nunca a página. */
.pv-visual{display:flex;flex-direction:column;gap:10px;min-width:0;animation:pv-entra .32s ease-out both}
.pv-tit{margin:0;font-size:var(--f-headline,1.0625rem);font-weight:650;letter-spacing:-.01em;color:var(--label,#323200)}
.pv-pecas{display:grid;gap:10px;min-width:0}
.pv-coluna .pv-pecas{grid-template-columns:minmax(0,1fr)}
.pv-lado_a_lado .pv-pecas{grid-template-columns:repeat(2,minmax(0,1fr))} /* lado a lado também no celular (pedido do dono) */
.pv-lado_a_lado.pv-n3 .pv-pecas{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:560px){.pv-lado_a_lado.pv-n3 .pv-pecas{grid-template-columns:repeat(2,minmax(0,1fr))}.pv-lado_a_lado.pv-n3 .pv-item:last-child{grid-column:1/-1}}
.pv-grade .pv-pecas{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.pv-item{min-width:0;display:flex}
/* Cartões de dados usam a régua .c34 do mockup V3.6, sem a escala das peças V2. */
.cu-fio-conteudo .cu-peca:has(.pv-item-dados){zoom:1}
/* Só enquanto a pintura está suspensa: usa a medida final da L20, sem prender
   a altura quando o cartão volta ao visor, é expandido ou muda de largura. */
.cu-fio-conteudo .cu-peca.pv-dados-fora[data-cu-medida]{height:var(--cu-peca-altura)}
/* Uma fonte pendente invalida também o tamanho lembrado fora da tela. A reserva
   volta somente depois de fonts.ready, do desenho e da medição final. */
.pv-fontes-pendentes .cu-fio-conteudo .cu-peca:has(.pv-item-dados){content-visibility:visible;height:auto}
.cu-fio-conteudo .pv-pecas:has(>.pv-item-dados){grid-template-columns:minmax(0,1fr)}
.pv-item-dados{position:relative;flex-direction:column;width:100%;font-size:max(15px,calc(.9375rem * var(--dt,1)));line-height:1.45}
.pv-item-dados :is(.gr,.f48,.cu-f46-faixa,.cu-f46-diferenca,.f50-mapa,.h8m-peca){width:100%;margin:0;padding:14px;gap:12px;border:1px solid var(--pv-borda-v36,color-mix(in srgb,var(--label,#323200) 12%,transparent));border-radius:22px;font-size:max(15px,calc(.9375rem * var(--dt,1)));line-height:1.45;box-shadow:none!important}
body.dark .pv-item-dados,:root[data-theme="dark"] .pv-item-dados{--pv-borda-v36:color-mix(in srgb,var(--surface,#FFFFFF) 12%,transparent)}
.pv-item-dados *,.pv-item-dados *::before,.pv-item-dados *::after{box-shadow:none!important;text-shadow:none!important}
.pv-item-dados :is(h3,figcaption strong,.gr-tit strong){font-size:max(17px,calc(1.0625rem * var(--dt,1)));font-weight:740;line-height:1.25;letter-spacing:-.015em}
.pv-item-dados .gr-tit>span{font-size:max(13px,calc(.8125rem * var(--dt,1)));line-height:1.35;color:var(--label2,#6B5A4C)}
.pv-item-dados :is(p,td,th,.pv-texto,.pv-tempo li,.pv-it-det,.pv-it-tit){font-size:max(15px,calc(.9375rem * var(--dt,1)))}
.pv-item-dados :is(small,summary,button,.pv-kpi-rot,.pv-kpi-ant,.pv-comparado,.pv-nota,.rf-lin,.rf-t,.f48-medida,.f48-puntas,.f50-nota,.f50-legenda,.f50-titulo p,.h8m-leg,.h8m-dica,.h8m-tt p){font-size:max(13px,calc(.8125rem * var(--dt,1)))}
.pv-item-dados .pv-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:0}
.pv-item-dados .pv-kpis:has(>.pv-kpi:only-child){grid-template-columns:minmax(0,1fr)}
.pv-item-dados .pv-kpi{padding:8px 10px}
.pv-item-dados .pv-kpi b{font-size:max(24px,calc(1.5rem * var(--dt,1)))}
.pv-item-dados .pv-comparado{margin:0}
.pv-item-dados .pv-tempo{gap:8px}
.pv-item-dados .pv-tempo li::before{border:2px solid var(--surface,#FFFFFF)}
.pv-item-dados .f48-anel-svg{width:72px;height:72px}
/* O valor já está por extenso ao lado do anel; retirar a duplicação evita texto miúdo. */
.pv-item-dados .f48-anel-svg text{display:none}
.pv-item-dados .f48-segmentos{flex-wrap:wrap}
.pv-item-dados .f48-rolar table{font-size:15px}
.pv-item-dados .f50-superficie svg{min-height:0;max-height:220px}
.pv-item-dados .f50-mapa{gap:8px}
.pv-item-dados .h8m-peca{gap:10px}
.pv-item-dados .h8m-matriz svg text{font-size:13px}
.pv-item-dados .h8m-matriz svg{max-width:100%}
.pv-item-dados :is(.h8m-pt.h8m-queda,.h8m-rotval.h8m-queda){fill:var(--label3,#9C8D80)}
.pv-item-dados .h8m-d-queda{background:var(--label3,#9C8D80)}
.pv-item-dados :is(.f50-filtros,.f50-modos,.pc-modos){gap:4px}
.pv-item-dados :is(.f50-filtros,.f50-modos) button{padding:4px 8px}
.pv-item-dados .f50-ausencia{padding:8px 10px;font-size:13px}
.pv-item-dados :is(.pc-hr,.pc-dd,.pc-escala,.pc-sub,.pc-modo,.pc-detalhe){font-size:13px}
.pv-item-dados .pc-grade{min-width:0;--pc-gap:3px}
.pv-item-dados .pc-hr{overflow:visible;white-space:nowrap}
.pv-item-dados .pc-hr:last-child{justify-self:end;text-align:right}
.pv-item-dados .pc-celula.pc-pico{outline:2px solid var(--label,#323200);outline-offset:1px}
.pv-item-dados .pc-celula.pc-sel{outline:2px solid var(--acao,#1F5FD0);outline-offset:1px}
.pv-item-dados .pc-celula{min-width:0}
.pv-ajustar{position:relative;font-size:13px;align-self:flex-start;width:100%}
.pv-ajustar>summary{display:inline-flex;align-items:center;min-height:44px;color:var(--acao,#1F5FD0);font-weight:650;cursor:pointer}
.pv-ajustes{position:absolute;bottom:100%;left:0;z-index:5;width:100%;max-height:min(380px,55dvh);overflow:auto;padding:12px;border:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));border-radius:16px;background:var(--surface,#FFFFFF);display:flex;flex-direction:column;gap:8px}
.pv-ajustar:not([open])>.pv-ajustes{display:none}
.pv-item-dados [data-pv-linha][hidden]{display:none!important}
.pv-paginacao{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:13px}
.pv-paginacao button{min-height:44px;padding:0 4px;color:var(--acao,#1F5FD0);background:none;border:0;font:inherit;font-weight:650;cursor:pointer}
.pv-paginacao button:disabled{opacity:.4;cursor:default}
.pv-item>.gr{flex:1;min-width:0}
.pv-item.pv-item-numerico{flex-direction:column;gap:8px}
.pv-dados-numericos{min-width:0;max-width:100%}
.pv-dados-numericos>summary{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 10px;border-radius:999px;background:transparent;color:var(--acao,#1F5FD0);font-size:.875rem;font-weight:650;cursor:pointer;list-style:none}
.pv-dados-numericos>summary::-webkit-details-marker{display:none}
.pv-dados-numericos>summary::after{content:"";position:absolute;inset:-4px 0}
.pv-dados-numericos>summary .gr-chev{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pv-dados-numericos[open]>summary .gr-chev{transform:rotate(90deg)}
.pv-peca .gr-rosca{width:min(100%,240px)}
.pv-peca .gr-recorte{display:flex;gap:6px;max-width:100%;overflow:auto;align-items:center}
.pv-peca .gr-recorte button,.pv-peca .gr-recorte .gr-chips-rot{flex:none}
.pv-lado_a_lado .gr{padding:18px}
.pv-nota{margin:6px 0 0;font-size:var(--f-caption1,max(0.6875rem, calc(0.75rem * var(--dt,1))));color:var(--label2,#6B5A4C)}
.pv-texto{margin:0;font-size:var(--f-body,1rem);line-height:1.45;color:var(--label,#323200)}

/* indicadores */
.pv-peca>.pv-kpis{margin-bottom:14px}
.pv-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,120px),1fr));gap:8px}
.pv-kpi{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));min-width:0}
.pv-kpi-rot{font-size:var(--f-caption1,0.75rem);color:var(--label2,#6B5A4C);overflow-wrap:anywhere}
.pv-kpi b{font-size:var(--f-title2,1.375rem);font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--label,#323200);overflow-wrap:anywhere}
.pv-kpi-ant{font-size:var(--f-caption2,0.6875rem);color:var(--label2,#6B5A4C)}
.pv-kpi-ant em{font-style:normal;font-weight:650}
.pv-kpi-ant em.sobe{color:var(--d-verdeagua-t,#006F5D)}
.pv-kpi-ant em.desce{color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))}

/* tabela */
.pv-tab{max-width:100%;overflow-x:auto}
.pv-tab table{width:100%;border-collapse:collapse;font-size:var(--f-footnote,0.8125rem);font-variant-numeric:tabular-nums;color:var(--label,#323200)}
.pv-lado_a_lado .pv-tab table{font-size:var(--f-caption1,0.75rem)}
.pv-tab .n,.pv-tab .h{width:1%;white-space:nowrap}
.pv-lado_a_lado .pv-tab td{overflow-wrap:break-word;word-break:normal;hyphens:auto}
.pv-lado_a_lado .pv-tab td,.pv-lado_a_lado .pv-tab th{padding:5px 4px}
.pv-tab th{text-align:left;font-weight:600;color:var(--label2,#6B5A4C);padding:4px 6px;border-bottom:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-tab td{padding:6px;border-bottom:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));vertical-align:top;overflow-wrap:anywhere}
.pv-tab tr:last-child td{border-bottom:0}
.pv-tab .n{text-align:right;white-space:nowrap}
.pv-tab tbody tr{animation:pv-entra .28s ease-out both;animation-delay:calc(var(--i,0) * 30ms)}

/* barras empilhadas e funil */
.pv-pilha{display:flex;overflow:hidden}
.pv-pilha .gr-cheio{position:static;height:100%;border-radius:0;opacity:.9;min-width:0}
.pv-pilha .gr-cheio:first-child{border-radius:999px 0 0 999px}
.pv-pilha .gr-cheio:last-child{border-radius:0 999px 999px 0}
.pv-peca .gr-cheio{transform-origin:left}

/* rosca */
.pv-rosca-caixa{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pv-rosca{width:130px;height:130px;flex:none}
.pv-arco{fill:none;stroke-width:26;animation:pv-arco .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 60ms)}
.pv-rosca-pct{font-size:calc(1.375rem * var(--dt,1));font-weight:750;fill:var(--label,#323200)}
.pv-rosca-rot{font-size:max(0.6875rem, calc(0.6875rem * var(--dt,1)));fill:var(--label2,#6B5A4C)}
.pv-rosca-leg{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;flex:1;min-width:140px}
.pv-rosca-leg li{display:grid;grid-template-columns:12px minmax(0,1fr) auto auto;align-items:center;gap:8px;font-size:var(--f-footnote,0.8125rem)}
.pv-rosca-leg i{width:10px;height:10px;border-radius:3px;background:var(--c)}
.pv-rosca-leg span{overflow-wrap:anywhere;color:var(--label,#323200)}
.pv-rosca-leg b{font-variant-numeric:tabular-nums}
.pv-rosca-leg em{font-style:normal;color:var(--label2,#6B5A4C);font-variant-numeric:tabular-nums}

/* mapa de calor: agora em web/cerebro-unico/peca-calor.css (P5e) */

/* linha do tempo, lista e cartões */
.pv-tempo{list-style:none;margin:0;padding:0 0 0 14px;border-left:2px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));display:flex;flex-direction:column;gap:10px}
.pv-tempo li{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;font-size:var(--f-footnote,0.8125rem)}
.pv-tempo li::before{content:"";position:absolute;left:-20px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--acao,#1F5FD0);box-shadow:0 0 0 3px var(--surface,#FFFFFF)}
.pv-tempo time{font-weight:650;font-variant-numeric:tabular-nums;color:var(--label2,#6B5A4C)}
.pv-tempo div{display:flex;flex-direction:column;gap:2px;min-width:0;overflow-wrap:anywhere}
.pv-lista,.pv-cartoes{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pv-cartoes{grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr))}
.pv-lista li,.pv-cartoes li{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:12px;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));min-width:0;animation:pv-entra .28s ease-out both}
.pv-it-tit{font-size:var(--f-subhead,0.9375rem);color:var(--label,#323200);overflow-wrap:anywhere}
.pv-it-det{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:var(--f-footnote,0.8125rem);color:var(--label2,#6B5A4C);min-width:0;overflow-wrap:anywhere}
.pv-it-num small{color:var(--label2,#6B5A4C)}
.pv-nota-num{font-weight:700;color:var(--label,#323200)}
.pv-nota-num.baixa{color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))}
.pv-nota-num i{font-style:normal;color:color-mix(in srgb,var(--d-amarelo-t,#805A00) 80%,var(--label,#323200));margin-left:1px}

/* como foi montado */
.pv-como{font-size:var(--f-footnote,0.8125rem);color:var(--label2,#6B5A4C)}
.pv-como summary{cursor:pointer;min-height:44px;display:inline-flex;align-items:center;font-weight:600;color:var(--acao,#1F5FD0)}
.pv-como p{margin:4px 0}
.pv-como ul{margin:0 0 4px;padding-left:18px}
.pv-como code{font:max(0.6875rem, calc(0.75rem * var(--dt,1))) ui-monospace,"SF Mono",Menlo,monospace;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));padding:1px 5px;border-radius:5px}
.pv-enxuto p{margin:0;font-size:var(--f-footnote,0.8125rem);color:var(--label2,#6B5A4C)}

/* fechamento da Sala */
.pv-fech{border-radius:var(--r-card,16px);background:var(--surface,#FFFFFF);box-shadow:0 0 0 .5px var(--sep,color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 13%,transparent));overflow:hidden;color:var(--label,#323200);animation:pv-entra .32s ease-out both}
.pv-fech-cab{padding:14px 16px 12px;background:linear-gradient(135deg,color-mix(in srgb,var(--verde,#11994A) 18%,var(--surface,#FFFFFF)),var(--surface,#FFFFFF))}
.pv-fech-cab.pv-v-testar{background:linear-gradient(135deg,color-mix(in srgb,var(--d-ambar,#C27A00) 18%,var(--surface,#FFFFFF)),var(--surface,#FFFFFF))}
.pv-fech-cab.pv-v-nao-aplicar{background:linear-gradient(135deg,color-mix(in srgb,var(--queda,#E21D3C) 14%,var(--surface,#FFFFFF)),var(--surface,#FFFFFF))}
.pv-fech-cab.pv-v-sem-modelo{background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent))}
.pv-rotulo{font-size:var(--f-caption1,0.75rem);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--label2,#6B5A4C)}
.pv-fech-cab h3{margin:4px 0 0;font-size:var(--f-title2,1.375rem);font-weight:750;letter-spacing:-.02em}
.pv-fech-cab p{margin:6px 0 0;font-size:var(--f-footnote,0.8125rem);color:var(--label2,#6B5A4C)}
.pv-medidor{display:flex;gap:4px;margin-top:8px}
.pv-medidor i{flex:1;height:10px;border-radius:3px;background:var(--fill2,color-mix(in srgb,var(--label,#323200) 13%,transparent))}
.pv-medidor i.on{background:var(--verde,#11994A);animation:pv-acende .3s ease-out both;animation-delay:calc(var(--i,0) * 70ms)}
.pv-sec{padding:12px 16px;border-top:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent))}
.pv-sec h4{margin:0 0 8px;display:flex;align-items:center;gap:8px;font-size:var(--f-subhead,0.9375rem)}
.pv-sec p{margin:0;line-height:1.45}
.pv-num{width:22px;height:22px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:max(0.6875rem, calc(0.75rem * var(--dt,1)));background:var(--label,#323200);color:var(--surface,#FFFFFF)}
.pv-frase{margin-bottom:8px!important;color:var(--label2,#6B5A4C);font-size:var(--f-footnote,0.8125rem)}
.pv-ops{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:8px}
.pv-op{display:flex;gap:8px;padding:8px 10px;border-radius:12px;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));min-width:0}
.pv-op>div{min-width:0;flex:1}
.pv-op p{font-size:var(--f-footnote,0.8125rem);color:var(--label2,#6B5A4C);overflow-wrap:anywhere}
.pv-op-cab{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:2px}
.pv-av{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:max(0.6875rem, calc(0.6875rem * var(--dt,1)));font-weight:700;color:var(--acao-txt,#FFFFFF);background:var(--c)}
.pv-chip{display:inline-flex;align-items:center;font-size:var(--f-caption2,0.6875rem);font-weight:650;padding:2px 8px;border-radius:999px;background:var(--fill2,color-mix(in srgb,var(--label,#323200) 13%,transparent));color:var(--label2,#6B5A4C)}
.pv-chip.ok{background:color-mix(in srgb,var(--verde,#11994A) 18%,transparent);color:var(--d-verdeagua-t,#006F5D)}
.pv-chip.atencao{background:color-mix(in srgb,var(--d-ambar,#C27A00) 20%,transparent);color:color-mix(in srgb,var(--d-ambar,#C27A00) 50%,var(--label,#323200))}
.pv-chip.nao{background:color-mix(in srgb,var(--queda,#E21D3C) 16%,transparent);color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))}
.pv-chip.ia{background:color-mix(in srgb,var(--d-anil,#5B6CFF) 16%,transparent);color:var(--d-anil-t,#394DC8)}
.pv-alt{margin-top:8px!important}
.pv-graf{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.pv-dist{display:block;width:100%;height:auto;overflow:visible}
.pv-dist-faixa{fill:var(--verde,#11994A);opacity:.25}
.pv-dist-p50{stroke:var(--verde,#11994A);stroke-width:3}
.pv-dist-hoje{stroke:var(--queda,#E21D3C);stroke-width:3;stroke-dasharray:4 4}
.pv-dist-rot{font-size:max(0.6875rem, calc(0.6875rem * var(--dt,1)));font-weight:700}
.pv-dist .gr-eixo{font-size:max(0.6875rem, calc(0.6875rem * var(--dt,1)))}
.pv-dist-rot.ok{fill:var(--d-verdeagua-t,#006F5D)}
.pv-dist-rot.hoje{fill:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))}
.pv-passos{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.pv-passos li{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent))}
.pv-passos li:last-child{border-bottom:0}
.pv-passos input{width:22px;height:22px;flex:none;margin:1px 0 0;accent-color:var(--verde,#11994A)}
.pv-passos label{line-height:1.4}
.pv-passos input:checked+label{color:var(--label2,#6B5A4C);text-decoration:line-through}
.pv-aviso{margin:0;padding:10px 16px;font-size:var(--f-caption1,0.75rem);color:var(--label2,#6B5A4C);border-top:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent))}
.pv-fech>.pv-como{padding:0 16px 8px}

@keyframes pv-entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes pv-cresce{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes pv-arco{from{stroke-dasharray:0 400}}
@keyframes pv-acende{from{opacity:0;transform:scaleY(.4)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pv-visual,.pv-fech,.pv-tab tbody tr,.pv-lista li,.pv-cartoes li,.pv-peca .gr-cheio,.pv-arco,.pv-medidor i.on{animation:none!important}}

/* ---- peças de operação (10/10/2026): mudança preparada, feito, abri, pedido, item e ordem do cardápio, configuração e
   impressora (web/cerebro-pecas.js, HubPecas.operacao). Mesmos tokens do tema, que viram sozinhos no escuro (body.dark);
   letra sempre em rem com var(--dt) e piso de 11 px (.6875rem), para seguir o tamanho de texto do navegador; texto colorido só com --ink-*; todo alvo de toque com 44 px; resposta no
   toque (o botão afunda na hora e volta com a curva do Hub, sem quique); nada se mexe com movimento reduzido. */
.po{--po-anel:var(--acao,#1F5FD0);position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;padding:14px 16px 16px;border-radius:var(--r-card,16px);background:var(--surface,#FFFFFF);box-shadow:0 0 0 .5px var(--sep,color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 13%,transparent)),0 1px 2px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 5%,transparent);color:var(--label,#323200);font-size:max(.6875rem,calc(.9375rem * var(--dt,1)));line-height:1.4;animation:po-entra .42s var(--ease-out) both}
.po [hidden]{display:none!important}
.po-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.po :focus-visible{outline:3px solid color-mix(in srgb,var(--acao,#1F5FD0) 70%,transparent);outline-offset:2px}
.po svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.po-cab{display:flex;align-items:flex-start;flex-wrap:wrap;gap:8px 10px}
.po-cab-txt{flex:1 1 150px;min-width:0}
.po-ico{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:10px;background:var(--fill2,color-mix(in srgb,var(--label,#323200) 13%,transparent));color:var(--label,#323200)}
.po-feito .po-ico{background:color-mix(in srgb,var(--verde,#11994A) 80%,var(--label,#323200));color:var(--acao-txt,#FFFFFF)}
.po-abri .po-ico{background:color-mix(in srgb,var(--acao,#1F5FD0) 16%,transparent);color:var(--acao,#1F5FD0)}
.po-rotulo{display:block;font-size:max(.6875rem,calc(.75rem * var(--dt,1)));font-weight:600;color:var(--label2,#6B5A4C)}
.po-titulo{margin:1px 0 0;font-size:max(.6875rem,calc(1.0625rem * var(--dt,1)));font-weight:650;letter-spacing:-.01em;line-height:1.3;overflow-wrap:anywhere}
.po-chips{display:flex;flex-wrap:wrap;gap:6px}
.po-chip{display:inline-flex;align-items:center;padding:3px 9px;border-radius:var(--r-pill,999px);font-size:max(.6875rem,calc(.75rem * var(--dt,1)));font-weight:600;background:var(--fill2,color-mix(in srgb,var(--label,#323200) 13%,transparent));color:var(--label2,#6B5A4C);white-space:nowrap}
/* chip de situação: texto --label (contraste nos dois temas) e a cor num ponto, nunca sozinha */
.po-risco1,.po-ativo,.po-risco2,.po-pausado,.po-risco3{color:var(--label,#323200)}
.po-risco1::before,.po-ativo::before,.po-risco2::before,.po-pausado::before,.po-risco3::before{content:"";width:7px;height:7px;flex:none;margin-right:6px;border-radius:50%;background:var(--po-cor)}
.po-risco1,.po-ativo{--po-cor:var(--verde,#11994A);background:color-mix(in srgb,var(--verde,#11994A) 14%,transparent)}
.po-risco2,.po-pausado{--po-cor:var(--d-ambar,#C27A00);background:color-mix(in srgb,var(--d-ambar,#C27A00) 16%,transparent)}
.po-risco3{--po-cor:var(--queda,#E21D3C);background:color-mix(in srgb,var(--queda,#E21D3C) 12%,transparent)}
.po-texto,.po-previa{margin:0;overflow-wrap:anywhere}
.po-nota{margin:0;font-size:max(.6875rem,calc(.8125rem * var(--dt,1)));color:var(--label2,#6B5A4C);overflow-wrap:anywhere}
.po-nota b{font-variant-numeric:tabular-nums;color:var(--label,#323200)}
.po-fim{margin:0;padding:10px 12px;border-radius:var(--r-ctl,12px);background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));font-weight:600}
.po-vencida .po-campo,.po-cancelada .po-campo{display:none}

/* antes e depois, validade, campos e botões */
.po-ad{margin:0;display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-radius:var(--r-ctl,12px);background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent))}
.po-ad>div{min-width:0}
.po-ad dt,.po-fatos dt{font-size:max(.6875rem,calc(.75rem * var(--dt,1)));font-weight:600;color:var(--label2,#6B5A4C)}
.po-ad dd{margin:2px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;min-width:0}
.po-antes{color:var(--label2,#6B5A4C);text-decoration:line-through;overflow-wrap:anywhere}
.po-seta{color:var(--label2,#6B5A4C)}
.po-depois{font-weight:650;overflow-wrap:anywhere}
.po-previa{padding:10px 12px;border-radius:var(--r-ctl,12px);background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));font-weight:600}
.po-validade{margin:0;display:flex;align-items:center;gap:8px;font-size:max(.6875rem,calc(.8125rem * var(--dt,1)));color:var(--label2,#6B5A4C)}
.po-validade b{font-variant-numeric:tabular-nums;color:var(--label,#323200)}
.po-pouco{--po-anel:var(--d-ambar,#C27A00)}
.po-pouco .po-validade b{color:color-mix(in srgb,var(--d-ambar,#C27A00) 50%,var(--label,#323200))}
.po-anel{width:18px;height:18px;flex:none;border-radius:50%;background:conic-gradient(var(--po-anel) calc(var(--po-frac,1) * 1turn),var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent)) 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),var(--label,#323200) calc(100% - 4px));mask:radial-gradient(farthest-side,transparent calc(100% - 4px),var(--label,#323200) calc(100% - 4px))}
.po-campo{display:flex;flex-direction:column;gap:4px;min-width:0}
.po-campo label{font-size:max(.6875rem,calc(.8125rem * var(--dt,1)));font-weight:600;color:var(--label2,#6B5A4C)}
.po input:not([type=range]),.po textarea{box-sizing:border-box;width:100%;min-width:0;min-height:44px;margin:0;padding:10px 12px;border:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));border-radius:var(--r-ctl,12px);background:var(--surface2,#F7F3EE);color:var(--label,#323200);font:inherit;font-size:max(.6875rem,calc(1.0625rem * var(--dt,1)));transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out)}
.po textarea{resize:vertical;line-height:1.35}
.po input:focus,.po textarea:focus{outline:none;border-color:var(--acao,#1F5FD0);box-shadow:0 0 0 3px color-mix(in srgb,var(--acao,#1F5FD0) 25%,transparent)}
.po-erro{margin:0;font-size:max(.6875rem,calc(.8125rem * var(--dt,1)));font-weight:600;color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))}
.po-erro:empty,.po-muda:empty{margin-top:-12px}
.po-botoes{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}
.po-btn{-webkit-appearance:none;appearance:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;margin:0;padding:0 16px;border:0;border-radius:var(--r-ctl,12px);background:var(--fill2,color-mix(in srgb,var(--label,#323200) 13%,transparent));color:var(--label,#323200);font:inherit;font-size:max(.6875rem,calc(.9375rem * var(--dt,1)));font-weight:600;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .32s var(--ease-out),background-color .2s var(--ease-out),opacity .2s var(--ease-out)}
.po-botoes .po-btn{flex:1 1 auto}
.po-btn.po-primario{background:var(--acao,#1F5FD0);color:var(--acao-txt,#FFFFFF)}
.po-btn:active:not(:disabled):not([aria-disabled=true]){transform:scale(.96);transition-duration:.06s}
.po-btn:disabled,.po-btn[aria-disabled=true]{opacity:.45;cursor:default}
.po-btn[aria-busy=true]{opacity:1;cursor:progress}
.po-btn.po-icone{width:44px;padding:0}
.po-desfazer{justify-content:flex-start}
.po-desfazer .po-btn{flex:0 0 auto}

/* abri */
.po-caminho ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;font-size:max(.6875rem,calc(.8125rem * var(--dt,1)));color:var(--label2,#6B5A4C)}
.po-caminho li{overflow-wrap:anywhere}
.po-caminho li+li::before{content:"›" / "";margin:0 6px}
.po-caminho li:last-child{color:var(--label,#323200);font-weight:600}

/* pedido */
.po-itens{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.po-itens li{display:flex;flex-direction:column;gap:6px;padding:10px 0;border-bottom:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent))}
.po-itens li:first-child{padding-top:0}
.po-it{display:flex;flex-direction:column;min-width:0;overflow-wrap:anywhere}
.po-it span{font-size:max(.6875rem,calc(.8125rem * var(--dt,1)));color:var(--label2,#6B5A4C)}
.po-it-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.po-it-preco{flex:1 1 auto;font-weight:650;font-variant-numeric:tabular-nums}
.po-passo{display:inline-flex;align-items:center;border-radius:var(--r-ctl,12px);background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent))}
.po-passo .po-btn{background:transparent;font-size:max(.6875rem,calc(1.25rem * var(--dt,1)));font-weight:500}
.po-passo output{min-width:28px;text-align:center;font-weight:650;font-variant-numeric:tabular-nums}
.po .po-tirar{background:transparent;color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))}
.po-grupo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:10px}
.po-seg{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:2px;border-radius:var(--r-ctl,12px);background:var(--fill2,color-mix(in srgb,var(--label,#323200) 13%,transparent))}
.po-seg .po-btn{border-radius:10px;background:transparent}
.po-seg .po-btn[aria-pressed=true]{background:var(--surface,#FFFFFF);box-shadow:0 1px 3px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 14%,transparent)}
.po-linha{margin:0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}
.po-linha span,.po-totais dt{color:var(--label2,#6B5A4C)}
.po-totais{margin:0;display:flex;flex-direction:column;gap:4px;padding-top:10px;border-top:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent))}
.po-totais>div{display:flex;justify-content:space-between;gap:8px}
.po-totais dd{margin:0;font-variant-numeric:tabular-nums}
.po-totais .po-total dt,.po-totais .po-total dd{color:var(--label,#323200);font-size:max(.6875rem,calc(1.25rem * var(--dt,1)));font-weight:700}

/* item do cardápio */
.po .po-moeda{position:relative;display:block}
.po .po-moeda>span{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--label2,#6B5A4C);font-size:max(.6875rem,calc(1.0625rem * var(--dt,1)));pointer-events:none}
.po .po-moeda input{padding-left:44px;font-variant-numeric:tabular-nums}
.po-muda{font-size:max(.6875rem,calc(.8125rem * var(--dt,1)));padding:10px 12px;border-radius:var(--r-ctl,12px);background:color-mix(in srgb,var(--acao,#1F5FD0) 10%,transparent);overflow-wrap:anywhere}
.po-muda:empty{padding:0}
.po-muda ul{margin:4px 0 0;padding-left:18px}

/* ordem do cardápio: a alça é o alvo de arrastar (dedo e mouse) e de teclado; o número é um seletor nativo de posição */
.po-ordem{position:relative;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.po-ordem li{position:relative;display:flex;align-items:center;gap:10px;min-height:52px;padding:4px;border-radius:var(--r-ctl,12px);background:var(--surface2,#F7F3EE);box-shadow:0 0 0 .5px var(--sep,color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 13%,transparent));transition:transform .3s var(--ease-out),box-shadow .2s var(--ease-out)}
.po-ordem li.po-pegou{z-index:2;transition:box-shadow .2s var(--ease-out);box-shadow:0 10px 28px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 22%,transparent),0 0 0 .5px var(--sep,color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 13%,transparent))}
.po-ordem li.po-solta{z-index:1}
.po .po-pos{-webkit-appearance:none;appearance:none;flex:none;width:44px;height:44px;min-height:44px;margin:0;padding:0;border:0;border-radius:10px;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));color:var(--label,#323200);font:inherit;font-size:max(.6875rem,calc(.9375rem * var(--dt,1)));font-weight:650;font-variant-numeric:tabular-nums;text-align:center;text-align-last:center;cursor:pointer}
.po-ord-nome{flex:1;min-width:0;overflow-wrap:anywhere}
.po-alca{-webkit-appearance:none;appearance:none;flex:none;width:44px;height:44px;min-height:44px;display:grid;place-items:center;margin:0;padding:0;border:0;border-radius:10px;background:transparent;color:var(--label2,#6B5A4C);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}
.po-pegou .po-alca{cursor:grabbing}

/* configuração */
.po-escala{display:flex;align-items:center;gap:10px}
.po-escala input[type=range]{flex:1;min-width:0;height:44px;margin:0;accent-color:var(--acao,#1F5FD0);background:transparent}
.po-a{font-weight:600;color:var(--label2,#6B5A4C);font-size:max(.6875rem,calc(.8125rem * var(--dt,1)))}
.po-a-grande{font-size:max(.6875rem,calc(1.375rem * var(--dt,1)))}
.po-valor{margin:0;font-weight:650}
.po-amostra-caixa{padding:10px 12px;border-radius:var(--r-ctl,12px);background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));min-width:0}
.po-amostra{margin:4px 0 0;font-size:max(.6875rem,calc(1.0625rem * var(--dt,1) * var(--po-escala,1)));line-height:1.3;overflow-wrap:anywhere;transition:font-size .25s var(--ease-out)}
.po-alternar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.po-chave{-webkit-appearance:none;appearance:none;position:relative;flex:none;width:60px;height:44px;min-height:44px;margin:0;padding:0;border:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.po-chave::before{content:"";position:absolute;left:4px;top:6.5px;width:51px;height:31px;border-radius:999px;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));transition:background-color .25s var(--ease-out)}
.po-chave::after{content:"";position:absolute;left:6px;top:8.5px;width:27px;height:27px;border-radius:50%;background:var(--surface,#FFFFFF);box-shadow:0 2px 6px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 20%,transparent);transition:transform .3s var(--ease-out)}
.po-chave[aria-checked=true]::before{background:var(--verde,#11994A)}
.po-chave[aria-checked=true]::after{transform:translateX(20px)}

/* impressora */
.po-situacao{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:10px 12px;border-radius:var(--r-ctl,12px);background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent))}
.po-situacao span{font-size:max(.6875rem,calc(.8125rem * var(--dt,1)));color:var(--label2,#6B5A4C)}
.po-ponto{width:10px;height:10px;flex:none;border-radius:50%;background:var(--label3,#9C8D80)}
.po-sit-ok{background:color-mix(in srgb,var(--verde,#11994A) 12%,transparent)}
.po-sit-ok .po-ponto{background:var(--verde,#11994A)}
.po-sit-ok b{color:var(--d-verdeagua-t,#006F5D)}
.po-sit-atencao{background:color-mix(in srgb,var(--d-ambar,#C27A00) 14%,transparent)}
.po-sit-atencao .po-ponto{background:var(--d-ambar,#C27A00)}
.po-sit-atencao b{color:color-mix(in srgb,var(--d-ambar,#C27A00) 50%,var(--label,#323200))}
.po-sit-erro{background:color-mix(in srgb,var(--queda,#E21D3C) 12%,transparent)}
.po-sit-erro .po-ponto{background:var(--queda,#E21D3C)}
.po-sit-erro b{color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))}
.po-fatos{margin:0;display:flex;flex-direction:column;gap:8px}
.po-fatos dd{margin:2px 0 0;overflow-wrap:anywhere}
.po-fatos small{display:block;font-size:max(.6875rem,calc(.8125rem * var(--dt,1)));color:var(--label2,#6B5A4C)}
.po-avisos{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.po-avisos li{padding:10px 12px;border-radius:var(--r-ctl,12px);background:color-mix(in srgb,var(--d-ambar,#C27A00) 18%,transparent);font-size:max(.6875rem,calc(.8125rem * var(--dt,1)));overflow-wrap:anywhere}

@keyframes po-entra{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.po,.po *,.po *::before,.po *::after{animation:none!important;transition:none!important}}

.cu-fio-conteudo .pv-item-dados .pv-dados-numericos>summary{min-height:36px!important}

/* /manutencao-remota.css */
/* 1.66.0 (onda G): a MANUTENÇÃO REMOTA dentro do Hub (#view-man, montada por web/manutencao-remota.js). O desenho é o da
   página solta da 1.63.0, agora com os tokens do Hub (claro e escuro pelo body.dark), no fluxo das outras telas: o topo de
   vidro e o menu de sempre por cima, conteúdo que rola por baixo deles. Computador: controles de 36 px com hover; toque:
   44 px. Tudo escopado em #view-man, porque .pill, .card e .status já existem com outro sentido no Hub. */
#view-man .man-tela{box-sizing:border-box;max-width:1080px;margin:0 auto;padding:6px 20px 32px;color:var(--label,#323200)}
#view-man .man-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:8px 2px 14px}
/* 1.70.0 (auditoria): no celular o botão Atualizar era espremido pelo título e o texto passava da borda (61 px de texto em 56 px) */
#view-man .man-topo>button{flex:none;white-space:nowrap}
#view-man .man-titulos{min-width:0}
#view-man h2{margin:0;font-size:calc(1.375rem * var(--dt,1));font-weight:700;letter-spacing:-.01em;line-height:1.2;outline:none}
#view-man h3{margin:0 0 10px;font-size:var(--f-headline,1.0625rem);font-weight:700}
#view-man .sub{color:var(--label2,#6B5A4C);margin:4px 0 0;font-size:var(--f-footnote,0.8125rem);line-height:1.4}
#view-man .card{background:var(--surface,#FFFFFF);border:0;border-radius:var(--r-card,16px);box-shadow:inset 0 0 0 .5px var(--sep,color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 13%,transparent)),0 1px 2px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 5%,transparent);padding:16px 20px;margin:0 0 14px}
/* 04/10/2026 (a dupla checagem): na faixa de cartões a moldura é a da peça (web/hub-carrossel.css) e o título tem o tamanho das outras telas */
#view-man .sb-faixa>.card.hcar-cartao:not(.hcar-grande){border-radius:var(--r-sheet,1.25rem);box-shadow:inset 0 0 0 .5px var(--sep,color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 13%,transparent)),0 1px 2px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 5%,transparent),0 6px 18px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 6%,transparent)}
body.dark #view-man .sb-faixa>.card.hcar-cartao:not(.hcar-grande){background:var(--surface,#FFFFFF);box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--page,#F7F5F1) 16%,transparent),0 1px 2px color-mix(in srgb,var(--page,#F7F5F1) 30%,transparent),0 6px 18px color-mix(in srgb,var(--page,#F7F5F1) 32%,transparent)}
#view-man .sb-faixa>.card>h3{font-size:var(--f-title3,calc(1.25rem * var(--dt,1)));line-height:var(--lh-title3,1.25)}
/* o cartão "Inscrever um computador" na faixa: o resumo é o título do cartão (não abre nem fecha: o cartão já é a caixa dele) */
#view-man .sb-faixa>.card>details>summary{list-style:none;margin:0 0 10px;font-size:var(--f-title3,calc(1.25rem * var(--dt,1)));line-height:var(--lh-title3,1.25);font-weight:700;cursor:default;pointer-events:none}
#view-man .sb-faixa>.card>details>summary::-webkit-details-marker{display:none}
/* 1.74.0 (Philippe, 04/10/2026): o desenho de botão desta tela vale só DENTRO dos cartões (#view-man .card button). A tela
   ganhou a barra de baixo e as peças do carrossel (web/sobras-carrossel.js), que moram na mesma seção e têm desenho próprio. */
#view-man .linha{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
#view-man .entre{justify-content:space-between}
#view-man .card button,#view-man select,#view-man input,#view-man textarea{font:inherit;color:inherit}
#view-man .card button,#view-man .man-link{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--tap-desk,44px);min-width:44px;padding:0 16px;border-radius:999px;border:0;
  background:var(--label,#323200);color:var(--page,#F7F5F1);font-weight:600;font-size:var(--f-subhead,0.9375rem);cursor:pointer;text-decoration:none;box-sizing:border-box;
  transition:transform var(--dur-rapida,.12s),filter var(--dur-rapida,.12s),opacity var(--dur-rapida,.12s)}
#view-man .card button.sec{background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));color:var(--label,#323200)}
html.hub-clique #view-man .card button:not([aria-busy=true]):hover,html.hub-clique #view-man .man-link:hover{filter:brightness(1.12)}
html.hub-clique #view-man .card button.sec:not([aria-busy=true]):hover{filter:none;background:var(--fill2,color-mix(in srgb,var(--label,#323200) 13%,transparent))}
#view-man .card button:active,#view-man .card button.apertado{transform:scale(.96)}
#view-man .card button:focus-visible,#view-man a:focus-visible,#view-man select:focus-visible,#view-man input:focus-visible,#view-man summary:focus-visible{outline:3px solid var(--acao,#1F5FD0);outline-offset:2px}
#view-man .card button[aria-busy=true]{opacity:.75;cursor:progress}
#view-man .card button[data-estado=ok]{background:color-mix(in srgb,var(--verde,#11994A) 80%,var(--label,#323200));color:var(--acao-txt,#FFFFFF)}
#view-man .card button[data-estado=erro]{background:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200));color:var(--acao-txt,#FFFFFF)}
#view-man select,#view-man input,#view-man textarea{min-height:var(--tap-desk,44px);padding:6px 12px;border-radius:12px;border:0;background:var(--page,#F7F5F1);box-shadow:inset 0 0 0 .5px var(--sep,color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 13%,transparent));box-sizing:border-box}
#view-man textarea{width:100%;min-height:88px}
#view-man .pill{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:2px 10px;border-radius:999px;font-size:var(--f-caption1,0.75rem);font-weight:600;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));border:0;box-shadow:none;margin:6px 0}
#view-man .pill.ok{background:color-mix(in srgb,var(--verde,#11994A) 18%,transparent);color:var(--d-verdeagua-t,#006F5D)}
#view-man .pill.aviso{background:color-mix(in srgb,var(--d-ambar,#C27A00) 18%,transparent);color:color-mix(in srgb,var(--d-ambar,#C27A00) 50%,var(--label,#323200))}
#view-man .pill.erro{background:color-mix(in srgb,var(--queda,#E21D3C) 14%,transparent);color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))}
#view-man .ponto{width:10px;height:10px;border-radius:50%;background:var(--label3,#9C8D80);display:inline-block}
#view-man .ponto.on{background:var(--verde,#11994A)}
#view-man .status{min-height:22px;margin:8px 0 0;font-size:var(--f-subhead,0.9375rem)}
/* 1.74.0 (Philippe, 04/10/2026, sexta fase, revisão final G1): a linha de aviso da tela mora no primeiro cartão; vazia, ela
   guardava 30 px (e mais um vão do cartão) e abria um buraco entre o título e o texto. Sem aviso ela sai do fluxo (fica
   na página, para o leitor de tela ouvir quando o texto chegar); com aviso aparece como antes. */
#view-man [data-man="aviso"]:empty{position:absolute;min-height:0;margin:0}
#view-man .status[data-tipo=ok]{color:var(--d-verdeagua-t,#006F5D)} #view-man .status[data-tipo=erro]{color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))} #view-man .status[data-tipo=aviso]{color:color-mix(in srgb,var(--d-ambar,#C27A00) 50%,var(--label,#323200))}
#view-man .spin{width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;display:inline-block;animation:man-gira .8s linear infinite;vertical-align:-2px;margin-right:6px}
@keyframes man-gira{to{transform:rotate(360deg)}}
#view-man .pedido{border-top:.5px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));padding:12px 0}
#view-man .pedido:first-child{border-top:0}
#view-man pre{white-space:pre-wrap;word-break:break-word;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));border-radius:10px;padding:10px;max-height:320px;overflow:auto;font-size:var(--f-caption1,0.75rem)}
/* 1.74.0 (Philippe, 04/10/2026, conferência B6): no cartão pequeno do carrossel o registro e os detalhes do pedido não rolam por
   dentro: aparece o que cabe e o "Ver tudo" abre o cartão grande, onde o bloco volta a rolar */
#view-man .hcar-cartao:not(.hcar-grande) pre{max-height:none;overflow:hidden}
#view-man .muted{color:var(--label2,#6B5A4C);font-size:var(--f-footnote,0.8125rem)}
#view-man details summary{min-height:var(--tap-desk,44px);display:flex;align-items:center;cursor:pointer;font-weight:600;border-radius:10px}
#view-man .token{font:600 0.9375rem ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all}
html.hub-toque #view-man .card :is(button,.man-link,select,input,details summary){min-height:44px}
@media (max-width:640px){#view-man .man-tela{padding:4px 12px 24px}}
@media (prefers-reduced-motion:reduce){#view-man *{animation:none!important;transition:none!important}}

/* /calendario.css */
/* 1.65.0: o calendário de período do Hub (web/calendario.js). Tokens do Hub com reserva em todo var(), claro e escuro,
   alvos de 44 px, foco visível. Computador: painel de vidro junto do botão que chamou (dois meses lado a lado quando
   cabe). Celular e app: folha de baixo com a área segura, que sobe com a mola e fecha puxando (web/folha.js). */

.cal-gatilho{display:inline-flex;align-items:center;gap:8px;min-height:44px;max-width:100%;padding:0 14px;border:.5px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));border-radius:var(--r-ctl,12px);background:var(--surface,#FFFFFF);color:var(--label,#323200);font:inherit;font-weight:600;font-size:calc(0.9375rem * var(--dt,1));cursor:pointer;text-align:left}
.cal-gatilho span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:inherit;color:inherit}
.cal-gatilho .cal-icone{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:var(--label2,#6B5A4C)}
@media (hover:hover){.cal-gatilho:hover{background:var(--surface2,#F7F3EE)}}
.cal-gatilho:focus-visible{outline:var(--foco-largura,3px) solid var(--acao,#1F5FD0);outline-offset:2px}
/* os dois input type=date de um par ligado somem: o botão fica no lugar */
[data-calendario-ligado] input[type="date"],[data-calendario-ligado] label:has(> input[type="date"]){display:none!important}
.cal-par-gatilho{display:inline-flex}
/* com o calendário ligado, o botão Aplicar do par some: o período aplica no segundo toque */
[data-calendario-ligado] .cal-aplicar-auto{display:none!important}

.cal-fundo{position:fixed;inset:0;z-index:1500;background:transparent}
.cal-fundo.centro,.cal-fundo.folha{background:var(--vidro-veu,color-mix(in srgb,var(--label,#323200) 22%,transparent));display:flex;align-items:center;justify-content:center}
.cal-painel{position:fixed;width:auto;max-width:calc(100vw - 24px);max-height:calc(100vh - 24px);overflow:auto;padding:6px 20px 12px;border-radius:var(--r-sheet,20px);color:var(--label,#323200);
  background:color-mix(in srgb,var(--surface,#FFFFFF) 97%,transparent);-webkit-backdrop-filter:blur(var(--glass-blur,24px)) saturate(180%);backdrop-filter:blur(var(--glass-blur,24px)) saturate(180%);
  border:.5px solid var(--glass-border,color-mix(in srgb,var(--label,#323200) 88%,transparent));box-shadow:0 18px 46px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 24%,transparent)}
body.dark .cal-painel{background:color-mix(in srgb,var(--surface2,#F7F3EE) 97%,transparent)} /* quase sólido: os números do relatório atrás não atrapalham a leitura dos dias */
.cal-fundo.centro .cal-painel{position:relative}
.cal-alca{display:none}
.cal-topo{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:6px}
.cal-topo h2{margin:0;font-size:calc(1.125rem * var(--dt,1));font-weight:700;letter-spacing:-.01em}
.cal-x,.cal-seta{width:44px;height:44px;flex:none;display:grid;place-items:center;border:0;border-radius:50%;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));color:var(--label2,#6B5A4C);cursor:pointer}
.cal-x svg,.cal-seta svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cal-seta:disabled{opacity:.35;cursor:default}
.cal-dica{margin:4px 0 8px;font-size:calc(0.84375rem * var(--dt,1));color:var(--label2,#6B5A4C);line-height:1.35;min-height:2.7em}
.cal-nav{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cal-titulo-mes{font-weight:700;font-size:calc(0.9375rem * var(--dt,1));text-align:center}
.cal-meses{display:flex;gap:18px;margin-top:6px}
.cal-mes-nome{display:none;text-align:center;font-weight:700;font-size:calc(0.875rem * var(--dt,1));margin:2px 0 4px}
.cal-meses.dois .cal-mes-nome{display:block}
.cal-mes table{border-collapse:separate;border-spacing:0 3px}
.cal-mes th{font-size:var(--f-caption1,max(0.6875rem, calc(0.75rem * var(--dt,1))));font-weight:600;color:var(--label2,#6B5A4C);height:24px;text-align:center}
.cal-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cal-mes td{padding:0;text-align:center}
.cal-dia{position:relative;width:44px;height:44px;border:0;border-radius:0;background:transparent;color:var(--label,#323200);font:inherit;font-size:calc(0.9375rem * var(--dt,1));font-variant-numeric:tabular-nums;cursor:pointer;z-index:0}
/* a faixa do período: um trilho contínuo, com as pontas redondas no início e no fim */
.cal-dia.faixa{background:color-mix(in srgb,var(--acao,#1F5FD0) 16%,transparent)}
.cal-dia.faixa.provisorio{background:color-mix(in srgb,var(--acao,#1F5FD0) 9%,transparent)}
.cal-dia.inicio{border-top-left-radius:22px;border-bottom-left-radius:22px}
.cal-dia.fim{border-top-right-radius:22px;border-bottom-right-radius:22px}
/* 1.72.0: o dia escolhido é um círculo azul cheio com o número em branco: o azul do sistema dava 3,5:1; o tom de fundo
   cheio (--on-blue) passa de 6:1 no claro e no escuro */
.cal-dia.inicio::after,.cal-dia.fim::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--acao,#1F5FD0);z-index:-1}
.cal-dia.inicio,.cal-dia.fim{color:var(--acao-txt,#FFFFFF);font-weight:700}
.cal-dia.hoje:not(.inicio):not(.fim)::before{content:"";position:absolute;inset:4px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--label2,#6B5A4C)}
.cal-dia:disabled{color:var(--label4,var(--label2,#6B5A4C));cursor:default}
body.dark .cal-dia:disabled{color:var(--label2,#6B5A4C)}
@media (hover:hover){.cal-dia:not(:disabled):not(.inicio):not(.fim):hover{background:var(--fill2,color-mix(in srgb,var(--label,#323200) 13%,transparent));border-radius:22px}}
.cal-dia:focus-visible{outline:var(--foco-largura,3px) solid var(--acao,#1F5FD0);outline-offset:-2px;border-radius:22px}
.cal-rodape{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;padding-top:8px;border-top:.5px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent))}
.cal-escolha{font-weight:600;font-size:calc(0.875rem * var(--dt,1))}
.cal-limpar{min-height:44px;min-width:44px;padding:0 12px;border:0;border-radius:var(--r-pill,999px);background:transparent;color:var(--acao,#1F5FD0);font:inherit;font-weight:600;cursor:pointer}
.cal-limpar:disabled{color:var(--label4,var(--label2,#6B5A4C));cursor:default}
.cal-painel button:focus-visible{outline:var(--foco-largura,3px) solid var(--acao,#1F5FD0);outline-offset:2px}

/* celular e app: folha de baixo */
.cal-fundo.folha{align-items:flex-end}
/* 1.72.0 (auditoria de design 1720): as alturas das folhas do sistema (web/folha.css): nunca passa da faixa da barra de
   status, e "Limpar" fica acima do indicador de início (no app, as peças nativas somem com a folha: web/folha.js) */
.cal-fundo.folha .cal-painel{position:relative;left:auto!important;top:auto!important;width:100%;max-width:100%;max-height:var(--folha-grande,92vh);border-radius:var(--r-sheet,20px) var(--r-sheet,20px) 0 0;padding:6px 16px var(--folha-base,calc(14px + env(safe-area-inset-bottom,0px)))}
@media (min-width:641px){.cal-fundo.folha .cal-painel{padding-left:20px;padding-right:20px}} /* 1.72.0: margem de 20 pt no iPad */
.cal-fundo.folha .cal-alca{display:block;width:36px;height:5px;margin:4px auto 0;border-radius:3px;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent))}
.cal-fundo.folha .cal-mes{flex:1}
.cal-fundo.folha .cal-mes table{width:100%}
.cal-fundo.folha .cal-dia{width:100%;min-width:44px}
@media (prefers-reduced-transparency:reduce){.cal-painel{background:var(--surface,#FFFFFF);-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (forced-colors:active){.cal-dia.inicio,.cal-dia.fim,.cal-dia.faixa{outline:2px solid Highlight}}

/* /saipos-report.css */
/* Os totais importados podem ter milhões de reais e devem caber sem cortes. */
.saipos-report .kpis,.saipos-report .kpis.k2,.saipos-report .kpis.k3{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.saipos-report .kpi{min-width:0}
.saipos-report .kv{font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.saipos-report .cl .btn{margin:6px 6px 0 0}
.saipos-report .dt{flex-wrap:wrap}

.saipos-report .saipos-details-intro .dt{justify-content:space-between;gap:12px}
.saipos-report .saipos-channel-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.saipos-report .saipos-scroll{max-height:360px;overflow:auto;overscroll-behavior:contain}
.saipos-report .saipos-scroll .ctab th{position:sticky;top:0;background:var(--panel,var(--page,#F7F5F1));z-index:1}
.saipos-report .saipos-differences summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600}
.saipos-report .saipos-differences td{white-space:normal;overflow-wrap:anywhere}
@media(max-width:700px){.saipos-report .saipos-scroll .ctab{min-width:560px}.saipos-report .saipos-details-intro .btn{width:100%}}

/* /saipos-orders.css */
.saipos-orders{--so-ink:var(--label,#323200);--so-muted:var(--label2,#6B5A4C);--so-glass:color-mix(in srgb,var(--surface,#FFFFFF) 96%,transparent);--so-soft:color-mix(in srgb,var(--surface2,#F7F3EE) 6.5%,transparent);--so-accent:var(--verde,#11994A);--so-focus:var(--acao,#1F5FD0);box-sizing:border-box;width:min(1060px,calc(100vw - 24px));height:min(840px,var(--so-height,calc(100dvh - 24px)));max-height:var(--so-height,calc(100dvh - 24px));position:fixed;inset:auto;left:50%;top:var(--so-center,50%);transform:translate(-50%,-50%);margin:0;padding:20px;border:0;border-radius:26px;background:var(--so-glass);color:var(--so-ink);box-shadow:0 18px 70px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 18.824%,transparent);backdrop-filter:blur(28px) saturate(1.2);-webkit-backdrop-filter:blur(28px) saturate(1.2);font:0.9375rem/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:calc(0.9375rem * var(--dt));overflow:hidden}
.saipos-orders[open]{display:grid;grid-template-rows:auto auto auto minmax(0,1fr) auto;gap:14px}.saipos-orders::backdrop{background:color-mix(in srgb,var(--label,#323200) 30%,transparent);backdrop-filter:blur(5px)}.saipos-orders *{box-sizing:border-box}.saipos-orders h2,.saipos-orders h3{margin:0;font-size:calc(1.5625rem * var(--dt));line-height:1.2;letter-spacing:-0.03125rem}.saipos-orders h4{font-size:calc(1.0625rem * var(--dt));margin:24px 0 12px}.saipos-orders p{margin:6px 0;overflow-wrap:anywhere}.saipos-orders .so-eyebrow{font-size:calc(0.8125rem * var(--dt));color:var(--so-muted);margin:0 0 5px}.so-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.so-head>[data-so-close]{font-size:calc(1.5625rem * var(--dt));font-weight:400;padding:6px}
.saipos-orders button,.saipos-orders input,.saipos-orders select,.so-filters>summary{font:inherit;min-height:44px;border:0;border-radius:12px;color:var(--so-ink);background:var(--so-soft);padding:10px 12px;min-width:0}.saipos-orders button{font-weight:600;cursor:pointer;touch-action:manipulation;min-width:44px}.saipos-orders button:disabled{opacity:.45;cursor:default}.saipos-orders button:focus-visible,.saipos-orders input:focus-visible,.saipos-orders select:focus-visible,.saipos-orders summary:focus-visible,.so-body:focus-visible{outline:3px solid var(--so-focus);outline-offset:2px}.saipos-orders:focus{outline:none}.so-filters>summary{cursor:pointer;font-weight:600;background:transparent;padding:8px 0}.so-filters form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.so-filters label{display:grid;gap:5px;color:var(--so-muted);font-size:calc(0.8125rem * var(--dt));min-width:0}.so-filters input,.so-filters select{width:100%;color:var(--so-ink);font-size:calc(0.9375rem * var(--dt))}.so-filters .so-search{grid-column:span 2}.so-filters [type=submit]{align-self:end;background:var(--so-accent);color:var(--acao-txt,#FFFFFF)}.so-status{font-size:calc(0.8125rem * var(--dt));color:var(--so-muted);min-height:20px;margin:0!important}.so-error{color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))}.so-body{overflow:auto;min-height:0;overscroll-behavior:contain;scrollbar-width:thin;padding:3px;border-radius:18px}.so-list{display:grid;gap:8px;list-style:none;margin:0;padding:0}.so-row{width:100%;display:flex;justify-content:space-between;gap:14px;text-align:left;border-radius:17px!important;background:var(--so-soft);padding:15px!important}@media (hover:hover){.so-row:hover{filter:brightness(.96)}}.so-row-main,.so-row-end{display:flex;flex-direction:column;gap:5px;min-width:0;overflow-wrap:anywhere}.so-row-main strong{font-size:calc(1.0625rem * var(--dt))}.so-row-main small{font-size:calc(0.8125rem * var(--dt));color:var(--so-muted);font-weight:400}.so-row-end{align-items:flex-end;text-align:right;font-size:calc(0.8125rem * var(--dt));color:var(--so-muted)}.so-row-end strong{font-size:calc(1rem * var(--dt));color:var(--so-ink);font-variant-numeric:tabular-nums}.so-badge{display:inline-block;align-self:flex-start;border-radius:8px;padding:4px 8px;font-size:max(0.6875rem, calc(0.75rem * var(--dt)));font-weight:600;background:var(--so-soft);color:var(--so-ink);white-space:nowrap}.so-row-end .so-badge{align-self:flex-end}.so-badge.cancelled{background:color-mix(in srgb,var(--queda,#E21D3C) 7.451%,transparent);color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))}.so-open{color:var(--so-accent);font-weight:600}.so-footer{display:flex;align-items:center;justify-content:space-between;gap:12px}.so-footer[hidden]{display:none}.so-footer span{font-size:calc(0.8125rem * var(--dt));text-align:center;color:var(--so-muted);font-variant-numeric:tabular-nums}.so-empty{padding:35px 16px;text-align:center;color:var(--so-muted)}.so-detail{padding:4px 5px 16px}.so-detail-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-top:20px}.so-detail-head p{font-size:calc(0.875rem * var(--dt));color:var(--so-muted)}.so-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0}.so-facts>div{min-width:0;background:var(--so-soft);padding:13px;border-radius:14px}.so-facts dt{font-size:calc(0.8125rem * var(--dt));color:var(--so-muted);margin-bottom:5px}.so-facts dd{margin:0;font-size:calc(1rem * var(--dt));overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.so-note{font-size:calc(0.8125rem * var(--dt));color:var(--so-muted);padding-top:10px}.so-limit{margin-top:18px!important;padding:14px!important;border-radius:14px;background:var(--so-soft)}
body.dark .saipos-orders,[data-theme=dark] .saipos-orders{--so-ink:var(--label,#323200);--so-muted:var(--label,#323200);--so-glass:color-mix(in srgb,var(--label,#323200) 97%,transparent);--so-soft:color-mix(in srgb,var(--surface2,#F7F3EE) 8.5%,transparent);--so-accent:var(--verde,#11994A);--so-focus:var(--acao,#1F5FD0)}body.dark .saipos-orders .so-open{color:var(--d-verdeagua-t,#006F5D)}body.dark .saipos-orders .so-badge.cancelled{color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200));background:color-mix(in srgb,var(--queda,#E21D3C) 12.157%,transparent)}body.dark .saipos-orders .so-error{color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))}
@media(max-width:680px){.saipos-orders{width:calc(100vw - 16px);height:var(--so-height,calc(100dvh - 16px));max-height:var(--so-height,calc(100dvh - 16px));padding:14px;border-radius:22px}.saipos-orders[open]{gap:10px}.saipos-orders h2{font-size:calc(1.375rem * var(--dt))}.so-filters form{grid-template-columns:repeat(2,minmax(0,1fr));max-height:35dvh;overflow:auto;padding:3px}.so-filters [type=submit]{grid-column:1/-1}.so-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.so-detail-head{flex-direction:column}.so-row{padding:12px!important;gap:8px}.so-row-main small{font-size:max(0.6875rem, calc(0.75rem * var(--dt)))}.so-footer{gap:6px}.so-footer button{padding-inline:10px}.so-row-end{max-width:44%}}
@media(prefers-reduced-motion:reduce){.saipos-orders *{transition:none!important;animation:none!important}}

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

/* ---------- gaveta (menu da esquerda, ~90% da tela) ---------- */
.gaveta-scrim{position:fixed;inset:0;background:color-mix(in srgb,var(--label,#323200) 35%,transparent);opacity:0;pointer-events:none;transition:opacity .3s;z-index:1300}
.gaveta{position:fixed;top:0;bottom:0;left:0;width:min(90vw,380px);transform:translateX(-104%);transition:transform var(--dur-lenta,.34s) var(--curva-padrao,cubic-bezier(.2,.8,.2,1));z-index:1301;background:var(--vidro-grosso,color-mix(in srgb,var(--surface,#FFFFFF) 88%,transparent));-webkit-backdrop-filter:blur(30px) saturate(var(--vidro-saturacao,180%));backdrop-filter:blur(30px) saturate(var(--vidro-saturacao,180%));box-shadow:var(--vidro-brilho,none),8px 0 40px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 18%,transparent);padding:calc(env(safe-area-inset-top) + 8px) 12px calc(env(safe-area-inset-bottom) + 16px);overflow:auto;display:flex;flex-direction:column;gap:2px;box-sizing:border-box;border-right:1px solid color-mix(in srgb,var(--label,#323200) 70%,transparent)}
body.dark .gaveta{border-right-color:color-mix(in srgb,var(--label,#323200) 8%,transparent)}
html.gaveta-aberta .gaveta{transform:none} html.gaveta-aberta .gaveta-scrim{opacity:1;pointer-events:auto}
.gaveta .gv-marca{display:flex;align-items:center;gap:10px;padding:6px 12px 12px} .gaveta .gv-marca img{height:36px} .gaveta .gv-marca span{font-size:calc(0.8125rem * var(--dt));color:var(--label2,#6B5A4C);margin-left:auto}
.gaveta .gv-sec{font-size:max(0.6875rem, calc(0.75rem * var(--dt)));font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--label2,#6B5A4C);padding:14px 12px 4px}
.gaveta .gv-lojas{display:flex;gap:6px;padding:0 4px 4px} .gaveta .gv-lojas button{flex:1;min-height:44px;padding:12px 8px;border-radius:12px;border:0;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));font-weight:600;font-size:calc(0.9375rem * var(--dt));color:var(--label,#323200)} .gaveta .gv-lojas button.on{background:var(--queda,#E21D3C);color:var(--acao-txt,#FFFFFF);border-color:transparent} .gaveta .gv-lojas button[data-gvloja="all"].on{background:var(--verde,#11994A)}

.gaveta .gv-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;font-size:calc(1.0625rem * var(--dt));font-weight:600;color:var(--label,#323200);background:transparent;border:0;width:100%;text-align:left;font-family:inherit;min-height:50px}
.gaveta .gv-item:active{background:var(--fill2,color-mix(in srgb,var(--label,#323200) 13%,transparent))}
.gaveta .gv-item.on{background:var(--fill2,color-mix(in srgb,var(--label,#323200) 13%,transparent))}
.gaveta .gv-item svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.gaveta .gv-item .gv-dot{width:9px;height:9px;border-radius:50%;background:var(--queda,#E21D3C);margin-left:auto;display:none} .gaveta .gv-item .gv-dot.show{display:block}
.gaveta .gv-toggle{margin-left:auto;width:51px;height:31px;border-radius:16px;background:color-mix(in srgb,var(--label3,#9C8D80) 32%,transparent);position:relative;flex:none;transition:background .2s} .gaveta .gv-toggle::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:var(--surface,#FFFFFF);box-shadow:0 3px 8px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 15%,transparent);transition:transform .2s} .gaveta .gv-toggle.on{background:var(--verde,#11994A)} .gaveta .gv-toggle.on::after{transform:translateX(20px)}
.gaveta .gv-item.sair{color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))}
.gaveta .gv-rodape{margin-top:auto;padding:14px 12px 0;font-size:max(0.6875rem, calc(0.75rem * var(--dt)));color:var(--label2,#6B5A4C)}

/* ---------- 1.51.0: só a EXPEDIÇÃO é travada; o resto rola a tela inteira, por baixo do vidro ----------
   Pedido do Philippe (21/09/2026): "a única tela que precisa ficar travada para não passar de baixo do menu e
   dos botões é a tela de expedição, porque ela tem as colunas... As outras telas, todas elas, a rolagem pode
   ser até no final da tela e passar por debaixo dos botões de menu e da barra de menu."
   Medidas: env(safe-area-inset-top) já inclui a faixa dos botões (inset nativo). Embaixo, o iOS manda a
   altura da cápsula em --app-barra (HubBarraPlugin.enviarMedidas), somada ao indicador de início. */
:root{--app-barra:56px;--rodape-app:calc(env(safe-area-inset-bottom) + var(--app-barra));--topo-app:calc(env(safe-area-inset-top) + 8px)}
/* 1.74.0 (Philippe, 06/10/2026: "a barra de menu dos aplicativos são nativas e não podem duplicar ou sobrepor a versão web
   do hub"): NO ANDROID o conteúdo começava ATRÁS dos botões nativos do topo. A frase acima ("env(safe-area-inset-top) já
   inclui a faixa dos botões") só vale no iPhone, onde o nativo soma a faixa à área segura. No Android o aplicativo é borda
   a borda e não soma nada (HubBarraPlugin.kt: "quem empurra é o CSS"): a página só conhece a barra de status, e os dois
   botões de 48 dp (6 dp abaixo dela) ficavam em cima dos cantos do primeiro cartão de toda tela e da notificação que
   desce do topo (medido com as peças nativas nas medidas do Kotlin, tests/app-barras-1740.test.js). Aqui entra a faixa:
   6 + 48 + 6 dp, mais os 2 px que o iPhone também soma (web/topo-vidro.css). Sem sessão não há botões (app-sem-topo). */
html.app-android:not(.app-sem-topo){--topo-app:calc(env(safe-area-inset-top,0px) + 62px)}
html.app-nativo body{padding:var(--topo-app) 0 var(--rodape-app)!important;margin:0}
/* 1.74.0 (06/10/2026): a sonda das medidas nativas (web/app-nativo.js, ligarSonda): invisível, do tamanho do topo e do rodapé */
#app-sonda{position:fixed;left:0;top:0;z-index:-1;width:var(--rodape-app);height:var(--topo-app);visibility:hidden;pointer-events:none}
html.app-nativo main{position:static;margin:0!important;padding:0 0 12px!important;width:auto;min-height:0;border:0;border-radius:0;box-shadow:none;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
html.app-nativo .ges,html.app-nativo .menuv{padding-bottom:16px}
html.app-nativo #view-kds .grid{padding-top:4px}
/* expedição: caixa fixa entre os botões e a barra; a fita de colunas arrasta para o lado e só a lista de cards rola */
html.app-nativo body[data-hub-view="exp"]:is(#hub-vista,*){overflow:hidden;height:100dvh;box-sizing:border-box}
html.app-nativo body[data-hub-view="exp"]:is(#hub-vista,*) main{position:fixed;top:var(--topo-app);bottom:var(--rodape-app);left:0;right:0;padding:0!important;overflow:hidden;display:flex;flex-direction:column}
html.app-nativo #view-exp.on{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding-bottom:0}
html.app-nativo #view-exp.on>*{flex:none}
html.app-nativo #view-exp.on .lanes{flex:1 1 auto;min-height:0;padding:4px 0 0;align-items:stretch}
html.app-nativo #view-exp.on .lane{display:flex;flex-direction:column;min-height:0;height:100%;padding:0 10px 4px}
@media (max-width:760px){html.app-nativo #view-exp.on .lane{padding-left:var(--margem);padding-right:var(--margem)}} /* 1.72.0 (pente fino): no iPhone a coluna começa na margem de 16 pt, como os cartões das outras telas (era 10) */
html.app-nativo #view-exp.on .lane h3{flex:none}
html.app-nativo #view-exp.on .lane .col{flex:1 1 auto;min-height:0!important;max-height:none!important;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}
html.app-nativo #view-exp .tools{padding-top:2px}
html.app-nativo #view-exp.on .alerts,html.app-nativo #view-exp.on .selbar{flex:none}

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

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

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

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

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

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

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

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

/* /app-ios.css */
/* 1.47.0, refeito em 1.48.0: o Hub dentro do aplicativo iOS (Capacitor). Só o que muda em relação ao site.
   Pedido do Philippe (21/09/2026): "a barra do menu do topo vai sair completamente"; ficam os botões de
   vidro nativos (menu à esquerda, filtro e selecionar à direita) e a cápsula de vidro no rodapé (KDS,
   Expedição, Cérebro no meio, Dashboard, Avaliações), os dois desenhados em Swift (HubBarraPlugin).
   O conteúdo respeita as áreas seguras: env(safe-area-inset-top/bottom) já inclui as faixas nativas. */
html.app-ios body{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;overscroll-behavior-y:none}
/* o cabeçalho web sai inteiro; os botões dele continuam existindo (escondidos) porque o app dispara o clique */
html.app-ios .top{display:none!important}
/* 1.49.0: a caixa fixa do conteúdo (posição, rolagem, colunas) mora em app-nativo.css, igual nos dois apps */
/* KDS no app é a cozinha; as outras etapas são as colunas da expedição */
html.app-ios #view-kds .kbar,html.app-ios #view-kds .strip{display:none!important}
html.app-ios #view-kds .grid{padding-top:6px}
/* expedição: cancelados sempre na última coluna; os botões de chat e de cancelados não existem no app */
html.app-ios #view-exp .tools{padding-top:6px}
/* menu web e chevron de tela: substituídos pela gaveta e pela barra nativa */
html.app-ios #seg,html.app-ios .top.compact #seg,html.app-ios #menubtn,html.app-ios #menudd{display:none!important}
/* folhas: no iOS o modal desce como sheet, com alça; fecha arrastando para baixo (sem o X).
   1.72.0 (auditoria de design 1720): as alturas são as das folhas do sistema (web/folha.css: --folha-grande, --folha-media e
   --folha-base) e, aberta, a folha esconde os botões de vidro do topo e a barra de abas (web/folha.js); antes o rodapé de
   botões do diálogo de cancelar caía embaixo da barra de abas nativa */
html.app-ios .modal{align-items:flex-end;padding:0}
html.app-ios .modal>.oc,html.app-ios .modal>.pc,html.app-ios .modal>.lc{width:100%;max-width:100%;border-radius:22px 22px 0 0;padding-bottom:var(--folha-base);max-height:var(--folha-grande);box-sizing:border-box;overflow:auto;position:relative;touch-action:pan-y;will-change:transform}
html.app-ios .modal>.oc::before,html.app-ios .modal>.pc::before,html.app-ios .modal>.lc::before{content:"";display:block;width:36px;height:5px;border-radius:3px;background:var(--folha-alca,color-mix(in srgb,var(--label,#323200) 30%,transparent));margin:8px auto 10px}
html.app-ios .modal>.oc .oh .x{display:none!important}
html.app-ios .modal.arrastando>.oc,html.app-ios .modal.arrastando>.pc,html.app-ios .modal.arrastando>.lc{transition:none}
html.app-ios .modal>.oc,html.app-ios .modal>.pc,html.app-ios .modal>.lc{transition:transform .28s cubic-bezier(.2,.8,.2,1)}
/* o perfil loja não existe no app: o login mostra só gestão */
html.app-ios #unitpick{display:none!important}
html.app-ios .login-management{margin-top:8px}
/* destaque de 4 s no rótulo de lojas quando a notificação "loja fechada" abre a tela */
html.app-ios body.app-destacar-lojas #unitlabel{box-shadow:0 0 0 3px var(--crono-atraso,var(--queda,#E21D3C));transition:box-shadow .3s}
/* seleção de texto e zoom: app, não página */
html.app-ios *{-webkit-user-select:none;user-select:none}
html.app-ios input,html.app-ios textarea,html.app-ios [contenteditable]{-webkit-user-select:text;user-select:text}


/* V3.6: a pergunta global substitui as peças nativas; somente safe-area no topo. */
html.app-ios{--app-barra:0px;--topo-app:calc(env(safe-area-inset-top,0px) + 8px)}
html.app-ios.cg-ativa{--rodape-app:var(--cg-reserva)}

/* /app-android.css */
/* 1.47.0, refeito em 1.59.0: o Hub dentro do aplicativo Android (Capacitor). Só o que muda em relação ao
   site. Material 3 Expressive, Android 16.

   O QUE MUDOU NA 1.59.0, e por quê: a barra do topo do web SAIU, como já tinha saído no iOS na 1.48.0
   (pedido do Philippe: "a barra do menu do topo vai sair completamente"). Agora o Android também desenha
   em código nativo o menu à esquerda e os botões de filtro e de selecionar à direita (botões tonais do M3,
   HubBarraPlugin.kt), além da barra de navegação inferior com as cinco abas. Duas barras, uma web e uma
   nativa, era o que fazia o app parecer um site dentro de uma moldura.

   O que continua valendo da pesquisa de 20/09/2026: rótulo sempre visível na barra de navegação, alvo de
   toque de 48 dp, cantos mais arredondados, folha inferior (bottom sheet) no lugar da folha do iOS,
   snackbar no lugar do toast, Roboto. O Material Web foi pausado em 2024, então os componentes que o Hub
   usa em HTML (folha, snackbar, chips) ganham aqui o CSS com os tokens públicos do M3. A cor primária é a
   da MARCA e não a do papel de parede: quem usa cor para ler estado (atrasado, pronto, em rota) não pode
   ter a paleta trocada pelo fundo de tela. O Material You fica onde é bem-vindo, nos widgets.

   A CAIXA do conteúdo (posição, rolagem, colunas travadas da expedição, --app-barra) mora em
   app-nativo.css e é a mesma nos dois aplicativos. Aqui não se mexe em padding de body nem de main. */
html.app-android{--m3-primary:var(--queda,#E21D3C);--m3-on-primary:var(--surface,#FFFFFF);--m3-surface:var(--surface,#FFFFFF);--m3-surface-container:var(--surface,#FFFFFF);--m3-outline:var(--label2,#6B5A4C);--m3-ripple:color-mix(in srgb,var(--queda,#E21D3C) 12%,transparent);--m3-radius:16px;--m3-radius-sm:12px}
html.app-android:not([data-theme="light"]) body.dark,html.app-android[data-theme="dark"]{--m3-surface:var(--surface,#FFFFFF);--m3-surface-container:var(--surface,#FFFFFF);--m3-outline:var(--label2,#6B5A4C);--m3-ripple:color-mix(in srgb,var(--queda,#E21D3C) 16%,transparent)}
/* !important porque applyCfg() escreve a fonte no style do body; no Android a plataforma manda */
html.app-android body{font-family:Roboto,"Roboto Flex","Noto Sans",system-ui,sans-serif!important;-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
/* o cabeçalho web sai inteiro; os botões dele continuam existindo (escondidos) porque o app dispara o clique */
html.app-android .top{display:none!important}
/* menu web e chevron de tela: substituídos pela gaveta e pela barra nativa */
html.app-android #seg,html.app-android .top.compact #seg,html.app-android #menubtn,html.app-android #menudd{display:none!important}
/* KDS no app é a cozinha; as outras etapas são as colunas da expedição */
html.app-android #view-kds .kbar,html.app-android #view-kds .strip{display:none!important}
html.app-android #view-kds .grid{padding-top:6px}
html.app-android #view-exp .tools{padding-top:6px}
/* alvo de toque de 48 dp e ripple discreto nos botões */
html.app-android button:not(.tag button):not(.settings-remove):not(.icon),html.app-android .rolebtn,html.app-android .gestorlink{min-height:48px!important;border-radius:var(--m3-radius-sm);position:relative;overflow:hidden}
html.app-android button.icon{min-width:48px;min-height:48px!important}
html.app-android button:active::after{content:"";position:absolute;inset:0;background:var(--m3-ripple);border-radius:inherit}
html.app-android .k,html.app-android .e,html.app-android .dcard,html.app-android .kpi,html.app-android .pcard{border-radius:var(--m3-radius)}
/* folha inferior (bottom sheet) do M3: sobe do rodapé, canto 28 dp, alça de arrasto.
   Fecha arrastando para baixo (app-nativo.js liga o arrasto nos dois aplicativos) e pelo gesto de voltar;
   com esses dois caminhos, o X do web viraria um terceiro botão para a mesma coisa. */
html.app-android .modal{align-items:flex-end;padding:0}
/* 1.72.0 (auditoria de design 1720): as alturas das folhas do sistema (web/folha.css); aberta, a folha esconde a barra nativa */
html.app-android .modal>.oc,html.app-android .modal>.pc,html.app-android .modal>.lc{width:100%;max-width:100%;border-radius:28px 28px 0 0;padding-bottom:var(--folha-base);max-height:var(--folha-grande);box-sizing:border-box;overflow:auto;position:relative;background:var(--m3-surface-container);touch-action:pan-y;will-change:transform;transition:transform .28s cubic-bezier(.2,.8,.2,1)}
html.app-android .modal>.oc::before,html.app-android .modal>.pc::before,html.app-android .modal>.lc::before{content:"";display:block;width:32px;height:4px;border-radius:2px;background:var(--m3-outline);opacity:.5;margin:10px auto 12px}
html.app-android .modal>.oc .oh .x{display:none!important}
html.app-android .modal.arrastando>.oc,html.app-android .modal.arrastando>.pc,html.app-android .modal.arrastando>.lc{transition:none}
/* snackbar: o toast do Hub vira uma faixa no rodapé, acima da barra nativa (--app-barra vem do plugin) */
html.app-android .toasts{top:auto;bottom:calc(var(--rodape-app) + 12px);align-items:stretch}
html.app-android .toast{border-radius:8px;background:var(--label,#323200);border-color:transparent;color:var(--acao-txt,#FFFFFF);box-shadow:0 3px 8px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 30%,transparent);font-size:calc(0.875rem * var(--dt));-webkit-backdrop-filter:none;backdrop-filter:none}
/* chips de filtro no padrão M3 (borda, sem sombra) */
html.app-android .tag{border:1px solid var(--m3-outline);background:transparent;border-radius:8px}
/* o perfil loja não existe no app: o login mostra só gestão */
html.app-android #unitpick{display:none!important}
html.app-android .login-management{margin-top:8px}
/* destaque de 4 s no rótulo de lojas quando a notificação "loja fechada" abre a tela */
html.app-android body.app-destacar-lojas #unitlabel{box-shadow:0 0 0 3px var(--m3-primary);transition:box-shadow .3s}
/* seleção de texto e zoom: app, não página */
html.app-android *{user-select:none}
html.app-android input,html.app-android textarea,html.app-android [contenteditable]{user-select:text}

/* V3.6: a pergunta global substitui as peças nativas; somente safe-area no topo. */
html.app-android{--app-barra:0px;--topo-app:calc(env(safe-area-inset-top,0px) + 8px)}
html.app-android.cg-ativa{--rodape-app:var(--cg-reserva)}
/* A pílula V3.6 usa os alvos de 40 px do mockup; a regra genérica de 48 dp
   do app não pode aumentar a caixa real da M3 além dos 54 px aprovados. */
html.app-android .cu-b-raiz .cu-b-caixa[data-cu-caixa] button:is(.cu-b-ib,.cu-b-enviar){min-height:40px!important;border-radius:50%}

/* /hub-carrossel.css */
/* 1.74.0 (Philippe, 03/10/2026): O CARROSSEL DE CARTÕES DO SISTEMA INTEIRO (web/hub-carrossel.js, HubCarrossel).
   "Você pode sempre preferir o design de carrossel, que é arrastando para o lado, tanto na versão mobile como na versão
   desktop." A faixa (.hcar) rola para o lado com encaixe; no celular (.hcar-cel) um cartão por tela, no computador
   (.hcar-pc) vários, com a largura calculada pelo JS (--hcar-w) para o próximo aparecer pela metade. As peças em volta
   (.hcar-acess: fichas do índice, setas de vidro, pontos e contagem) são irmãs da faixa, nunca filhas, porque quem rola é
   ela. Vidro só nessas peças (camada funcional); o cartão é conteúdo e fica como a tela dona desenhou.
   Medidas de texto em rem com --dt (tests/relative-typography); claro e escuro; "reduzir movimento" e "reduzir
   transparência" respeitados. */
/* :is(.hcar-cel,.hcar-pc): a faixa sempre tem uma das duas classes; a regra fica mais forte que o display da tela dona
   (uma lista em grade, por exemplo), venha a folha dela antes ou depois desta */
/* !important só no que faz a faixa ser faixa (fila única que rola para o lado): a grade da tela dona não pode vencer */
.hcar:is(.hcar-cel,.hcar-pc){--hcar-se:0px;--hcar-sd:0px;display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:stretch;gap:var(--hcar-vao,.75rem);overflow-x:auto!important;overflow-y:hidden!important;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;outline:none;box-sizing:border-box;
  /* a sangria: a faixa vai até a borda da página e devolve o espaço em padding, para a sombra do cartão não ser cortada */
  margin:-.625rem calc(-1 * var(--hcar-sd)) -.625rem calc(-1 * var(--hcar-se));padding:.625rem var(--hcar-sd) .625rem var(--hcar-se);scroll-padding:0 var(--hcar-sd) 0 var(--hcar-se)}
.hcar::-webkit-scrollbar{display:none}
.hcar:focus-visible{outline:var(--foco-largura,3px) solid var(--acao,#1F5FD0);outline-offset:-3px;border-radius:1.25rem}
/* position:relative no cartão: o que é posicionado dentro dele (campo de arquivo escondido, selo) fica preso ao cartão e é
   cortado pela faixa; solto, escaparia do recorte e alargaria a página */
.hcar>.hcar-item{position:relative;flex:0 0 var(--hcar-w,min(100%,24rem));flex-grow:0!important;flex-shrink:0!important;width:auto;max-width:none;min-width:0;margin:0;box-sizing:border-box;scroll-snap-align:start}
.hcar>.hcar-fora{display:none}
/* celular: um cartão por tela, centrado, e nunca passa dois de uma vez */
.hcar.hcar-cel>.hcar-item{flex-basis:100%;scroll-snap-align:center;scroll-snap-stop:always}
/* um cartão só, ou todos cabendo: a faixa não rola e não tem enfeite */
.hcar.hcar-um>.hcar-item{flex-basis:var(--hcar-w,100%)}
/* altura 'tela': o cartão ocupa o que sobra na tela e rola por dentro; a página não rola */
.hcar.hcar-tela>.hcar-item{height:var(--hcar-altura,60vh);max-height:var(--hcar-altura,60vh);overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
/* no computador há vários cartões à vista: eles têm a altura do mais alto, até o limite da tela (cartão curto não vira
   uma coluna vazia até o pé da página) */
.hcar.hcar-pc.hcar-tela>.hcar-item{height:auto}
/* 1.74.0 (Philippe, 04/10/2026, a dupla checagem): CARTÕES PEQUENOS JUNTOS (opção agrupa do HubCarrossel). "O segredo é
   usar mini cards, cards médios, cards grandes e carrossel." A faixa vira uma coluna que quebra: o navegador empilha os
   cartões pequenos vizinhos na mesma coluna (mini cartões) e cada coluna reparte a sobra da altura entre os cartões
   dela (flex-grow). O cartão cortado (.hcar-cheio) e o que pede a coluna inteira ([data-hcar-inteiro]) ficam sozinhos.
   O cartão com detalhe guardado para o cartão grande reserva o lugar do sinal "Ver tudo" (::after), para o sinal não
   cobrir a última linha de um cartão justo. No computador, quando todas as colunas cabem, elas ficam no meio. */
.hcar.hcar-agrupa:is(.hcar-cel,.hcar-pc){flex-direction:column!important;flex-wrap:wrap!important;align-content:safe center;height:calc(var(--hcar-altura,60vh) + 1.25rem)}
.hcar.hcar-agrupa.hcar-tela>.hcar-item{flex:1 1 auto!important;width:var(--hcar-w,min(100%,24rem));height:auto;min-height:0;max-height:var(--hcar-altura,60vh)}
.hcar.hcar-agrupa.hcar-cel.hcar-tela>.hcar-item{width:100%}
.hcar.hcar-agrupa.hcar-tela>:is(.hcar-cheio,[data-hcar-inteiro]){flex-basis:100%!important}
.hcar.hcar-agrupa>.hcar-detalhado:not(.hcar-grande)::after{content:"";display:block;flex:none;height:2.75rem}
html.hub-toque .hcar.hcar-agrupa>.hcar-detalhado:not(.hcar-grande)::after,.hcar.hcar-agrupa.hcar-cel>.hcar-detalhado:not(.hcar-grande)::after{height:3.5rem}
/* 1.74.0 (Philippe, 04/10/2026, a dupla checagem): A MOLDURA DO CARTÃO É UMA SÓ em toda tela de conteúdo primeiro. Cada
   família de telas tinha a sua: raio de 16, 20, 22 e 24 px; fundo branco, branco a 74% (vidro na camada de conteúdo,
   nas Configurações) e, no escuro, quatro tons, um deles translúcido; sombra de cinco jeitos. Agora: o raio de folha
   do Cérebro aprovado (--r-peca, 24 px), fundo sólido (--surface; vidro é só da camada funcional) e a sombra
   exata do guia. Os seletores dobrados dão peso para vencer a classe de cada tela sem !important (um
   estado desenhado pela tela com sombra, como o caso pendente das Negociações, continua vencendo com o id dela). */
.hcar-expande.hcar-expande .hcar-cartao.hcar-cartao,.hcar-cartao.hcar-grande.hcar-grande{border-radius:var(--r-peca);border-color:transparent;background:var(--surface,#FFFFFF);color:var(--label,#323200);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:var(--sombra)}
@media (prefers-contrast:more){.hcar-expande.hcar-expande .hcar-cartao.hcar-cartao{box-shadow:inset 0 0 0 1px light-dark(var(--label,#323200),var(--page,#F7F5F1))}}
/* 04/10/2026 (a dupla checagem): RESPOSTA NO TOQUE. O cartão que abre grande e os pontos não diziam nada enquanto o dedo
   estava em cima (a resposta só vinha ao soltar). O cartão afunda um fio no toque (não quando o dedo está num botão de
   dentro, que tem a própria resposta) e o ponto tocado acende. A transição mora só no estado apertado: posta no cartão
   em repouso, ela pegava também a volta do cartão grande (o cartão era medido no meio do caminho e o corte escondia o
   resumo inteiro; visto nas Taxas, depois de salvar a comissão e fechar). */
.hcar-expande:not(.hcar-solto):not(.hcar-espiar) .hcar-cartao.hcar-tem-mais:not(.hcar-grande):active:not(:has(:is(a,button,input,select,textarea,label,summary,[role="button"],[role="switch"],[data-hcar-livre]):active)){transform:scale(.985);transition:transform .12s ease-out}
.hcar-cartao.hcar-tem-mais:not(.hcar-grande):active>.hcar-mais{transform:translateX(-50%) scale(.96)}
.hcar-ponto:active i{background:var(--label,#323200);transform:scale(1.35)}
body.dark .hcar-ponto:active i{background:var(--label,#323200)}
@media (prefers-reduced-motion:reduce){.hcar-expande .hcar-cartao.hcar-tem-mais:not(.hcar-grande):active{transition:none!important;transform:none!important;opacity:.86}.hcar-ponto:active i{transform:none}}
/* o arrasto com o mouse: sem encaixe enquanto o ponteiro leva a faixa (e enquanto a mola assenta), sem selecionar texto */
.hcar.hcar-solto{scroll-snap-type:none}
.hcar.hcar-arrastando{cursor:grabbing;-webkit-user-select:none;user-select:none}
.hcar.hcar-arrastando>.hcar-item{pointer-events:none}
.hcar.hcar-solto>.hcar-item{transform:translate3d(var(--hcar-el,0px),0,0)}
/* a espiada: os cartões deslizam um pouco para a esquerda e voltam (uma vez por abertura; nunca com "reduzir movimento") */
.hcar.hcar-espiar>.hcar-item{animation:hcar-espiada 1.1s cubic-bezier(.2,.8,.2,1) .15s both}
.hcar.hcar-espiar.hcar-fluxo>.hcar-item{animation:none}
/* F26: a espiada própria de uma tela (Dashboard dcel-espiar, Relatórios rel-espiar) também para com um cartão aberto no lugar: os vizinhos não passam por cima dele */
.hcar-expande.hcar-fluxo>.hcar-cartao{animation:none!important}
@keyframes hcar-espiada{0%{transform:none}38%{transform:translateX(-2.25rem)}100%{transform:none}}

/* ---------- peças em volta ---------- */
.hcar-acess[hidden]{display:none!important}
/* fichas do índice: os títulos dos cartões; tocar leva ao cartão */
.hcar-indice{display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;margin:0 0 calc(.625rem - var(--hcar-pv,0px));padding:.125rem 0;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.hcar-indice::-webkit-scrollbar{display:none}
.hcar-ficha{flex:none;display:inline-flex;align-items:center;min-height:2.75rem;max-width:18rem;padding:.375rem .875rem;border-radius:999px;border:1px solid color-mix(in srgb,var(--label,#323200) 85%,transparent);background:color-mix(in srgb,var(--surface,#FFFFFF) 62%,transparent);color:var(--label,#323200);font:inherit;font-size:calc(.8125rem * var(--dt,1));font-weight:600;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;box-shadow:0 .25rem .75rem color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 6%,transparent);transition:transform .1s ease-out,background-color .2s ease-out,color .2s ease-out}
.hcar-ficha>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hcar-ficha:active{transform:scale(.97)}
.hcar-ficha[aria-current="true"]{background:var(--label,#323200);border-color:transparent;color:var(--surface,#FFFFFF)}
.hcar-ficha:focus-visible,.hcar-ponto:focus-visible,.hcar-seta:focus-visible{outline:var(--foco-largura,3px) solid var(--acao,#1F5FD0);outline-offset:2px}
body.dark .hcar-ficha{background:color-mix(in srgb,var(--surface2,#F7F3EE) 72%,transparent);border-color:color-mix(in srgb,var(--label,#323200) 10%,transparent);color:var(--label,#323200)}
body.dark .hcar-ficha[aria-current="true"]{background:var(--label,#323200);color:var(--surface,#FFFFFF)}
html.hub-clique .hcar-ficha{min-height:2.25rem}
/* setas de vidro (computador): não ocupam altura, flutuam sobre as bordas da faixa; aparecem com o mouse ou o foco */
.hcar-setas{position:relative;height:0;z-index:3;pointer-events:none;display:none;margin-top:calc(-1 * var(--hcar-pv,0px))}
html.hub-clique .hcar-setas{display:block}
@media (hover:hover) and (pointer:fine){.hcar-setas{display:block}}
html.hub-toque .hcar-setas{display:none}
.hcar-setas:has(+ .hcar-cel){display:none}   /* um cartão por tela: o dedo (ou o arrasto) passa; as setas são do computador */
.hcar-seta{position:absolute;top:calc(var(--hcar-meio,8rem) - 1.375rem);width:2.75rem;height:2.75rem;border-radius:50%;border:0;padding:0;display:grid;place-items:center;cursor:pointer;pointer-events:auto;color:var(--label,#323200);background:var(--vidro-regular,color-mix(in srgb,var(--surface,#FFFFFF) 66%,transparent));-webkit-backdrop-filter:blur(var(--vidro-desfoque,24px)) saturate(var(--vidro-saturacao,180%));backdrop-filter:blur(var(--vidro-desfoque,24px)) saturate(var(--vidro-saturacao,180%));box-shadow:var(--vidro-brilho,inset 0 0 0 .5px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 55%,transparent)),var(--vidro-sombra,0 8px 28px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 14%,transparent));opacity:0;transform:scale(.92);transition:opacity .18s ease-out,transform .18s ease-out}
.hcar-seta svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hcar-ant{left:.25rem}
.hcar-prox{right:.25rem}
.hcar-setas.hcar-on .hcar-seta,.hcar-seta:focus-visible{opacity:1;transform:none}
.hcar-seta:active{transform:scale(.94)}
.hcar-seta:disabled,.hcar-setas.hcar-on .hcar-seta:disabled{opacity:0;pointer-events:none}
/* pontos e contagem: "3 de 17: título" */
.hcar-pe{margin:calc(.25rem - var(--hcar-pv,0px)) 0 0;min-width:0}
.hcar-pontos{display:flex;justify-content:safe center;gap:0;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.hcar-pontos::-webkit-scrollbar{display:none}
.hcar-ponto{flex:none;width:2.75rem;height:2.75rem;padding:0;border:0;border-radius:50%;background:transparent;display:grid;place-items:center;cursor:pointer}
.hcar-ponto[hidden]{display:none}   /* cartões juntos (agrupa): um ponto por coluna */
.hcar-ponto i{display:block;width:.375rem;height:.375rem;border-radius:.5rem;background:color-mix(in srgb,var(--label,#323200) 28%,transparent);transition:width .2s ease-out,background-color .2s ease-out}
body.dark .hcar-ponto i{background:color-mix(in srgb,var(--surface,#FFFFFF) 32%,transparent)}
.hcar-ponto.hcar-vista i{background:color-mix(in srgb,var(--label,#323200) 60%,transparent)}
body.dark .hcar-ponto.hcar-vista i{background:color-mix(in srgb,var(--surface,#FFFFFF) 66%,transparent)}
.hcar-ponto[aria-selected="true"] i{width:1.25rem;background:var(--label,#323200)}
body.dark .hcar-ponto[aria-selected="true"] i{background:var(--label,#323200)}
/* no computador o ponteiro é fino: os pontos podem ser menores (o alvo de 44 px é regra do toque) */
html.hub-clique .hcar-ponto{width:1.75rem;height:1.75rem}
.hcar-contagem{text-align:center;font-size:max(.6875rem, calc(.75rem * var(--dt,1)));line-height:1.3;color:var(--label2,#6B5A4C);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
html.hub-toque .hcar-pontos,.hcar-cel~.hcar-pe .hcar-pontos{margin-top:-.25rem}
html.hub-toque .hcar-contagem{margin-top:-.375rem}

@media (prefers-reduced-motion:reduce){
  .hcar{scroll-behavior:auto}
  .hcar.hcar-espiar>.hcar-item{animation:none}
  .hcar-ficha,.hcar-seta,.hcar-ponto i{transition:none}
  .hcar-seta{transform:none}
}
@media (prefers-reduced-transparency:reduce){
  .hcar-seta{background:var(--vidro-solido,var(--surface,#FFFFFF));-webkit-backdrop-filter:none;backdrop-filter:none}
  .hcar-ficha{background:var(--surface,#FFFFFF)}
  body.dark .hcar-ficha{background:var(--surface,#FFFFFF)}
}
@media (prefers-contrast:more){
  .hcar-ficha{border-color:var(--label,#323200)}
  .hcar-seta{box-shadow:inset 0 0 0 1px light-dark(var(--label,#323200),var(--page,#F7F5F1))}
}

/* ---------- a tela em volta de um cartão na altura da tela ----------
   Com altura 'tela' a página não rola: o que fica acima e abaixo da faixa encolhe para sobrar altura para o cartão. O
   respiro de baixo das telas (60 px, pensado para o fim de uma página longa) deixa de fazer sentido, e a entrada do
   Cérebro sem recomendação fica numa linha só. */
.ges:has(:is(.hcar-tela,.dgrid.dcarrossel.hcar-expande,.rel-carrossel.hcar-expande)){padding-bottom:.5rem}
/* Browser contextual hosts keep the shared 12px clearance inside the host. */
html:not(.app-nativo) .ges:has(:is(.hcar-tela,.dgrid.dcarrossel.hcar-expande,.rel-carrossel.hcar-expande)),
html:not(.app-nativo) .rel.rel-pc:has(>.rel-main>.rel-faixa.hcar-tela.hcar-expande){padding-bottom:12px}
:where(body)[data-hub-carrossel] main:is(.hub-esp.hub-esp.hub-esp.hub-esp,*){padding-bottom:0;margin-bottom:.5rem}
html:not(.app-nativo) body[data-hub-carrossel]:is(.hub-esp.hub-esp.hub-esp.hub-esp,*){padding-bottom:max(.25rem,env(safe-area-inset-bottom,0px))}
.view[data-hcar~="tela"] .hr-faixa{margin-bottom:.625rem}
.view[data-hcar~="tela"] .hr-faixa.vazia .hr-entrada{min-height:2.75rem;padding-top:.25rem;padding-bottom:.25rem}
/* 1.74.0 (Philippe, 03/10/2026, desempenho): era `... .hr-entrada-txt span{display:none}`. Um `:has()` que termina numa etiqueta
   solta (span) fazia o navegador refazer o estilo de TODO span da tela a cada mexida (docs/DESEMPENHO-2026-10-03.md). A
   linha de baixo da entrada agora some por uma variável, lida em web/recomendacoes.css (.hr-entrada-txt span). */
.view[data-hcar~="tela"] .hr-faixa.vazia .hr-entrada-txt{--hr-entrada-sub:none}
.view[data-hcar~="tela"] .hr-faixa.vazia .hr-cerebro.philippe-brain{width:1.5rem;height:1.625rem}

/* F26: o cartão cresce no próprio trilho. Cores, moldura e controle do
   mockup aprovado, limitados ao componente para não redesenhar as telas. */
.hcar-expande,.hcar-cartao{


  --link:var(--acao,#1F5FD0);--glass:color-mix(in srgb,var(--surface,#FFFFFF) 70%,transparent);--glass-brd:color-mix(in srgb,var(--surface,#FFFFFF) 75%,transparent);
  --sombra:0 0 0 .5px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 9%,transparent),0 1px 2px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 5%,transparent),0 10px 28px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 8%,transparent);
  --r-peca:24px;
  /* Compatibilidade com folhas consumidoras antigas, sem geometria de janela. */
  --hg-pe:0px;--hg-topo:0px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]):not(:is(.hub-tema-apple,#hub-esp)) :is(.hcar-expande,.hcar-cartao){


    --link:var(--acao,#1F5FD0);--glass:color-mix(in srgb,var(--label,#323200) 64%,transparent);--glass-brd:color-mix(in srgb,var(--surface,#FFFFFF) 10%,transparent);
    --sombra:0 0 0 .5px color-mix(in srgb,var(--surface,#FFFFFF) 6%,transparent),0 10px 30px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 35%,transparent);
  }
}
:root[data-theme="dark"] :is(.hcar-expande,.hcar-cartao),body.dark :is(.hcar-expande,.hcar-cartao){


  --link:var(--acao,#1F5FD0);--glass:color-mix(in srgb,var(--label,#323200) 64%,transparent);--glass-brd:color-mix(in srgb,var(--surface,#FFFFFF) 10%,transparent);
  --sombra:0 0 0 .5px color-mix(in srgb,var(--surface,#FFFFFF) 6%,transparent),0 10px 30px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 35%,transparent);
}
.hcar-cartao{position:relative;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
.hcar-expande .hcar-cartao:not(.hcar-grande){overflow:hidden!important}
.hcar-corte{display:none!important}
.hcar-aparado{overflow:hidden!important}
.hcar-esmaece{-webkit-mask-image:linear-gradient(var(--label,#323200) calc(100% - 1.5rem),transparent);mask-image:linear-gradient(var(--label,#323200) calc(100% - 1.5rem),transparent)}
.hcar-cartao:not(.hcar-grande) [data-hcar-detalhe]{display:none!important}
.hcar-grande [data-hcar-resumo]{display:none!important}
.hcar-cartao.hcar-tem-mais:not(.hcar-grande){cursor:pointer}
/* Decisão do dono (11/10): o "Ver mais" azul do guia (.bt.texto), sem fundo e sem
   ícone, com o tamanho do texto do Hub (--dt, piso de 11 px, regra 12.2). */
.hcar-cartao>.hcar-mais{position:absolute;left:50%;bottom:.5rem;z-index:2;transform:translateX(-50%);display:inline-flex;align-items:center;justify-content:center;min-height:44px;max-width:calc(100% - 1.5rem);padding:0 10px;border:0;border-radius:14px;cursor:pointer;white-space:nowrap;
  color:var(--acao,#1F5FD0);font:inherit;font-size:max(.6875rem,calc(.9375rem * var(--dt,1)));font-weight:650;background:transparent;transition:transform .1s ease-out,color .2s,opacity .2s}
.hcar-cartao>.hcar-mais:not(:disabled):active{transform:translateX(-50%) scale(.97)!important}
.hcar-mais:focus-visible{outline:2.5px solid var(--acao,#1F5FD0);outline-offset:2px}
/* Altura livre em todos os hosts antigos, incluindo colunas agrupadas e faixas
   próprias do Dashboard e Relatórios. A rolagem vertical fica na página. */
.view.hcar-pagina{padding-bottom:var(--hcar-reserva-pe)!important}
.hcar-fluxo.hcar-fluxo{height:auto!important;max-height:none!important;min-height:0!important;flex-shrink:0!important;overflow-y:visible!important}
/* Cartões juntos (agrupa): as colunas ficam onde estavam (web/hub-carrossel.js,
   congelarColunas). Linhas de 1 px; só a coluna do cartão aberto cresce. */
.hcar.hcar-agrupa.hcar-colunas{display:grid!important;grid-auto-rows:1px;grid-auto-columns:0;row-gap:0!important;column-gap:0!important;align-items:start;justify-items:stretch}
.hcar[hidden],.hcar.hcar-agrupa.hcar-colunas[hidden]{display:none!important}
.hcar.hcar-agrupa.hcar-colunas>.hcar-item{margin:0!important;min-height:0!important;max-height:none!important;align-self:start}
/* As setas do computador não ficam por cima do cartão aberto. */
.hcar-setas:has(+ .hcar .hcar-grande){display:none!important}
.hcar-fluxo.mc-grade{grid-template-rows:none;grid-auto-rows:auto}
.hcar-cartao.hcar-cartao.hcar-grande.hcar-grande.hcar-grande{
  position:relative!important;inset:auto!important;height:auto!important;max-height:none!important;min-height:var(--hcar-altura-fechada,0px)!important;
  overflow:visible!important;align-self:flex-start;cursor:auto;transform:none;box-sizing:border-box;transition:none!important;animation:none!important;
}
.hcar-cartao.hcar-grande.hcar-grande.hcar-grande>.hcar-mais{position:relative;left:auto;bottom:auto;transform:none;display:flex!important;width:max-content;margin:12px auto 0;flex:none;order:99}
.hcar-grande.hcar-grande>.hcar-mais:not(:disabled):active{transform:scale(.97)!important}
.hcar-grande.hcar-grande :is(.rel-tabela-caixa,.cp-conc-rola,.cu-det-host,.cu-det-corpo,.hc-table){max-height:none!important;overflow-y:visible!important}
/* o conteúdo avulso (o item do Cardápio) é um cartão médio, logo depois da faixa */
.hcar-grande.hcar-avulso{display:block;width:auto;max-width:min(34rem,100%);margin:.75rem auto 0;padding:16px!important}
/* Mola da View Transition: amostras da resposta crítica (amort 1) do guia, resp
   .46 ao abrir e .38 ao recolher. Sem transição de altura (desempenho 1740). */
:root{--hcar-mola:linear(0,.044,.144,.264,.386,.499,.599,.685,.755,.812,.858,.893,.921,.942,.958,.970,.979,.986,.992,.997,1)}
html.hcar-transicao::view-transition{pointer-events:none}
html.hcar-transicao::view-transition-group(root),html.hcar-transicao::view-transition-new(root){animation:none}
html.hcar-transicao::view-transition-old(root){display:none}
html.hcar-transicao::view-transition-group(hcar-cartao){animation-duration:.46s;animation-timing-function:var(--hcar-mola)}
html.hcar-transicao.hcar-recolhendo::view-transition-group(hcar-cartao){animation-duration:.38s}
html.hcar-transicao::view-transition-old(hcar-cartao){display:none}
html.hcar-transicao::view-transition-new(hcar-cartao){height:100%;animation:none;object-fit:cover;object-position:top}
@media (prefers-reduced-motion:reduce){
  .hcar-cartao>.hcar-mais{transition:none!important}
  .hcar-cartao>.hcar-mais:not(:disabled):active{transform:translateX(-50%)!important}
  .hcar-grande.hcar-grande>.hcar-mais:not(:disabled):active{transform:none!important}
  html.hcar-transicao::view-transition-group(*){animation:none!important}
}
@media (prefers-contrast:more){.hcar-mais{box-shadow:inset 0 0 0 1px light-dark(var(--label,#323200),var(--page,#F7F5F1))}}
/* conteúdo primeiro (B4): fora do cartão sobram no máximo 40 px. No modo expande ficam só os pontos (a contagem "3 de 17" é
   do leitor de tela) e, no toque, o alvo de 44 px dos pontos avança 8 px sobre o respiro de baixo do cartão */
.hcar-expande~.hcar-pe .hcar-contagem{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* 1.74.0 (Philippe, 04/10/2026, a dupla checagem): OS PONTOS COM A MESMA MEDIDA EM TODA TELA. A regra antiga puxava o pé
   8 px para cima com margem negativa, mas a faixa já tem margem negativa embaixo (a sangria da sombra) e, numa caixa
   comum, as duas margens se fundem: a regra não mexia em nada (44 px fora do cartão, B4 pede até 40) e cada tela pôs
   o próprio remendo (pontos de 32, 40 e 44 px de altura, a 32, 34, 36 e 38 px do cartão). Agora o pé começa no fim do
   cartão em qualquer caixa (margem zero: bloco, flex ou grade), ocupa 2,25 rem (36 px) na página e os pontos, com o
   alvo de toque inteiro (44 px), avançam 8 px sobre o respiro de baixo do cartão. É a medida do Dashboard e dos
   Relatórios do celular (web/dashboard-celular.js, web/relatorios.js); a conta da altura do cartão (alturaComBarra,
   web/hub-carrossel.js) reserva esses mesmos 36 px. As medidas são em px de propósito: o ponto é alvo de toque, não é
   texto; em rem, com o texto do aparelho em 130%, os pontos tomavam 47 px do cartão (B4 pede até 40). */
html.hub-toque .hcar-expande~.hcar-pe,.hcar-cel.hcar-expande~.hcar-pe{display:flow-root;position:relative;z-index:1;height:36px;margin-top:calc(0px - var(--hcar-pv,0px))}
html.hub-toque .hcar-expande~.hcar-pe .hcar-pontos,.hcar-cel.hcar-expande~.hcar-pe .hcar-pontos{margin-top:-8px}
html.hub-toque .hcar-expande~.hcar-pe .hcar-ponto,.hcar-cel.hcar-expande~.hcar-pe .hcar-ponto{height:44px;min-width:44px}
/* A faixa própria dos Relatórios usa a mesma zona funcional: os pontos de 44 px
   avançam 8 px no cartão, ocupando 36 px fora dele, sem um gap que cresça com a fonte. */
.rel.rel-cel .rel-main:has(>.rel-carrossel.hcar-expande){gap:0}
html.hub-toque .rel.rel-cel .rel-main:has(>.rel-carrossel.hcar-expande)>.rel-pontos{margin-top:-8px}
/* no computador o cartão do conteúdo primeiro tem a altura inteira da faixa (B5), em toda tela: cada folha repetia esta regra */
.hcar.hcar-expande.hcar-pc.hcar-tela:not(.hcar-agrupa)>.hcar-item{height:var(--hcar-altura,60vh)}

/* /paineis-carrossel.css */
/* 1.74.0 (Philippe, 03/10/2026): OS PAINÉIS EM CARROSSEL (web/paineis-carrossel.js sobre web/hub-carrossel.js).
   Financeiro, Avaliações e Sistema: a grade .dgrid vira uma faixa de cartões na altura da tela. Dashboard no computador:
   uma faixa só, na altura da tela, com as fichas dos assuntos no topo (segunda rodada: eram cinco fileiras empilhadas).
   Medidas de texto em rem com --dt. */
/* a faixa manda no encaixe (o encaixe vertical do celular, web/rolagem-celular.js, é da página empilhada) */
.dgrid.hcar>.dcard{scroll-snap-align:start!important;scroll-margin-top:0}
.dgrid.hcar-cel>.dcard{scroll-snap-align:center!important}
.dgrid.hcar>.dcard{grid-column:auto;content-visibility:visible;contain-intrinsic-size:auto}
/* computador: o cartão largo (tabela com muitas colunas) ocupa a largura de dois, sem passar da largura da faixa */
.dgrid.hcar-pc>.dcard.wide{flex-basis:calc(var(--hcar-w,26rem) * 1.75 + var(--hcar-vao,.75rem));max-width:100%}
/* As semanas com oito colunas precisam de espaço para unidade/canal, seis valores e seus cabeçalhos.
   O orçamento de texto (100ch) acompanha a fonte atual; 10.5rem reserva as oito células de 16px e
   o padding do cartão. Limitado à faixa: quando nem ela comporta o texto ampliado, a tabela
   continua empilhando e o detalhe conserva todas as linhas. Não muda o cartão móvel. */
#fin>.dgrid.hcar-pc>.dcard:is([data-uso="semana-fechada"],[data-uso="semana-andamento"]){flex-basis:min(100%,max(calc(var(--hcar-w,26rem) * 1.75 + var(--hcar-vao,.75rem)),calc(100ch + 10.5rem)))}
.dgrid.hcar-pc>.dcard.wide:not(:has(table,.chartbox,.kpis,.qgrid,.sysgrid,.rlist2)){flex-basis:var(--hcar-w,26rem)}
/* 1.74.0 (Philippe, 04/10/2026, B1 e B4): Financeiro, Avaliações e Sistema em conteúdo primeiro (.pcp). O cabeçalho (o título
   grande, a linha de explicação, o seletor de loja e o botão Atualizar) saiu de cima dos cartões, no celular e no
   computador: o nome da tela está na fileira do topo e os controles estão na barra de baixo (web/paineis-carrossel.js).
   Ele continua no DOM, escondido: a folha lê a linha de explicação e o botão do topo aciona o Atualizar dele. */
.pcp>.dhead,.pcp>.hr-faixa{display:none}
/* 04/10/2026 (a dupla checagem): o título do cartão do carrossel tem o mesmo tamanho em toda tela (o título 3 da casa, 20 px
   na escala de 100%); aqui e no Dashboard ele era o de manchete (17 px), menor que o das outras telas */
/* 04/10/2026 (a dupla checagem): no cartão do computador (24 a 30 rem de largura) os quatro totais em fileira ficavam com
   135 px cada e o valor quebrava no meio do número ("R$ 35669,6" e "4" na linha de baixo); em dois por linha o valor cabe */
.pcp>.dgrid.hcar-pc>.dcard:not(.hcar-grande) .kpis.k4{grid-template-columns:repeat(2,minmax(0,1fr))}
.pcp>.dgrid>.dcard .kpi .kv{overflow-wrap:normal;word-break:normal}
/* 1.74.0 (Philippe, 04/10/2026, sexta fase, revisão final G1): no Sistema do computador o cartão tem 361 px e três quadros
   por linha davam 100 px cada: "Observação", "carregando" e "Desligado" saíam do quadro e o vizinho cobria o fim da
   palavra. Os quadros passam a caber pela largura (o mínimo acompanha o tamanho do texto do Hub): dois por linha no
   cartão estreito, um por linha com o texto ampliado, três no cartão largo e no cartão grande. */
.pcp>.dgrid.hcar-pc .dcard:not(.hcar-grande) .kpis.k3{grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(11rem * var(--dt,1))),1fr))}
:is(.pcp,#ges)>.dgrid .hcar-cartao:not(.hcar-grande)>.dt{font-size:var(--f-title3,calc(1.25rem * var(--dt,1)));line-height:var(--lh-title3,1.25)}
/* a tela larga é da faixa (como no Dashboard): sem o limite de 1280 px da grade antiga cabem mais cartões lado a lado */
.ges.pcp{max-width:120rem}
/* 04/10/2026 (a dupla checagem): a altura do cartão no computador e a posição dos pontos no toque saíram daqui e moram na peça (web/hub-carrossel.css): a mesma medida em toda tela  (eram três remendos aqui: a altura no computador, os pontos 18 px para cima e os 32 px devolvidos ao cartão) */
/* no computador o cartão com gráfico é coluna: o gráfico ocupa o que sobra (a altura é do JS), o resto aparece inteiro */
.dgrid.hcar-pc>.dcard>.chartbox>canvas{display:block}
/* a avaliação dentro do cartão: inteira (nome, nota, texto e fotos); a lista não rola, é repartida em cartões */
.pcp .dgrid.hcar>.dcard>.rlist2{max-height:none;overflow:visible}
/* o que é só do cartão grande (o campo da resposta) já não conta na medida que reparte a lista, antes mesmo de o corte marcar os cartões */
.pcp .dgrid.hcar>.dcard:not(.hcar-grande) [data-hcar-detalhe]{display:none}
/* celular: o cartão com gráfico é coluna; o gráfico vem logo depois do título e ocupa o que sobra (a altura é do JS) */
.dgrid.hcar-cel>.dcard:has(>.chartbox){display:flex;flex-direction:column}
/* 1.74.0 (Philippe, 03/10/2026, desempenho): era `.dcard:has(>.chartbox)>*`; sem o `:has()` antes do `>*` o navegador deixa
   de refazer o estilo da tela inteira a cada mexida (ver web/dashboard-celular.css). `flex:none` só age no cartão com
   gráfico, que é o único que vira coluna flexível. */
.dgrid.hcar-cel>.dcard.dcard>*{flex:none}
.dgrid.hcar-cel>.dcard:has(>.chartbox)>.dt{order:-3}
.dgrid.hcar-cel>.dcard:has(>.chartbox)>.chartbox{order:-2;margin-top:.25rem}
.dgrid.hcar-cel>.dcard:has(>.chartbox)>.legend,.dgrid.hcar-cel>.dcard:has(>.chartbox)>.cl{order:-1}
.dgrid.hcar-cel>.dcard:has(>.chartbox)>.legend{gap:.25rem .75rem;margin-top:.5rem}
.dgrid.hcar-cel>.dcard:has(>.chartbox)>.cl{margin-bottom:.75rem}

/* ---------- Dashboard no computador: uma faixa só, na altura da tela (#ges.pcar-uma) ----------
   "Mostrar o gráfico por completo [...] sem precisar de rolar para baixo [...] só rolando para o lado."
   A página não rola. 1.74.0 (Philippe, 04/10/2026, B1 e B4): nada fica acima da faixa. O título, os filtros de loja e de
   período, os seletores de canal e pagamento, a entrada do Cérebro e a barra dos assuntos saíram daqui: moram na barra
   de baixo e na fileira do topo (web/hub-tela.js, declarados em web/dashboard-celular.js; #ges.dcp esconde o cabeçalho,
   web/dashboard-celular.css). */
/* a tela larga é da faixa: sem o limite de 1280 px da grade antiga, cabem mais cartões lado a lado */
#ges.pcar-uma{max-width:120rem;display:grid;grid-template-columns:minmax(0,1fr);align-content:start}
#ges.pcar-uma>*{grid-column:1/-1;min-width:0}

/* A faixa é feita de colunas (.pcar-col), cada uma com a altura que sobra da tela (a conta é de web/hub-carrossel.js).
   Uma coluna leva um cartão, ou dois ou três pequenos do mesmo assunto, um embaixo do outro (quem decide é o JS, pela
   altura de verdade de cada cartão: --pcar-n). O cartão com gráfico fica com a sobra da coluna (--pcar-cresce); o que
   não couber rola por dentro do cartão. A coluna não rola nem corta: a sombra do cartão aparece inteira. */
#ges.pcar-uma>.dgrid.pcar-faixa>.pcar-col{display:flex;flex-direction:column;gap:var(--hcar-vao,.75rem);height:var(--hcar-altura,60vh);max-height:var(--hcar-altura,60vh);overflow:visible}
#ges.pcar-uma>.dgrid.pcar-faixa>.pcar-col.pcar-col-larga{flex-basis:calc(var(--hcar-w,26rem) * 1.75 + var(--hcar-vao,.75rem));max-width:100%}
#ges.pcar-uma>.dgrid.pcar-faixa>.pcar-col>.dcard{flex:var(--pcar-cresce,1) 1 var(--pcar-n,0px);min-height:0;margin:0;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scroll-snap-align:none;content-visibility:visible;contain-intrinsic-size:auto}
/* os quadros de número: com valor comprido ("R$ 10812,49" tem 11 caracteres; o index marca com data-longo), quatro por
   linha só cabem no cartão largo de tela grande. No cartão mais estreito (a largura é medida pelo JS) ficam dois por
   linha, e no cartão simples um por linha, como no celular: o número não quebra no meio. */
#ges.pcar-uma .dcard.pcar-ate42 .kpis.k4:has(>.kpi>.kv[data-longo]){grid-template-columns:repeat(2,minmax(0,1fr))}
#ges.pcar-uma .dcard.pcar-ate30 .kpis:not(.k2):has(>.kpi>.kv[data-longo]){grid-template-columns:repeat(2,minmax(0,1fr))}
/* a medida: por um instante (sem pintar) cada cartão fica com a altura do conteúdo inteiro */
#ges.pcar-uma>.dgrid.pcar-medindo>.pcar-col{height:auto;max-height:none;align-self:flex-start}
#ges.pcar-uma>.dgrid.pcar-medindo>.pcar-col>.dcard{flex:none;height:auto;max-height:none;overflow:visible}
/* o desenho do gráfico é um bloco desde o primeiro instante (antes de a biblioteca de gráficos chegar ele é texto em
   linha, e a linha deixava uns pixels sobrando embaixo da caixa) */
#ges.pcar-uma .chartbox>canvas{display:block}
/* cartão com gráfico: coluna em que o gráfico ocupa o que sobra depois do resto, e por isso aparece inteiro */
#ges.pcar-uma .dcard.pcar-g{display:flex;flex-direction:column}
#ges.pcar-uma .dcard.pcar-g>*{flex:none}
#ges.pcar-uma .dcard.pcar-g>.chartbox:not(.svg){flex:1 1 0;min-height:9rem;max-height:34rem;height:auto!important}
/* dois gráficos no cartão largo: lado a lado, cada um com a legenda e a nota dele */
#ges.pcar-uma .dcard.pcar-g>.pcar-grafs{flex:1 1 0;min-height:0;max-height:38rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
#ges.pcar-uma .pcar-graf{display:flex;flex-direction:column;min-width:0;min-height:0}
#ges.pcar-uma .pcar-graf>*{flex:none}
#ges.pcar-uma .pcar-graf>.chartbox:not(.svg){flex:1 1 0;min-height:9rem;height:auto!important}
/* o resto do cartão não coube: o gráfico passa para cima, com a legenda e a nota, e ocupa a primeira tela do cartão (a
   altura vem do JS em --pcar-alt); o resto rola por dentro, como no celular */
#ges.pcar-uma .dcard.pcar-gp>.dt:first-child{order:-3}
#ges.pcar-uma .dcard.pcar-gp>.chartbox,#ges.pcar-uma .dcard.pcar-gp>.pcar-grafs{order:-2}
#ges.pcar-uma .dcard.pcar-gp>.legend,#ges.pcar-uma .dcard.pcar-gp>.cl{order:-1}
#ges.pcar-uma .dcard.pcar-gp>.cl{margin-bottom:.75rem}
#ges.pcar-uma .dcard.pcar-gp>.chartbox:not(.svg){flex:none;max-height:none;height:var(--pcar-alt,13rem)!important}
#ges.pcar-uma .dcard.pcar-gp>.pcar-grafs{flex:none;max-height:none;height:var(--pcar-alt,18rem)}

/* ---------- a tabela que não cabe na largura do cartão vira linhas empilhadas (.tabwrap.pcar-pilha) ----------
   Vale no celular e no computador: quando a tabela é mais larga que o cartão (a conta é do JS), cada linha vira um
   bloco. Em cima, o nome da linha e o número principal (a coluna .cur) com o rótulo dele; embaixo, o resto em duas
   colunas, cada número com o rótulo da coluna (data-th). O cabeçalho continua na tabela para o leitor de tela. */
.tabwrap.pcar-pilha{overflow-x:hidden}
.tabwrap.pcar-pilha>table.ctab,.tabwrap.pcar-pilha>table.ctab>tbody{display:block;width:100%}
.tabwrap.pcar-pilha>table.ctab>thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tabwrap.pcar-pilha>table.ctab>tbody>tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.375rem .875rem;align-items:start;padding:.625rem 0;border-bottom:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent))}
.tabwrap.pcar-pilha>table.ctab>tbody>tr:last-child{border-bottom:0}
.tabwrap.pcar-pilha>table.ctab>tbody>tr>td{display:block;min-width:0;padding:0;border:0;white-space:normal;overflow-wrap:anywhere;line-height:1.3}
.tabwrap.pcar-pilha>table.ctab>tbody>tr>td:first-child{grid-column:1/-1;font-weight:600}
.tabwrap.pcar-pilha>table.ctab>tbody>tr.pcar-valor>td:first-child{grid-column:1;grid-row:1}
.tabwrap.pcar-pilha>table.ctab>tbody>tr>td.cur:not(:first-child){grid-column:2;grid-row:1;text-align:right}
.tabwrap.pcar-pilha>table.ctab>tbody>tr>td[data-th]::before{content:attr(data-th);display:block;margin-bottom:.0625rem;font-size:max(.6875rem, calc(.6875rem * var(--dt,1)));font-weight:600;line-height:1.25;letter-spacing:.01em;color:var(--label2,#6B5A4C)}
/* sexta fase (revisão final G1): em 320 px o rótulo quebrava no meio ("A" numa linha, "receber R$ -15,80" na outra) e, com
   o texto do Hub ampliado, o valor quebrava no meio do número ("R$ -15," e "80"). O rótulo é um bloco inteiro e o valor
   não parte: quando os dois não cabem lado a lado, o valor desce inteiro para a linha de baixo. */
.tabwrap.pcar-pilha>table.ctab>tbody>tr>td.cur[data-th]:not(:first-child){overflow-wrap:normal;word-break:normal}
.tabwrap.pcar-pilha>table.ctab>tbody>tr>td.cur[data-th]:not(:first-child)::before{display:inline-block;margin:0 .375rem 0 0;white-space:nowrap}
.tabwrap.pcar-pilha>table.ctab>tbody>tr.tot{padding:.625rem .5rem;border-radius:.625rem;background:var(--fill2,color-mix(in srgb,var(--label,#323200) 13%,transparent))}
.tabwrap.pcar-pilha>table.ctab>tbody>tr.tot>td{background:transparent}

/* ---------- 1.74.0 (defeito D17 da auditoria de interface): o nome do iFood como texto ----------
   Nas tabelas, o nome do iFood usava o vermelho da marca (#EA1D2C) como cor de texto: 4,46:1 no branco e 3,8:1 no
   cartão escuro (o mínimo para texto é 4,5:1). Nas tabelas do Dashboard e do Financeiro o texto usa a versão "tinta" do
   vermelho (5,5:1 no claro, 6:1 no escuro), como a 99Food já fazia com --nine-text. Os gráficos continuam com a cor da
   marca.
   AU-PAL-C (26/10/2026): a tinta é a versão de texto do coral da paleta (--d-coral-t), não o vermelho de alerta (--queda);
   o escuro já vem de web/paleta.css. */
:is(#ges,#fin) table.ctab{--ifood:var(--canal-ifood-t)}

/* /barra-folha.css */
/* 1.74.0 (02/10/2026): BARRA INFERIOR COM FOLHA ANEXADA (web/barra-folha.js, HubBarraFolha).
   O feitio da barra de abas do iOS (o app Buscar): uma CÁPSULA de vidro flutuante no pé da tela, com margem dos lados e
   do rodapé, e a LENTE, a pastilha de vidro mais clara sob o item escolhido, que corre até o outro item numa mola e,
   arrastada para o lado, cresce um pouco e segue o dedo. Quando um botão abre a folha, a mesma superfície de vidro cresce
   para cima (a janela, com a alça) e a cápsula flutua sobre ela, como o cartão de pessoas do Buscar.
   A altura da janela e a posição e a forma da lente são pintadas pelo JS; aqui não há transição delas, porque a
   mola do JS é quem anima (interrompível, com a velocidade do dedo).
   1.74.0 (Philippe, 03/10/2026): a lente virou LUPA de vidro (iOS 26): arrastada, cresce além da cápsula, amplia os
   itens que estão por baixo, entorta o conteúdo no aro e estica com a velocidade. Por quadro o JS só escreve transform
   e opacity; tudo o que dá o desenho do vidro (aro, brilho, sombra) são camadas paradas daqui.
   Vale no Hub (web/index.html) e na vitrine (web/delivery/), por isso só usa cores próprias (--bf-*), com padrão claro
   e escuro (body.dark no Hub). Medidas em rem (tests/relative-typography) e alvos de 44 px (HIG). Vidro só nesta camada
   funcional (HIG A1.4); nenhuma superfície translúcida clara empilhada noutra: a cápsula sobre a folha fica opaca. */
:root{--bf-barra:min(4rem,72px);--bf-fundo:color-mix(in srgb,var(--surface,#FFFFFF) 84%,transparent);--bf-capsula:color-mix(in srgb,var(--surface,#FFFFFF) 66%,transparent);--bf-lente:color-mix(in srgb,var(--label3,#9C8D80) 13%,transparent);--bf-lupa:linear-gradient(180deg,var(--surface,#FFFFFF),var(--surface,#FFFFFF));--bf-lupa-centro:linear-gradient(180deg,var(--surface,#FFFFFF),var(--surface,#FFFFFF));--bf-lupa-sombra:0 .625rem 1.5rem color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 24%,transparent),0 .125rem .375rem color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 14%,transparent);--bf-lupa-fio:color-mix(in srgb,var(--surface,#FFFFFF) 95%,transparent);--bf-borda:color-mix(in srgb,var(--surface,#FFFFFF) 90%,transparent);--bf-texto:var(--label,#323200);--bf-sub:var(--label,#323200);--bf-realce:var(--acao,#1F5FD0);--bf-alca:color-mix(in srgb,var(--label,#323200) 30%,transparent);--bf-sombra:0 -10px 40px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 12%,transparent);--bf-sombra-capsula:0 .5rem 2rem color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 16%,transparent),0 .125rem .5rem color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 8%,transparent);--bf-raio:1.75rem;--bf-largura:100%;--bf-margem:.75rem;--bf-rodape:env(safe-area-inset-bottom,0px);--bf-visivel:0px}
body.dark{--bf-fundo:color-mix(in srgb,var(--surface,#FFFFFF) 86%,transparent);--bf-capsula:color-mix(in srgb,var(--label,#323200) 72%,transparent);--bf-lente:color-mix(in srgb,var(--surface,#FFFFFF) 16%,transparent);--bf-lupa:linear-gradient(180deg,var(--label3,#9C8D80),var(--label,#323200));--bf-lupa-centro:linear-gradient(180deg,var(--label,#323200),var(--label,#323200));--bf-lupa-sombra:0 .625rem 1.5rem color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 55%,transparent),0 .125rem .375rem color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 40%,transparent);--bf-lupa-fio:color-mix(in srgb,var(--surface,#FFFFFF) 34%,transparent);--bf-borda:color-mix(in srgb,var(--surface,#FFFFFF) 12%,transparent);--bf-texto:var(--surface,#FFFFFF);--bf-sub:var(--label,#323200);--bf-alca:color-mix(in srgb,var(--surface,#FFFFFF) 30%,transparent);--bf-sombra:0 -12px 44px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 50%,transparent);--bf-sombra-capsula:0 .5rem 2rem color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 45%,transparent)}
html.app-nativo{--bf-rodape:var(--rodape-app,env(safe-area-inset-bottom,0px))}
/* 1.74.0 (Philippe, 03/10/2026, defeito D17 da auditoria de interface): o azul de realce (#2F7CF6) dava 3,9:1 com o
   texto branco da opção escolhida das folhas e com o rótulo do item aceso sobre o vidro claro (o mínimo para texto é
   4,5:1). No claro o realce passa a ser o azul do botão principal do Hub (#0062B8: 6,1:1 com o branco, nos dois
   sentidos). No escuro o rótulo aceso usa um azul claro (7:1 sobre o vidro escuro) e a opção escolhida tem um fundo
   próprio (--bf-realce-fundo), em que o texto branco dá 4,7:1; sem ele (o claro, e a vitrine, que troca o realce pelo
   verde dela em web/delivery/storefront.css) o fundo da opção escolhida é o próprio realce. */
:root{--bf-realce:var(--acao,#1F5FD0)}
body.dark{--bf-realce:var(--acao,#1F5FD0);--bf-realce-fundo:var(--acao,#1F5FD0)}

/* a peça inteira: fixa no pé, sem fundo próprio (fechada, só a cápsula é tocável; aberta, o vidro da folha cobre tudo) */
.bf{position:fixed;left:0;right:0;bottom:0;z-index:60;margin:0 auto;width:100%;max-width:var(--bf-largura);color:var(--bf-texto);display:flex;flex-direction:column;touch-action:none;font-family:inherit;pointer-events:none}
.bf>*{pointer-events:auto}
.bf.bf-aberta{pointer-events:auto}
/* o vidro da folha: nasce da barra e cresce para cima; vai até o rodapé, por trás da cápsula */
.bf::before{content:"";position:absolute;inset:0;background:var(--bf-fundo);-webkit-backdrop-filter:blur(1.25rem) saturate(180%);backdrop-filter:blur(1.25rem) saturate(180%);border:1px solid var(--bf-borda);border-bottom:0;border-radius:var(--bf-raio) var(--bf-raio) 0 0;box-shadow:var(--bf-sombra),0 -2px 0 color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 35%,transparent) inset;opacity:0;transition:opacity .18s ease-out;pointer-events:none}
.bf.bf-aberta::before{opacity:1}
/* a janela: altura em px pelo JS; o conteúdo rola dentro da folha, nunca na janela */
.bf-janela{height:0;overflow:hidden;position:relative}
.bf-folha{position:absolute;inset:0;display:flex;flex-direction:column;touch-action:pan-y}
.bf-alca{flex:none;height:1.75rem;min-height:1.75rem;display:grid;place-items:center;cursor:grab;touch-action:none}
.bf-alca span{display:block;width:2.25rem;height:.3125rem;border-radius:.25rem;background:var(--bf-alca)}
.bf-arrastando .bf-alca{cursor:grabbing}
.bf-conteudo{flex:1 1 auto;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:0 1rem 1rem;outline:none;touch-action:pan-y}
.bf-conteudo.bf-troca{animation:bf-troca .22s ease-out}
@keyframes bf-troca{from{opacity:.35;transform:translateY(.375rem)}to{opacity:1;transform:none}}
/* a cápsula: vidro, cantos inteiros, margem dos lados e do rodapé; sobre a folha aberta ela fica opaca (sem vidro em vidro) */
.bf-barra{position:relative;flex:none;display:flex;align-items:stretch;justify-content:space-evenly;gap:0;min-height:var(--bf-barra);margin:.5rem var(--bf-margem) calc(var(--bf-rodape) + .5rem);padding:.25rem;border-radius:999px;
  background:var(--bf-capsula);-webkit-backdrop-filter:blur(1.5rem) saturate(180%);backdrop-filter:blur(1.5rem) saturate(180%);border:1px solid var(--bf-borda);box-shadow:var(--bf-sombra-capsula),inset 0 1px 0 color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 75%,transparent);
  transition:background-color .18s ease-out;isolation:isolate;overscroll-behavior:none}
.bf.bf-aberta .bf-barra{background:var(--bf-fundo);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 .25rem 1rem color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 10%,transparent),inset 0 1px 0 color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 60%,transparent)}
body.dark .bf.bf-aberta .bf-barra{background:color-mix(in srgb,var(--surface2,#F7F3EE) 96%,transparent)}
/* a lente: em repouso é a PASTILHA sob o item escolhido (por baixo dos itens); a posição e a forma vêm do JS, só em
   transform. Viva (apertada, arrastada ou correndo: classe bf-lente-viva na raiz) ela sobe acima dos itens e mostra a
   LUPA: o vidro que cobre os itens de verdade, a cópia ampliada da fileira no centro, a cópia refratada no aro, o brilho
   especular e a sombra funda. A lupa inteira aparece e some numa opacidade só (pelo JS, conforme a elevação). */
.bf-lente{position:absolute;top:.25rem;bottom:.25rem;left:0;width:0;z-index:0;border-radius:999px;background:var(--bf-lente);box-shadow:inset 0 1px 0 color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 55%,transparent),inset 0 0 0 .5px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 35%,transparent);opacity:0;transform-origin:50% 50%;transition:opacity .16s ease-out;pointer-events:none}
.bf-lente.bf-lente-on{opacity:1}
body.dark .bf-lente{box-shadow:inset 0 1px 0 color-mix(in srgb,var(--page,#F7F5F1) 12%,transparent)}
.bf-lente-viva .bf-lente{z-index:2;will-change:transform}
/* as cópias e o brilho andam em camadas próprias só enquanto a lente vive (sem isto cada quadro repintava a fileira) */
.bf-lente-viva .bf-lupa-fila,.bf-lente-viva .bf-lupa-brilho{will-change:transform}
.bf-lupa{position:absolute;inset:0;border-radius:inherit;opacity:0;visibility:hidden;pointer-events:none}
.bf-lente-viva .bf-lupa{visibility:visible}
.bf-lupa-vidro{position:absolute;inset:0;border-radius:inherit;background:var(--bf-lupa);box-shadow:var(--bf-lupa-sombra)}
/* isolation e translateZ(0): no Safari um filho em camada própria escapava do recorte arredondado do pai */
.bf-lupa-borda,.bf-lupa-centro{position:absolute;overflow:hidden;border-radius:999px;isolation:isolate;transform:translateZ(0)}
.bf-lupa-borda{inset:0}
.bf-lupa-centro{inset:.3125rem;background:var(--bf-lupa-centro);box-shadow:0 0 .25rem color-mix(in srgb,var(--acao,#1F5FD0) 14%,transparent)}
.bf-lupa-fila{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0}
/* o aro não é para ler: é o conteúdo de fora entortado pela borda do vidro (um pouco desfocado e mais claro) */
.bf-lupa-borda .bf-lupa-fila{opacity:.45;filter:blur(.07rem)}
/* o brilho: a luz batendo em cima, o reflexo embaixo e o fio claro da borda (anel em gradiente, recortado por máscara) */
.bf-lupa-brilho{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(70% 60% at 28% 0%,color-mix(in srgb,var(--surface,#FFFFFF) 50%,transparent),color-mix(in srgb,var(--surface,#FFFFFF) 0%,transparent) 70%),linear-gradient(180deg,color-mix(in srgb,var(--surface,#FFFFFF) 22%,transparent),color-mix(in srgb,var(--surface,#FFFFFF) 0%,transparent) 42%,color-mix(in srgb,var(--surface,#FFFFFF) 0%,transparent) 78%,color-mix(in srgb,var(--surface,#FFFFFF) 20%,transparent))}
.bf-lupa-brilho::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:.09375rem;background:linear-gradient(125deg,var(--bf-lupa-fio),color-mix(in srgb,var(--surface,#FFFFFF) 18%,transparent) 32%,color-mix(in srgb,var(--surface,#FFFFFF) 6%,transparent) 62%,var(--bf-lupa-fio));-webkit-mask:linear-gradient(var(--label,#323200) 0 0) content-box,linear-gradient(var(--label,#323200) 0 0);-webkit-mask-composite:xor;mask:linear-gradient(var(--label,#323200) 0 0) content-box exclude,linear-gradient(var(--label,#323200) 0 0)}
body.dark .bf-lupa-brilho{background:radial-gradient(70% 60% at 28% 0%,color-mix(in srgb,var(--surface,#FFFFFF) 16%,transparent),color-mix(in srgb,var(--surface,#FFFFFF) 0%,transparent) 70%),linear-gradient(180deg,color-mix(in srgb,var(--surface,#FFFFFF) 8%,transparent),color-mix(in srgb,var(--surface,#FFFFFF) 0%,transparent) 42%)}
/* a cópia dos itens dentro da lupa: o mesmo desenho do botão, na posição medida do botão de verdade (px pelo JS) */
.bf-ci{position:absolute;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1875rem;padding:.375rem .25rem;color:var(--bf-sub);font:inherit;white-space:nowrap}
.bf-ci.bf-sob{color:var(--bf-realce)}
.bf-ci .bf-rotulo{max-width:var(--bf-ci-rotulo,100%)}
/* os itens: ícone em cima e rótulo embaixo, 44 px no mínimo; o escolhido em azul, os outros na cor do texto */
.bf-item{position:relative;z-index:1;flex:1 1 0;min-width:0;min-height:2.75rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1875rem;
  padding:.375rem .25rem;border:0;border-radius:999px;background:transparent;color:var(--bf-sub);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:none;
  transition:color .15s ease-out,transform .12s ease-out}
/* o ícone não recebe o toque: uma imagem (o logo da loja na vitrine) arrastada pelo navegador cancelava o gesto da lente */
.bf-item>*{pointer-events:none}.bf-item img{-webkit-user-drag:none}.bf-barra{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.bf-item:active{transform:scale(.94)}
.bf-lente-arrastando .bf-item:active,.bf-lente-viva .bf-item:active{transform:none}
.bf-item.on,.bf-item[aria-expanded="true"],.bf-item.bf-sob{color:var(--bf-realce)}
.bf-lente-arrastando .bf-item.on:not(.bf-sob){color:var(--bf-sub)}
/* com a lupa viva o item de verdade sob a lente está coberto por ela: não troca de cor nem de tamanho ali embaixo (era
   uma repintura da barra a cada item cruzado, sem ninguém ver); quem acende é a cópia dentro da lente */
.bf-lente-viva .bf-item,.bf-lente-viva .bf-item .bf-icone{transition:none}
.bf-lente-viva .bf-item.bf-sob:not(.on){color:var(--bf-sub)}
.bf-item:focus-visible{outline:.1875rem solid var(--bf-realce);outline-offset:-.125rem}
.bf-icone{display:grid;place-items:center;width:min(1.625rem,30px);height:min(1.625rem,30px);font-size:1.375rem;line-height:1;transition:transform .15s ease-out}
.bf:not(.bf-lente-viva) .bf-item.bf-sob .bf-icone{transform:scale(1.06)}
.bf-icone svg{width:min(1.5rem,28px);height:min(1.5rem,28px);fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.bf-rotulo{font-size:max(.6875rem, calc(.6875rem * var(--dt,1)));line-height:1.15;font-weight:600;letter-spacing:.005em;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bf-badge{position:absolute;top:.25rem;left:calc(50% + .5rem);min-width:1.0625rem;height:1.0625rem;padding:0 .3125rem;border-radius:1rem;background:var(--queda,#E21D3C);color:var(--acao-txt,#FFFFFF);font-size:max(.6875rem, calc(.625rem * var(--dt,1)));line-height:1.0625rem;font-weight:700;text-align:center;box-shadow:0 0 0 2px var(--bf-capsula)}
.bf-badge[hidden]{display:none}
/* o conteúdo de uma folha: título pequeno, grupos e botões de escolha (os mesmos que viviam nos filtros) */
.bf-titulo{margin:0 0 .75rem;font-size:calc(1.0625rem * var(--dt,1));font-weight:700;letter-spacing:-.01em;line-height:1.2}
.bf-grupo{margin:0 0 1rem}
.bf-grupo>label,.bf-grupo>.bf-legenda{display:block;font-size:max(.6875rem, calc(.75rem * var(--dt,1)));font-weight:600;color:var(--bf-sub);opacity:.8;text-transform:uppercase;letter-spacing:.04em;margin:0 0 .5rem}
.bf-opcoes{display:flex;flex-wrap:wrap;gap:.5rem}
.bf-opcao{min-height:2.75rem;padding:.5rem .9375rem;border-radius:1rem;border:1px solid color-mix(in srgb,var(--label,#323200) 18%,transparent);background:color-mix(in srgb,var(--label3,#9C8D80) 8%,transparent);color:inherit;font:inherit;font-size:calc(.9375rem * var(--dt,1));font-weight:600;cursor:pointer;transition:background-color .15s ease-out,color .15s ease-out,transform .1s ease-out}
.bf-opcao:active{transform:scale(.97)}
.bf-opcao.on,.bf-opcao[aria-pressed="true"]{background:var(--bf-realce-fundo,var(--bf-realce));border-color:var(--bf-realce-fundo,var(--bf-realce));color:var(--acao-txt,#FFFFFF)}
.bf-opcao:focus-visible{outline:.1875rem solid var(--bf-realce);outline-offset:.125rem}
.bf-lista{list-style:none;margin:0;padding:0;display:grid;gap:.25rem}
.bf-lista button{display:flex;align-items:center;gap:.75rem;width:100%;min-height:2.75rem;padding:.625rem .75rem;border:0;border-radius:.875rem;background:transparent;color:inherit;font:inherit;font-size:calc(1rem * var(--dt,1));text-align:left;cursor:pointer}
.bf-lista button:active{background:color-mix(in srgb,var(--label3,#9C8D80) 12%,transparent)}
.bf-lista button.on,.bf-lista button[aria-current="true"]{background:color-mix(in srgb,var(--acao,#1F5FD0) 12%,transparent);color:var(--bf-realce);font-weight:600}
.bf-lista button .bf-check{margin-left:auto;font-weight:700}
.bf-conteudo select,.bf-conteudo input[type="date"]{width:100%;min-height:2.75rem;border-radius:.875rem;border:1px solid color-mix(in srgb,var(--label,#323200) 22%,transparent);background:color-mix(in srgb,var(--surface,#FFFFFF) 70%,transparent);color:inherit;font:inherit;font-size:calc(1rem * var(--dt,1));padding:.5rem .75rem}
body.dark .bf-conteudo select,body.dark .bf-conteudo input[type="date"]{background:color-mix(in srgb,var(--surface,#FFFFFF) 8%,transparent)}
.bf-conteudo .bf-vazio{color:var(--bf-sub);opacity:.8;font-size:calc(.9375rem * var(--dt,1));padding:.5rem 0}
/* quem hospeda a barra reserva o pé da tela para ela (a folha fica por cima do conteúdo, que continua tocável) */
html.tem-barra-folha .bf-reserva{padding-bottom:calc(var(--bf-barra) + var(--bf-rodape) + 2rem)}
/* acessibilidade: sem transparência, superfície sólida; mais contraste, borda firme; menos movimento, sem a troca animada */
@media (prefers-reduced-transparency:reduce){.bf::before,.bf-barra{background:var(--surface,#FFFFFF);-webkit-backdrop-filter:none;backdrop-filter:none}body.dark .bf::before,body.dark .bf-barra{background:var(--surface2,#F7F3EE)}.bf-lente{background:color-mix(in srgb,var(--acao,#1F5FD0) 14%,transparent)}
  /* a lupa vira uma chapa sólida com borda: sem aro refratado, sem brilho */
  .bf-lupa-vidro,.bf-lupa-centro{background:var(--surface,#FFFFFF);box-shadow:none}.bf-lupa-vidro{box-shadow:0 0 0 .125rem var(--bf-realce),var(--bf-lupa-sombra)}.bf-lupa-borda,.bf-lupa-brilho{display:none}body.dark .bf-lupa-vidro,body.dark .bf-lupa-centro{background:var(--surface2,#F7F3EE)}}
@media (prefers-contrast:more){.bf::before,.bf-barra{border-color:currentColor;background:var(--surface,#FFFFFF)}body.dark .bf::before,body.dark .bf-barra{background:var(--surface2,#F7F3EE)}.bf-opcao{border-color:currentColor}.bf-lente{outline:1px solid currentColor}
  .bf-lupa-vidro,.bf-lupa-centro{background:var(--surface,#FFFFFF);box-shadow:none}.bf-lupa-vidro{box-shadow:0 0 0 .125rem currentColor}.bf-lupa-borda,.bf-lupa-brilho{display:none}body.dark .bf-lupa-vidro,body.dark .bf-lupa-centro{background:var(--surface2,#F7F3EE)}}
@keyframes bf-troca-fade{from{opacity:.4}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.bf-conteudo.bf-troca{animation:bf-troca-fade .2s ease}.bf-item,.bf-opcao,.bf-icone,.bf-lente{transition:none}.bf-lente-viva .bf-lente,.bf-lente-viva .bf-lupa-fila,.bf-lente-viva .bf-lupa-brilho{will-change:auto}.bf-item:active,.bf-opcao:active{transform:none}}
/* no computador largo a peça inteira vira uma cápsula centrada (a mesma sensação do dock da vitrine) */
@media (min-width:761px){.bf{max-width:min(var(--bf-largura),44rem);bottom:.75rem}.bf::before{border-radius:var(--bf-raio);border-bottom:1px solid var(--bf-borda)}.bf-barra{margin-bottom:.5rem}html.app-nativo .bf{bottom:calc(var(--bf-rodape) + .75rem)}}

/* /dashboard-celular.css */
/* 1.74.0 (02/10/2026): DASHBOARD NO CELULAR, CONTEÚDO PRIMEIRO (web/dashboard-celular.js).
   #ges.dcel marca o Dashboard montado no celular/app: os filtros do topo somem (vivem na barra inferior com folha,
   web/barra-folha.css), uma linha de fichas pequenas no topo diz o que está escolhido, e a grade vira um carrossel com
   um cartão por tela, que rola por dentro. Medidas em rem (tests/relative-typography). */
#ges.dcel .dhead .dfilters,#ges.dcel [data-report-filters],#ges.dcel [data-report-note]{display:none}
/* 02/10 à noite: o aviso de item pausado e a faixa do Cérebro saem do fluxo (viram sino e Cérebro na barra de cima, com a
   notificação que desce; web/avisos-topo.js). Ficam no DOM, escondidos, porque o sino lê o aviso e o Cérebro observa a faixa. */
#ges.dcel .dalert,#ges.dcel .hr-faixa{display:none}
/* 1.74.0 (Philippe, 04/10/2026, B1 e B4): "Você vai eliminar qualquer filtro ou menu superior (os que ficam acima dos
   cards do carrossel)". O cabeçalho (título grande e a linha das lojas e do dia) e as fichas do topo saíram de cima dos
   cartões, no celular e no computador (#ges.dcp, a classe do Dashboard do computador em conteúdo primeiro): o nome da
   tela está na fileira do topo, e loja, período e filtros estão na barra de baixo. O cabeçalho fica no DOM, escondido
   (os filtros de web/dashboard-filters.js se prendem a ele, e a folha Período lê a linha de quando foi atualizado). */
#ges.dcel .dhead,#ges.dcel .dalerts,#ges.dcp>.dhead,#ges.dcp>.dalerts,#ges.dcp>[data-report-filters],#ges.dcp>[data-report-note]{display:none}
.dcel-sub{margin:0}
.dcel-assunto>.bf-opcao{margin-bottom:.375rem}
/* o carrossel: um cartão por tela, centrado, com encaixe; a página não rola, o cartão rola por dentro */
.dgrid.dcarrossel{display:flex;gap:.75rem;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -1rem;padding:0 1rem;scroll-padding:0 1rem;outline:none;touch-action:pan-x pan-y}
.dgrid.dcarrossel::-webkit-scrollbar{display:none}
.dgrid.dcarrossel:focus-visible{outline:.1875rem solid var(--acao,#1F5FD0);outline-offset:-.1875rem;border-radius:1rem}
.dgrid.dcarrossel>.dcard,.dgrid.dcarrossel>.dcard.wide{flex:0 0 100%;min-width:0;grid-column:auto;scroll-snap-align:center;scroll-snap-stop:always;height:var(--dcel-altura,60vh);max-height:var(--dcel-altura,60vh);overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;content-visibility:visible;contain-intrinsic-size:auto}
/* o cartão com gráfico: o gráfico é a informação principal e fica inteiro na tela, logo abaixo do título, com a legenda
   e a nota; o resto do cartão (números, tabelas) vem depois e rola por dentro. A altura do gráfico é calculada pelo JS
   (ajustarGraficos: o que sobra no cartão depois do título, da legenda e da nota), por isso não há altura aqui. */
.dgrid.dcarrossel>.dcard:has(.chartbox){display:flex;flex-direction:column}
/* 1.74.0 (Philippe, 03/10/2026, desempenho): era `.dcard:has(.chartbox)>*`. Um `:has()` seguido de `>*` faz o navegador
   refazer o estilo da TELA INTEIRA a cada botão ligado ou desligado e a cada elemento que entra ou sai (medido: 1.556
   elementos por mexida, contra 526 sem ele; docs/DESEMPENHO-2026-10-03.md). `flex:none` só age em filho de cartão que é
   coluna flexível, e só o cartão com gráfico é; nos outros a regra não faz nada. `.dcard.dcard` mantém o mesmo peso. */
.dgrid.dcarrossel>.dcard.dcard>*{flex:none}
.dgrid.dcarrossel>.dcard:has(.chartbox)>.dt{order:-3}
.dgrid.dcarrossel>.dcard:has(.chartbox)>.chartbox{order:-2;margin-top:.25rem}
.dgrid.dcarrossel>.dcard:has(.chartbox)>.legend,.dgrid.dcarrossel>.dcard:has(.chartbox)>.cl{order:-1}
.dgrid.dcarrossel>.dcard:has(.chartbox)>.legend{gap:.25rem .75rem;margin-top:.5rem}
.dgrid.dcarrossel>.dcard:has(.chartbox)>.cl{margin-bottom:.75rem}
/* a espiada: os cartões deslizam um pouco para a esquerda e voltam (uma vez por abertura; nunca com "reduzir movimento") */
.dgrid.dcarrossel.dcel-espiar>.dcard{animation:dcel-espiada 1.1s cubic-bezier(.2,.8,.2,1) .15s both}
@keyframes dcel-espiada{0%{transform:none}38%{transform:translateX(-2.25rem)}100%{transform:none}}
/* pontos e contagem embaixo do carrossel */
.ddots{display:flex;justify-content:safe center;gap:0;margin:.25rem 0 0;overflow-x:auto;scrollbar-width:none}
.ddots::-webkit-scrollbar{display:none}
.ddots button{flex:none;min-width:1.75rem;min-height:1.75rem;padding:.5rem .3125rem;border:0;background:transparent;display:grid;place-items:center;cursor:pointer}
/* 04/10/2026 (a dupla checagem): a mesma cor dos pontos do HubCarrossel (web/hub-carrossel.css) */
.ddots i{display:block;width:.375rem;height:.375rem;border-radius:.5rem;background:color-mix(in srgb,var(--label,#323200) 28%,transparent);transition:width .2s ease-out,background-color .2s ease-out}
body.dark .ddots i{background:color-mix(in srgb,var(--surface,#FFFFFF) 32%,transparent)}
.ddots button[aria-current="true"] i{width:1.25rem;background:var(--label,#323200)}
/* no toque o ponto tem alvo de 44 px (web/interface-1740.css): a fileira avança 8 px sobre o respiro de baixo do cartão, e
   fora do cartão sobram 36 px (B4: no máximo 40) */
/* 04/10/2026 (a dupla checagem): em px, como na peça: o ponto é alvo de toque (44 px) e não cresce com o texto do aparelho */
html.hub-toque #ges.dcel .ddots{position:relative;z-index:1;margin-top:-8px}
html.hub-toque #ges.dcel .ddots button{min-height:44px;height:44px;min-width:44px}
/* a contagem "3 de 18: título" fica só para o leitor de tela: fora do cartão sobram os pontos (B4: no máximo 40 px) */
.dcontagem{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
#ges.dcel{padding-bottom:.25rem}
#ges.dcel.dcel-rola{padding-bottom:calc(var(--bf-barra,4rem) + var(--bf-rodape,0px) + .5rem)}
/* dentro da folha Filtros, os seletores de web/dashboard-filters.js empilhados */
.dcel-filtros .dfilters{display:grid;gap:.75rem;margin:0}
.dcel-filtros .rel-filtro{display:grid;gap:.375rem;margin:0}
.dcel-filtros .rel-filtro>span{font-size:max(.6875rem, calc(.75rem * var(--dt)));font-weight:600;color:var(--bf-sub);text-transform:uppercase;letter-spacing:.04em}
.dcel-num{display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:.5rem;background:color-mix(in srgb,var(--label3,#9C8D80) 12%,transparent);font-size:max(.6875rem, calc(.75rem * var(--dt)));font-weight:700;flex:none}
@media (prefers-reduced-motion:reduce){.dgrid.dcarrossel{scroll-behavior:auto}.ddots i{transition:none}.dgrid.dcarrossel.dcel-espiar>.dcard{animation:none}}

/* /avisos-topo.css */
/* Decisão do Philippe 18/10 e 20/10, avisos internos saem.
   Asset mantido para compatibilidade com os manifestos; nenhum aviso interno ocupa a tela. */

/* /funcoes-teste.css */
.funcoes-teste{min-width:0}.funcoes-teste ul{list-style:none;margin:0;padding:0}.ft-principais{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:10px}.ft-funcao{padding:14px;background:var(--surface,#FFFFFF);border-radius:16px;overflow-wrap:anywhere}.ft-funcao>div{display:flex;flex-wrap:wrap;align-items:center;gap:8px;justify-content:space-between}.ft-estado{font-size:11px;font-weight:700;padding:5px 8px;border-radius:9px;background:var(--surface2,#F7F3EE)}.ft-funcao.ligada .ft-estado{color:var(--d-verdeagua-t,#006F5D);background:color-mix(in srgb,var(--verde,#11994A) 15%,transparent)}.ft-funcao.quebrada .ft-estado{color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200));background:color-mix(in srgb,var(--queda,#E21D3C) 12%,transparent)}.ft-funcao p{margin:8px 0;font-size:13px;line-height:1.5}.ft-funcao small{display:block;font-size:11px;opacity:.8;line-height:1.6}.ft-catalogo{margin-top:18px}.ft-catalogo details{margin:10px 0}.ft-catalogo summary{cursor:pointer;padding:10px 0}.ft-catalogo label{display:grid;gap:8px;margin:12px 0}.ft-catalogo input{font:inherit;width:100%;box-sizing:border-box;padding:12px;border:1px solid var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent));border-radius:12px;background:var(--surface,#FFFFFF);color:inherit}.ft-catalogo li+li{margin-top:8px}.funcoes-teste [hidden]{display:none!important}.funcoes-teste [role=status]{font-size:12px;color:var(--label2,#6B5A4C)}

/* /hub-tela.css */
/* 1.74.0 (Philippe, 04/10/2026): A BARRA DE BAIXO E OS BOTÕES DO TOPO DE CADA TELA (web/hub-tela.js, HubTela).
   "Todos os filtros e menus vão se concentrar na barra de menu inferior, em todas as telas [...] a barra de menu
   inferior e os botões superiores são modulares e mudam de acordo com o conteúdo ou a página."
   A barra é a HubBarraFolha (web/barra-folha.css): aqui só entra o que é da barra DE TELA (.bf-tela): no computador a
   cápsula é estreita e centrada, e a folha é um painel preso a ela. Os botões da tela na fileira do topo (#telabtns) usam
   o vidro dos vizinhos (web/topo-vidro.css); a pílula com texto é a variação. Loja, som e conta fora da fileira
   (html.ht-sem-fixos): o nome da tela aparece também no celular e leva a luz da situação das lojas.
   Medidas de texto em rem com --dt; claro e escuro; alvos de 44 px no toque. Vidro só nesta camada funcional. */
/* no computador a cápsula é mais baixa e fica mais perto do pé: os cartões ganham a altura (B5: a faixa ocupa 78% da janela ou mais) */
@media (min-width:761px){.bf.bf-tela{--bf-largura:34rem;--bf-barra:3.5rem;bottom:.375rem}.bf.bf-tela .bf-barra{margin-top:.375rem;margin-bottom:.375rem}.bf.bf-tela .bf-item{padding-top:.125rem;padding-bottom:.125rem}}
/* a tela que tem a barra não mostra a faixa do Cérebro no meio do conteúdo: ela vira o botão do Cérebro no topo (web/avisos-topo.js) */
.view.ht-tela .hr-faixa{display:none}

/* ---------- a fileira do topo ---------- */
html:not(.app-nativo) header.top .telabtns:empty{display:none}
html:not(.app-nativo) header.top .telabtns .icon.ht-pilula{width:auto;min-width:var(--topo-acao);padding:0 .875rem;border-radius:999px;display:inline-flex;align-items:center;gap:.375rem;white-space:nowrap}
.ht-topo{position:relative}
/* V8 (11/10): o toque é do botão. O selo e o texto da pílula, que entram e saem com as contagens, não recebem o ponteiro:
   se um deles sumisse entre apertar e soltar, o clique se perderia */
.ht-topo>*,.ht-contexto-nativo>*{pointer-events:none}
/* 1.74.0 (04/10/2026, ramo fluxos): o botão do topo LIGADO (a loja escolhida no Dashboard e nos Relatórios do computador)
   fica à vista, no realce de sempre dos botões ligados da fileira (web/topo-vidro.css); antes o ligado era igual aos outros
   (a regra de base da fileira tem peso de id, por causa do #menubtn na lista: por isso o #telabtns aqui) */
html:not(.app-nativo) header.top #telabtns .icon.ht-topo[aria-pressed="true"]{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)}
.ht-topo-txt{font-size:var(--f-footnote,calc(.8125rem * var(--dt,1)));font-weight:600;line-height:1.2}
@media (max-width:760px){
  html:not(.app-nativo) header.top .telabtns .icon.ht-pilula{width:var(--topo-acao);padding:0;justify-content:center}
  html:not(.app-nativo) header.top .telabtns .ht-topo-txt{display:none}
  /* loja, som e conta saíram da fileira: sobra lugar para o nome da tela (requisito B1: o nome mora na fileira) */
  /* 04/10/2026 (a dupla checagem): 10 px de respiro (eram 12). Com 12, a fileira das Negociações passava 3 px da largura em
     390 px e o nome da tela ia embora (B1: o nome mora na fileira do topo); com 10, cabe em toda tela em 390 px */
  html.ht-sem-fixos:not(.app-nativo) header.top #curview{display:inline-block;padding:0 .625rem;max-width:36vw;font-size:var(--f-footnote,calc(.8125rem * var(--dt,1)))}
  html.ht-sem-fixos:not(.app-nativo) body.view-kds header.top #curview{display:none}
}
/* a luz da situação das lojas no nome da tela (o botão da loja só fica na fileira na Expedição e na Cozinha) */
#curview[data-lojas-cor]::before{content:"";display:inline-block;vertical-align:middle;width:.5rem;height:.5rem;margin:-.125rem .4375rem 0 0;border-radius:50%;background:var(--label3,#9C8D80)}
#curview[data-lojas-cor="verde"]::before{background:var(--verde,#11994A)}
#curview[data-lojas-cor="laranja"]::before{background:var(--d-ambar,#C27A00)}
#curview[data-lojas-cor="vermelho"]::before{background:var(--queda,#E21D3C)}
/* o item da loja no menu: o ícone de ligar na cor da situação */
.menudd [data-ddtela="loja"][data-lojas-cor="verde"] .dd-ico svg{color:var(--d-verdeagua-t,#006F5D)}
.menudd [data-ddtela="loja"][data-lojas-cor="laranja"] .dd-ico svg{color:color-mix(in srgb,var(--d-ambar,#C27A00) 50%,var(--label,#323200))}
.menudd [data-ddtela="loja"][data-lojas-cor="vermelho"] .dd-ico svg{color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))}
.menudd [data-ddtela] .dd-txt{white-space:normal}

/* ---------- dentro das folhas ---------- */
/* a linha da situação das lojas (na folha Loja de uma tela) */
.ht-lojas{display:flex;align-items:center;gap:.625rem;width:100%;min-height:2.75rem;margin:0 0 .75rem;padding:.5rem .875rem;border:1px solid color-mix(in srgb,var(--label,#323200) 18%,transparent);border-radius:1rem;background:color-mix(in srgb,var(--label3,#9C8D80) 8%,transparent);color:inherit;font:inherit;font-size:calc(.9375rem * var(--dt,1));text-align:left;cursor:pointer}
.ht-lojas>span{flex:1 1 auto;min-width:0}
.ht-lojas>b{flex:none;font-weight:600;color:var(--bf-realce,var(--acao,#1F5FD0))}
.ht-lojas:active{background:color-mix(in srgb,var(--label3,#9C8D80) 16%,transparent)}
.ht-lojas:focus-visible,.ht-voltar:focus-visible{outline:.1875rem solid var(--bf-realce,var(--acao,#1F5FD0));outline-offset:.125rem}
.ht-luz{flex:none;width:.625rem;height:.625rem;border-radius:50%;background:var(--label3,#9C8D80)}
[data-lojas-cor="verde"]>.ht-luz{background:var(--verde,#11994A)}
[data-lojas-cor="laranja"]>.ht-luz{background:var(--d-ambar,#C27A00)}
[data-lojas-cor="vermelho"]>.ht-luz{background:var(--queda,#E21D3C)}
/* o item "Mais": a lista do que não coube na barra e o voltar da folha aberta por ele */
/* 1.74.0 (Philippe, 04/10/2026, sexta fase, revisão final G1): no menor celular (320 px) a barra de cinco itens dava 57 px a
   cada um e os rótulos compridos saíam cortados ("Cidade ...", "Categor..." no Cardápio e no Fiscal). Ali cada item fica
   com a largura do próprio rótulo e o que sobra é repartido (o alvo de 44 px fica); era o remendo das Negociações,
   agora na peça. */
@media (max-width:359px){.bf.bf-tela .bf-barra>.bf-item{flex:1 1 auto;min-width:2.75rem;padding-left:.125rem;padding-right:.125rem}}
.ht-ico{flex:none;display:grid;place-items:center;width:1.5rem;height:1.5rem}
.ht-ico svg{width:1.375rem;height:1.375rem;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ht-conta{margin-left:auto;min-width:1.25rem;height:1.25rem;padding:0 .375rem;border-radius:1rem;background:var(--queda,#E21D3C);color:var(--acao-txt,#FFFFFF);font-size:max(.6875rem, calc(.6875rem * var(--dt,1)));line-height:1.25rem;font-weight:700;text-align:center}
.ht-voltar{display:inline-flex;align-items:center;gap:.25rem;min-height:2.75rem;margin:-.5rem 0 .25rem -.5rem;padding:.25rem .625rem .25rem .25rem;border:0;border-radius:.875rem;background:transparent;color:var(--bf-realce,var(--acao,#1F5FD0));font:inherit;font-size:calc(1rem * var(--dt,1));font-weight:600;cursor:pointer}
.ht-voltar svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ht-voltar:active{background:color-mix(in srgb,var(--label3,#9C8D80) 12%,transparent)}
/* o ponto de "falta criar o seu acesso" no botão do menu, quando a conta está no menu (do lado oposto ao selo de atualização) */
#menubtn{position:relative}
.ht-ponto{position:absolute;top:.25rem;left:.25rem;width:.5625rem;height:.5625rem;border-radius:50%;background:var(--d-ambar,#C27A00);box-shadow:0 0 0 2px var(--surface,#FFFFFF);pointer-events:none}
.ht-ponto[hidden]{display:none}
body.dark .ht-ponto{box-shadow:0 0 0 2px var(--surface,#FFFFFF)}
.menudd [data-ddtela].ht-pede .dd-txt::after{content:"";flex:none;width:.5625rem;height:.5625rem;margin-left:.5rem;border-radius:50%;background:var(--d-ambar,#C27A00)}

/* v8: a mesma HubBarraFolha vira um painel contextual ancorado ao topo. A peça permanece dentro da view para preservar os ouvintes;
   a régua dos cartões continua reservando apenas a navegação global e a área segura. */
.bf.bf-contextual{top:var(--ht-contexto-topo,5rem);bottom:auto;left:auto;right:max(.75rem,env(safe-area-inset-right,0px));width:min(34rem,calc(100vw - 1.5rem));max-width:34rem;max-height:var(--ht-contexto-altura,calc(100dvh - 6rem));visibility:hidden;opacity:0;pointer-events:none;touch-action:pan-y;overflow:hidden;border:1px solid var(--bf-borda);border-radius:var(--r-sheet,1.25rem);background:var(--bf-fundo);box-shadow:var(--bf-sombra-capsula);-webkit-backdrop-filter:blur(1.25rem) saturate(180%);backdrop-filter:blur(1.25rem) saturate(180%)}
.bf.bf-contextual.ht-contexto-aberto{visibility:visible;opacity:1;pointer-events:auto}
.bf-contextual::before{display:none}
.bf-contextual>.ht-contexto-cab{order:-3;flex:none;display:flex;align-items:center;gap:.75rem;min-height:2.75rem;padding:.5rem .75rem .25rem 1rem;font-size:var(--f-footnote,calc(.8125rem * var(--dt,1)))}
.ht-contexto-cab>b{flex:1;min-width:0;overflow-wrap:anywhere}
.ht-contexto-fechar{flex:none;width:2.75rem;height:2.75rem;border:0;border-radius:50%;background:transparent;color:inherit;font:inherit;font-size:calc(1.5rem * var(--dt,1));cursor:pointer}
.ht-contexto-fechar:focus-visible{outline:.1875rem solid var(--bf-realce);outline-offset:-.1875rem}
.ht-contexto-fechar svg{display:block;width:1.25rem;height:1.25rem;margin:auto}
.bf-contextual>.bf-barra{order:-2;display:flex;flex-wrap:wrap;flex:none;gap:.375rem;margin:.25rem .75rem .75rem;padding:0;min-height:0;border:0;border-radius:0;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;touch-action:pan-y}
.bf-contextual .bf-lente,.bf-contextual .bf-alca{display:none}
.bf-contextual .bf-barra>.bf-item{flex:1 1 5.5rem;min-width:2.75rem;min-height:2.75rem;max-width:100%;padding:.5rem .625rem;gap:.375rem;border-radius:.875rem;background:var(--fill2,color-mix(in srgb,var(--label,#323200) 13%,transparent));touch-action:pan-y}
.bf-contextual .bf-barra>.bf-item.on{background:var(--bf-realce-fundo,var(--bf-realce));color:var(--acao-txt,#FFFFFF)}
.bf-contextual .bf-rotulo{white-space:normal;overflow:visible;text-overflow:clip;font-size:var(--f-footnote,calc(.8125rem * var(--dt,1)));overflow-wrap:anywhere}
.bf-contextual .bf-barra>.bf-acao::after{content:"Ação";font-size:max(.6875rem,calc(.6875rem * var(--dt,1)));color:var(--bf-sub)}
.bf-contextual .bf-janela{flex:1 1 auto;min-height:0}
.bf-contextual:not([data-bf-ativo]) .bf-janela{display:none}
.bf-contextual .bf-conteudo{padding-top:.25rem;overscroll-behavior:contain;scrollbar-width:thin}
/* Teclado/viewport curta: a grade volta ao sair do campo. Fechar e conteúdo rolável continuam na mesma peça. */
.bf-contextual.ht-contexto-digitando-curto>.bf-barra{display:none}
/* Apps ocultam o cabeçalho web: o mesmo acionador fica no começo da view, acima dos cartões. */
.ht-contexto-nativo{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;margin:.25rem .75rem .5rem;font-size:var(--f-footnote,calc(.8125rem * var(--dt,1)))}
.ht-contexto-nativo>svg{width:1.375rem;height:1.375rem;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
@media(max-width:760px){.bf.bf-contextual{right:max(.5rem,env(safe-area-inset-right,0px));width:calc(100vw - 1rem)}}
@media(prefers-reduced-transparency:reduce){.bf.bf-contextual{background:var(--surface,#FFFFFF);-webkit-backdrop-filter:none;backdrop-filter:none}}
@media(prefers-contrast:more){.bf.bf-contextual{border-color:currentColor}}
@media(prefers-reduced-motion:reduce){.bf-contextual .bf-conteudo.bf-troca{animation:none}}

/* A reserva do host das faixas em modo tela é única em hub-carrossel.css. */

/* /hub-janela.css */
/* 1.74.0 (Philippe, 04/10/2026, quinta fase, ramo janelas): A JANELA DE GESTÃO NO DESENHO DO CONTEÚDO PRIMEIRO
   (web/hub-janela.js, HubJanela; requisitos B4, B6 e B7 de docs/ESPECIFICACAO-CONTEUDO-PRIMEIRO-2026-10-04.md).
   "Os cards no carrossel são KING [...] Pense em todas as telas como o design do KDS e Expedição."
   A janela é uma coluna de duas partes que nunca rola: o topo (só o nome e o Fechar) e a faixa de cartões, que ocupa
   tudo o que sobra; a barra de baixo (web/barra-folha.css) flutua sobre o pé, dentro da janela. A janela modal ocupa a
   tela inteira, como o pedido em tela cheia (web/hub-manual-orders.css): o conteúdo é o que importa.
   Texto em rem com --dt; alvos de 44 px; claro e escuro pelos tokens; vidro só na barra (camada funcional). */
.hj{--hj-lado:max(1rem,env(safe-area-inset-left,0px));--hj-topo:max(.5rem,env(safe-area-inset-top,0px));box-sizing:border-box;overflow:hidden}
html.app-nativo .hj{--hj-topo:max(.5rem,var(--app-status,env(safe-area-inset-top,0px)))}
dialog.hj[open]{position:fixed;inset:0;margin:0;width:100vw;max-width:none;height:100vh;height:100dvh;max-height:none;border:0;border-radius:0;padding:0;display:flex;flex-direction:column;overflow:hidden;
  background:var(--page,#F7F5F1);color:var(--label,#323200)}
dialog.hj::backdrop{background:var(--page,#F7F5F1)}
@media (max-width:760px){.hj{--hj-lado:max(.75rem,env(safe-area-inset-left,0px))}}

/* ---------- o topo: o nome da janela e o Fechar, numa fileira ---------- */
.hj-topo{flex:none;display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:2.75rem;padding:var(--hj-topo) var(--hj-lado) .5rem;min-width:0}
.hj-nome{flex:1 1 auto;min-width:0}
.hj-nome h2{margin:0;font-size:var(--f-title3,calc(1.25rem * var(--dt,1)));font-weight:700;line-height:1.15;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hj-sub{margin:.125rem 0 0;font-size:max(.6875rem, calc(.8125rem * var(--dt,1)));line-height:1.25;color:var(--label2,#6B5A4C);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.hj-sub[hidden]{display:none}
.hj-topo .hj-fechar{flex:none;width:2.75rem;height:2.75rem;padding:0;display:grid;place-items:center;border:0;border-radius:50%;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));color:var(--label,#323200);cursor:pointer;transition:transform .1s ease-out}
.hj-topo .hj-fechar:active{transform:scale(.94)}
.hj-topo .hj-fechar svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.hj-topo .hj-fechar:focus-visible{outline:var(--foco-largura,3px) solid var(--acao,#1F5FD0);outline-offset:2px}

/* ---------- o corpo: a faixa de cartões ocupa o que sobra; o pé fica reservado para a barra ---------- */
.hj-corpo{flex:1 1 auto;min-height:0;min-width:0;display:flex;flex-direction:column;padding:.125rem var(--hj-lado) calc(var(--bf-barra) + var(--bf-rodape) + 1.75rem)}
.hj-corpo>.hj-faixa{flex:1 1 0;min-height:0}
/* a altura do cartão vem da faixa (que estica na coluna da janela), sem conta em JS: celular e computador */
.hj .hj-faixa.hcar.hcar-tela:not(.hcar-agrupa)>.hcar-item{height:auto;max-height:none;align-self:stretch}
/* juntos (agrupa): a faixa é uma coluna que quebra; a altura dela continua vindo da coluna da janela */
.hj .hj-faixa.hcar.hcar-agrupa{height:auto}
.hj-corpo>.hcar-pe{flex:none}
@media (min-width:761px){.hj-corpo{padding-bottom:calc(var(--bf-barra) + 1.5rem)}}
/* o cartão da janela: o respiro é um só; a moldura (raio, fundo, sombra) é a do HubCarrossel no modo expande */
.hj-faixa>.hj-cartao{box-sizing:border-box;padding:1rem;min-width:0;margin:0;border-radius:var(--r-sheet,1.25rem)}
.hj-faixa>.hj-cartao>:first-child{margin-top:0}
/* dentro do cartão pequeno nada rola por conta própria: o corte do "Ver tudo" cuida do que não cabe */
.hj-faixa .hcar-cartao:not(.hcar-grande) pre{max-height:none;overflow:hidden}

/* ---------- a barra de baixo, dentro da janela ---------- */
.hj>.bf.hj-barra{position:absolute}
@media (prefers-reduced-motion:reduce){.hj-topo .hj-fechar{transition:none}.hj-topo .hj-fechar:active{transform:none}}
@media (prefers-contrast:more){.hj-topo .hj-fechar{box-shadow:inset 0 0 0 1px currentColor}}

/* /folha.css */
/* 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:color-mix(in srgb,var(--label,#323200) 30%,transparent)}
body.dark{--folha-alca:color-mix(in srgb,var(--surface,#FFFFFF) 30%,transparent)}
@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 color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 18%,transparent)}
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,var(--surface,#FFFFFF));-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:color-mix(in srgb,var(--label,#323200) 42%,transparent)}
html.hub-folha-celular body.dark .of-veu:has(+ #order-filter-panel:not(.hidden)){background:color-mix(in srgb,var(--surface2,#F7F3EE) 55%,transparent)}
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 color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 18%,transparent)}
@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:color-mix(in srgb,var(--label,#323200) 42%,transparent)}
html.hub-folha-celular body.dark .ss-veu:has(+ #store-status-popover:not(.hidden)){background:color-mix(in srgb,var(--surface2,#F7F3EE) 55%,transparent)}
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,var(--surface,#FFFFFF));-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 -8px 40px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 18%,transparent);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}

/* /cerebro-sala.css */
/* 1.72.0 (Philippe, 29/09/2026): a Sala dos agentes do Cérebro (web/cerebro-sala.js). Padrão Apple: tipografia do
   sistema pelas variáveis do Hub (nenhuma letra abaixo de 11 px), cores do sistema, vidro sutil, claro e escuro,
   alvos de toque de 44 px, celular sem rolagem para o lado, sem animação para quem pede menos movimento. */

.hs{min-width:0;color:var(--label,#323200);--hs-verde:var(--verde,#11994A)} /* 1.72.0: tintas locais (o --sys-green-ink e o --sys-orange-ink não existem no Hub); o escuro troca pelas cores do sistema abaixo */
.hs-sala,.hs-feed{display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:22px;background:var(--glass-bg,color-mix(in srgb,var(--surface,#FFFFFF) 72%,transparent));-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);box-shadow:0 8px 28px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 10%,transparent),inset 0 0 0 1px var(--sep,color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 13%,transparent));min-width:0}
body.dark .hs-sala,body.dark .hs-feed{background:color-mix(in srgb,var(--surface2,#F7F3EE) 72%,transparent);box-shadow:0 8px 28px color-mix(in srgb,var(--page,#F7F5F1) 35%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--page,#F7F5F1) 10%,transparent)}

/* topo */
.hs-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.hs-topo-txt{min-width:0}
.hs-topo h2{margin:0;font-size:var(--f-title3,1.25rem);font-weight:700;letter-spacing:-.015em;line-height:1.2}
.hs-sub{margin:2px 0 0;font-size:var(--f-footnote,0.8125rem);color:var(--label2,#6B5A4C);line-height:1.35;overflow-wrap:anywhere}
.hs-vivo{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;border-radius:999px;background:color-mix(in srgb,var(--queda,#E21D3C) 12%,transparent);color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200));font-size:var(--f-caption1,0.75rem);font-weight:700}
.hs-vivo i{width:8px;height:8px;border-radius:50%;background:currentColor;animation:hs-pulso 1.4s ease-in-out infinite}
.hs-vivo.fim{background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));color:var(--label2,#6B5A4C)}
.hs-vivo.fim i{animation:none;opacity:.5}

/* quem está na sala */
.hs-quem{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.hs-quem::-webkit-scrollbar{display:none}
.hs-quem-item{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:3px 10px 3px 3px;border-radius:999px;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));font-size:var(--f-footnote,0.8125rem);font-weight:600;color:var(--label2,#6B5A4C);transition:background .2s,color .2s}
.hs-quem-item.ativo{background:color-mix(in srgb,var(--acao,#1F5FD0) 14%,transparent);color:var(--label,#323200)}
.hs-av{flex:none;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--hs-cor,var(--label3,#9C8D80));color:var(--acao-txt,#FFFFFF);font-size:var(--f-caption1,0.75rem);font-weight:700;letter-spacing:-.02em;box-shadow:inset 0 0 0 1px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 6%,transparent)}
.hs-av.grande{width:40px;height:40px;font-size:var(--f-subhead,0.9375rem)}

/* a conversa */
.hs-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;max-height:min(56vh,560px);overflow-y:auto;overscroll-behavior:contain;scroll-padding-bottom:12px}
.hs-lista.compacta{max-height:none;overflow:visible;gap:8px}
.hs-msg{display:grid;grid-template-columns:30px minmax(0,1fr);gap:8px;align-items:start}
.hs-msg.entra{animation:hs-entra .28s ease-out}
.hs-balao{min-width:0;padding:8px 12px 10px;border-radius:18px;border-top-left-radius:6px;background:color-mix(in srgb,var(--surface,#FFFFFF) 78%,transparent);box-shadow:inset 0 0 0 1px var(--sep,color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 13%,transparent))}
body.dark .hs-balao{background:color-mix(in srgb,var(--surface,#FFFFFF) 7%,transparent)}
.hs-cab{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin-bottom:2px}
.hs-cab b{font-size:var(--f-footnote,0.8125rem);font-weight:700}
.hs-para{font-size:var(--f-caption1,0.75rem);color:var(--label2,#6B5A4C)}
.hs-tipo{margin-left:auto;font-style:normal;font-size:var(--f-caption2,max(0.6875rem, calc(0.6875rem * var(--dt,1))));font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:999px;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));color:var(--label2,#6B5A4C)}
.hs-balao p{margin:0;font-size:var(--f-body,1.0625rem);line-height:1.4;overflow-wrap:anywhere}
.hs-msg.tipo-hipotese .hs-tipo{background:color-mix(in srgb,var(--acao,#1F5FD0) 12%,transparent);color:var(--acao,#1F5FD0)}
.hs-msg.tipo-resultado .hs-tipo{background:color-mix(in srgb,var(--verde,#11994A) 14%,transparent);color:var(--hs-verde)}
.hs-msg.tipo-contestacao .hs-tipo{background:color-mix(in srgb,var(--d-ambar,#C27A00) 16%,transparent);color:color-mix(in srgb,var(--d-ambar,#C27A00) 50%,var(--label,#323200))}
.hs-msg.tipo-contestacao .hs-balao{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--d-ambar,#C27A00) 45%,transparent)}
.hs-msg.tipo-veredito .hs-tipo{background:color-mix(in srgb,var(--d-anil,#5B6CFF) 14%,transparent);color:var(--d-anil-t,#394DC8)}
.hs-msg.tipo-veredito .hs-balao{background:color-mix(in srgb,var(--d-anil,#5B6CFF) 8%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--d-anil,#5B6CFF) 30%,transparent)}
body.dark .hs-msg.tipo-veredito .hs-balao{background:color-mix(in srgb,var(--acao,#1F5FD0) 14%,transparent)}
body.dark .hs-msg.tipo-resultado .hs-tipo{color:var(--d-verdeagua-t,#006F5D)}
body.dark .hs-msg.tipo-contestacao .hs-tipo{color:color-mix(in srgb,var(--d-ambar,#C27A00) 50%,var(--label,#323200))}
body.dark .hs-msg.tipo-veredito .hs-tipo{color:var(--d-anil-t,#394DC8)}

/* digitando */
.hs-digitando{display:flex;align-items:center;gap:8px;min-height:28px;font-size:var(--f-footnote,0.8125rem);color:var(--label2,#6B5A4C)}
.hs-digitando[hidden],.hs-de-novo[hidden]{display:none}
.hs-pontos{display:inline-flex;gap:4px;padding:8px 10px;border-radius:14px;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent))}
.hs-pontos i{width:6px;height:6px;border-radius:50%;background:var(--label3,#9C8D80);animation:hs-ponto 1.2s ease-in-out infinite}
.hs-pontos i:nth-child(2){animation-delay:.15s}.hs-pontos i:nth-child(3){animation-delay:.3s}

/* o cartão do resultado */
.hs-cartao{display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:18px;background:color-mix(in srgb,var(--surface,#FFFFFF) 86%,transparent);box-shadow:inset 0 0 0 1px var(--sep,color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 13%,transparent))}
body.dark .hs-cartao{background:color-mix(in srgb,var(--surface,#FFFFFF) 6%,transparent)}
.hs-cartao-topo{display:flex;align-items:center;gap:10px}
.hs-cartao-topo div{display:flex;flex-direction:column;min-width:0}
.hs-cartao-topo strong{font-size:var(--f-headline,1.0625rem);font-weight:700;line-height:1.25}
.hs-cartao-topo div span{font-size:var(--f-footnote,0.8125rem);color:var(--label2,#6B5A4C)}
.hs-ver{flex:none;display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:999px;font-size:var(--f-caption1,0.75rem);font-weight:700;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));color:var(--label2,#6B5A4C);white-space:nowrap}
.hs-ver.grande{min-height:32px;padding:0 14px;font-size:var(--f-subhead,0.9375rem)}
.hs-ver.v-ok{background:color-mix(in srgb,var(--verde,#11994A) 16%,transparent);color:var(--hs-verde)}
.hs-ver.v-atencao{background:color-mix(in srgb,var(--d-ambar,#C27A00) 18%,transparent);color:color-mix(in srgb,var(--d-ambar,#C27A00) 50%,var(--label,#323200))}
.hs-ver.v-nao{background:color-mix(in srgb,var(--queda,#E21D3C) 14%,transparent);color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))}
body.dark .hs-ver.v-ok{color:var(--d-verdeagua-t,#006F5D)}
body.dark .hs-ver.v-atencao{color:color-mix(in srgb,var(--d-ambar,#C27A00) 50%,var(--label,#323200))}
.hs-destaques{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.hs-dest{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:14px;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));min-width:0}
.hs-dest small{font-size:var(--f-caption2,max(0.6875rem, calc(0.6875rem * var(--dt,1))));font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--label2,#6B5A4C)}
.hs-dest b{font-size:var(--f-title2,1.375rem);font-weight:800;letter-spacing:-.02em;line-height:1.15}
.hs-dest span{font-size:var(--f-caption1,0.75rem);color:var(--label2,#6B5A4C);overflow-wrap:anywhere}
.hs-medidor{display:block;height:6px;border-radius:999px;background:var(--fill2,color-mix(in srgb,var(--label,#323200) 13%,transparent));overflow:hidden;margin-top:4px}
.hs-medidor i{display:block;height:100%;border-radius:999px;background:var(--verde,#11994A)}
.hs-chips{display:flex;flex-wrap:wrap;gap:6px}
.hs-chip{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:999px;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));font-size:var(--f-footnote,0.8125rem);font-weight:600;color:var(--label2,#6B5A4C)}
.hs-chip.alerta{background:color-mix(in srgb,var(--queda,#E21D3C) 12%,transparent);color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))}
.hs-unis{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.hs-uni{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--sep,color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 13%,transparent))}
.hs-uni.sem p{margin:0;font-size:var(--f-footnote,0.8125rem);color:var(--label2,#6B5A4C);line-height:1.4}
.hs-uni-cab{display:flex;align-items:center;justify-content:space-between;gap:8px}
.hs-uni-cab b{font-size:var(--f-subhead,0.9375rem)}
.hs-uni-cab span{font-size:var(--f-caption1,0.75rem);color:var(--label2,#6B5A4C)}
.hs-trilho{position:relative;height:14px;border-radius:999px;background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent))}
.hs-faixa{position:absolute;top:2px;bottom:2px;border-radius:999px;background:var(--acao,#1F5FD0);opacity:.28}
.hs-esp{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--acao,#1F5FD0);box-shadow:0 0 0 2px var(--surface,#FFFFFF)}
.hs-hoje{position:absolute;top:-3px;bottom:-3px;width:3px;margin-left:-1.5px;border-radius:2px;background:var(--label3,#9C8D80)}
.hs-uni-num{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:var(--f-footnote,0.8125rem);color:var(--label2,#6B5A4C)}
.hs-uni-num b{color:var(--label,#323200)}
.hs-graf .gr{background:transparent;box-shadow:none;padding:0}
.hs-pior{margin:0;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--d-ambar,#C27A00) 10%,transparent);font-size:var(--f-footnote,0.8125rem);line-height:1.45}
.hs-bloco h3{margin:0 0 6px;font-size:var(--f-subhead,0.9375rem);font-weight:700}
.hs-bloco ul{margin:0;padding-left:18px;font-size:var(--f-footnote,0.8125rem);line-height:1.45;color:var(--label2,#6B5A4C)}
.hs-prod dl{margin:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;font-size:var(--f-footnote,0.8125rem)}
.hs-prod dt{color:var(--label2,#6B5A4C);overflow-wrap:anywhere}
.hs-prod dd{margin:0;font-weight:700;text-align:right}
.hs-cen{list-style:none;padding:0 !important;display:flex;flex-direction:column;gap:6px}
.hs-cen li{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.hs-cen b{color:var(--label,#323200)}
.hs-sup summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-size:var(--f-footnote,0.8125rem);font-weight:600;color:var(--acao,#1F5FD0);list-style:none}
.hs-sup summary::-webkit-details-marker{display:none}
.hs-sup ul{margin:0;padding-left:18px;font-size:var(--f-footnote,0.8125rem);line-height:1.45;color:var(--label2,#6B5A4C)}
.hs-sup em{font-style:normal;color:var(--label2,#6B5A4C)}
.hs-nota,.hs-motivo{margin:0;font-size:var(--f-caption1,0.75rem);color:var(--label2,#6B5A4C);line-height:1.4}
.hs-motivo{font-size:var(--f-body,1.0625rem);color:var(--label2,#6B5A4C)}

/* botões: alvo de 44 px */
.hs-acoes{display:flex;gap:8px;flex-wrap:wrap}
.hs-bt{min-height:44px;min-width:44px;padding:0 16px;border:0;border-radius:999px;background:var(--acao,#1F5FD0);color:var(--acao-txt,#FFFFFF);font:inherit;font-size:var(--f-subhead,0.9375rem);font-weight:600;cursor:pointer}
.hs-bt.secundario{background:var(--fill,color-mix(in srgb,var(--label,#323200) 8%,transparent));color:var(--label,#323200)}
.hs-bt.ghost{background:transparent;color:var(--acao,#1F5FD0);padding:0 10px}
.hs-bt:focus-visible{outline:2px solid var(--acao,#1F5FD0);outline-offset:2px}

/* feed */
.hs-feed-corpo{display:flex;flex-direction:column;gap:12px}
.hs-grupo{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:16px;box-shadow:inset 0 0 0 1px var(--sep,color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 13%,transparent))}
.hs-grupo header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.hs-grupo header strong{font-size:var(--f-subhead,0.9375rem);line-height:1.3;min-width:0;overflow-wrap:anywhere}
.hs-grupo-ver{margin:0;font-size:var(--f-footnote,0.8125rem);font-weight:600;color:var(--label2,#6B5A4C);line-height:1.4}
.hs-vazio,.hs-erro{margin:0;padding:18px;text-align:center;font-size:var(--f-footnote,0.8125rem);color:var(--label2,#6B5A4C)}
.hs-erro{color:color-mix(in srgb,var(--queda,#E21D3C) 70%,var(--label,#323200))}
.hs-carregando{min-height:160px;border-radius:16px;background:linear-gradient(100deg,color-mix(in srgb,var(--surface,#FFFFFF) 35%,transparent) 30%,color-mix(in srgb,var(--surface,#FFFFFF) 75%,transparent) 50%,color-mix(in srgb,var(--surface,#FFFFFF) 35%,transparent) 70%) 0 0/300% 100%;animation:hs-brilho 1.4s ease-in-out infinite}
body.dark .hs-carregando{background:linear-gradient(100deg,color-mix(in srgb,var(--surface,#FFFFFF) 4%,transparent) 30%,color-mix(in srgb,var(--surface,#FFFFFF) 10%,transparent) 50%,color-mix(in srgb,var(--surface,#FFFFFF) 4%,transparent) 70%) 0 0/300% 100%}

@keyframes hs-pulso{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes hs-entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes hs-ponto{0%,80%,100%{opacity:.3;transform:scale(.8)}40%{opacity:1;transform:none}}
@keyframes hs-brilho{0%{background-position:100% 0}100%{background-position:0 0}}

@media (max-width:759px){
  .hs-sala,.hs-feed{padding:12px;border-radius:18px}
  .hs-destaques{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .hs-dest:last-child{grid-column:1 / -1}
  .hs-lista{max-height:none}
  .hs-tipo{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  .hs-vivo i,.hs-pontos i,.hs-msg.entra,.hs-carregando{animation:none}
  .hs-quem-item{transition:none}
}