.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: var(--fs-sm);
  transition: transform 0.1s ease, opacity 0.2s ease, background-color 0.2s ease;
  white-space: nowrap;
}

.boton[hidden] { display: none; }

.boton--primario { background: var(--color-primario); color: #fff; }
.boton--primario:disabled { background: #b7ccc2; cursor: not-allowed; }
.boton--confirmado { background: var(--color-primario-oscuro); }

.boton--secundario {
  background: transparent;
  color: var(--color-primario);
  border: 2px solid var(--color-primario);
}

.boton--sm { padding: 6px 14px; font-size: var(--fs-xs); }

.boton:active { transform: scale(0.97); }