/* /estilo-limpo.css */
/* C7/C11, Lapidação 10. Carregar depois de todas as folhas do Hub.
   A linha inferior aparece só no teclado; sombras de superfície não desenham bordas. */
:root {
  --limpo-sombra: 0 2px 6px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 4%,transparent), 0 10px 28px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 10%,transparent);
  --limpo-sombra-alta: 0 24px 60px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 22%,transparent);
  --limpo-foco: var(--label3,#9C8D80);
  --limpo-foco-contraste: var(--surface,#FFFFFF);
}
body.dark, :root[data-theme="dark"] {
  --limpo-sombra: 0 3px 10px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 18%,transparent), 0 12px 32px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 38%,transparent);
  --limpo-sombra-alta: 0 24px 60px color-mix(in srgb,light-dark(var(--label,#323200),var(--page,#F7F5F1)) 55%,transparent);
  --limpo-foco: var(--surface,#FFFFFF);
  --limpo-foco-contraste: var(--label,#323200);
}
/* A vitrine e o fio definem estes tokens localmente, além do tema do Hub. */
:root, body, .cu-unico, [data-cu-parte], .cu-compras {
  --sombra: var(--limpo-sombra) !important;
  --glass-sombra: var(--limpo-sombra) !important;
  --sombra-alta: var(--limpo-sombra-alta) !important;
  --vidro-brilho: 0 0 0 transparent !important;
}
/* Inclui cartões legados e carrosséis que ainda trazem a linha em box-shadow literal.
   Preserva fundos, cores de situação, bordas semânticas, layout e movimento. */
html body :is(.card, .dcard, .k, .e, .hc-card, .hcar-cartao, .pt-prod,
  .ac-cartao, .mc-mini, .cb-mini, .cu-cartao, .cu-pedido, .cu-pedido-linha,
  .rec, .peca, .cu-pendencias, .cp-card, .cp-visao, .hs-cartao,
  .neg-card, .atu-cartao, .atu-lista, .atu-aviso-cartao, .sup-cartao,
  .pq-card, .f55-cartao, .gr, .gr-ref, .gr-balao, .cu-b-caixa,
  .cu-b-vidro, .cu-b-menu, .cu-b-aviso, .cu-b-sugs-rot, .cu-conv-menu, .mo5-molde) {
  box-shadow: var(--limpo-sombra) !important;
}
/* Os dois botões flutuantes da casca têm regras próprias com !important. */
html.cu-casa-ativa body header.top button#menubtn,
html.cu-casa-ativa .cu-navegacao [data-cu-lista-abrir],
html body .cu-unico .cu-b-caixa {
  box-shadow: var(--limpo-sombra) !important;
}
html body :focus {
  outline: none !important;
  box-shadow: none !important;
}
html body :is(input, textarea, select):focus:not([aria-invalid="true"]),
html body :is(.hvw-card, .eq-cerebro-campo, .rel-busca, .cb-affix, .mbusca):focus-within {
  border-color: var(--sep,color-mix(in srgb,var(--label,#323200) 13%,transparent)) !important;
}
/* Buscas e grupos de campo também aplicavam o anel no ancestral do campo. */
html body :is(.hvw-card, .eq-cerebro-campo, .rel-busca, .cb-affix, .mbusca):focus-within {
  box-shadow: none !important;
}
html body :focus-visible,
html.cu-casa-ativa body header.top button#menubtn:focus-visible,
html.cu-casa-ativa .cu-navegacao [data-cu-lista-abrir]:focus-visible {
  box-shadow: inset 0 -2px 0 var(--limpo-foco), inset 0 -4px 0 var(--limpo-foco-contraste) !important;
}
/* O sinal continua perceptível quando o sistema remove sombras e cores de fundo. */
@media (forced-colors: active) {
  html body :focus-visible {
    outline: 2px solid CanvasText !important;
    outline-offset: 2px !important;
  }
}

/* /cerebro-unico/ios.css */
/* P3: complemento final da casca e da barra, sem alterar as frentes V1/V5.
   Os tokens permitem simular env() nos testes; no aparelho vêm do WebKit. */
:root{
  --cu-ios-safe-top:env(safe-area-inset-top,0px);
  --cu-ios-safe-bottom:env(safe-area-inset-bottom,0px);
  --cu-ios-safe-left:env(safe-area-inset-left,0px);
  --cu-ios-safe-right:env(safe-area-inset-right,0px);
  --cu-ios-topo-extra:calc(var(--cu-ios-safe-top) - env(safe-area-inset-top,0px));
}
/* A V1 decide posição, linhas e altura. No aparelho o acréscimo é zero;
   na simulação substitui somente env(), sem duplicar a reserva do topo. */
.cu-unico{--cu-ios-topo-reserva:calc(var(--cu-topo-reserva) + var(--cu-ios-topo-extra))}
/* A linha da M1 V3.6 tem 46 px também no celular: 10 + 46 + 12. */
.cu-unico.cu-menu36-casca{--cu-topo-reserva:calc(68px + env(safe-area-inset-top,0px))}
html.cu-casa-ativa body header.top .left{left:max(12px,var(--cu-ios-safe-left))}
html.cu-casa-ativa .cu-unico .cu-navegacao{right:max(12px,var(--cu-ios-safe-right))}
html.cu-casa-ativa body header.top .left,
html.cu-casa-ativa .cu-unico .cu-navegacao,html.cu-casa-ativa .cu-unico .cu-topo-contextuais{translate:0 var(--cu-ios-topo-extra)}
html.cu-casa-ativa .cu-unico [data-cu-parte="fio"]{
  padding-top:var(--cu-ios-topo-reserva);
  padding-left:var(--cu-ios-safe-left);padding-right:var(--cu-ios-safe-right);
  overscroll-behavior-y:none;-webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(to bottom,transparent,var(--label, #2A1C12) var(--cu-ios-topo-reserva));
  mask-image:linear-gradient(to bottom,transparent,var(--label, #2A1C12) var(--cu-ios-topo-reserva));
}
/* AU-CASCA-06: seletores separados por classe e tag. Um :is() na ponta direita é testado
   em todos os elementos do fio a cada recálculo; separado, só nos que têm a classe. */
html.cu-casa-ativa .cu-unico .cu-eu,html.cu-casa-ativa .cu-unico .cu-assunto,html.cu-casa-ativa .cu-unico .cu-texto,html.cu-casa-ativa .cu-unico .cu-peca{scroll-margin-top:var(--cu-ios-topo-reserva)}
.cu-unico [data-cu-parte="barra"].cu-b-raiz{
  padding-left:max(16px,var(--cu-ios-safe-left));padding-right:max(16px,var(--cu-ios-safe-right));
  padding-bottom:calc(10px + var(--cu-ios-safe-bottom));
}
html body .cu-unico .cu-b-raiz .cu-b-campo{font-size:max(16px,1rem,var(--cu-b-fonte-corpo))}
.cu-unico button,.cu-unico a,.cu-unico summary,html.cu-casa-ativa #menubtn{touch-action:manipulation}
/* A cor do toque é herdada: basta a raiz, sem testar cada elemento do fio. */
.cu-unico,html.cu-casa-ativa #menubtn{-webkit-tap-highlight-color:transparent}
/* Só a superfície que explora valores captura o gesto; o restante do fio rola. */
.cu-unico .gr .gr-desenho,.cu-unico .gr .gr-exploravel{touch-action:pan-y}

/* O teclado move a barra inteira, sem redimensionar nem reposicionar o fio.
   As propriedades --cu-altura das frentes existentes continuam sob sua posse. */
html.cu-casa-ativa #view-cer>.cu-unico[data-cu-ios]{height:var(--cu-ios-altura,100dvh)}
/* AU-CASCA-06 (V3.6): a caixa de vidro flutua sobre o fio. O fio vai até o fim
   da tela, por baixo das pílulas e da caixa, no toque e no mouse, com e sem o
   modo iPhone; o respiro final fica por dentro do rolo, do tamanho da barra
   medida (--comp-h, publicada no próprio fio) e do teclado (--cu-ios-base).
   A reserva no corpo (21/10) deixava só o fundo liso atrás do vidro.
   O bottom é único: Safari não soma sticky, pan e translação. */
html.cu-casa-ativa #view-cer>.cu-unico[data-cu-raiz]>.cu-unico-corpo{padding-bottom:0}
html.cu-casa-ativa #view-cer>.cu-unico[data-cu-raiz]:not([data-cu-ios])>.cu-unico-corpo>[data-cu-parte="barra"]{position:absolute;left:0;right:0;bottom:0}
html.cu-casa-ativa #view-cer>.cu-unico[data-cu-raiz]>.cu-unico-corpo>[data-cu-parte="fio"]{padding-bottom:calc(var(--comp-h,0px) + var(--cu-ios-base,0px) + 30px)}
html.cu-casa-ativa #view-cer>.cu-unico[data-cu-ios] [data-cu-parte="barra"]{
  position:fixed;left:0;right:0;bottom:var(--cu-ios-base,0px);translate:none;
}
.cu-unico[data-cu-ios] .cu-rolagem-controles,
.cu-unico[data-cu-ios]>.cu-voltar-topo{translate:0 calc(-1 * var(--cu-ios-base,0px))}
/* Recorta só a pintura sob a barra elevada, sem alterar a geometria da leitura. */
.cu-unico[data-cu-ios] [data-cu-parte="fio"]{clip-path:inset(0 0 var(--cu-ios-base,0px) 0);scroll-padding-bottom:calc(var(--comp-h,0px) + var(--cu-ios-base,0px) + 12px)}

/* AU-CASCA-06: o topo segue o V3.6 da casca nova. Sem máscara esmaecendo o fio nem
   faixa de cor: com os ícones flutuantes à vista, uma borda de vidro desfoca o que
   passa por baixo (sem letra legível entre eles) e some em degradê abaixo da linha. */
html.cu-casa-ativa #view-cer>.cu-unico [data-cu-parte="fio"]{-webkit-mask-image:none;mask-image:none}
html.cu-casa-ativa #view-cer>.cu-unico [data-cu-parte="topo"]::after{display:none}
/* 27/10/2026 (revisor): sem véu desfocado atrás das pílulas do topo na raiz (pedido do Philippe, print do iPhone 22h09);
   só as pílulas são vidro. O mesmo foi tirado de web/cerebro/casca/topo.css (o /cerebro). */
html.cu-casa-ativa #view-cer>.cu-unico [data-cu-parte="topo"]::before{content:none;display:none}
@media(prefers-reduced-motion:reduce){html.cu-casa-ativa #view-cer>.cu-unico [data-cu-parte="topo"]::before{transition:none}}
@media(prefers-reduced-transparency:reduce){html.cu-casa-ativa #view-cer>.cu-unico [data-cu-parte="topo"]::before{display:none}}

/* AU-CASCA-06: vidro escuro de volta ao V3.6 (casca.css:173 e barra.css:219-221, migração
   de paleta de 26/10). No tema escuro --label é o texto claro, então o vidro feito com ele
   virava cinza claro, quase opaco, com um halo claro: a caixa e as pílulas deixavam de
   mostrar o fio desfocado e o texto delas brigava com o do fio. O vidro escuro aprovado
   (44,39,35 a 78% e 52,47,43 a 62%) é o "quadro dentro do card" escuro da paleta
   (--surface2); a sombra escura vem do fundo escuro (--page). Mesmos seletores, carga posterior. */
body.dark .cu-unico,body.dark .cu-conversas-tema,html.cu-casa-ativa body.dark header.top{--cu-flt-bg:color-mix(in srgb, var(--surface2, #2A2622) 78%, transparent)}
body.dark .cu-b-raiz{
  --vidro36:color-mix(in srgb, var(--surface2, #2A2622) 62%, transparent);
  --vidro36-som:0 10px 30px color-mix(in srgb, var(--page, #141210) 60%, transparent);
}