/*
 * O quadro de celular em que o aplicativo aparece no computador. Largura de
 * 390, a de um iPhone atual; a altura acompanha a janela, ate 844.
 */

.aparelho {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.aparelho__barra {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--espaco-4);
  padding: var(--espaco-4) var(--espaco-6);
}

.aparelho__link {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  min-height: var(--alvo-minimo);
  padding: 0 var(--espaco-2);
  font-weight: var(--peso-forte);
  text-decoration: none;
  border-radius: var(--raio-campo);
}

.aparelho__link:hover {
  text-decoration: underline;
}

.aparelho__palco {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 0 var(--espaco-6) var(--espaco-8);
}

.aparelho__quadro {
  padding: var(--espaco-3);
  border-radius: calc(var(--raio-modal) * 3);
  background: var(--superficie-2);
  box-shadow: var(--elevacao-n3), 0 0 0 1px var(--borda);
}

.aparelho__tela {
  display: block;
  width: 390px;
  height: min(844px, calc(100dvh - 160px));
  min-height: 560px;
  border: 0;
  border-radius: calc(var(--raio-modal) * 2.25);
  background: var(--fundo);
}

/* Sem JavaScript, no celular: o aplicativo ocupa a tela, sem o quadro. */
@media (max-width: 719px) {
  .aparelho__palco {
    padding: 0;
  }

  .aparelho__quadro {
    width: 100%;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    background: none;
  }

  .aparelho__tela {
    width: 100%;
    height: calc(100dvh - 80px);
    min-height: 0;
    border-radius: 0;
  }
}