.toast-success {
    font-weight: bold;
    text-shadow: 0px 4px 6px rgba(0, 0, 0, 0.5), 0px 1px 3px rgba(0, 0, 0, 0.2);
    position: fixed;
    top: 20px; /* Ajusta la posición según sea necesario */
    right: -500px; /* Comienza fuera de la pantalla a la derecha */
    padding: 10px;
    background-color: #8bc34ab8; /* Fondo verde claro */
    color: black; /* Letra en negro */
    border-radius: 5px;
    display: flex; /* Alineación horizontal */
    align-items: center; /* Centra el contenido verticalmente */
    transition: right 0.5s ease-in-out, opacity 0.5s ease-in-out;
    opacity: 0;
    z-index: 10000;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.5), 0px 1px 3px rgba(0, 0, 0, 0.2); 
  }
  
  /* Estilo del ícono */
  .toast-success-icon {
    width: 40px; /* Ajusta el tamaño del ícono */
    height: 40px;
    margin-right: 10px; /* Espacio entre el ícono y el texto */
  }
  
  /* Animación para mostrar el Toast deslizándose desde la derecha */
  .toast-success.show {
    right: 20px; /* Posición final, ajusta según tu diseño */
    opacity: 1;
  }
  
  /* Animación para esconder el Toast deslizándose hacia la izquierda */
  .toast-success.hide {
    right: -500px; /* Desplazamiento fuera de la pantalla a la izquierda */
    opacity: 0;
  }
  
  /* Estilo base del Toast de Error */
  .toast-error {
    font-weight: bold;
    text-shadow: 0px 4px 6px rgba(0, 0, 0, 0.5), 0px 1px 3px rgba(0, 0, 0, 0.2);
    position: fixed;
    top: 20px; /* Ajusta la posición según sea necesario */
    right: -500px; /* Comienza fuera de la pantalla a la derecha */
    padding: 10px;
    background-color: rgba(255, 0, 0, 0.556);/* #f8d7da;  Fondo rojo claro */
    color: white; /* #721c24; Letra en rojo oscuro que resalta sobre el fondo */
    border-radius: 5px;
    display: flex; /* Alineación horizontal */
    align-items: center; /* Centra el contenido verticalmente */
    transition: right 0.5s ease-in-out, opacity 0.5s ease-in-out;
    opacity: 0;
    z-index: 10000;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.5), 0px 1px 3px rgba(0, 0, 0, 0.2);
  }
  
  /* Estilo del ícono */
  .toast-error .toast-error-icon {
    width: 40px; /* Ajusta el tamaño del ícono */
    height: 40px;
    margin-right: 10px; /* Espacio entre el ícono y el texto */
  }
  
  /* Animación para mostrar el Toast deslizándose desde la derecha */
  .toast-error.show {
    right: 20px; /* Posición final, ajusta según tu diseño */
    opacity: 1;
  }
  
  /* Animación para esconder el Toast deslizándose hacia la izquierda */
  .toast-error.hide {
    right: -500px; /* Desplazamiento fuera de la pantalla a la izquierda */
    opacity: 0;
  }