.toast {  
  min-width: 220px;  
  padding: 10px 15px;  
  border-radius: 0.375rem;  
  font-size: 1rem;  
  color: white;
  background-color: #333; /* o fins i tot #222 si vols més contrast */
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);  
  opacity: 0;  
  transform: translateX(100%);  
  transition: transform 0.3s ease, opacity 0.3s ease;  
}  

.toast.show {  
  opacity: 1;  
  transform: translateX(0);  
}  

.toast.success { background-color: #4caf50; }  
.toast.error   { background-color: #f44336; }  
.toast.info    { background-color: #2196f3; }  

#toast-container {  
  position: fixed;  
  top: 1rem;  
  right: 1rem;  
  z-index: 9999;  
  display: flex;  
  flex-direction: column;  
  gap: 0.5rem;  
}  

  .toast {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      padding: 12px 20px;
      border-radius: 4px;
      color: white;
      font-weight: bold;
      z-index: 9999;
      animation: fadeOut 3s forwards;
    }
    .toast.success { background-color: #4caf50; }
    .toast.error   { background-color: #f44336; }


     @keyframes fadeOut {
      0% { opacity: 1; }
      80% { opacity: 1; }
      100% { opacity: 0; bottom: 0px; }
    }