/* onLUME · casca de aplicativo (PWA) — 19/10/2026
   Camada única, carregada por último nas páginas públicas, para o site se comportar
   como aplicativo instalado: áreas seguras (entalhe, barra de status translúcida,
   indicador de início), elementos fixos inferiores empilhados sem colisão e nada de
   oferta de instalação dentro do próprio aplicativo.
   Não altera conteúdo nem cores; só posição, espaçamento e comportamento de toque.
   Valores de env() só existem com viewport-fit=cover; sem ele valem 0 e nada muda. */

/* ---------- Toque ---------- */
html{-webkit-tap-highlight-color:transparent}
/* Sem espera de toque duplo nos controles (o zoom por pinça continua liberado). */
a,button,summary,label,select,input,textarea,[role="button"]{touch-action:manipulation}
/* Rótulo de controle não é texto para selecionar; conteúdo continua selecionável. */
button,.btn,.tema-botao,.menu-botao,.instalar-fechar,.dialogo-fechar,.acoes-flutuantes button{-webkit-user-select:none;user-select:none}
button,.acoes-flutuantes button{-webkit-touch-callout:none}
/* Retorno imediato ao toque nos controles flutuantes, que não têm :hover no celular. */
.acoes-flutuantes button:active,.instalar-fechar:active,.tema-botao:active,.menu-botao:active{transform:scale(.96)}
/* :hover só existe com mouse: as próprias folhas (v21, v17, produtos, páginas, revista)
   guardam cada regra em @media (hover:hover) and (pointer:fine), então nada fica preso
   depois do toque e não é preciso neutralizar aqui. */
/* Rolagem interna não arrasta a página de trás. */
.dialogo,.topo.aberto .menu{overscroll-behavior:contain}

/* ---------- Topo: área segura (barra de status translúcida no iPhone) ---------- */
.topo,.editorial-header{padding-top:env(safe-area-inset-top,0px)}
html{scroll-padding-top:calc(88px + env(safe-area-inset-top,0px))}
/* A abertura e o menu aberto das páginas no visual B (onlume-b-final.css, carregada depois
   desta) já somam a área segura ao cabeçalho de 64 px; aqui não se repete, para não mudar o desenho. */
/* Barra de leitura dos artigos: logo abaixo do cabeçalho (72 px + 1 px de borda), e não
   por cima dele nem atrás da barra de status. */
.rv-progresso{top:calc(73px + env(safe-area-inset-top,0px))}
/* Páginas sem cabeçalho fixo: o primeiro bloco escuro desce o tamanho da área segura. */
[data-intel-resource="Boletim LUME"] .top{padding-top:env(safe-area-inset-top,0px)}
.entrar-apresentacao{padding-top:calc(64px + env(safe-area-inset-top,0px))}
@media(max-width:640px){.entrar-apresentacao{padding-top:calc(36px + env(safe-area-inset-top,0px))}}

/* Aplicativo instalado em página sem cabeçalho fixo: faixa escura atrás da barra de
   status, para hora e bateria (texto claro) continuarem legíveis quando o conteúdo
   claro rola por baixo dela. Só existe quando há área segura no topo. */
@media (display-mode:standalone),(display-mode:fullscreen){
  body:not(:has(.topo,.editorial-header))::before{content:"";position:fixed;inset:0 0 auto;z-index:1000;height:env(safe-area-inset-top,0px);background:rgba(4,20,14,.94);pointer-events:none}
}

/* ---------- Base: indicador de início do iPhone ---------- */
.rodape{padding-bottom:calc(var(--s4,32px) + env(safe-area-inset-bottom,0px))}
.editorial-footer{padding-bottom:calc(32px + env(safe-area-inset-bottom,0px))}

/* ---------- Pilha inferior: cartão de instalação, botões flutuantes e aviso ----------
   Ordem de baixo para cima: cartão (quando o navegador oferece a instalação),
   botões flutuantes, aviso. A altura real do cartão chega por --instalar-h (script
   do cartão); 128 px é a altura medida com o texto em duas linhas. */
:root{--app-respiro:12px;--app-base:calc(var(--app-respiro) + env(safe-area-inset-bottom,0px))}
@media(min-width:601px){:root{--app-respiro:18px}}
body .instalar{bottom:calc(16px + env(safe-area-inset-bottom,0px))}
body .acoes-flutuantes{right:calc(var(--app-respiro) + env(safe-area-inset-right,0px));bottom:var(--app-base)}
body .aviso-flutuante{right:calc(var(--app-respiro) + env(safe-area-inset-right,0px));bottom:calc(var(--app-base) + 56px)}
body.com-instalar .acoes-flutuantes{bottom:calc(16px + env(safe-area-inset-bottom,0px) + var(--instalar-h,128px) + 12px)}
body.com-instalar .aviso-flutuante{bottom:calc(16px + env(safe-area-inset-bottom,0px) + var(--instalar-h,128px) + 68px)}
/* Com o cartão aberto, o fim da página sobe o suficiente para o rodapé não ficar por baixo. */
body.com-instalar .rodape{padding-bottom:calc(var(--s4,32px) + 28px + var(--instalar-h,128px) + env(safe-area-inset-bottom,0px))}
/* O aviso dos flutuantes sai junto com eles quando o rodapé (que repete os botões) aparece. */
.acoes-flutuantes.recolhido~.aviso-flutuante{opacity:0;transform:translateY(8px)}
/* Enquanto os botões principais da abertura estão na tela, nada flutua por cima deles. */
.instalar,.acoes-flutuantes,.aviso-flutuante{transition:opacity .2s ease,transform .2s ease,visibility .2s,bottom .2s ease}
body.na-abertura .instalar,body.na-abertura .acoes-flutuantes,body.na-abertura .aviso-flutuante{opacity:0;visibility:hidden;pointer-events:none}
body.na-abertura .acoes-flutuantes{transform:translateY(12px)}
/* Aviso de conteúdo novo: é a única peça inferior enquanto está aberto, respeita a área
   segura e nunca sobe por trás do cabeçalho. */
body .aviso-artigo[open]{bottom:calc(16px + env(safe-area-inset-bottom,0px));max-height:calc(100dvh - 72px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 32px)}
body:has(.aviso-artigo[open]) .instalar,body:has(.aviso-artigo[open]) .acoes-flutuantes,body:has(.aviso-artigo[open]) .aviso-flutuante{opacity:0;visibility:hidden;pointer-events:none}
/* O aviso só abre depois da abertura (onlume-mobile-v18-4.js) e se recolhe se a pessoa
   volta a ela, para nunca ficar por cima das ações principais. Enquanto o script mede o
   espaço que ele ocuparia, fica invisível. */
body.na-abertura .aviso-artigo[open],.aviso-artigo.aviso-medindo{opacity:0;visibility:hidden;pointer-events:none}

/* ---------- Aplicativo instalado ----------
   Dentro do aplicativo não se oferece instalar nem "salvar no dispositivo".
   .modo-app é o reforço para o iPhone (navigator.standalone), aplicado pelo script. */
@media (display-mode:standalone),(display-mode:fullscreen),(display-mode:minimal-ui){
  .instalar,#onlumeInstallCard,#onlumeFabSave,#onlumeSaveBtn{display:none!important}
  /* Sem "puxar para atualizar" na raiz: a navegação já busca a versão nova na rede. */
  html{overscroll-behavior-y:contain}
}
.modo-app .instalar,.modo-app #onlumeInstallCard,.modo-app #onlumeFabSave,.modo-app #onlumeSaveBtn{display:none!important}

@media (prefers-reduced-motion:reduce){
  .instalar,.acoes-flutuantes,.aviso-flutuante{transition:none}
  .acoes-flutuantes button:active,.instalar-fechar:active,.tema-botao:active,.menu-botao:active{transform:none}
}
@media print{.instalar{display:none!important}}
/* ---------- Transição entre páginas (View Transitions entre documentos) ----------
   Navegação de mesma origem com troca curta por esmaecimento (200 ms, ease-out) em vez
   do corte seco; o cabeçalho tem nome próprio e fica parado quando é o mesmo nas
   duas páginas. Chromium 126+ e Safari 18.2+; os demais navegam como antes. Só existe
   sem pedido de movimento reduzido: com ele, a troca é instantânea. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .topo,.editorial-header{view-transition-name:topo}
  ::view-transition-group(*){animation-duration:.2s;animation-timing-function:cubic-bezier(.23,1,.32,1)}
}