.message-wrapper {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Estilos para el mensaje */
.popup-message {
  padding: 12px 18px;
  border-radius: 5px;
  color: #fff;
  font-weight: bold;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation-fill-mode: forwards;
}

.popup-message.success { background-color: #28a745; }
.popup-message.error   { background-color: #dc3545; }
.popup-message.info    { background-color: #17a2b8; }
.popup-message.warning { background-color: #ffc107; color: #212529; }

@keyframes fadein {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeout {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-10px); }
}

/* Responsive: centrar en móvil */
@media (max-width: 768px) {
  .message-wrapper {
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    width: 90%;
    max-width: 90vw;
    align-items: center;
  }
}
