/* botón reutilizable */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap");

.custom-cancel-btn {
  
  height: 41px;
  padding: 0 1.5rem;
  margin: 0;                   /* <-- importante */
  line-height: 1;              /* <-- evita que crezca hacia abajo */
  vertical-align: middle;
  border-radius: 10px;

  background: var(--color-primary-light);
  color:  var(--color-text);
  border: none;

  font-family: "Poppins", sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1;

  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;

  box-shadow: 0 4px 4px var(--color-shadow);
  cursor: pointer;
  text-decoration: none;

  border: none;
  outline: none;

  /* elimina el desplazamiento por defecto */
  margin: 0;
  vertical-align: middle;
}

.custom-btn:hover {
  opacity: 0.9;
}

.btn-details {
  background-color: var(--color-primary);
  color: var(--color-bg-contrast);
  border: none;
  border-radius: 10px;
  padding: 0.6rem 1.2rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  transition: opacity 0.2s, background-color 0.2s;
  cursor: pointer;
}

.btn-details:hover {
  opacity: 0.9;
}

.custom-btn.disabled,
.custom-btn:disabled {
  cursor: not-allowed;
  opacity: 0.65;
  pointer-events: none; /* evita clics fantasma en Safari/IE */
}

.custom-gray-cancel-btn {
  
  height: 41px;
  padding: 0 1.5rem;
  margin: 0;                   /* <-- importante */
  line-height: 1;              /* <-- evita que crezca hacia abajo */
  vertical-align: middle;
  border-radius: 10px;

  background: var(--color-dark-gray);
  color:  var(--color-bg-contrast);

  border: none;

  font-family: "Poppins", sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1;

  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;

  box-shadow: 0 4px 4px var(--color-shadow);
  cursor: pointer;
  text-decoration: none;

  border: none;
  outline: none;

  /* elimina el desplazamiento por defecto */
  margin: 0;
  vertical-align: middle;
}