/* Safe areas compartilhadas entre as telas do app. */
:root {
  /* Fallback para navegadores/WebViews que não expõem os insets nativos. */
  --app-safe-area-top: 24px;
  --app-safe-area-bottom: 0px;
  --safe-area-top: max(env(safe-area-inset-top, 0px), var(--app-safe-area-top));
  --safe-area-bottom: max(env(safe-area-inset-bottom, 0px), var(--app-safe-area-bottom));
}

/*
 * iPhones com notch ou Dynamic Island. O env() tem prioridade quando o
 * dispositivo informar o valor real; esta regra cobre WebViews sem inset.
 */
@media screen and (orientation: portrait) and (min-width: 375px) and (max-width: 440px) and (min-height: 780px) and (-webkit-min-device-pixel-ratio: 2) {
  :root {
    --app-safe-area-top: 47px;
  }
}