/* ===========================
   MobileLogin.css — Login
   Regras específicas para telas pequenas
   =========================== */

/* Telas até 600px */
@media (max-width: 600px) {

  /* Esconde a coluna de imagem para ganhar espaço */
  .login-container {
    grid-template-columns: 1fr !important;
  }
  .imagem-left {
    display: none !important;
  }

  /* Card mais compacto nas bordas */
  .login {
    width: 100%;
    border-radius: 14px;
  }

  .login-dados-right {
    padding: 24px 18px !important;
    gap: 14px !important;
    background: #fff; /* mantém branco no mobile */
  }

  /* Título um pouco menor */
  .h2-titulo {
    font-size: 18px !important;
    letter-spacing: .2px;
    margin-bottom: 4px;
  }
  .call-center {
    font-size: 10px !important;
    padding: 2px 8px;
  }

  /* Inputs confortáveis para toque */
  .campo { gap: 6px; }
  label { font-size: 12px; }

  input[type="email"],
  input[type="password"] {
    font-size: 16px;        /* mantém 16px p/ evitar zoom no iOS */
    padding: 12px 14px;
    border-radius: 10px;
  }

  /* Checkbox e label alinhados */
  .lembrar-container {
    gap: 8px;
    margin: 4px 0 0 2px;
    font-size: 13px;
  }
  .lembrar-container input[type="checkbox"] {
    width: 18px;
    height: 18px;
  }

  /* Botão maior e com boa área de toque */
  .botao-entrar {
    width: 100%;
    padding: 14px 16px;
    font-size: 15px;
    border-radius: 10px;
    box-shadow: 0 8px 16px rgba(255, 153, 0, .20);
  }

  /* Mensagens de feedback */
  .mensagem {
    font-size: 13px;
    min-height: 18px;
  }
}

/* Telas muito pequenas (ex.: 320–360px) */
@media (max-width: 360px) {
  .login-dados-right { padding: 20px 14px !important; }
  .h2-titulo { font-size: 17px !important; }
  .botao-entrar { font-size: 14px; padding: 12px 14px; }
}