/* RESPONSIVO */

/* Escala fluida */
html {
  font-size: 16px;
}

@media (max-width: 359px) {
  html {
    font-size: 14px;
  }
}

@media (min-width: 1600px) {
  html {
    font-size: 17px;
  }
}

@media (min-width: 1920px) {
  html {
    font-size: 18px;
  }
}

@media (min-width: 2560px) {
  html {
    font-size: 20px;
  }
}

/* PC: coluna centrada com moldura */
@media (min-width: 768px) {
  body {
    background: var(--cor-fundo-externo);
    display: flex;
    justify-content: center;
    padding: var(--esp-lg) 0;
  }

  .app-shell {
    width: 100%;
    max-width: var(--max-coluna);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-card);
    height: calc(100dvh - var(--esp-xxl));
    height: calc(100svh - var(--esp-xxl));
    overflow: hidden;
    background: var(--cor-fundo);
    position: relative;
  }

  .bottomnav {
    border-top: 1px solid var(--cor-borda);
  }
}

/* Mobile: tela cheia */
@media (max-width: 767px) {
  body {
    background: var(--cor-fundo);
  }

  .app-shell {
    width: 100%;
    height: 100dvh;
    height: 100svh;
  }
}

/* Alvos 44px */
.alvo-44 {
  min-width: var(--alvo-min);
  min-height: var(--alvo-min);
}

/* Overflow seguro */
.overflow-seguro {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}