@media only screen and (max-width: 700px) {
  /* Ajustes gerais para a página de login em tablets */
  .main-login {
    flex-direction: column; /* Empilha os elementos verticalmente */
    padding: 20px; /* Adiciona espaçamento interno */
    background: linear-gradient(135deg, #1672d8, #a0c1f7); /* Mantém o fundo */
  }

  .right-login {
    width: 100%; /* Ajusta a largura para 80% da largura da viewport */
    height: auto;
    align-items: center; /* Centraliza os itens horizontalmente */
  }

  /* Ajustes do card de logo */
  .card-logo {
    width: 100%; /* Aumenta a largura para 80% */
    padding: 15px; /* Reduz o padding */
    border-top-left-radius: 15px; /* Ajusta o raio dos cantos */
    border-top-right-radius: 15px;
    box-shadow: -5px 5px 15px -3px rgba(0, 0, 0, 0.3),
      5px 5px 15px -3px rgba(0, 0, 0, 0.3); /* Ajusta as sombras */
  }

  .logo-image {
    max-width: 90%; /* Aumenta o tamanho da imagem */
    border-radius: 8px; /* Ajusta o raio dos cantos */
  }

  /* Ajustes do card de login */
  .card-login {
    width: 100%; /* Aumenta a largura para 80% */
    padding: 15px; /* Reduz o padding */
    border-bottom-left-radius: 15px; /* Ajusta o raio dos cantos */
    border-bottom-right-radius: 15px;
    box-shadow: 0 8px 16px -6px rgba(0, 0, 0, 0.5),
      -8px 8px 16px -6px rgba(0, 0, 0, 0.3),
      8px 8px 16px -6px rgba(0, 0, 0, 0.3); /* Ajusta as sombras */
  }

  /* Ajustes do título da página */
  .card-login > h2 {
    font-size: 1.5rem; /* Reduz o tamanho da fonte */
    margin-bottom: 15px; /* Reduz a margem inferior */
  }

  /* Ajustes nos campos de texto */
  .textfield {
    margin-bottom: 15px; /* Reduz a margem inferior */
  }

  .textfield input {
    padding: 12px; /* Reduz o padding */
    font-size: 0.9rem; /* Reduz o tamanho da fonte */
  }

  .textfield label {
    font-size: 12pt; /* Mantém o tamanho da fonte */
  }

  /* Ajustes no botão de login */
  .login-btn {
    padding: 12px; /* Reduz o padding */
    font-size: 0.9rem; /* Reduz o tamanho da fonte */
  }

  .login-btn:hover {
    background-color: #145da0; /* Mantém o hover */
  }

  .login-btn:active {
    transform: scale(0.98); /* Mantém o efeito de clique */
    box-shadow: 0px 5px 10px -8px rgba(0, 0, 0, 0.5); /* Mantém a sombra reduzida */
  }

  /* Ajustes no wrapper da senha */
  .password-wrapper input {
    padding-right: 35px; /* Reduz o padding à direita */
  }

  .toggle-password {
    right: 5px; /* Ajusta a posição da toggle */
  }

  .toggle-password i {
    font-size: 1.2rem; /* Mantém o tamanho do ícone */
    color: #1975da; /* Mantém a cor do ícone */
  }

  /* Ajustes nas mensagens de erro e sucesso */
  .success-message,
  .error-message {
    font-size: 0.9rem; /* Reduz o tamanho da fonte */
    padding: 8px; /* Reduz o padding */
  }

  /* Ajustes no overlay de carregamento */
  #loading-overlay {
    background: linear-gradient(135deg, #1672d8, #a0c1f7); /* Mantém o fundo */
  }

  /* Ajustes no email-wrapper */
  .email-wrapper input[type="email"] {
    padding-right: 100px; /* Reduz o padding à direita */
  }

  .remember-email {
    right: 5px; /* Ajusta a posição da checkbox */
  }

  /* Ajustes na checkbox */
  .textfield-checkbox {
    margin-bottom: 15px; /* Reduz a margem inferior */
  }

  .textfield-checkbox input[type="checkbox"] {
    margin-right: 5px; /* Reduz o espaçamento à direita */
  }

  .textfield-checkbox label {
    font-size: 14px; /* Mantém o tamanho da fonte */
  }

  /* Ajustes adicionais para inputs */
  .textfield input,
  .email-wrapper input[type="email"] {
    width: 100%; /* Garante que os inputs ocupem 100% da largura disponível */
  }

  /* Ajustes para botões e links dentro da página de login */
  .toggle-password {
    cursor: pointer; /* Mantém o cursor de ponteiro */
  }

  /* Ajustes para responsividade das mensagens */
  .success-message,
  .error-message {
    width: 100%; /* Garante que as mensagens ocupem toda a largura */
    box-sizing: border-box; /* Garante que o padding não afete a largura total */
  }

  /* Ajustes para a checkbox de lembrar email */
  .remember-email label {
    font-size: 12px; /* Ajusta o tamanho da fonte */
  }

  /* Ajustes para o loading overlay */
  #loading-overlay.fade-out {
    opacity: 0;
    pointer-events: none; /* Desativa a interação enquanto o overlay desaparece */
  }
}

@media (min-width: 701px) and (max-width: 1100px) {
  /* Ajustes gerais para a página de login em tablets */
  .main-login {
    flex-direction: column; /* Empilha os elementos verticalmente */
    padding: 20px; /* Adiciona espaçamento interno */
    background: linear-gradient(135deg, #1672d8, #a0c1f7); /* Mantém o fundo */
  }

  .right-login {
    width: 80%; /* Ajusta a largura para 80% da largura da viewport */
    height: auto;
    align-items: center; /* Centraliza os itens horizontalmente */
  }

  /* Ajustes do card de logo */
  .card-logo {
    width: 100%; /* Aumenta a largura para 80% */
    padding: 15px; /* Reduz o padding */
    border-top-left-radius: 15px; /* Ajusta o raio dos cantos */
    border-top-right-radius: 15px;
    box-shadow: -5px 5px 15px -3px rgba(0, 0, 0, 0.3),
      5px 5px 15px -3px rgba(0, 0, 0, 0.3); /* Ajusta as sombras */
  }

  .logo-image {
    max-width: 90%; /* Aumenta o tamanho da imagem */
    border-radius: 8px; /* Ajusta o raio dos cantos */
  }

  /* Ajustes do card de login */
  .card-login {
    width: 100%; /* Aumenta a largura para 80% */
    padding: 15px; /* Reduz o padding */
    border-bottom-left-radius: 15px; /* Ajusta o raio dos cantos */
    border-bottom-right-radius: 15px;
    box-shadow: 0 8px 16px -6px rgba(0, 0, 0, 0.5),
      -8px 8px 16px -6px rgba(0, 0, 0, 0.3),
      8px 8px 16px -6px rgba(0, 0, 0, 0.3); /* Ajusta as sombras */
  }

  /* Ajustes do título da página */
  .card-login > h2 {
    font-size: 1.5rem; /* Reduz o tamanho da fonte */
    margin-bottom: 15px; /* Reduz a margem inferior */
  }

  /* Ajustes nos campos de texto */
  .textfield {
    margin-bottom: 15px; /* Reduz a margem inferior */
  }

  .textfield input {
    padding: 12px; /* Reduz o padding */
    font-size: 0.9rem; /* Reduz o tamanho da fonte */
  }

  .textfield label {
    font-size: 12pt; /* Mantém o tamanho da fonte */
  }

  /* Ajustes no botão de login */
  .login-btn {
    padding: 12px; /* Reduz o padding */
    font-size: 0.9rem; /* Reduz o tamanho da fonte */
  }

  .login-btn:hover {
    background-color: #145da0; /* Mantém o hover */
  }

  .login-btn:active {
    transform: scale(0.98); /* Mantém o efeito de clique */
    box-shadow: 0px 5px 10px -8px rgba(0, 0, 0, 0.5); /* Mantém a sombra reduzida */
  }

  /* Ajustes no wrapper da senha */
  .password-wrapper input {
    padding-right: 35px; /* Reduz o padding à direita */
  }

  .toggle-password {
    right: 5px; /* Ajusta a posição da toggle */
  }

  .toggle-password i {
    font-size: 1.2rem; /* Mantém o tamanho do ícone */
    color: #1975da; /* Mantém a cor do ícone */
  }

  /* Ajustes nas mensagens de erro e sucesso */
  .success-message,
  .error-message {
    font-size: 0.9rem; /* Reduz o tamanho da fonte */
    padding: 8px; /* Reduz o padding */
  }

  /* Ajustes no overlay de carregamento */
  #loading-overlay {
    background: linear-gradient(135deg, #1672d8, #a0c1f7); /* Mantém o fundo */
  }

  /* Ajustes no email-wrapper */
  .email-wrapper input[type="email"] {
    padding-right: 100px; /* Reduz o padding à direita */
  }

  .remember-email {
    right: 5px; /* Ajusta a posição da checkbox */
  }

  /* Ajustes na checkbox */
  .textfield-checkbox {
    margin-bottom: 15px; /* Reduz a margem inferior */
  }

  .textfield-checkbox input[type="checkbox"] {
    margin-right: 5px; /* Reduz o espaçamento à direita */
  }

  .textfield-checkbox label {
    font-size: 14px; /* Mantém o tamanho da fonte */
  }

  /* Ajustes adicionais para inputs */
  .textfield input,
  .email-wrapper input[type="email"] {
    width: 100%; /* Garante que os inputs ocupem 100% da largura disponível */
  }

  /* Ajustes para botões e links dentro da página de login */
  .toggle-password {
    cursor: pointer; /* Mantém o cursor de ponteiro */
  }

  /* Ajustes para responsividade das mensagens */
  .success-message,
  .error-message {
    width: 100%; /* Garante que as mensagens ocupem toda a largura */
    box-sizing: border-box; /* Garante que o padding não afete a largura total */
  }

  /* Ajustes para a checkbox de lembrar email */
  .remember-email label {
    font-size: 12px; /* Ajusta o tamanho da fonte */
  }

  /* Ajustes para o loading overlay */
  #loading-overlay.fade-out {
    opacity: 0;
    pointer-events: none; /* Desativa a interação enquanto o overlay desaparece */
  }
}