/* =========================================================
   QRGenix - versão para celular
   Carregar DEPOIS de style.css e style-index.css.
   Imagem do fundo: static/Fundo-QRgenix-mobile.png (mesma pasta deste arquivo)
   Cada página tem uma classe no <body>:
     pagina-login  -> Login, cadastro, esqueci e redefinir senha
     pagina-index  -> página inicial (gerador)
   ========================================================= */

@media (max-width: 600px) {

  /* ---------- Base ---------- */
  html {
    font-size: 16px;            /* o style.css usa calc(0.7vw + 0.5vh), que no celular fica minúsculo */
    background: #fff;
    overflow-x: hidden;
  }
  img { max-width: 100%; }
  button, input, select, textarea { max-width: 100%; }

  /* ======================================================
     LOGIN / CADASTRO / SENHA
     ====================================================== */
  body.pagina-login {
    font-size: 16px;
    height: auto;
    min-height: 100%;
    background: transparent;
  }

  /* Ilustração vertical: largura total, colada embaixo; o topo é branco */
  body.pagina-login img.fundo {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    z-index: -1;
  }

  /* Tira o formulário da lateral direita (layout de computador) */
  body.pagina-login .form-container {
    position: relative;
    top: auto; right: auto; bottom: auto; left: auto;
    transform: none;
    width: 92%;
    min-width: 0;
    max-width: 420px;
    margin: 0 auto;
    padding: 24px 0 40px;
  }

  body.pagina-login .form-container form {
    padding: 18px 16px;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
  }

  body.pagina-login .logo-formulario { margin-bottom: 14px; }
  body.pagina-login .logo-formulario img { height: 48px; }

  body.pagina-login .form-container form label {
    margin-bottom: 4px;
    font-size: 1rem;
  }

  body.pagina-login .form-container input[type="text"],
  body.pagina-login .form-container input[type="password"],
  body.pagina-login .form-container input[type="email"] {
    padding: 12px 14px;
    border-width: 2px;
    border-radius: 10px;
    margin-bottom: 12px;
    font-size: 16px;            /* evita o zoom automático do iPhone */
  }

  body.pagina-login .form-container form button {
    min-height: 46px;
    margin: 12px 0;
    padding: 12px;
    border-radius: 10px;
    font-size: 16px;
  }

  body.pagina-login .extra-links { text-align: center; margin-bottom: 4px; }
  body.pagina-login .register-link {
    display: block;
    text-align: center;
    margin-top: 4px;
    font-size: 0.9rem;
  }

  /* ======================================================
     PÁGINA INICIAL (index)
     ====================================================== */
  body.pagina-index {
    background: transparent;     /* o fundo agora é a imagem abaixo */
  }

  /* imagem presa ao fundo da tela, em largura total, ancorada embaixo */
  body.pagina-index::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: #fff url("Fundo-QRgenix-mobile.png") no-repeat center bottom / 100% auto;
  }

  /* o texto "Crie seu QR Code..." já está dentro da imagem */
  body.pagina-index .hero { display: none; }

  body.pagina-index header { padding: 12px 14px; background: transparent; }
  body.pagina-index header .logo img { height: 36px; }
  body.pagina-index .perfil-btn { width: 40px; height: 40px; }

  body.pagina-index main { min-height: 0; }

  /* formulário sobe para a parte branca, em cartão branco */
  body.pagina-index .form-section {
    flex: 0 0 auto;
    align-items: flex-start;
    min-width: 0;
    padding: 8px 14px 28px;
    background: transparent;
  }
  body.pagina-index .form-section form {
    padding: 18px 14px;
    gap: 12px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
  }

  body.pagina-index .form-section input[type="text"],
  body.pagina-index .form-section select,
  body.pagina-index .form-section textarea {
    margin-bottom: 12px;
    padding: 12px 14px;
    font-size: 16px;
  }
  body.pagina-index .form-section textarea { height: auto; min-height: 110px; }
  body.pagina-index .form-section button[type="submit"] { min-height: 46px; }

  /* Tipo de QR Code / Visual: botões lado a lado */
  body.pagina-index .tipo-qrcode { gap: 10px; }
  body.pagina-index .tipo-qrcode label:first-child { font-size: 1.2rem; margin-bottom: 4px; }
  body.pagina-index .tipo-qrcode label.radio-btn {
    flex: 1 1 40%;
    padding: 12px 8px;
    font-size: 1rem;
  }

  body.pagina-index .empresa-selection { flex-wrap: wrap; }
  body.pagina-index .empresa-selection select { flex: 1 1 100%; }

  /* Menu do perfil e modal de alterar senha */
  .dropdown-perfil { right: 0; left: auto; max-width: calc(100vw - 24px); }
  .dropdown-perfil a, .dropdown-perfil button {
    display: block; width: 100%; padding: 12px 14px; min-height: 44px;
  }
  .modal-content { width: 92%; margin: 18% auto 0; padding: 22px 16px; }
  .modal-content input[type="password"],
  .modal-content button { width: 100%; min-height: 44px; }

  body.pagina-index footer {
    background: rgba(255, 255, 255, 0.92);
    font-size: 0.8rem;
  }
}

/* Celulares muito pequenos */
@media (max-width: 360px) {
  body.pagina-login .form-container form,
  body.pagina-index .form-section form { padding: 14px 12px; }
}