.alert-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ff4757; /* Rojo por defecto */
  z-index: 10005; /* Se mantiene arriba de todo */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  padding: 40px;
  text-align: center;
}

.alert-overlay.hidden { display: none !important; }
.alert-overlay.type-warning { background-color: #e17055; }
.alert-overlay.type-info { background-color: #1e90ff; }

.alert-icon-container {
  font-size: 6rem;
  margin-bottom: 20px;
  animation: shake 0.5s infinite;
  color: white;
}

#alert-title {
  font-family: "Coolvetica", sans-serif;
  font-size: 2.5rem;
  letter-spacing: 2px;
  margin: 0 0 10px 0;
  color: white;
}

#alert-message {
  font-family: "Poppins", sans-serif;
  font-size: 1.1rem;
  margin: 0 0 40px 0;
  color: rgba(255, 255, 255, 0.9);
}

#dismiss-btn {
  padding: 16px 40px;
  background-color: white;
  color: #121212;
  border: none;
  border-radius: 30px;
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
  transition: transform 0.2s;
}

#dismiss-btn:active {
  transform: scale(0.95);
}

@keyframes shake {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(10deg); }
  75% { transform: rotate(-10deg); }
  100% { transform: rotate(0deg); }
}