.boton {
  padding: 12px 24px;
  border-radius: 56px;
  display: inline-block;
  min-width: 80px;
  text-align: center;
  background: none;
  border: solid 1px #ffffff;
  color: #ffffff;
  cursor: pointer;
  font-weight: 600;
}

.boton:hover {
  background: none;
  border: solid 1px #ffffff;
  color: #ffffff;
}

.boton.primary {
  background: #555555;
  border: solid 1px #555555;
  color: #ffffff;
}

.boton.primary:hover {
  background: #8e8e8e;
  border: solid 1px #8e8e8e;
  color: #ffffff;
}

.boton.primary:active {
  background: #2c2c2c;
  border: solid 1px #2c2c2c;
  color: #ffffff;
}

.boton.primary.disabled {
  background: #2c2c2c;
  border: solid 1px #2c2c2c;
  color: #ffffff;
}

.boton.secondary {
  background: #ffffff;
  /* border: solid 1px #555555; */
  border: solid 1px #ffffff;

  color: #555555;
}

.boton.secondary:hover {
  background: #dee0e1;
  border: solid 1px #dee0e1;

 /* border: solid 1px #555555; */
  color: #555555;
}

.boton.secondary:active {
  background: #999999;
  /* border: solid 1px #999999; */
  border: solid 1px #999999;

  color: #ffffff;
}

.boton.secondary.disabled {
  background: none;
  border: solid 1px #555555;
  
  color: #555555;
}

.boton.transparente {
  background-color: transparent;
  border: 1px solid #ffffff;
  color: #ffffff;
  /* Ensure other .boton base styles like padding, border-radius, display, etc., are inherited */
}

.boton.transparente:hover {
  background-color: #ffffff;
  color: #555555; /* Dark text color for hover */
  border-color: #ffffff; /* Border remains white, or could change if desired */
}
.boton.transparente.negro {
  background-color: transparent;
  border: 1px solid #555555;
  color: #555555;
  /* Ensure other .boton base styles like padding, border-radius, display, etc., are inherited */
}

.boton.transparente.negro:hover {
  background-color: #eeeeee;
  color: #555555; /* Dark text color for hover */
  border-color: #555555; /* Border remains white, or could change if desired */
}