.noti { 
  position: fixed; 
  top: 40px; 
  right: 30px; 
  transform: translateX(120%); /* Empieza fuera de la pantalla a la derecha */
  min-width: 300px;
  max-width: 400px;
  padding: 16px 20px; 
  border-radius: 14px; 
  font-family: 'Instrument Sans', sans-serif;
  box-shadow: 0 15px 35px -5px rgba(0,0,0,0.15);
  opacity: 0; 
  visibility: hidden; /* Oculto por defecto */
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); /* Animación suave */
  z-index: 999999 !important; 
}

/* La clase "on" es la que inyecta tu message.js */
.noti.on { 
  visibility: visible; /* ¡Magia! Se hace visible */
  opacity: 1; 
  transform: translateX(0); /* Entra a la pantalla */
}

/* Colores Kyovex */
.noti.success { background-color: #10b981; color: white; border: 1px solid #059669; }
.noti.error { background-color: #ef4444; color: white; border: 1px solid #b91c1c; }

.bodyOfNoti {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.noti-close {
  background: none; 
  border: none; 
  cursor: pointer; 
  margin-left: 15px; 
  color: inherit; 
  opacity: 0.7;
  font-size: 16px;
  display: flex;
  align-items: center;
  transition: 0.2s ease;
}

.noti-close:hover { 
  opacity: 1; 
  transform: scale(1.1);
}