/* Ajustes para o app instalado (PWA) rodar bem nos tres lugares.

   O caso do iPhone: com display standalone, o conteudo pode ficar por baixo
   do entalhe (notch) em cima e da barra de gestos embaixo. As funcoes env()
   devolvem quanto espaco reservar em cada borda; em aparelhos sem entalhe
   valem zero, entao nao atrapalham ninguem.

   Precisa do viewport-fit=cover no index.html para funcionar. */

:root {
  --pap-topo:     env(safe-area-inset-top, 0px);
  --pap-base:     env(safe-area-inset-bottom, 0px);
  --pap-esquerda: env(safe-area-inset-left, 0px);
  --pap-direita:  env(safe-area-inset-right, 0px);
}

body {
  padding-left:  var(--pap-esquerda);
  padding-right: var(--pap-direita);
  padding-bottom: var(--pap-base);
}

/* Barra de atualizacao: sobe acima da barra de gestos do iPhone. */
#papBarraAtualizacao {
  padding-bottom: calc(12px + var(--pap-base)) !important;
}

/* iOS aumenta a fonte sozinho ao girar o aparelho; isso desliga. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Safari no iOS da zoom automatico ao focar um campo com fonte menor que
   16px. Isso desalinha a tela inteira e nao volta sozinho. */
input, select, textarea {
  font-size: max(16px, 1em);
}

/* Rolagem com inercia, como nos apps nativos. */
body, .modal, .card {
  -webkit-overflow-scrolling: touch;
}

/* No app instalado nao ha barra de endereco: evita a selecao acidental de
   texto ao tocar e segurar, que atrapalha em listas e botoes. */
@media all and (display-mode: standalone) {
  body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
  /* campos e textos de leitura continuam selecionaveis */
  input, textarea, [contenteditable], .selecionavel, p, td, li {
    -webkit-user-select: text;
    user-select: text;
  }
}

/* Computador: impede o conteudo de esticar demais em telas largas. */
@media (min-width: 1600px) {
  body > .app, body > main, .page {
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
  }
}