#overlay-mensagem {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 2100;
  pointer-events: none; 
}
#overlay-mensagem.visivel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
#caixa-mensagem {
  background-color: white;
  color: #333;
  padding: 25px 40px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
  max-width: 80%;
  transform: scale(0.9);
  transition: transform 0.3s ease;
}
#overlay-mensagem.visivel #caixa-mensagem {
    transform: scale(1);
}
#caixa-mensagem.sucesso { background-color: #d4edda; color: #155724; }
#caixa-mensagem.alerta { background-color: #fff3cd; color: #856404; }
#caixa-mensagem.erro { background-color: #f8d7da; color: #721c24; }
#caixa-mensagem.sucesso { 
  background-color: #d4edda; 
  color: #155724; 
}
#caixa-mensagem.alerta { 
  background-color: #fff3cd; 
  color: #856404; 
}
#caixa-mensagem.erro { 
  background-color: #f8d7da; 
  color: #721c24; 
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes tela-treme {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}
.tela-treme-animacao {
  animation: tela-treme 0.6s cubic-bezier(.36,.07,.19,.97) both;
}