#numerosSeleccionados {
  text-align: center;
  position: fixed; /* Fijo en la pantalla */
  bottom: 0; /* Al fondo de la pantalla */
  left: 0; /* Alineado a la izquierda */
  width: 100%; /* Ocupa todo el ancho */
  background-color: #76B852; /* Fondo verde, cambia este valor por el color que desees */
  color: #fff; /* Texto en blanco, cambia este valor si necesitas otro color */
  z-index: 1000; /* Asegura que el div esté encima de otros elementos */
  padding: 10px; /* Espaciado interno */
  padding-bottom: 60px; /* Aumentar el padding inferior para dar espacio a los botones */
  
  /* Sombra para dar sensación de elevación */
  box-shadow: 
    1px -6px 13px 1px rgba(0, 0, 0, 0.73), /* Sombra negra */
    0 2px 4px rgba(255, 255, 255, 0.3); /* Sombra blanca */

  /* Borde superior negro */
  border-top: 2px solid black;
}

.lista-numeros-horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;/* Espacio entre los botones */
}

.lista-numeros-horizontal .numero-seleccionado {
  background-color: #000;/* Fondo negro */
  color: #fff;/* Texto blanco */
  padding: 5px 10px;
  cursor: pointer;
  border: none;
}

.lista-numeros-horizontal .numero-seleccionado:hover {
  opacity: 0.2;
}

.numero-rifa-seleccionado {
  opacity: 0.5; /* Hace el boleto opaco para indicar un estado "inactivo" o "en proceso" */
  cursor: not-allowed; /* Cambia el cursor para indicar que el boleto no está disponible */
  position: relative; /* Necesario para posicionar el ícono de reloj de arena */
  background-color: #76B852;
}

.numero-rifa-seleccionado::after {
  content: ''; /* Necesario para crear un pseudo-elemento */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px; /* O el tamaño de tu ícono de reloj de arena */
  height: 32px; /* O el tamaño de tu ícono de reloj de arena */
  background-image: url('https://www.gifsanimados.org/data/media/1261/reloj-de-arena-imagen-animada-0001.gif'); /* Reemplaza con la ruta a tu ícono */
  background-size: cover;
  pointer-events: none; /* Esto asegura que el ícono no interfiera con los clics */
}

/* Estilo para boletos seleccionados por otro usuario */
.numero-rifa-seleccionado-otro {
  opacity: 0.5; /* Hace el boleto opaco para indicar que ha sido seleccionado por otro usuario */
  cursor: not-allowed; /* Cambia el cursor para indicar que el boleto no está disponible */
  position: relative; /* Necesario para posicionar el ícono de reloj de arena */
  background-color: rgba(255, 0, 0, 0.8); /* Fondo rojo con opacidad */
}

.numero-rifa-seleccionado-otro::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  background-image: url('https://www.gifsanimados.org/data/media/1261/reloj-de-arena-imagen-animada-0001.gif');
  background-size: cover;
  pointer-events: none;
  filter: hue-rotate(-50deg) brightness(150%); /* Ajusta el color a rojo */
}


.numero-seleccionado {
  position: relative;
  display: inline-block;
  background-color: #004c4c;/* Fondo del botón */
  color: #ffffff;/* Texto blanco */
  border: 2px solid #007777;/* Borde más oscuro para profundidad */
  border-radius: 5px;/* Bordes redondeados */
  padding: 10px 15px;/* Espaciado interno */
  margin: 1px;/* Espaciado entre botones */
  font-size: 16px;/* Tamaño del texto */
  font-weight: bold;/* Texto en negrita */
  cursor: pointer;/* Cursor en forma de mano al pasar sobre el botón */
  transition: transform 0.8s, opacity 0.8s;/* Transición suave para transform y opacidad */
}

.numero-seleccionado:hover {
  transform: scale(1.1);/* Escala el botón un 10% al pasar el ratón por encima */
  opacity: 0.9;/* Opacidad reducida al pasar el ratón por encima */
}

/* Pseudo-elemento para el icono de eliminar */
.numero-seleccionado::after {
  content: '\f1f8 '; /* Código del icono de FontAwesome y texto */
  font-family: 'Font Awesome 5 Free'; /* Fuente de FontAwesome */
  font-weight: 900; /* Estilo de FontAwesome */
  position: absolute;
  top: -10px; /* Ajusta según sea necesario */
  right: -10px; /* Ajusta según sea necesario */
  font-size: 12px; /* Ajusta según sea necesario */
  background-color: red; /* Fondo del icono */
  color: white; /* Color del texto */
  padding: 5px;
  border-radius: 5px; /* Hace un círculo */
  opacity: 0; /* Inicialmente oculto */
  transition: opacity 0.2s;
  pointer-events: none; /* No captura eventos de clic */
}

/* Mostrar el icono y texto al hacer hover */
.numero-seleccionado:hover::after {
  opacity: 1;
  pointer-events: auto; /* Habilita captura de eventos de clic */
}

.numero-rifa.deshabilitado {
  pointer-events: none;
  opacity: 0.5;
}

/* animación de eliminación boton */
@keyframes eliminacion {
  from {
    transform: scale(1);
    opacity: 1;
  }

  to {
    transform: scale(0);
    opacity: 0;
  }
}

.animacion-eliminacion {
  animation: eliminacion 0.5s forwards;/* Anima la eliminación durante 0.5 segundos */
}

/* scroll numeros seleccionados */
#listaNumeros {
  max-height: 100px; /* Altura máxima antes de que se active el desplazamiento vertical */
  overflow-y: auto; /* Activa el desplazamiento vertical si el contenido es mayor que la altura máxima */
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center; /* Centrar elementos horizontalmente */
  align-items: center; /* Centrar elementos verticalmente */
 /* Estilos responsivos */
  width: 100%; /* Ocupa el 100% del ancho del contenedor padre */
  box-sizing: border-box; /* Asegura que padding y border estén incluidos en el ancho y altura definidos */
 /* Puedes usar Media Queries para ajustar la altura máxima en diferentes tamaños de pantalla */
  @media (max-width: 768px) {
 /* Para tabletas */
    max-height: 100px;
  }

  @media (max-width: 480px) {/* Para teléfonos móviles */
    max-height: 80px;
  }
}

#costoTotal {
  font-weight: bold;
}

#boletosSeleccionadosModal {
  text-align: center;/* Centrar el texto horizontalmente */
  font-weight: bold;/* Hacer que el texto sea negrita */
}

.btn-apartar-numero, .btn-agregar-tiempo, .btn-limpiar {
  background-color: #FF4136;
  color: #fff;
  border: none;
  padding: 10px 20px; /* Espaciado interno */
  border-radius: 5px; /* Bordes redondeados */
  font-weight: bold;
  /* No expandir los botones para ocupar todo el ancho */
}

.btn-apartar-numero:hover, .btn-agregar-tiempo:hover, .btn-limpiar:hover {
  transform: scale(1.1);/* Escala el botón un 10% al pasar el ratón por encima */
  opacity: 0.8;/* Opacidad reducida al pasar el ratón por encima */
  background-color: #FF4136;
}


/* habilitar deshabilitar boton */
.btn-apartar-numero.disabled, .btn-agregar-tiempo.disabled, .btn-limpiar.disabled {
  background-color: #cccccc;/* Color gris para deshabilitado */
  color: #666;/* Color de texto para deshabilitado */
  border-color: #cccccc;/* Borde para deshabilitado */
  cursor: not-allowed;
}

.btn-apartar-numero.enabled, .btn-agregar-tiempo.enabled, .btn-limpiar.enabled {
  background-color: #FF4136;
  color: #fff;/* Color de texto para habilitado */
  border-color: #000000;/* Borde para habilitado */
  cursor: pointer;
}


/* Estilo para el cronómetro ----------------------------------------------------------------- */
/* Contenedor del cronómetro y los botones */
#contenedor-cronometro-y-botones {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px;
}

/* Contenedor de los botones */
#contenedor-botones {
  position: absolute;
  bottom: 10px; /* En la parte inferior del div */
  left: 50%; /* Centrado horizontalmente */
  transform: translateX(-50%); /* Ajuste para centrar exactamente */
  display: flex; /* Para alinear los botones horizontalmente */
  gap: 10px; /* Espacio entre botones */
}

/* Estilo para el cronómetro */
#timerDisplay {
  position: absolute; /* Posición absoluta dentro de numerosSeleccionados */
  top: 10px; /* Espaciado desde el tope del div numerosSeleccionados */
  right: 10px; /* Espaciado desde la derecha del div numerosSeleccionados */
  background-color: #4CAF50; /* Color de fondo inicial */
  color: white; /* Color del texto */
  padding: 10px; /* Espaciado interno */
  border-radius: 5px; /* Bordes redondeados */
  font-size: 1.2em; /* Tamaño del texto */
}

/* Estilo para cuando el tiempo esté por agotarse */
#timerDisplay.critical {
  animation: pulseAnimation 1s infinite, shakeAnimation 0.5s infinite;
  background-color: #FF4136; /* Cambio de color de fondo */
}

/* Keyframes para la animación de pulso */
@keyframes pulseAnimation {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Keyframes para la animación de temblor (vibración) */
@keyframes shakeAnimation {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

/* Contenedor del cronómetro y los botones para móviles */
@media (max-width: 767px) {
  /* Ajusta el cronómetro para que no se superponga con los botones */
  #timerDisplay {
    position: absolute;
    top: 0; /* Espaciado desde el tope del div numerosSeleccionados */
    right: 0; /* Espaciado desde la derecha del div numerosSeleccionados */
    font-size: 16px; /* Ajusta el tamaño de la fuente para dispositivos móviles */
  }

  /* Ajusta los botones para que no se expandan más de lo necesario */
  .btn-apartar-numero, .btn-agregar-tiempo, .btn-limpiar  {
    flex: none; /* Anula cualquier propiedad flex anterior */
    width: auto; /* Permite que el botón se ajuste al contenido */
    min-width: 100px; /* Establece un ancho mínimo para que quepa el texto */
    padding: 10px; /* Ajusta el relleno para mantener la proporción */
    font-size: 14px; /* Ajusta el tamaño de la fuente para que el texto quepa */
  }

  /* Asegúrate de que el contenedor de botones esté en la parte inferior */
  #contenedor-botones {
    position: absolute;
    bottom: 10px; /* Alineado al fondo del div numerosSeleccionados */
    left: 50%;
    transform: translateX(-50%);
    width: auto; /* Ajusta el ancho al contenido */
    justify-content: center; /* Centra los botones */
  }
}