html { font-size: 16px; }
html[data-font="small"] { font-size: 14px; }
html[data-font="large"] { font-size: 18px; }

body { margin: 0; }

/* Sem isto, classes como "flex" venceriam o atributo hidden (ex.: o toast nunca sumiria) */
[hidden] { display: none !important; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.animate-fadeIn { animation: fadeIn .3s ease-out; }

/* Ícone PNG recolorível: a cor vem de "text-*" (currentColor) e o desenho vira uma máscara.
   A imagem vai no style da página (mask-image), pois url() relativa aqui apontaria para css/ */
.icone {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Navegação rolável no celular sem barra visível */
.nav-scroll { scrollbar-width: none; }
.nav-scroll::-webkit-scrollbar { display: none; }

/* Aviso das abas bloqueadas: no toque quem avisa é o toast */
.nav-hint { display: none; }
@media (hover: hover) {
  .nav-locked:hover .nav-hint,
  .nav-locked:focus-visible .nav-hint { display: block; }
}

@media print {
  #app-header, #app-footer, .no-print { display: none !important; }
}