/* ======================= NOTIFICACIÓN DE VENTAS ======================= */
.notificacion {
  position: fixed;               /* Fija la notificación en pantalla */
  bottom: 20px;                  /* Separación inferior */
  left: 20px;                    /* Separación lateral izquierda */
/*   background: 
    radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
    radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%); */
    background: -webkit-linear-gradient(90deg, #333333,#000000);background: linear-gradient(90deg, #333333,#000000);
  border: 2px solid #BFA331;    /* Borde dorado elegante */
  color: #fff;                   /* Color del texto */
  padding: 10px 25px;            /* Espaciado interno */
  border-radius: 50px;           /* Bordes redondeados */
  display: flex;                 /* Flexbox para icono + texto */
  align-items: center;           /* Alinear verticalmente */
  gap: 10px;                     /* Espacio entre icono y texto */
  opacity: 0;                    /* Inicialmente invisible */
  pointer-events: none;          /* Evita interacción mientras invisible */
  transform: translateX(-100%);  /* Inicialmente fuera de pantalla (izquierda) */
  transition: all 0.5s ease;     /* Animación suave */
  z-index: 9999;                 /* Encima de todo */
}

/* Mostrar la notificación */
.notificacion.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

/* Ocultar la notificación */
.notificacion.hide {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-100%);
}

/* Icono de usuario */
.noti-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  /* border: 2px solid #fff;  */                /* Borde blanco opcional para destacar */
  box-shadow: 0 0 5px rgba(0,0,0,0.5);   /* Sombra ligera para profundidad */
  background: #000000;
}

/* Contenedor del texto */
.noti-text {
  display: flex;
  flex-direction: column;   /* Nombre arriba, compra abajo */
  font-size: 15px;
    font-family: 'Poppins', sans-serif; /* Aquí aplicamos la fuente bonita */
color: #fff;
font-weight: bold;

  font-weight: 800; /* Más gordito que 600 */
}

/* Nombre del usuario */
.noti-nombre {
  font-weight: 600;
  color: #ffffff;
  font-weight: lighter;
}

/* Compra realizada */
.noti-compra {
  font-weight: 500;
  color: #fff;
  font-size: 13px;
 /*  text-shadow: 1px 1px 2px rgba(0,0,0,0.6); */
  
}

/* Animaciones opcionales */
@keyframes slideIn {
  0% { transform: translateX(-100%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes slideOut {
  0% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(-100%); opacity: 0; }
}






/* Por defecto en PC/laptops: imagen y texto al costado */
#notificacion-venta {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* En celulares (pantallas menores a 768px) lo ocultamos */
@media (max-width: 768px) {
  #notificacion-venta {
    display: none;
  }
}