/* estilo del popup*/
#alert-popup {
  display: none; /* Oculto por defecto  */
  position: fixed; 
  /* z-index: 1; anterior a carrito*/
  z-index: 3000; /* Mayor que el z-index del header y nav */
  padding-top: 100px; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%;
  overflow: auto; 
  background-color: black; 
  opacity: 1;
  margin: 0em;
}

.custom-alert {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  overflow: hidden;
  max-width: 300px;
  width: 100%;
}

.confirmation-dialog-header {
  background-color: #4CAF50;
  color: #fff;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.confirmation-dialog-header h3 {
  margin: 0; /* Elimina el margen predeterminado del título */
  text-align: center; /* Centra horizontalmente */
  flex: 1; /* Ajusta la proporción de espacio que ocupan en el contenedor */

}



.confirmation-dialog-content {
  padding: 15px;
}

.confirmation-dialog-content p {
  text-align: center; /* Centra el texto dentro del párrafo */
  font-weight: bold; /* Aplica negrita al texto */
  color: rgb(2, 73, 95); /* Cambia el color del texto según tu preferencia */
  margin-bottom: 15px;
}
.confirmation-dialog-buttons {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}

.confirmation-dialog-buttons button, .custom-button {
  width: 48%; /* Ajusta según tus necesidades, deja espacio para el borde y el margen */
  padding: 8px 16px;
  cursor: pointer;
  border: none;
  color: #fff;
  border-radius: 20px; /* Ajusta el valor del radio */
}

#confirmButton {
  background-color: blue;
}

#cancelButton {
  background-color: #f44336;
}
/*  ...... */

.message-alert-header {
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.message-alert-header h3 {
  margin: 0; /* Elimina el margen predeterminado del título */
  text-align: center; /* Centra horizontalmente */
  flex: 1; /* Ajusta la proporción de espacio que ocupan en el contenedor */

}

.message-alert-content {
  padding: 15px;
}

.message-alert-content p {
  text-align: center; /* Centra el texto dentro del párrafo */
  font-weight: bold; /* Aplica negrita al texto */
  margin-top: 15px;
}

.success-header {
  background-color: #66c069; /* Color de fondo para éxito en el header */
  color: #fff; /* Color del texto para éxito en el header */
}

.success-content {
  background-color:  #fff; /* Color de fondo para éxito en el contenido */
  color: rgb(9, 112, 172); /* Color del texto para éxito en el contenido */
}

.error-header {
  background-color: #f44336; /* Color de fondo para error en el header */
  color:  #fff; /* Color del texto para error en el header */
}

.error-content {
  background-color: #fff; /* Color de fondo para error en el contenido */
  color: red; /* Color del texto para error en el contenido */
}