/* ==========================================================================
   Talentos Mais — Ajuste de layout para telas de Desktop
   --------------------------------------------------------------------------
   O app (Expo/React Native Web) é "mobile first": o cartão principal do
   aplicativo é travado em max-width:480px, direto no HTML. Em monitores
   grandes isso sobra um vazio cinza enorme nas laterais.

   Este arquivo NÃO mexe em nada no celular — as regras só valem a partir de
   900px de largura. No desktop, ele:
     1) Troca o fundo cinza chapado por um gradiente com as cores da marca.
     2) Alarga o "cartão" do app (o painel branco) e dá mais respiro/sombra.
     3) Evita que campos de texto fiquem esticados de ponta a ponta.

   Quer ajustar a largura do cartão? Mude só os valores de
   --app-card-width e --app-card-width-xl abaixo.
   ========================================================================== */

@media (min-width: 900px) {
  :root {
    --app-card-width: 680px;    /* largura do "cartão" em telas normais   */
    --app-card-width-xl: 760px; /* largura do "cartão" em telas bem largas */
  }

  html, body {
    background: linear-gradient(135deg, #E7F4F6 0%, #FDF3E4 100%) !important;
  }

  /* Camada de fundo atrás do app (antes: cinza liso, ocupando a tela toda) */
  #root > div > div {
    background: linear-gradient(135deg, #E7F4F6 0%, #FDF3E4 100%) !important;
    padding: 48px 24px !important;
    position: relative;
  }

  /* Blobs decorativos suaves, mesma linguagem visual da landing page */
  #root > div > div::before,
  #root > div > div::after {
    content: "";
    position: absolute;
    border-radius: 9999px;
    filter: blur(90px);
    opacity: 0.30;
    z-index: 0;
    pointer-events: none;
  }
  #root > div > div::before {
    width: 420px;
    height: 420px;
    background: #2E97AC;
    top: -140px;
    left: -140px;
  }
  #root > div > div::after {
    width: 380px;
    height: 380px;
    background: #F5A623;
    bottom: -120px;
    right: -120px;
  }

  /* O "cartão" do app em si: antes travado em 480px, sempre 100vh */
  #root > div > div > div {
    max-width: var(--app-card-width) !important;
    width: 100% !important;
    height: calc(100vh - 96px) !important;
    border-radius: 32px !important;
    box-shadow: 0 40px 100px -20px rgba(46, 151, 172, 0.30) !important;
    position: relative;
    z-index: 1;
  }

  /* Campos de texto (login, cadastro, etc.): não esticar até a borda */
  .css-11aywtz {
    max-width: 420px;
  }
}

/* Telas bem largas (monitores grandes / ultrawide) */
@media (min-width: 1440px) {
  #root > div > div > div {
    max-width: var(--app-card-width-xl) !important;
  }
}